Text

Exports related to text.

interface ClientFont 
extends FontFace {}
interface ClippedText 
extends VisibleInstance {
  asset: Media
  assetFrames: (quantize: number) => Numbers
  assetId: string
  assetTime: (masherTime: Time) => Time
  boolean: (key: string) => boolean
  cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clip: Clip
  clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
  containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
  contentRects: (args: ContentRectArgs) => RectTuple
  contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  cropDirections: SideDirectionRecord
  frames: (quantize: number) => number
  host: Plugins
  id: string
  instanceObject: InstanceObject
  intrinsicRect: Rect
  intrinsicsKnown: (options: IntrinsicOptions) => boolean
  isDefault: boolean
  mediaIds: Strings
  muted: boolean
  number: (key: string) => number
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  scaleRects: (time: Time, range: TimeRange) => RectTuple
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  sizeKey?: SizeKey
  string: (key: string) => string
  svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
  targetId: string
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweening: boolean
  tweens: (key: string) => boolean
  value: (key: string) => Scalar | undefined
}
interface ClippedTextImage 
extends ClippedText {
  asset: Media
  assetFrames: (quantize: number) => Numbers
  assetId: string
  assetTime: (masherTime: Time) => Time
  boolean: (key: string) => boolean
  cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clip: Clip
  clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
  containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
  contentRects: (args: ContentRectArgs) => RectTuple
  contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  cropDirections: SideDirectionRecord
  frames: (quantize: number) => number
  host: Plugins
  id: string
  instanceObject: InstanceObject
  intrinsicRect: Rect
  intrinsicsKnown: (options: IntrinsicOptions) => boolean
  isDefault: boolean
  mediaIds: Strings
  muted: boolean
  number: (key: string) => number
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  scaleRects: (time: Time, range: TimeRange) => RectTuple
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  sizeKey?: SizeKey
  string: (key: string) => string
  svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
  targetId: string
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweening: boolean
  tweens: (key: string) => boolean
  value: (key: string) => Scalar | undefined
}
interface CssElement  {
  cssProperties: Array<Property>
  target: string
  variable: (name: string) => number
  variableString: (name: string) => string
}
interface CssInfo  {
  clientUrl: FetchUrl
  cssUrl: FetchUrl
  extension: string
  family: string
}
interface CssReactive  {
  cssProperties: Array<Property>
  target: string
}
type CssResultTuple = ArrayOf2<CSSResult, CSSResult>
type FetchTextFunction = (args: Fetched, opts?: JobOptions) => Promise<DataOrError<string>>
interface TextImage 
extends TextMedia {
  accountId: string
  /** True if I have transparency. */
  alpha?: boolean
  api: () => Promise<DataOrError<Api>>
  asStored: unknown
  boolean: (key: string) => boolean
  cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
  /** True if I can be a clipped container. */
  canBeContainer?: boolean
  /** True if I can be clipped content. */
  canBeContent?: boolean
  /** True if I am a fill color. */
  canBeFill?: boolean
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clipObject: (object?: InstanceObject) => ClipObject
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  createdAt?: number
  deletedAt?: number
  duration: number
  family: string
  fetchResource: (resource: Resource) => Promise<DataOrError<true>>
  findResource: (types: Strings) => Resource | undefined
  frames: (quantize: number) => number
  hasIntrinsicSizing?: boolean
  hasIntrinsicTiming?: boolean
  host: Plugins
  id: string
  instanceArgs: (object?: InstanceObject) => InstanceArgs
  instanceFromObject: (object?: InstanceObject) => Instance
  /** True if I am vector-based. */
  isVector?: boolean
  label: string
  mediaIds: Strings
  number: (key: string) => number
  /** Size drawn from sized resource. */
  probeSize?: Size
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  resources: Array<Resource>
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  source: string
  string: (key: string) => string
  style: (prefix?: string) => SvgStyleElement
  targetId: string
  textRect: Rect
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweens: (key: string) => boolean
  type: string
  unload: () => void
  updatedAt?: number
  userId?: string
  value: (key: string) => Scalar | undefined
}
interface TextInstanceObject 
extends VisibleInstanceObject {
  container?: boolean
  height?: number
  heightEnd?: number
  lock?: string
  opacity?: number
  opacityEnd?: number
  pointAspect?: string
  sizeAspect?: string
  text?: string
  transparency?: Transparency | string
  width?: number
  widthEnd?: number
  x?: number
  xEnd?: number
  y?: number
  yEnd?: number
}
interface TextMedia 
extends VisibleMedia {
  accountId: string
  /** True if I have transparency. */
  alpha?: boolean
  api: () => Promise<DataOrError<Api>>
  asStored: unknown
  boolean: (key: string) => boolean
  cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
  /** True if I can be a clipped container. */
  canBeContainer?: boolean
  /** True if I can be clipped content. */
  canBeContent?: boolean
  /** True if I am a fill color. */
  canBeFill?: boolean
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clipObject: (object?: InstanceObject) => ClipObject
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  createdAt?: number
  deletedAt?: number
  duration: number
  family: string
  fetchResource: (resource: Resource) => Promise<DataOrError<true>>
  findResource: (types: Strings) => Resource | undefined
  frames: (quantize: number) => number
  hasIntrinsicSizing?: boolean
  hasIntrinsicTiming?: boolean
  host: Plugins
  id: string
  instanceArgs: (object?: InstanceObject) => InstanceArgs
  instanceFromObject: (object?: InstanceObject) => Instance
  /** True if I am vector-based. */
  isVector?: boolean
  label: string
  mediaIds: Strings
  number: (key: string) => number
  /** Size drawn from sized resource. */
  probeSize?: Size
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  resources: Array<Resource>
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  source: string
  string: (key: string) => string
  style: (prefix?: string) => SvgStyleElement
  targetId: string
  textRect: Rect
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweens: (key: string) => boolean
  type: string
  unload: () => void
  updatedAt?: number
  userId?: string
  value: (key: string) => Scalar | undefined
}
interface TextProperties  {
  text?: string
}
interface TextRectArgs  {
  document: Document
  family: string
  fontPath?: AbsolutePath
  size: number
  text: string
}
/** @implements TextMedia */
class ClientTextImageClass {
  accountId: string
  /** True if I have transparency. */
  alpha?: boolean
  api: () => Promise<DataOrError<Api>>
  asStored: unknown
  boolean: (key: string) => boolean
  cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
  /** True if I can be a clipped container. */
  canBeContainer?: boolean
  /** True if I can be clipped content. */
  canBeContent?: boolean
  /** True if I am a fill color. */
  canBeFill?: boolean
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clipObject: (object?: InstanceObject) => ClipObject
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  createdAt?: number
  deletedAt?: number
  duration: number
  family: string
  familyInitialize: () => string
  fetchResource: (resource: Resource) => Promise<DataOrError<true>>
  findResource: (types: Strings) => Resource | undefined
  frames: (quantize: number) => number
  hasIntrinsicSizing?: boolean
  hasIntrinsicTiming?: boolean
  host: Plugins
  id: string
  instanceArgs: (object?: InstanceObject) => InstanceArgs
  instanceFromObject: (object?: InstanceObject) => Instance
  /** True if I am vector-based. */
  isVector?: boolean
  label: string
  mediaIds: Strings
  number: (key: string) => number
  /** Size drawn from sized resource. */
  probeSize?: Size
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  resources: Array<Resource>
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  source: string
  string: (key: string) => string
  style: (prefix?: string) => SvgStyleElement
  targetId: string
  textRect: Rect
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweens: (key: string) => boolean
  type: string
  unload: () => void
  updatedAt?: number
  userId?: string
  value: (key: string) => Scalar | undefined
}
/** @implements ClippedText */
class ClippedClientTextImageClass
extends TextInstanceClass {
  asset: Media
  assetFrames: (quantize: number) => Numbers
  assetId: string
  assetTime: (masherTime: Time) => Time
  boolean: (key: string) => boolean
  cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clip: Clip
  clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
  containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
  contentRects: (args: ContentRectArgs) => RectTuple
  contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  cropDirections: SideDirectionRecord
  frames: (quantize: number) => number
  hasIntrinsicTiming: boolean
  host: Plugins
  id: string
  instanceObject: InstanceObject
  intrinsicRect: Rect
  intrinsicsKnown: (options: IntrinsicOptions) => boolean
  isDefault: boolean
  mediaIds: Strings
  muted: boolean
  number: (key: string) => number
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  scaleRects: (time: Time, range: TimeRange) => RectTuple
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  sizeKey?: SizeKey
  string: (key: string) => string
  svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
  targetId: string
  textAsset: () => TextMedia
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweening: boolean
  tweens: (key: string) => boolean
  tweensProperty: (key: string) => boolean
  value: (key: string) => Scalar | undefined
}
/** @implements ClippedTextImage */
class ClippedTextImageClass
extends TextInstanceClass {
  asset: Media
  assetFrames: (quantize: number) => Numbers
  assetId: string
  assetTime: (masherTime: Time) => Time
  boolean: (key: string) => boolean
  cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clip: Clip
  clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
  containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
  contentRects: (args: ContentRectArgs) => RectTuple
  contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  cropDirections: SideDirectionRecord
  frames: (quantize: number) => number
  hasIntrinsicTiming: boolean
  host: Plugins
  id: string
  instanceObject: InstanceObject
  intrinsicRect: Rect
  intrinsicsKnown: (options: IntrinsicOptions) => boolean
  isDefault: boolean
  mediaIds: Strings
  muted: boolean
  number: (key: string) => number
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  scaleRects: (time: Time, range: TimeRange) => RectTuple
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  sizeKey?: SizeKey
  string: (key: string) => string
  svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
  targetId: string
  textAsset: () => TextMedia
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweening: boolean
  tweens: (key: string) => boolean
  tweensProperty: (key: string) => boolean
  value: (key: string) => Scalar | undefined
}
class ImporterTextElement
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
}
/** @implements Importer */
class TextClientImporter {
  canImport: () => boolean
  icon: Node
  id: string
  import: () => void
  label?: string
  media: (file: File | FileSystemFileHandle | ImporterFileDetails) => Promise<DataOrError<Media>>
  styles: CSSResult
  ui: () => Node
}
/** @implements TextMedia */
class TextImageClass
extends TextMediaClass {
  accountId: string
  /** True if I have transparency. */
  alpha?: boolean
  api: () => Promise<DataOrError<Api>>
  asStored: unknown
  boolean: (key: string) => boolean
  cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
  /** True if I can be a clipped container. */
  canBeContainer?: boolean
  /** True if I can be clipped content. */
  canBeContent?: boolean
  /** True if I am a fill color. */
  canBeFill?: boolean
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clipObject: (object?: InstanceObject) => ClipObject
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  createdAt?: number
  deletedAt?: number
  duration: number
  family: string
  fetchResource: (resource: Resource) => Promise<DataOrError<true>>
  findResource: (types: Strings) => Resource | undefined
  frames: (quantize: number) => number
  hasIntrinsicSizing?: boolean
  hasIntrinsicTiming?: boolean
  host: Plugins
  id: string
  instanceArgs: (object?: InstanceObject) => InstanceArgs
  instanceFromObject: (object?: InstanceObject) => Instance
  /** True if I am vector-based. */
  isVector?: boolean
  label: string
  mediaIds: Strings
  number: (key: string) => number
  /** Size drawn from sized resource. */
  probeSize?: Size
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  resources: Array<Resource>
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  source: string
  string: (key: string) => string
  style: (prefix?: string) => SvgStyleElement
  targetId: string
  textRect: Rect
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweens: (key: string) => boolean
  tweensProperty: (key: string) => boolean
  type: string
  unload: () => void
  updatedAt?: number
  userId?: string
  value: (key: string) => Scalar | undefined
}
/** @implements ClippedText */
class TextInstanceClass
extends VisibleInstanceClass {
  asset: Media
  assetFrames: (quantize: number) => Numbers
  assetId: string
  assetTime: (masherTime: Time) => Time
  boolean: (key: string) => boolean
  cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clip: Clip
  clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
  containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
  containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
  contentRects: (args: ContentRectArgs) => RectTuple
  contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
  cropDirections: SideDirectionRecord
  frames: (quantize: number) => number
  hasIntrinsicTiming: boolean
  host: Plugins
  id: string
  instanceObject: InstanceObject
  intrinsicRect: Rect
  intrinsicsKnown: (options: IntrinsicOptions) => boolean
  isDefault: boolean
  mediaIds: Strings
  muted: boolean
  number: (key: string) => number
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  scaleRects: (time: Time, range: TimeRange) => RectTuple
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  sizeKey?: SizeKey
  string: (key: string) => string
  svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
  targetId: string
  textAsset: () => TextMedia
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweening: boolean
  tweens: (key: string) => boolean
  tweensProperty: (key: string) => boolean
  value: (key: string) => Scalar | undefined
}
/** @implements TextMedia */
class TextMediaClass
extends VisibleMediaClass {
  accountId: string
  /** True if I have transparency. */
  alpha?: boolean
  api: () => Promise<DataOrError<Api>>
  asStored: unknown
  boolean: (key: string) => boolean
  cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
  /** True if I can be a clipped container. */
  canBeContainer?: boolean
  /** True if I can be clipped content. */
  canBeContent?: boolean
  /** True if I am a fill color. */
  canBeFill?: boolean
  canBeMuted: boolean
  changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
  changeScalars: (scalars: ScalarsById) => void
  changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
  clipObject: (object?: InstanceObject) => ClipObject
  constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
  createdAt?: number
  deletedAt?: number
  duration: number
  family: string
  fetchResource: (resource: Resource) => Promise<DataOrError<true>>
  findResource: (types: Strings) => Resource | undefined
  frames: (quantize: number) => number
  hasIntrinsicSizing?: boolean
  hasIntrinsicTiming?: boolean
  host: Plugins
  id: string
  instanceArgs: (object?: InstanceObject) => InstanceArgs
  instanceFromObject: (object?: InstanceObject) => Instance
  /** True if I am vector-based. */
  isVector?: boolean
  label: string
  mediaIds: Strings
  number: (key: string) => number
  /** Size drawn from sized resource. */
  probeSize?: Size
  properties: Array<Property>
  propertiesOfTarget: (targetId: string) => Array<Property>
  propertyFind: (name: string) => Property | undefined
  propertyIds: (targetId: string) => Array<SignalId>
  resources: Array<Resource>
  scalarsRecord: (idOrNames: Strings) => ScalarRecord
  setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
  shouldSelectProperty: (property: Property) => boolean
  source: string
  string: (key: string) => string
  style: (prefix?: string) => SvgStyleElement
  targetId: string
  textRect: Rect
  toJSON: () => unknown
  tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
  tweens: (key: string) => boolean
  tweensProperty: (key: string) => boolean
  type: string
  unload: () => void
  updatedAt?: number
  userId?: string
  value: (key: string) => Scalar | undefined
}
function TextMediaMixin<T = Constrained<VisibleMedia>>(
  Base: T
): Mixed<T, TextMedia>
function cssReduce(
  entries: Array<CssResultTuple>
): CSSResult
function cssScalarProperty(
  cssElement: CssElement, 
  signalId: SignalId
): ScalarProperty | undefined
function cssSuffixForType(
  type: string
): string
function familyFromCss(
  string: string
): string
/** Type guard for ClientFont */
function isClientFont(
  value: unknown
): boolean
function svgElementText(
  document: Document, 
  string: Value, 
  color?: string, 
  size?: number, 
  family?: string, 
  transform?: string
): SVGTextElement
function urlFromCss(
  string: string
): FetchUrl | undefined
const CSS_BUTTON = {
  _$cssResult$: true,
  cssText: '
  button {
    max-height: calc( 
      var(--size-button-pix)
      + (2 * var(--pad-button-pix)) 
      + (2 * var(--border-button-stroke-pix)) 
    );
    border-radius: var(--border-button-radius-pix);
    border-width: var(--border-button-stroke-pix);  
    border-style: solid;    
    color: var(--fore-chrome);
    border-color: var(--fore-chrome);
    background-color: var(--back-chrome);
    cursor: pointer;
    display: flex;
    gap: var(--pad-button-pix);
    padding: var(--pad-button-pix);
    transition: 
      background-color var(--color-transition),
      border-color var(--color-transition),
      color var(--color-transition);
    align-items: center;
    font-size: var(--size-button-pix);
    line-height: var(--size-button-pix);
    font-weight: 500;
  }
  button:is(:hover, :active) {
    color: var(--over-fore-chrome);
    border-color: var(--over-fore-chrome);
    background-color: var(--over-back-chrome);
  }
  button:is(:disabled) {
    color: var(--off-fore-chrome);
    border-color: var(--off-fore-chrome);
    background-color: var(--off-back-chrome);
    cursor: default;
  }
',
  t: [
    '
  button {
    max-height: calc( 
      var(--size-button-pix)
      + (2 * var(--pad-button-pix)) 
      + (2 * var(--border-button-stroke-pix)) 
    );
    border-radius: var(--border-button-radius-pix);
    border-width: var(--border-button-stroke-pix);  
    border-style: solid;    
    color: var(--fore-chrome);
    border-color: var(--fore-chrome);
    background-color: var(--back-chrome);
    cursor: pointer;
    display: flex;
    gap: var(--pad-button-pix);
    padding: var(--pad-button-pix);
    transition: 
      background-color var(--color-transition),
      border-color var(--color-transition),
      color var(--color-transition);
    align-items: center;
    font-size: var(--size-button-pix);
    line-height: var(--size-button-pix);
    font-weight: 500;
  }
  button:is(:hover, :active) {
    color: var(--over-fore-chrome);
    border-color: var(--over-fore-chrome);
    background-color: var(--over-back-chrome);
  }
  button:is(:disabled) {
    color: var(--off-fore-chrome);
    border-color: var(--off-fore-chrome);
    background-color: var(--off-back-chrome);
    cursor: default;
  }
'
  ]
}
const CSS_COLORS = {
  _$cssResult$: true,
  cssText: ' --back-chrome: oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --back-content: oklch(var(--bright-5) var(--color-content-chroma-per) var(--color-content-hue-deg)); --back-err: oklch(var(--bright-5) var(--color-err-chroma-per) var(--color-err-hue-deg)); --over-back-chrome: oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --over-back-content: oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --off-back-chrome: oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --fore-chrome: oklch(var(--bright-1) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --fore-content: oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg)); --fore-err: oklch(var(--bright-2) var(--color-err-chroma-per) var(--color-err-hue-deg)); --on-fore-chrome: oklch(var(--bright-1) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --on-fore-content: oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --over-fore-chrome: oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --over-fore-content: oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --off-fore-chrome: oklch(var(--bright-3) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --off-fore-content: oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg)); --color-transition: 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)-out; --color-drop: oklch(var(--color-brightness-4-per) 0.25768330773615683 29.2338851923426); --dropping-shadow: var(--size-drop) var(--size-drop) 0 0 var(--color-drop) inset, calc(-1 * var(--size-drop)) calc(-1 * var(--size-drop)) 0 0 var(--color-drop) inset;;',
  t: [
    '',
    ' --',
    ': ',
    ';'
  ]
}
const CSS_COLOR_ENTRIES = [
  [
    {
      _$cssResult$: true,
      cssText: 'back-chrome',
      t: [
        'back-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
      t: [
        'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'back-content',
      t: [
        'back-content'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-5) var(--color-content-chroma-per) var(--color-content-hue-deg))',
      t: [
        'oklch(var(--bright-5) var(--color-content-chroma-per) var(--color-content-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'back-err',
      t: [
        'back-err'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-5) var(--color-err-chroma-per) var(--color-err-hue-deg))',
      t: [
        'oklch(var(--bright-5) var(--color-err-chroma-per) var(--color-err-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'over-back-chrome',
      t: [
        'over-back-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
      t: [
        'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'over-back-content',
      t: [
        'over-back-content'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
      t: [
        'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'off-back-chrome',
      t: [
        'off-back-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
      t: [
        'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'fore-chrome',
      t: [
        'fore-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-1) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
      t: [
        'oklch(var(--bright-1) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'fore-content',
      t: [
        'fore-content'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))',
      t: [
        'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'fore-err',
      t: [
        'fore-err'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-2) var(--color-err-chroma-per) var(--color-err-hue-deg))',
      t: [
        'oklch(var(--bright-2) var(--color-err-chroma-per) var(--color-err-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'on-fore-chrome',
      t: [
        'on-fore-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-1) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
      t: [
        'oklch(var(--bright-1) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'on-fore-content',
      t: [
        'on-fore-content'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
      t: [
        'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'over-fore-chrome',
      t: [
        'over-fore-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
      t: [
        'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'over-fore-content',
      t: [
        'over-fore-content'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
      t: [
        'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'off-fore-chrome',
      t: [
        'off-fore-chrome'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-3) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
      t: [
        'oklch(var(--bright-3) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'off-fore-content',
      t: [
        'off-fore-content'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))',
      t: [
        'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-transition',
      t: [
        'color-transition'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)-out',
      t: [
        '1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)-out'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-drop',
      t: [
        'color-drop'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'oklch(var(--color-brightness-4-per) 0.25768330773615683 29.2338851923426)',
      t: [
        'oklch(var(--color-brightness-4-per) 0.25768330773615683 29.2338851923426)'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'dropping-shadow',
      t: [
        'dropping-shadow'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'var(--size-drop) var(--size-drop) 0 0 var(--color-drop) inset, calc(-1 * var(--size-drop)) calc(-1 * var(--size-drop)) 0 0 var(--color-drop) inset;',
      t: [
        'var(--size-drop) var(--size-drop) 0 0 var(--color-drop) inset, calc(-1 * var(--size-drop)) calc(-1 * var(--size-drop)) 0 0 var(--color-drop) inset;'
      ]
    }
  ]
]
const CSS_DYNAMIC = {
  _$cssResult$: true,
  cssText: ' --color: #000000; --color-contrast: var(--color-contrast-light); --frame: 0; --frames: 0; --width: 16; --height: 9;',
  t: [
    '',
    ' --',
    ': ',
    ';'
  ]
}
const CSS_DYNAMIC_ENTRIES = [
  [
    {
      _$cssResult$: true,
      cssText: 'color',
      t: [
        'color'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '#000000',
      t: [
        '#000000'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-contrast',
      t: [
        'color-contrast'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'var(--color-contrast-light)',
      t: [
        'var(--color-contrast-light)'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'frame',
      t: [
        'frame'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0',
      t: [
        '0'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'frames',
      t: [
        'frames'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0',
      t: [
        '0'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'width',
      t: [
        'width'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '16',
      t: [
        '16'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'height',
      t: [
        'height'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '9',
      t: [
        '9'
      ]
    }
  ]
]
const CSS_ENTRIES = [
  [
    {
      _$cssResult$: true,
      cssText: 'border-button-radius-pix',
      t: [
        'border-button-radius-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '5px',
      t: [
        '5px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'border-button-stroke-pix',
      t: [
        'border-button-stroke-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1px',
      t: [
        '1px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'border-item-radius-pix',
      t: [
        'border-item-radius-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '5px',
      t: [
        '5px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'border-item-stroke-pix',
      t: [
        'border-item-stroke-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1px',
      t: [
        '1px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'border-panel-radius-pix',
      t: [
        'border-panel-radius-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '7px',
      t: [
        '7px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'border-panel-stroke-pix',
      t: [
        'border-panel-stroke-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '3px',
      t: [
        '3px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'border-preview-stroke-pix',
      t: [
        'border-preview-stroke-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1px',
      t: [
        '1px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-brightness-1-per',
      t: [
        'color-brightness-1-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '15%',
      t: [
        '15%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-brightness-2-per',
      t: [
        'color-brightness-2-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '25%',
      t: [
        '25%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-brightness-3-per',
      t: [
        'color-brightness-3-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '50%',
      t: [
        '50%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-brightness-4-per',
      t: [
        'color-brightness-4-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '80%',
      t: [
        '80%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-brightness-5-per',
      t: [
        'color-brightness-5-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '90%',
      t: [
        '90%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-chrome-chroma-per',
      t: [
        'color-chrome-chroma-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0%',
      t: [
        '0%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-chrome-hue-deg',
      t: [
        'color-chrome-hue-deg'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '281',
      t: [
        '281'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-content-chroma-per',
      t: [
        'color-content-chroma-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0%',
      t: [
        '0%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-content-hue-deg',
      t: [
        'color-content-hue-deg'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '281',
      t: [
        '281'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-err-chroma-per',
      t: [
        'color-err-chroma-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '25%',
      t: [
        '25%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-err-hue-deg',
      t: [
        'color-err-hue-deg'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '30',
      t: [
        '30'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-log-chroma-per',
      t: [
        'color-log-chroma-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '25%',
      t: [
        '25%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-log-hue-deg',
      t: [
        'color-log-hue-deg'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '160',
      t: [
        '160'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-selected-chroma-per',
      t: [
        'color-selected-chroma-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '50%',
      t: [
        '50%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-selected-hue-deg',
      t: [
        'color-selected-hue-deg'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '281',
      t: [
        '281'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-warn-chroma-per',
      t: [
        'color-warn-chroma-per'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '50%',
      t: [
        '50%'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'color-warn-hue-deg',
      t: [
        'color-warn-hue-deg'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '110',
      t: [
        '110'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'pad-button-pix',
      t: [
        'pad-button-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '4px',
      t: [
        '4px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'pad-chrome-pix',
      t: [
        'pad-chrome-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '5px',
      t: [
        '5px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'pad-content-pix',
      t: [
        'pad-content-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '10px',
      t: [
        '10px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'pad-control-pix',
      t: [
        'pad-control-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '10px',
      t: [
        '10px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'pad-item-pix',
      t: [
        'pad-item-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '5px',
      t: [
        '5px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'pad-panel-pix',
      t: [
        'pad-panel-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '20px',
      t: [
        '20px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-aside-pix',
      t: [
        'size-aside-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '240px',
      t: [
        '240px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-base-str',
      t: [
        'size-base-str'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '2rem',
      t: [
        '2rem'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-button-rat',
      t: [
        'size-button-rat'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0.5',
      t: [
        '0.5'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-control-rat',
      t: [
        'size-control-rat'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0.6',
      t: [
        '0.6'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-label-rat',
      t: [
        'size-label-rat'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0.5',
      t: [
        '0.5'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-player-pix',
      t: [
        'size-player-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '270px',
      t: [
        '270px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-preview-rat',
      t: [
        'size-preview-rat'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '0.25',
      t: [
        '0.25'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-scrubber-height-pix',
      t: [
        'size-scrubber-height-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '13px',
      t: [
        '13px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-scrubber-width-pix',
      t: [
        'size-scrubber-width-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '16px',
      t: [
        '16px'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'view-icon-boo',
      t: [
        'view-icon-boo'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1',
      t: [
        '1'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'view-label-boo',
      t: [
        'view-label-boo'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1',
      t: [
        '1'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'view-preview-boo',
      t: [
        'view-preview-boo'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '1',
      t: [
        '1'
      ]
    }
  ]
]
const CSS_RANGE = {
  _$cssResult$: true,
  cssText: '
  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[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);
  }
'
  ]
}
const CSS_SIZES = {
  _$cssResult$: true,
  cssText: ' --size-label-pix: calc(var(--size-label-rat) * var(--size-base-str)); --size-button-pix: calc(var(--size-button-rat) * var(--size-base-str)); --size-control-pix: calc(var(--size-control-rat) * var(--size-base-str)); --size-larger: max(var(--width), var(--height)); --size-ratio: calc(var(--size-player-pix) / var(--size-larger)); --width-preview: calc(var(--width) * var(--size-ratio)); --height-preview: calc(var(--height) * var(--size-ratio)); --frame-width: round((var(--size-preview-rat) * var(--width-preview)), 1px); --frame-height: round((var(--size-preview-rat) * var(--height-preview) * var(--view-preview-boo)), 1px); --preview-width: calc((2 * var(--border-preview-stroke-pix)) + var(--frame-width)); --preview-height: calc((2 * var(--border-preview-stroke-pix)) + var(--frame-height)); --size-drop: 2px;',
  t: [
    '',
    ' --',
    ': ',
    ';'
  ]
}
const CSS_SIZE_ENTRIES = [
  [
    {
      _$cssResult$: true,
      cssText: 'size-label-pix',
      t: [
        'size-label-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc(var(--size-label-rat) * var(--size-base-str))',
      t: [
        'calc(var(--size-label-rat) * var(--size-base-str))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-button-pix',
      t: [
        'size-button-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc(var(--size-button-rat) * var(--size-base-str))',
      t: [
        'calc(var(--size-button-rat) * var(--size-base-str))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-control-pix',
      t: [
        'size-control-pix'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc(var(--size-control-rat) * var(--size-base-str))',
      t: [
        'calc(var(--size-control-rat) * var(--size-base-str))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-larger',
      t: [
        'size-larger'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'max(var(--width), var(--height))',
      t: [
        'max(var(--width), var(--height))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-ratio',
      t: [
        'size-ratio'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc(var(--size-player-pix) / var(--size-larger))',
      t: [
        'calc(var(--size-player-pix) / var(--size-larger))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'width-preview',
      t: [
        'width-preview'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc(var(--width) * var(--size-ratio))',
      t: [
        'calc(var(--width) * var(--size-ratio))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'height-preview',
      t: [
        'height-preview'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc(var(--height) * var(--size-ratio))',
      t: [
        'calc(var(--height) * var(--size-ratio))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'frame-width',
      t: [
        'frame-width'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'round((var(--size-preview-rat) * var(--width-preview)), 1px)',
      t: [
        'round((var(--size-preview-rat) * var(--width-preview)), 1px)'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'frame-height',
      t: [
        'frame-height'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'round((var(--size-preview-rat) * var(--height-preview) * var(--view-preview-boo)), 1px)',
      t: [
        'round((var(--size-preview-rat) * var(--height-preview) * var(--view-preview-boo)), 1px)'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'preview-width',
      t: [
        'preview-width'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-width))',
      t: [
        'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-width))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'preview-height',
      t: [
        'preview-height'
      ]
    },
    {
      _$cssResult$: true,
      cssText: 'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-height))',
      t: [
        'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-height))'
      ]
    }
  ],
  [
    {
      _$cssResult$: true,
      cssText: 'size-drop',
      t: [
        'size-drop'
      ]
    },
    {
      _$cssResult$: true,
      cssText: '2px',
      t: [
        '2px'
      ]
    }
  ]
]
const DROP_CSS = {
  _$cssResult$: true,
  cssText: '
  :host {
    position: relative;
  }
  div.drop-box {
    inset: 0px;
    pointer-events: none;
    color: transparent;
    position: absolute;
    display: block;
  }
  :host(.dropping) div.drop-box {
    box-shadow: var(--dropping-shadow);
  }
',
  t: [
    '
  :host {
    position: relative;
  }
  div.drop-box {
    inset: 0px;
    pointer-events: none;
    color: transparent;
    position: absolute;
    display: block;
  }
  :host(.dropping) div.drop-box {
    box-shadow: var(--dropping-shadow);
  }
'
  ]
}
/** Applied to all previews except timeline */
const MEDIA_PREVIEW_CSS = {
  _$cssResult$: true,
  cssText: '
  :host {
    display: inline-block;
    padding: var(--pad-item-pix);
    border-width: var(--border-item-stroke-pix);
    border-style: solid;
    border-radius: var(--border-item-radius-pix);
    border-color: var(--fore-content);
    color: var(--fore-content);
    background-color: var(--back-content);
    width: var(--previewable-width-px);
    height: var(--previewable-height-px);
    cursor: grab;
  }
  :host([undraggable]) {
    cursor: default;
  }
  :host(:is(:hover, .selected)) {
    background-color: var(--over-fore-content);
    color: var(--over-back-content);
    border-color: var(--over-back-content);
  }
  #preview {
    overflow: hidden;
    height: calc(var(--preview-height));  
    width: calc(var(--preview-width)); 
    height: var(--preview-height);  
    width: var(--preview-width);  
  }
  #label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #head {
    width: var(--preview-width);
    padding-bottom: var(--pad-item-pix);
    display: flex;
    gap: var(--pad-item-pix);
    font-size: var(--size-label-pix);
    line-height: var(--size-label-pix);
    overflow-x: hidden;
  }
  #preview > * {
    height: var(--preview-height);  
    width: var(--preview-width); 
  }
',
  t: [
    '
  ',
    '
  #preview > * {
    height: var(--preview-height);  
    width: var(--preview-width); 
  }
'
  ]
}
/**
 * Applied to timeline previews and others
 * via MEDIA_PREVIEW_CSS
 */
const PREVIEW_CSS = {
  _$cssResult$: true,
  cssText: '
  :host {
    display: inline-block;
    padding: var(--pad-item-pix);
    border-width: var(--border-item-stroke-pix);
    border-style: solid;
    border-radius: var(--border-item-radius-pix);
    border-color: var(--fore-content);
    color: var(--fore-content);
    background-color: var(--back-content);
    width: var(--previewable-width-px);
    height: var(--previewable-height-px);
    cursor: grab;
  }
  :host([undraggable]) {
    cursor: default;
  }
  :host(:is(:hover, .selected)) {
    background-color: var(--over-fore-content);
    color: var(--over-back-content);
    border-color: var(--over-back-content);
  }
  #preview {
    overflow: hidden;
    height: calc(var(--preview-height));  
    width: calc(var(--preview-width)); 
    height: var(--preview-height);  
    width: var(--preview-width);  
  }
  #label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #head {
    width: var(--preview-width);
    padding-bottom: var(--pad-item-pix);
    display: flex;
    gap: var(--pad-item-pix);
    font-size: var(--size-label-pix);
    line-height: var(--size-label-pix);
    overflow-x: hidden;
  }
',
  t: [
    '
  :host {
    display: inline-block;
    padding: var(--pad-item-pix);
    border-width: var(--border-item-stroke-pix);
    border-style: solid;
    border-radius: var(--border-item-radius-pix);
    border-color: var(--fore-content);
    color: var(--fore-content);
    background-color: var(--back-content);
    width: var(--previewable-width-px);
    height: var(--previewable-height-px);
    cursor: grab;
  }
  :host([undraggable]) {
    cursor: default;
  }
  :host(:is(:hover, .selected)) {
    background-color: var(--over-fore-content);
    color: var(--over-back-content);
    border-color: var(--over-back-content);
  }
  #preview {
    overflow: hidden;
    height: calc(var(--preview-height));  
    width: calc(var(--preview-width)); 
    height: var(--preview-height);  
    width: var(--preview-width);  
  }
  #label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #head {
    width: var(--preview-width);
    padding-bottom: var(--pad-item-pix);
    display: flex;
    gap: var(--pad-item-pix);
    font-size: var(--size-label-pix);
    line-height: var(--size-label-pix);
    overflow-x: hidden;
  }
'
  ]
}