Inspector

Inspector components.

interface Control 
extends Property, Element {
  fallback?: Scalar
  frame?: number
  icon?: string
  input?: Element
  inputInitialize?: Element
  inputSelect: HTMLSelectElement
  max?: number
  min?: number
  name?: string
  options?: Array<Scalar> | ScalarRecord
  order?: number
  scalar?: Scalar
  scalarFromInput?: Scalar
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (value?: Scalar) => boolean
  step?: number
  target?: string
  tweens?: boolean
  type?: string
  undoable?: boolean
}

interface ControlElement 
extends Element, Control {
  fallback?: Scalar
  frame?: number
  icon?: string
  input?: Element
  inputInitialize?: Element
  inputSelect: HTMLSelectElement
  max?: number
  min?: number
  name?: string
  options?: Array<Scalar> | ScalarRecord
  order?: number
  scalar?: Scalar
  scalarFromInput?: Scalar
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (value?: Scalar) => boolean
  step?: number
  target?: string
  tweens?: boolean
  type?: string
  undoable?: boolean
}

type ControlFunctionInfo = ArrayOf3<number, ControlGroupFunction, Array<SignalId>>

interface ControlGroup  {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  currentValue: (name: string) => Scalar | undefined
  icon: string
  legendContent: OptionalContent
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  targetForName: (name: string) => StringOrNot
  updatePropertyIds: Array<SignalId>
}

interface ControlGroupEventDetail 
extends WithOrder {
  functions: Map<ControlGroupFunction, Array<SignalId>>
  order?: number
  propertyIds: Array<SignalId>
}

type ControlGroupFunction = object

type ElementControlFunction = (args: ElementInspectorArgs) => Promise<DataOrError<ControlElement>>

type ElementGroupsFunction = () => Promise<DataOrError<boolean>>

interface ElementInspectorArgs  {
  element?: ControlElement
  scalarProperty: ScalarProperty
}

/**
 * @implements DropHandled
 * @implements HeadHandled
 */
class ControlAssetElement
extends ControlElementBase {
  border: number
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  drop: (dataTransfer: DataTransfer, clientX: number) => void
  dropValid: (dataTransfer: DataTransfer) => boolean
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  head: OptionalContent
  iconIds: Strings
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  label?: string
  pluginsNeeded: Array<PluginId>
  previewSize: () => Size
  promise: Promise<void> | undefined
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
  visibility: boolean
}

class ControlBooleanElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class ControlGroupElementMixin
extends LoaderElementBase {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlInputElement
extends ElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: () => Promise<void>
  handleInput: () => Promise<void>
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlNumericElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlRgbElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlRowElement
extends LoaderElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlStringElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupAspectElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupCssElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  changesString: () => string
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  copySupported: () => boolean
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleCopy: () => void
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  refreshDisabled: () => void
  refreshTarget: (previous?: Array<SignalId>) => void
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  target: () => StringOrNot
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupDimensionsElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  dimensionsContent: (aspectFlip: boolean, portrait: boolean) => TemplateContents
  disconnectedCallback: () => void
  handleWidth: (event: Event) => Promise<void>
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupFillElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupLocationElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  constrainedContent: (flipped: boolean) => OptionalContent
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupNoneElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

/** @implements ControlGroup */
class GroupTimeElement
extends ControlGroupElementMixin {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  connectedCallback: () => void
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  currentValue: (name: string) => Scalar | undefined
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  framedContent: () => OptionalContent
  icon: string
  legendContent: OptionalContent
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  targetForName: (name: string) => StringOrNot
  templateContent: (contents: TemplateContents) => TemplateContent
  trimmedContent: () => OptionalContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  updatePropertyIds: Array<SignalId>
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorContentElement
extends ContentElementBase {
  chromeCss: CSSResult
  connectedCallback: () => void
  contentCss: CSSResult
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  cssShared: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorElement
extends PanelElementBase {
  connectedCallback: () => void
  contentContent: (slots: Array<Element>) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  footerContent: (slots: Array<Element>) => OptionalContent
  headerContent: (slots: Array<Element>) => OptionalContent
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorFooterElement
extends FooterElementBase {
  chromeCss: CSSResult
  connectedCallback: () => void
  contentCss: CSSResult
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  cssShared: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorHeaderElement
extends HeaderElementBase {
  chromeCss: CSSResult
  connectedCallback: () => void
  contentCss: CSSResult
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  cssShared: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorTargetElement
extends ScrollerElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChanged: () => void
  handleSignal: (signal: Signal) => void
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshSelectedProperties: (refreshIfUnchanged?: boolean) => void
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

function svgElementGroup(
  document: Document
): SVGGElement

function ungroupedSignalsIds(
  ids: Array<SignalId>, 
  propertyIds: Array<SignalId>, 
  functions: Map<ControlGroupFunction, Array<SignalId>>
): Array<SignalId>

const CONTROL_CSS = {
  _$cssResult$: true,
  cssText: '
  input, select {
    width: 100%;
    height: var(--size-control-pix);
    min-width: var(--size-control-pix);
  }
  input[type="search"] {
    border-radius: calc(var(--size-control-pix) / 2);
    padding-left: 2ch;
  }
  input[type="checkbox"] {
    width: var(--size-control-pix);
  }
  input[type=range] {
    flex-grow: 1;
    -webkit-appearance: none;
    width: 100%;
    border-radius: calc(var(--size-control-pix) * 0.25);
    height: calc(var(--size-control-pix) * 0.5);
    border: 1px solid var(--fore-chrome);
    background-color: var(--back-chrome); 
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--fore-chrome);
    border: 1px solid var(--back-chrome);
    border-radius: calc(var(--size-control-pix) * 0.5);
    width: var(--size-control-pix);
    height: var(--size-control-pix);
    cursor: pointer;
  }
  input[type=range]:is(:active, :hover) {
    border-color: var(--on-fore-chrome);
  }
  input[type=range]:is(:active, :hover)::-webkit-slider-thumb {
    background-color: var(--on-fore-chrome);
  }
',
  t: [
    '
  input, select {
    width: 100%;
    height: var(--size-control-pix);
    min-width: var(--size-control-pix);
  }
  input[type="search"] {
    border-radius: calc(var(--size-control-pix) / 2);
    padding-left: 2ch;
  }
  input[type="checkbox"] {
    width: var(--size-control-pix);
  }
  ',
    '
'
  ]
}

const CONTROL_GROUP_CSS = {
  _$cssResult$: true,
  cssText: '
  fieldset {
    flex-grow: 1;
    line-height: var(--size-control-pix);
    font-size: var(--size-control-pix);
    padding: var(--pad-control-pix);
    background-color: initial;
    border-color: var(--fore-content);
    border-width: var(--border-item-stroke-pix);
    border-style: solid;
    border-radius: var(--border-item-radius-pix);
  }
  fieldset:focus-within {
    border-color: var(--on-fore-chrome);
    color: var(--on-fore-chrome);
  }
  media-masher-icon  {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
  } 
  fieldset > div,
  fieldset > media-masher-control-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--pad-control-pix);
    margin-bottom: var(--pad-control-pix);
  }
',
  t: [
    '
  fieldset {
    flex-grow: 1;
    line-height: var(--size-control-pix);
    font-size: var(--size-control-pix);
    padding: var(--pad-control-pix);
    background-color: initial;
    border-color: var(--fore-content);
    border-width: var(--border-item-stroke-pix);
    border-style: solid;
    border-radius: var(--border-item-radius-pix);
  }
  fieldset:focus-within {
    border-color: var(--on-fore-chrome);
    color: var(--on-fore-chrome);
  }
  media-masher-icon  {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
  } 
  fieldset > div,
  fieldset > media-masher-control-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--pad-control-pix);
    margin-bottom: var(--pad-control-pix);
  }
'
  ]
}