@ixfx/components 0.5.18 → 0.5.20

package/dist/data-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-display.js","names":["#config","#previousValues","#rangeStreams","#currentData","#renderAll","#walk","#cleanupPaths","#ensureRow","#updateRenderer","#hasDescendantConfig","#renderNestedDisplay","#determineAutoStyle","#renderText","#rendererTag","#getOrCreateRendererElement","#applyValue","#applyLed","#applyPlotOptions","#applyPlotXy","#formatTimeElapsed","customElement"],"sources":["../src/data-display/data-display.ts"],"sourcesContent":["import { rangeStream, round } from \"@ixfx/numbers\";\n\nimport { css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type RendererStyle\n  = | `led`\n    | `plot`\n    | `plot-xy`\n    | `plot-heat`\n    | `plot-histogram`\n    | `time-elapsed`\n    | `hide`;\n\nexport type ConfigEntry = readonly [\n  path: string,\n  style: RendererStyle,\n  options?: Record<string, unknown>,\n];\n\nexport type FormattingOptions = {\n  readonly precision?: number;\n  readonly roundNumbers?: number;\n};\n\ntype ConfigRecord = {\n  readonly style: RendererStyle;\n  readonly options?: Record<string, unknown>;\n};\n\ntype RangeStream = ReturnType<typeof rangeStream>;\n\n@customElement(`ixfx-data-display`)\nexport class DataDisplayComponent extends LitElement {\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: block;\n      width: fit-content;\n    }\n    section {\n      background: var(--surface-3);\n      color: var(--surface-2-text);\n      border: var(--border);\n      padding: var(--space-m);\n      font-family: var(--font-mono);\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: var(--space-s);\n    }\n    .row {\n      display: contents;\n    }\n    .row > label {\n      font-weight: bold;\n      text-align: end;\n      justify-self: end;\n      padding: 2px 0;\n    }\n    .row > :not(label) {\n      padding: 2px 0;\n    }\n    .row > ixfx-led {\n      align-self: center;\n    }\n    .value {\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    }\n  `];\n\n  @property({ type: Boolean })\n  automap = false;\n\n  previousValue: Record<string, unknown> | undefined;\n  _container: HTMLElement;\n\n  #config = new Map<string, ConfigRecord>();\n  #previousValues = new Map<string, unknown>();\n  #rangeStreams = new Map<string, RangeStream>();\n  #currentData: Record<string, unknown> | undefined;\n\n  constructor() {\n    super();\n    this._container = document.createElement(`section`);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.renderRoot.append(this._container);\n  }\n\n  configure(config: ConfigEntry[]) {\n    this.#config.clear();\n    for (const [path, style, options] of config) {\n      this.#config.set(path, { style, options });\n    }\n    this._container.innerHTML = ``;\n    this.#previousValues.clear();\n    this.#rangeStreams.clear();\n    if (this.#currentData !== undefined) {\n      this.#renderAll(this.#currentData);\n    }\n  }\n\n  formatValue(v: unknown, options: FormattingOptions = {}): string {\n    if (v === null)\n      return `(null)`;\n    if (v === undefined)\n      return `(undefined)`;\n    if (typeof v === `boolean`)\n      return v ? `true` : `false`;\n    if (typeof v === `string`)\n      return `\"${v}\"`;\n    if (typeof v === `number`) {\n      let vAsNumber = v;\n      if (options.roundNumbers !== undefined)\n        vAsNumber = round(options.roundNumbers, v);\n      if (options.precision !== undefined)\n        return vAsNumber.toFixed(options.precision);\n      const formatted = vAsNumber.toFixed(2);\n      return vAsNumber >= 0 ? ` ${formatted}` : formatted;\n    }\n    return JSON.stringify(v);\n  }\n\n  displayData(o: Record<string, unknown> | unknown[]) {\n    if (o === null) {\n      this.innerHTML = ``;\n      return;\n    }\n    this.#renderAll(o as Record<string, unknown>);\n  }\n\n  updateData(value: Record<string, unknown>) {\n    this.#currentData = value;\n    this.#renderAll(value);\n    this.previousValue = value;\n  }\n\n  getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement {\n    const element = this.renderRoot.querySelector(`#${path}`) as HTMLElement | null;\n    if (element !== null)\n      return element;\n\n    const elementCreated = document.createElement(`div`);\n    elementCreated.id = path;\n    if (init)\n      init(elementCreated);\n    this._container.append(elementCreated);\n    return elementCreated;\n  }\n\n  #renderAll(data: Record<string, unknown>) {\n    const activePaths = new Set<string>();\n    this.#walk(data, ``, activePaths);\n    this.#cleanupPaths(activePaths);\n  }\n\n  #walk(\n    data: Record<string, unknown>,\n    basePath: string,\n    activePaths: Set<string>,\n  ) {\n    for (const [key, value] of Object.entries(data)) {\n      const fullPath = basePath ? `${basePath}.${key}` : key;\n      activePaths.add(fullPath);\n\n      const config = this.#config.get(fullPath);\n\n      if (config !== undefined) {\n        if (config.style !== `hide`) {\n          const row = this.#ensureRow(fullPath, key);\n          this.#updateRenderer(row, fullPath, config.style, value, config.options);\n        }\n        continue;\n      }\n\n      if (typeof value === `object` && value !== null && !Array.isArray(value)) {\n        if (this.#hasDescendantConfig(fullPath)) {\n          this.#walk(value as Record<string, unknown>, fullPath, activePaths);\n        } else if (this.automap) {\n          const row = this.#ensureRow(fullPath, key);\n          this.#renderNestedDisplay(row, value as Record<string, unknown>, true);\n        } else {\n          const row = this.#ensureRow(fullPath, key);\n          this.#renderNestedDisplay(row, value as Record<string, unknown>);\n        }\n      } else {\n        const autoStyle = this.#determineAutoStyle(value);\n        if (autoStyle !== undefined) {\n          const row = this.#ensureRow(fullPath, key);\n          this.#updateRenderer(row, fullPath, autoStyle, value, undefined);\n        } else {\n          const row = this.#ensureRow(fullPath, key);\n          this.#renderText(row, this.formatValue(value));\n        }\n      }\n    }\n  }\n\n  #hasDescendantConfig(path: string): boolean {\n    const prefix = path ? `${path}.` : ``;\n    for (const configPath of this.#config.keys()) {\n      if (configPath.startsWith(prefix))\n        return true;\n    }\n    return false;\n  }\n\n  #determineAutoStyle(value: unknown): RendererStyle | undefined {\n    if (!this.automap)\n      return undefined;\n    if (typeof value === `boolean`)\n      return `led`;\n    if (typeof value === `number`)\n      return `plot`;\n    return undefined;\n  }\n\n  #ensureRow(path: string, label: string): HTMLElement {\n    const id = `path-${path}`;\n    let row = this.renderRoot.querySelector(`#${CSS.escape(id)}`) as HTMLElement | null;\n    if (row !== null)\n      return row;\n\n    row = document.createElement(`div`);\n    row.id = id;\n    row.classList.add(`row`);\n\n    const labelEl = document.createElement(`label`);\n    labelEl.textContent = label;\n    row.append(labelEl);\n\n    this._container.append(row);\n    return row;\n  }\n\n  #updateRenderer(\n    row: HTMLElement,\n    path: string,\n    style: RendererStyle,\n    value: unknown,\n    options?: Record<string, unknown>,\n  ) {\n    const tag = this.#rendererTag(style, value);\n    if (tag === null)\n      return;\n\n    const el = this.#getOrCreateRendererElement(row, tag);\n    if (el === null)\n      return;\n\n    this.#applyValue(el, tag, style, path, value, options);\n  }\n\n  #rendererTag(style: RendererStyle, value: unknown): string | null {\n    switch (style) {\n      case `hide`:\n        return null;\n      case `led`:\n        return `ixfx-led`;\n      case `plot`:\n        if (typeof value === `number`)\n          return `ixfx-plot-single-axis`;\n        if (typeof value === `object` && value !== null)\n          return `ixfx-plot-multi-axis`;\n        return `span`;\n      case `plot-xy`:\n        return `ixfx-plot-xy-axis`;\n      case `plot-heat`:\n      case `plot-histogram`:\n        return `ixfx-plot-histogram`;\n      case `time-elapsed`:\n        return `span`;\n    }\n  }\n\n  #getOrCreateRendererElement(row: HTMLElement, tag: string): HTMLElement | null {\n    const existing = row.querySelector(`:scope > [data-renderer]`) as HTMLElement | null;\n    if (existing !== null) {\n      if (existing.tagName.toLowerCase() === tag)\n        return existing;\n      existing.remove();\n    }\n    const el = document.createElement(tag);\n    el.dataset.renderer = ``;\n    if (tag.startsWith(`ixfx-plot`)) {\n      (el as HTMLElement).style.height = `1.4em`;\n      if (tag === `ixfx-plot-xy-axis`) {\n        (el as HTMLElement).style.width = `1.4em`;\n      } else {\n        (el as HTMLElement).style.width = `5em`;\n      }\n    }\n    row.append(el);\n    return el;\n  }\n\n  #applyValue(\n    el: HTMLElement,\n    _tag: string,\n    style: RendererStyle,\n    path: string,\n    value: unknown,\n    options?: Record<string, unknown>,\n  ) {\n    const prev = this.#previousValues.get(path);\n    const changed = prev !== value;\n\n    switch (style) {\n      case `led`:\n        this.#applyLed(el, path, value, options);\n        break;\n\n      case `plot`:\n        if (typeof value === `number`) {\n          if (changed) {\n            (el as any).add(value);\n          }\n        } else if (typeof value === `object` && value !== null && changed) {\n          if (Array.isArray(value)) {\n            const record: Record<string, number> = {};\n            value.forEach((v: unknown, i: number) => {\n              if (typeof v === `number`)\n                record[String(i)] = v;\n            });\n            if (Object.keys(record).length > 0) {\n              (el as any).addData(record);\n            }\n          } else {\n            (el as any).addData(value as Record<string, number>);\n          }\n        }\n        this.#applyPlotOptions(el, style, options);\n        break;\n\n      case `plot-xy`:\n        if (changed) {\n          this.#applyPlotXy(el, value);\n        }\n        this.#applyPlotOptions(el, style, options);\n        break;\n        // @ts-expect-error fallthrough allowed\n      case `plot-heat`:\n        el.style.setProperty(`--plot-histogram-bar-length`, `1`);\n        // falls through\n      case `plot-histogram`:\n        if (typeof value === `number` && changed) {\n          (el as any).add(value);\n        }\n        this.#applyPlotOptions(el, style, options);\n        break;\n\n      case `time-elapsed`:\n        el.textContent = this.#formatTimeElapsed(value);\n        break;\n    }\n\n    this.#previousValues.set(path, value);\n  }\n\n  #applyLed(el: HTMLElement, path: string, value: unknown, options?: Record<string, unknown>) {\n    const led = el as any;\n\n    if (typeof value === `boolean`) {\n      led.lit = value;\n      led.value = value ? 1 : 0;\n    } else if (typeof value === `number`) {\n      let rs = this.#rangeStreams.get(path);\n      if (rs === undefined) {\n        rs = rangeStream();\n        this.#rangeStreams.set(path, rs);\n      }\n      const range = rs.seen(value);\n      const normalized = range.max !== range.min\n        ? (value - range.min) / (range.max - range.min)\n        : 0.5;\n      led.value = normalized;\n      led.lit = normalized > 0.3;\n    }\n\n    if (options?.color !== undefined)\n      led.color = options.color;\n  }\n\n  #applyPlotXy(el: HTMLElement, value: unknown) {\n    const xy = el as any;\n\n    if (Array.isArray(value) && value.length >= 2) {\n      xy.add(value[0], value[1]);\n    } else if (typeof value === `object` && value !== null) {\n      const obj = value as Record<string, number>;\n      if (`x` in obj && `y` in obj) {\n        xy.add(obj.x, obj.y);\n      } else {\n        const entries = Object.entries(obj).filter(([_, v]) => typeof v === `number`);\n        if (entries.length >= 2) {\n          xy.add(entries[0][1], entries[1][1]);\n        }\n      }\n    }\n  }\n\n  #applyPlotOptions(el: HTMLElement, _style: RendererStyle, options?: Record<string, unknown>) {\n    if (options === undefined)\n      return;\n\n    const target = el as any;\n\n    if (typeof options.capacity === `number`)\n      target.capacity = options.capacity;\n    if (typeof options.resolution === `number`)\n      target.resolution = options.resolution;\n    if (typeof options.drawStyle === `string`)\n      target.drawStyle = options.drawStyle;\n    if (typeof options.orientation === `string`)\n      target.orientation = options.orientation;\n    if (typeof options.layout === `string`)\n      target.layout = options.layout;\n  }\n\n  #formatTimeElapsed(value: unknown): string {\n    let timestamp: number;\n\n    if (value instanceof Date) {\n      timestamp = value.getTime();\n    } else if (typeof value === `number`) {\n      if (value > 1e12) {\n        timestamp = value;\n      } else {\n        timestamp = Date.now();\n      }\n    } else if (typeof value === `string`) {\n      timestamp = new Date(value).getTime();\n    } else {\n      return String(value);\n    }\n\n    if (Number.isNaN(timestamp))\n      return String(value);\n\n    const elapsed = Date.now() - timestamp;\n    const abs = Math.abs(elapsed);\n\n    if (abs < 1000)\n      return `${abs}ms`;\n    if (abs < 60000)\n      return `${(abs / 1000).toFixed(1)}s`;\n    if (abs < 3600000)\n      return `${(abs / 60000).toFixed(1)}mins`;\n    if (abs < 86400000)\n      return `${(abs / 3600000).toFixed(1)}h`;\n    return `${(abs / 86400000).toFixed(1)}d`;\n  }\n\n  #renderText(row: HTMLElement, text: string) {\n    let valueEl = row.querySelector(`:scope > .value`) as HTMLElement | null;\n    if (valueEl === null) {\n      valueEl = document.createElement(`span`);\n      valueEl.classList.add(`value`);\n      row.append(valueEl);\n    }\n    valueEl.textContent = text;\n  }\n\n  #renderNestedDisplay(row: HTMLElement, data: Record<string, unknown>, automapChild = false) {\n    let child = row.querySelector(`:scope > ixfx-data-display`) as DataDisplayComponent | null;\n    if (child === null) {\n      child = document.createElement(`ixfx-data-display`) as DataDisplayComponent;\n      row.append(child);\n    }\n    child.automap = automapChild;\n    child.updateData(data);\n  }\n\n  #cleanupPaths(activePaths: Set<string>) {\n    const rows = this._container.querySelectorAll<HTMLElement>(`[id^=\"path-\"]`);\n    for (const row of rows) {\n      const path = row.id.slice(5);\n      if (!activePaths.has(path)) {\n        row.remove();\n        this.#rangeStreams.delete(path);\n        this.#previousValues.delete(path);\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-data-display': DataDisplayComponent;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-display.js","names":["#config","#previousValues","#rangeStreams","#currentData","#renderAll","#walk","#cleanupPaths","#ensureRow","#updateRenderer","#hasDescendantConfig","#renderNestedDisplay","#determineAutoStyle","#renderText","#rendererTag","#getOrCreateRendererElement","#applyValue","#applyLed","#applyPlotOptions","#applyPlotXy","#formatTimeElapsed","customElement"],"sources":["../src/data-display/data-display.ts"],"sourcesContent":["import { rangeStream, round } from \"@ixfx/numbers\";\n\nimport { css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type RendererStyle\n  = | `led`\n    | `plot`\n    | `plot-xy`\n    | `plot-heat`\n    | `plot-histogram`\n    | `time-elapsed`\n    | `hide`;\n\nexport type ConfigEntry = readonly [\n  path: string,\n  style: RendererStyle,\n  options?: Record<string, unknown>,\n];\n\nexport type FormattingOptions = {\n  readonly precision?: number;\n  readonly roundNumbers?: number;\n};\n\ntype ConfigRecord = {\n  readonly style: RendererStyle;\n  readonly options?: Record<string, unknown>;\n};\n\ntype RangeStream = ReturnType<typeof rangeStream>;\n\n@customElement(`ixfx-data-display`)\nexport class DataDisplayComponent extends LitElement {\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: block;\n      width: fit-content;\n    }\n    section {\n      background: var(--surface-3);\n      color: var(--surface-2-text);\n      border: var(--border);\n      padding: var(--space-m);\n      font-family: var(--font-mono);\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: var(--space-s);\n    }\n    .row {\n      display: contents;\n    }\n    .row > label {\n      font-weight: bold;\n      text-align: end;\n      justify-self: end;\n      padding: 2px 0;\n    }\n    .row > :not(label) {\n      padding: 2px 0;\n    }\n    .row > ixfx-led {\n      align-self: center;\n    }\n    .value {\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    }\n  `];\n\n  @property({ type: Boolean })\n  automap = false;\n\n  previousValue: Record<string, unknown> | undefined;\n  _container: HTMLElement;\n\n  #config = new Map<string, ConfigRecord>();\n  #previousValues = new Map<string, unknown>();\n  #rangeStreams = new Map<string, RangeStream>();\n  #currentData: Record<string, unknown> | undefined;\n\n  constructor() {\n    super();\n    this._container = document.createElement(`section`);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.renderRoot.append(this._container);\n  }\n\n  configure(config: ConfigEntry[]) {\n    this.#config.clear();\n    for (const [path, style, options] of config) {\n      this.#config.set(path, { style, options });\n    }\n    this._container.innerHTML = ``;\n    this.#previousValues.clear();\n    this.#rangeStreams.clear();\n    if (this.#currentData !== undefined) {\n      this.#renderAll(this.#currentData);\n    }\n  }\n\n  formatValue(v: unknown, options: FormattingOptions = {}): string {\n    if (v === null)\n      return `(null)`;\n    if (v === undefined)\n      return `(undefined)`;\n    if (typeof v === `boolean`)\n      return v ? `true` : `false`;\n    if (typeof v === `string`)\n      return `\"${v}\"`;\n    if (typeof v === `number`) {\n      let vAsNumber = v;\n      if (options.roundNumbers !== undefined)\n        vAsNumber = round(options.roundNumbers, v);\n      if (options.precision !== undefined)\n        return vAsNumber.toFixed(options.precision);\n      const formatted = vAsNumber.toFixed(2);\n      return vAsNumber >= 0 ? ` ${formatted}` : formatted;\n    }\n    return JSON.stringify(v);\n  }\n\n  displayData(o: Record<string, unknown> | unknown[]) {\n    if (o === null) {\n      this.innerHTML = ``;\n      return;\n    }\n    this.#renderAll(o as Record<string, unknown>);\n  }\n\n  updateData(value: Record<string, unknown>) {\n    this.#currentData = value;\n    this.#renderAll(value);\n    this.previousValue = value;\n  }\n\n  getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement {\n    const element = this.renderRoot.querySelector(`#${path}`) as HTMLElement | null;\n    if (element !== null)\n      return element;\n\n    const elementCreated = document.createElement(`div`);\n    elementCreated.id = path;\n    if (init)\n      init(elementCreated);\n    this._container.append(elementCreated);\n    return elementCreated;\n  }\n\n  #renderAll(data: Record<string, unknown>) {\n    const activePaths = new Set<string>();\n    this.#walk(data, ``, activePaths);\n    this.#cleanupPaths(activePaths);\n  }\n\n  #walk(\n    data: Record<string, unknown>,\n    basePath: string,\n    activePaths: Set<string>,\n  ) {\n    for (const [key, value] of Object.entries(data)) {\n      const fullPath = basePath ? `${basePath}.${key}` : key;\n      activePaths.add(fullPath);\n\n      const config = this.#config.get(fullPath);\n\n      if (config !== undefined) {\n        if (config.style !== `hide`) {\n          const row = this.#ensureRow(fullPath, key);\n          this.#updateRenderer(row, fullPath, config.style, value, config.options);\n        }\n        continue;\n      }\n\n      if (typeof value === `object` && value !== null && !Array.isArray(value)) {\n        if (this.#hasDescendantConfig(fullPath)) {\n          this.#walk(value as Record<string, unknown>, fullPath, activePaths);\n        } else if (this.automap) {\n          const row = this.#ensureRow(fullPath, key);\n          this.#renderNestedDisplay(row, value as Record<string, unknown>, true);\n        } else {\n          const row = this.#ensureRow(fullPath, key);\n          this.#renderNestedDisplay(row, value as Record<string, unknown>);\n        }\n      } else {\n        const autoStyle = this.#determineAutoStyle(value);\n        if (autoStyle !== undefined) {\n          const row = this.#ensureRow(fullPath, key);\n          this.#updateRenderer(row, fullPath, autoStyle, value, undefined);\n        } else {\n          const row = this.#ensureRow(fullPath, key);\n          this.#renderText(row, this.formatValue(value));\n        }\n      }\n    }\n  }\n\n  #hasDescendantConfig(path: string): boolean {\n    const prefix = path ? `${path}.` : ``;\n    for (const configPath of this.#config.keys()) {\n      if (configPath.startsWith(prefix))\n        return true;\n    }\n    return false;\n  }\n\n  #determineAutoStyle(value: unknown): RendererStyle | undefined {\n    if (!this.automap)\n      return undefined;\n    if (typeof value === `boolean`)\n      return `led`;\n    if (typeof value === `number`)\n      return `plot`;\n    return undefined;\n  }\n\n  #ensureRow(path: string, label: string): HTMLElement {\n    const id = `path-${path}`;\n    let row = this.renderRoot.querySelector(`#${CSS.escape(id)}`) as HTMLElement | null;\n    if (row !== null)\n      return row;\n\n    row = document.createElement(`div`);\n    row.id = id;\n    row.classList.add(`row`);\n\n    const labelEl = document.createElement(`label`);\n    labelEl.textContent = label;\n    row.append(labelEl);\n\n    this._container.append(row);\n    return row;\n  }\n\n  #updateRenderer(\n    row: HTMLElement,\n    path: string,\n    style: RendererStyle,\n    value: unknown,\n    options?: Record<string, unknown>,\n  ) {\n    const tag = this.#rendererTag(style, value);\n    if (tag === null)\n      return;\n\n    const el = this.#getOrCreateRendererElement(row, tag);\n    if (el === null)\n      return;\n\n    this.#applyValue(el, tag, style, path, value, options);\n  }\n\n  #rendererTag(style: RendererStyle, value: unknown): string | null {\n    switch (style) {\n      case `hide`:\n        return null;\n      case `led`:\n        return `ixfx-led`;\n      case `plot`:\n        if (typeof value === `number`)\n          return `ixfx-plot-single-axis`;\n        if (typeof value === `object` && value !== null)\n          return `ixfx-plot-multi-axis`;\n        return `span`;\n      case `plot-xy`:\n        return `ixfx-plot-xy-axis`;\n      case `plot-heat`:\n      case `plot-histogram`:\n        return `ixfx-plot-histogram`;\n      case `time-elapsed`:\n        return `span`;\n    }\n  }\n\n  #getOrCreateRendererElement(row: HTMLElement, tag: string): HTMLElement | null {\n    const existing = row.querySelector(`:scope > [data-renderer]`) as HTMLElement | null;\n    if (existing !== null) {\n      if (existing.tagName.toLowerCase() === tag)\n        return existing;\n      existing.remove();\n    }\n    const el = document.createElement(tag);\n    el.dataset.renderer = ``;\n    if (tag.startsWith(`ixfx-plot`)) {\n      (el as HTMLElement).style.height = `1.4em`;\n      if (tag === `ixfx-plot-xy-axis`) {\n        (el as HTMLElement).style.width = `1.4em`;\n      } else {\n        (el as HTMLElement).style.width = `5em`;\n      }\n    }\n    row.append(el);\n    return el;\n  }\n\n  #applyValue(\n    el: HTMLElement,\n    _tag: string,\n    style: RendererStyle,\n    path: string,\n    value: unknown,\n    options?: Record<string, unknown>,\n  ) {\n    const prev = this.#previousValues.get(path);\n    const changed = prev !== value;\n\n    switch (style) {\n      case `led`:\n        this.#applyLed(el, path, value, options);\n        break;\n\n      case `plot`:\n        if (typeof value === `number`) {\n          if (changed) {\n            (el as any).add(value);\n          }\n        } else if (typeof value === `object` && value !== null && changed) {\n          if (Array.isArray(value)) {\n            const record: Record<string, number> = {};\n            value.forEach((v: unknown, i: number) => {\n              if (typeof v === `number`)\n                record[String(i)] = v;\n            });\n            if (Object.keys(record).length > 0) {\n              (el as any).addData(record);\n            }\n          } else {\n            (el as any).addData(value as Record<string, number>);\n          }\n        }\n        this.#applyPlotOptions(el, style, options);\n        break;\n\n      case `plot-xy`:\n        if (changed) {\n          this.#applyPlotXy(el, value);\n        }\n        this.#applyPlotOptions(el, style, options);\n        break;\n        // @ts-expect-error fallthrough allowed\n      case `plot-heat`:\n        el.style.setProperty(`--plot-histogram-bar-length`, `1`);\n        // falls through\n      case `plot-histogram`:\n        if (typeof value === `number` && changed) {\n          (el as any).add(value);\n        }\n        this.#applyPlotOptions(el, style, options);\n        break;\n\n      case `time-elapsed`:\n        el.textContent = this.#formatTimeElapsed(value);\n        break;\n    }\n\n    this.#previousValues.set(path, value);\n  }\n\n  #applyLed(el: HTMLElement, path: string, value: unknown, options?: Record<string, unknown>) {\n    const led = el as any;\n\n    if (typeof value === `boolean`) {\n      led.lit = value;\n      led.value = value ? 1 : 0;\n    } else if (typeof value === `number`) {\n      let rs = this.#rangeStreams.get(path);\n      if (rs === undefined) {\n        rs = rangeStream();\n        this.#rangeStreams.set(path, rs);\n      }\n      const range = rs.seen(value);\n      const normalized = range.max !== range.min\n        ? (value - range.min) / (range.max - range.min)\n        : 0.5;\n      led.value = normalized;\n      led.lit = normalized > 0.3;\n    }\n\n    if (options?.color !== undefined)\n      led.color = options.color;\n  }\n\n  #applyPlotXy(el: HTMLElement, value: unknown) {\n    const xy = el as any;\n\n    if (Array.isArray(value) && value.length >= 2) {\n      xy.add(value[0], value[1]);\n    } else if (typeof value === `object` && value !== null) {\n      const obj = value as Record<string, number>;\n      if (`x` in obj && `y` in obj) {\n        xy.add(obj.x, obj.y);\n      } else {\n        const entries = Object.entries(obj).filter(([_, v]) => typeof v === `number`);\n        if (entries.length >= 2) {\n          xy.add(entries[0][1], entries[1][1]);\n        }\n      }\n    }\n  }\n\n  #applyPlotOptions(el: HTMLElement, _style: RendererStyle, options?: Record<string, unknown>) {\n    if (options === undefined)\n      return;\n\n    const target = el as any;\n\n    if (typeof options.capacity === `number`)\n      target.capacity = options.capacity;\n    if (typeof options.resolution === `number`)\n      target.resolution = options.resolution;\n    if (typeof options.drawStyle === `string`)\n      target.drawStyle = options.drawStyle;\n    if (typeof options.orientation === `string`)\n      target.orientation = options.orientation;\n    if (typeof options.layout === `string`)\n      target.layout = options.layout;\n  }\n\n  #formatTimeElapsed(value: unknown): string {\n    let timestamp: number;\n\n    if (value instanceof Date) {\n      timestamp = value.getTime();\n    } else if (typeof value === `number`) {\n      if (value > 1e12) {\n        timestamp = value;\n      } else {\n        timestamp = Date.now();\n      }\n    } else if (typeof value === `string`) {\n      timestamp = new Date(value).getTime();\n    } else {\n      return String(value);\n    }\n\n    if (Number.isNaN(timestamp))\n      return String(value);\n\n    const elapsed = Date.now() - timestamp;\n    const abs = Math.abs(elapsed);\n\n    if (abs < 1000)\n      return `${abs}ms`;\n    if (abs < 60000)\n      return `${(abs / 1000).toFixed(1)}s`;\n    if (abs < 3600000)\n      return `${(abs / 60000).toFixed(1)}mins`;\n    if (abs < 86400000)\n      return `${(abs / 3600000).toFixed(1)}h`;\n    return `${(abs / 86400000).toFixed(1)}d`;\n  }\n\n  #renderText(row: HTMLElement, text: string) {\n    let valueEl = row.querySelector(`:scope > .value`) as HTMLElement | null;\n    if (valueEl === null) {\n      valueEl = document.createElement(`span`);\n      valueEl.classList.add(`value`);\n      row.append(valueEl);\n    }\n    valueEl.textContent = text;\n  }\n\n  #renderNestedDisplay(row: HTMLElement, data: Record<string, unknown>, automapChild = false) {\n    let child = row.querySelector(`:scope > ixfx-data-display`) as DataDisplayComponent | null;\n    if (child === null) {\n      child = document.createElement(`ixfx-data-display`) as DataDisplayComponent;\n      row.append(child);\n    }\n    child.automap = automapChild;\n    child.updateData(data);\n  }\n\n  #cleanupPaths(activePaths: Set<string>) {\n    const rows = this._container.querySelectorAll<HTMLElement>(`[id^=\"path-\"]`);\n    for (const row of rows) {\n      const path = row.id.slice(5);\n      if (!activePaths.has(path)) {\n        row.remove();\n        this.#rangeStreams.delete(path);\n        this.#previousValues.delete(path);\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-data-display': DataDisplayComponent;\n  }\n}\n"],"mappings":"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"}

package/dist/{decorate-VRK8rslU.js → decorate-DdjvVHS-.js}

@@ -14,7 +14,7 @@ function safeCustomElement(name) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -24,4 +24,4 @@ function __decorate(decorators, target, key, desc) {
 //#endregion
 export { safeCustomElement as n, __decorate as t };
 
-//# sourceMappingURL=decorate-VRK8rslU.js.map
+//# sourceMappingURL=decorate-DdjvVHS-.js.map

package/dist/{decorate-VRK8rslU.js.map → decorate-DdjvVHS-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"decorate-VRK8rslU.js","names":[],"sources":["../src/util/custom-elements.ts"],"sourcesContent":["type CustomElementCtor = CustomElementConstructor;\n\nfunction getRegistry(): CustomElementRegistry | undefined {\n  if (typeof customElements === `undefined`)\n    return undefined;\n  return customElements;\n}\n\nexport function safeDefine(name: string, ctor: CustomElementCtor): void {\n  const registry = getRegistry();\n  if (!registry)\n    return;\n  const existing = registry.get(name);\n  if (existing === undefined) {\n    registry.define(name, ctor);\n  }\n}\n\nexport function safeCustomElement(name: string) {\n  return (ctor: CustomElementCtor): void => {\n    safeDefine(name, ctor);\n  };\n}\n"],"mappings":";AAEA,SAAS,cAAiD;CACxD,IAAI,OAAO,mBAAmB,aAC5B,OAAO,KAAA;CACT,OAAO;AACT;AAEA,SAAgB,WAAW,MAAc,MAA+B;CACtE,MAAM,WAAW,YAAY;CAC7B,IAAI,CAAC,UACH;CAEF,IADiB,SAAS,IAAI,IACnB,MAAM,KAAA,GACf,SAAS,OAAO,MAAM,IAAI;AAE9B;AAEA,SAAgB,kBAAkB,MAAc;CAC9C,QAAQ,SAAkC;EACxC,WAAW,MAAM,IAAI;CACvB;AACF"}
+{"version":3,"file":"decorate-DdjvVHS-.js","names":[],"sources":["../src/util/custom-elements.ts"],"sourcesContent":["type CustomElementCtor = CustomElementConstructor;\n\nfunction getRegistry(): CustomElementRegistry | undefined {\n  if (typeof customElements === `undefined`)\n    return undefined;\n  return customElements;\n}\n\nexport function safeDefine(name: string, ctor: CustomElementCtor): void {\n  const registry = getRegistry();\n  if (!registry)\n    return;\n  const existing = registry.get(name);\n  if (existing === undefined) {\n    registry.define(name, ctor);\n  }\n}\n\nexport function safeCustomElement(name: string) {\n  return (ctor: CustomElementCtor): void => {\n    safeDefine(name, ctor);\n  };\n}\n"],"mappings":";AAEA,SAAS,cAAiD;CACxD,IAAI,OAAO,mBAAmB,aAC5B,OAAO,KAAA;CACT,OAAO;AACT;AAEA,SAAgB,WAAW,MAAc,MAA+B;CACtE,MAAM,WAAW,YAAY;CAC7B,IAAI,CAAC,UACH;CAEF,IADiB,SAAS,IAAI,IACnB,MAAM,KAAA,GACf,SAAS,OAAO,MAAM,IAAI;AAE9B;AAEA,SAAgB,kBAAkB,MAAc;CAC9C,QAAQ,SAAkC;EACxC,WAAW,MAAM,IAAI;CACvB;AACF"}

package/dist/{defaults-DcE8RQJc.js → defaults-BkWCPJFL.js}

@@ -40,6 +40,11 @@ const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="
 * fill="currentColor" so it inherits CSS color.
 */
 const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
+/**
+* Folder with up arrow. Angled line style for navigating up one level.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
 function registerDefaults() {
 	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
 	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
@@ -47,10 +52,11 @@ function registerDefaults() {
 	registerIcon(`check`, ICON_CHECK);
 	registerIcon(`close`, ICON_CLOSE);
 	registerIcon(`error`, ICON_ERROR);
+	registerIcon(`folder-up`, ICON_FOLDER_UP);
 	registerIcon(`info`, ICON_INFO);
 	registerIcon(`warning`, ICON_WARNING);
 }
 //#endregion
 export { registerDefaults as a, ICON_CLOSE as i, ICON_CHECK as n, ICON_CHEVRON_DOWN as r, ICON_CARET_RIGHT as t };
 
-//# sourceMappingURL=defaults-DcE8RQJc.js.map
+//# sourceMappingURL=defaults-BkWCPJFL.js.map

package/dist/{defaults-DcE8RQJc.js.map → defaults-BkWCPJFL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"defaults-DcE8RQJc.js","names":[],"sources":["../src/icons/defaults.ts"],"sourcesContent":["import { registerIcon } from './registry.js';\n\n/**\n * Chevron pointing down. Used for split-button dropdown toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_DOWN = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"/></svg>`;\n\n/**\n * Caret pointing right. Used for tree-basic expand indicator as a CSS mask.\n * fill=\"black\" is correct for CSS mask-image use (shape only, color comes from background-color).\n */\nexport const ICON_CARET_RIGHT = `<svg viewBox=\"0 0 24 24\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 7l6 5-6 5V7z\"/></svg>`;\n\n/**\n * Checkmark. Useful for menu-check-item or confirmation states.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHECK = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/></svg>`;\n\n/**\n * Close / X icon. Useful for dialogs, notifications, dismissible elements.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CLOSE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/></svg>`;\n\n/**\n * Error / warning icon. Useful for error notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_ERROR = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>`;\n\n/**\n * Info icon. Useful for info notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_INFO = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>`;\n\n/**\n * Warning icon. Useful for warning notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_WARNING = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>`;\n\n/**\n * Chevron pointing right. Used for split-button switcher toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_RIGHT = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"/></svg>`;\n\nexport function registerDefaults(): void {\n  registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);\n  registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);\n  registerIcon(`caret-right`, ICON_CARET_RIGHT);\n  registerIcon(`check`, ICON_CHECK);\n  registerIcon(`close`, ICON_CLOSE);\n  registerIcon(`error`, ICON_ERROR);\n  registerIcon(`info`, ICON_INFO);\n  registerIcon(`warning`, ICON_WARNING);\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB;;;;;AAMjC,MAAa,mBAAmB;;;;;AAMhC,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,YAAY;;;;;AAMzB,MAAa,eAAe;;;;;AAM5B,MAAa,qBAAqB;AAElC,SAAgB,mBAAyB;CACvC,aAAa,gBAAgB,iBAAiB;CAC9C,aAAa,iBAAiB,kBAAkB;CAChD,aAAa,eAAe,gBAAgB;CAC5C,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,QAAQ,SAAS;CAC9B,aAAa,WAAW,YAAY;AACtC"}
+{"version":3,"file":"defaults-BkWCPJFL.js","names":[],"sources":["../src/icons/defaults.ts"],"sourcesContent":["import { registerIcon } from './registry.js';\n\n/**\n * Chevron pointing down. Used for split-button dropdown toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_DOWN = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"/></svg>`;\n\n/**\n * Caret pointing right. Used for tree-basic expand indicator as a CSS mask.\n * fill=\"black\" is correct for CSS mask-image use (shape only, color comes from background-color).\n */\nexport const ICON_CARET_RIGHT = `<svg viewBox=\"0 0 24 24\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 7l6 5-6 5V7z\"/></svg>`;\n\n/**\n * Checkmark. Useful for menu-check-item or confirmation states.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHECK = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/></svg>`;\n\n/**\n * Close / X icon. Useful for dialogs, notifications, dismissible elements.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CLOSE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/></svg>`;\n\n/**\n * Error / warning icon. Useful for error notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_ERROR = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>`;\n\n/**\n * Info icon. Useful for info notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_INFO = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>`;\n\n/**\n * Warning icon. Useful for warning notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_WARNING = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>`;\n\n/**\n * Chevron pointing right. Used for split-button switcher toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_RIGHT = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"/></svg>`;\n\n/**\n * Folder with up arrow. Angled line style for navigating up one level.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_FOLDER_UP = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 4L4 12h5v8h6v-8h5L12 4z\"/></svg>`;\n\nexport function registerDefaults(): void {\n  registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);\n  registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);\n  registerIcon(`caret-right`, ICON_CARET_RIGHT);\n  registerIcon(`check`, ICON_CHECK);\n  registerIcon(`close`, ICON_CLOSE);\n  registerIcon(`error`, ICON_ERROR);\n  registerIcon(`folder-up`, ICON_FOLDER_UP);\n  registerIcon(`info`, ICON_INFO);\n  registerIcon(`warning`, ICON_WARNING);\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB;;;;;AAMjC,MAAa,mBAAmB;;;;;AAMhC,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,YAAY;;;;;AAMzB,MAAa,eAAe;;;;;AAM5B,MAAa,qBAAqB;;;;;AAMlC,MAAa,iBAAiB;AAE9B,SAAgB,mBAAyB;CACvC,aAAa,gBAAgB,iBAAiB;CAC9C,aAAa,iBAAiB,kBAAkB;CAChD,aAAa,eAAe,gBAAgB;CAC5C,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,aAAa,cAAc;CACxC,aAAa,QAAQ,SAAS;CAC9B,aAAa,WAAW,YAAY;AACtC"}

package/dist/editable-label.d.ts

@@ -1,4 +1,5 @@
 import { CSSResult, LitElement, PropertyValues } from "lit";
+
 //#region src/editable-label/editable-label.d.ts
 type EditableMode = `label` | `editor`;
 type EntryMode = `free` | `text` | `number` | `percent`;
@@ -69,7 +70,7 @@ declare global {
   interface HTMLElementTagNameMap {
     'ixfx-editable-label': EditableLabel;
   }
-}
+} //# sourceMappingURL=editable-label.d.ts.map
 //#endregion
 export { DisplayTextLogic, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EntryMode };
 //# sourceMappingURL=editable-label.d.ts.map

package/dist/editable-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable-label.d.ts","names":[],"sources":["../src/editable-label/editable-label.ts"],"mappings":";;KAoCY;KACA;KACA;KAEA;WACD;;KAEC,2BAA2B,YAAY;cAGtC,sBAAsB;EACJ,MAAM;EACmB,WAAW;EACpC;EACe;EAChC;;EAG6B;;;;;;;;EASM,kBAAkB;;EAGV;;EAGG;;EAG1B,aAAa;;EAGb,aAAa;YAE1B;gBAEL,cAAc;;YAKlB;EAED;EAMA;YAQC;YACA;YACA;YACA;YAEA;UAOF;UAWA;YAOE;YAUA;;YAUA;YAWA;YAMA;YAMA;YAKA,iBAAkB,GAAG;YAgBrB,qBAAsB,GAAG;YAQzB;YAeA;YAMA;YAsBA;YAMA;YAcA;YAoBA,gBAAgB;UASlB;EAWC,wBAAM;EAgBN,QAAQ,SAAS;SAcV,QAAQ;;QA8FlB;YACI;IACR,uBAAuB"}
+{"version":3,"file":"editable-label.d.ts","names":[],"sources":["../src/editable-label/editable-label.ts"],"mappings":";;;KAoCY,YAAA;AAAA,KACA,SAAA;AAAA,KACA,gBAAA;AAAA,KAEA,yBAAA;EAAA,SACD,KAAK;AAAA;AAAA,KAEJ,wBAAA,GAA2B,WAAW,CAAC,yBAAA;AAAA,cAGtC,aAAA,SAAsB,UAAA;EACJ,IAAA,EAAM,YAAA;EACmB,SAAA,EAAW,SAAA;EACpC,KAAA;EACe,QAAA;EAChC,WAAA;EAH0C;EAMb,WAAA;EALZ;;;;;;;EAckB,gBAAA,EAAkB,gBAAA;EASjC;EANuB,WAAA;EASvB;EAN0B,cAAA;EAQvC;EALa,SAAA,IAAa,KAAA;EAOjB;EAJI,SAAA,IAAa,KAAA;EAAA,UAE1B,QAAA;EAAA,cAEL,UAAA,IAAc,WAAA;EAqBlB;EAAA,UAhBA,UAAA;EAED,iBAAA;EAMA,oBAAA;EAAA,UAQC,SAAA;EAAA,UACA,sBAAA;EAAA,UACA,eAAA;EAAA,UACA,sBAAA;EAAA,UAEA,oBAAA;EAAA,QAOF,aAAA;EAAA,QAWA,aAAA;EAAA,UAOE,0BAAA;EAAA,UAUA,qBAAA;EAsCA;EAAA,UA5BA,kBAAA;EAAA,UAWA,YAAA;EAAA,UAMA,YAAA;EAAA,UAMA,WAAA;EAAA,UAKA,cAAA,GAAkB,CAAA,EAAG,aAAA;EAAA,UAgBrB,kBAAA,GAAsB,CAAA,EAAG,UAAA;EAAA,UAQzB,YAAA;EAAA,UAeA,UAAA;EAAA,UAMA,UAAA;EAAA,UAsBA,WAAA;EAAA,UAMA,eAAA;EAAA,UAcA,qBAAA;EAAA,UAoBA,eAAA,CAAgB,IAAA;EAAA,QASlB,iBAAA;EAWC,MAAA,kBAAM,cAAA;EAgBN,OAAA,CAAQ,OAAA,EAAS,cAAA;EAAA,OAcV,MAAA,EAAQ,SAAA;AAAA;AAAA,QA8FlB,MAAA;EAAA,UACI,qBAAA;IACR,qBAAA,EAAuB,aAAa;EAAA;AAAA"}

package/dist/editable-label.js

@@ -1,5 +1,5 @@
-import { t as themeFallbacks } from "./fallbacks-DPgPEqo8.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/editable-label/editable-label.ts

package/dist/editable-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-label.js","names":["customElement"],"sources":["../src/editable-label/editable-label.ts"],"sourcesContent":["/**\n * <ixfx-editable-label> — inline editable text label.\n *\n * Two display modes:\n *   label  (default) — renders as plain text until clicked, then becomes an editable box.\n *   editor           — always renders as an editable box; becomes active on focus/click.\n *\n * Entry modes (filter characters as typed):\n *   free    (default) — no restrictions\n *   text              — alphabetical characters and spaces only\n *   number            — digits, decimal point, minus sign\n *   percent           — digits, decimal point, percent sign\n *\n * Properties (not attributes):\n *   validator  (value: string) => boolean   — override commit validation; default uses entry-mode rules\n *   formatter  (value: string) => string    — transform committed value for display\n *\n * Events:\n *   input  — CustomEvent<{ value: string }>, bubbles + composed; fired as value changes during editing\n *   change — CustomEvent<{ value: string }>, bubbles + composed; fired when value is committed\n *\n * CSS variables:\n *   --label-font-size    defaults to var(--text-m, 12px)\n *   --label-font-family  defaults to var(--font-family, system-ui, sans-serif)\n *   --label-color        defaults to var(--surface-2-text)\n *   --label-muted-color  placeholder colour, defaults to var(--surface-muted-text)\n *   --label-padding      defaults to var(--space-xs, 3px) var(--space-s, 4px)\n *   --label-radius       defaults to var(--radius-s, 3px)\n *   --label-align        text alignment: left | center (default) | right\n */\nimport type { CSSResult, PropertyValues } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type EditableMode = `label` | `editor`;\nexport type EntryMode = `free` | `text` | `number` | `percent`;\nexport type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;\n\nexport type EditableLabelChangeDetail = {\n  readonly value: string;\n};\nexport type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;\n\n@customElement(`ixfx-editable-label`)\nexport class EditableLabel extends LitElement {\n  @property({ reflect: true }) mode: EditableMode = `label`;\n  @property({ attribute: `entry-mode`, reflect: true }) entryMode: EntryMode = `free`;\n  @property({ reflect: true }) value = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property() placeholder = ``;\n\n  /** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */\n  @property({ attribute: `display-text` }) displayText?: string;\n\n  /**\n   * Controls when displayText is shown:\n   *  - 'hidden' (default): never use displayText\n   *  - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay\n   *  - 'override': always show displayText, even when editing\n   *  - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay\n   */\n  @property({ attribute: `display-text-logic` }) displayTextLogic: DisplayTextLogic = `hidden`;\n\n  /** Delay before showing value in transient mode (ms). Default: 50 */\n  @property({ type: Number, attribute: `appear-delay` }) appearDelay = 50;\n\n  /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */\n  @property({ type: Number, attribute: `disappear-delay` }) disappearDelay = 1000;\n\n  /** Override commit validation. Return true to accept, false to reject (reverts). */\n  @property({ attribute: false }) validator?: (value: string) => boolean;\n\n  /** Transform the committed value for display. Does not affect the stored value. */\n  @property({ attribute: false }) formatter?: (value: string) => string;\n\n  @state() protected _editing = false;\n\n  protected get _contentEl(): HTMLElement | undefined {\n    return this.renderRoot?.querySelector<HTMLElement>(`.content`) ?? undefined;\n  }\n\n  /** Snapshot of value taken when editing begins; restored on cancel. */\n  protected _prevValue = ``;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`mouseenter`, this._onMouseEnter);\n    this.addEventListener(`mouseleave`, this._onMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`mouseenter`, this._onMouseEnter);\n    this.removeEventListener(`mouseleave`, this._onMouseLeave);\n    this._clearTransientTimer();\n  }\n\n  // ── Transient display state ─────────────────────────────────────────────────\n  protected _hovering = false;\n  protected _transientShowingValue = false;\n  protected _transientTimer: number | undefined = undefined;\n  protected _showModeWaitingToHide = false;\n\n  protected _clearTransientTimer(): void {\n    if (this._transientTimer !== undefined) {\n      clearTimeout(this._transientTimer);\n      this._transientTimer = undefined;\n    }\n  }\n\n  private _onMouseEnter = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = true;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  private _onMouseLeave = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = false;\n    this._startTransientRevertTimer();\n  };\n\n  protected _startTransientRevertTimer(): void {\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      if (!this._hovering && this.displayTextLogic === `transient`) {\n        this._transientShowingValue = false;\n        this._requestDisplayUpdate();\n      }\n    }, this.disappearDelay);\n  }\n\n  protected _requestDisplayUpdate(): void {\n    if (!this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this._getDisplayText();\n      }\n    }\n  }\n\n  /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */\n  protected _onUserInteraction(): void {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._startTransientRevertTimer();\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  protected _handleClick = (): void => {\n    if (this.mode === `label` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleFocus = (): void => {\n    if (this.mode === `editor` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleBlur = (): void => {\n    if (this._editing)\n      this._tryCommit();\n  };\n\n  protected _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._editing)\n      return;\n    if (e.key === `Enter`) {\n      e.preventDefault();\n      this._tryCommit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    } else if (e.key === `Escape`) {\n      e.preventDefault();\n      this._cancelEdit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    }\n  };\n\n  protected _handleBeforeInput = (e: InputEvent): void => {\n    if (e.inputType !== `insertText` || !e.data)\n      return;\n    if (!this._isAllowedInput(e.data)) {\n      e.preventDefault();\n    }\n  };\n\n  protected _handleInput = (): void => {\n    if (!this._editing)\n      return;\n\n    const raw = this._contentEl?.textContent?.trim() ?? ``;\n\n    this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`input`, {\n      detail: { value: raw },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  // ── Core logic ───────────────────────────────────────────────────────────\n\n  protected _beginEdit(): void {\n    this._prevValue = this.value;\n    this._editing = true;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _tryCommit(): void {\n    let raw = this._contentEl?.textContent?.trim() ?? ``;\n    if (this.entryMode === `percent`)\n      raw = raw.replaceAll(`%`, ``).trim();\n    const validate = this.validator ?? this._defaultValidator.bind(this);\n    if (validate(raw)) {\n      this.removeAttribute(`invalid`);\n      const prev = this.value;\n      this.value = raw;\n      this._editing = false;\n      if (raw !== prev) {\n        this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n          detail: { value: raw },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    } else {\n      this._cancelEdit();\n    }\n  }\n\n  protected _cancelEdit(): void {\n    this.value = this._prevValue;\n    this._editing = false;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _getDisplayText(): string {\n    const useDisplayText = this._shouldUseDisplayText();\n    if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {\n      return this.displayText;\n    }\n    if (!this.value)\n      return ``;\n    if (this.formatter)\n      return this.formatter(this.value);\n    if (this.entryMode === `percent`)\n      return `${this.value}%`;\n    return this.value;\n  }\n\n  protected _shouldUseDisplayText(): boolean {\n    if (this.displayTextLogic === `hidden`)\n      return false;\n    if (this.displayTextLogic === `override`)\n      return true;\n    if (this.displayTextLogic === `show`) {\n      if (this._editing)\n        return false;\n      return this._showModeWaitingToHide;\n    }\n    if (this.displayTextLogic === `transient`) {\n      if (this._editing)\n        return false;\n      if (this._transientShowingValue)\n        return false;\n      return true;\n    }\n    return false;\n  }\n\n  protected _isAllowedInput(char: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]$/i.test(char);\n      case `number`: return /^[\\d.\\-]$/.test(char);\n      case `percent`: return /^[\\d.%]$/.test(char);\n      default: return true;\n    }\n  }\n\n  private _defaultValidator(value: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]*$/i.test(value);\n      case `number`: return value === `` || /^-?\\d*(?:\\.\\d*)?$/.test(value);\n      case `percent`: return value === `` || /^\\d*(?:\\.\\d*)?$/.test(value);\n      default: return true;\n    } // asdf\n  }\n\n  // ── Render ───────────────────────────────────────────────────────────────\n\n  override render() {\n    const isEditor = this.mode === `editor`;\n    return html`<div\n      class=\"content\"\n      contenteditable=${this._editing ? `plaintext-only` : `false`}\n      data-placeholder=${this.placeholder}\n      tabindex=${isEditor && !this._editing ? `0` : nothing}\n      @click=${this._handleClick}\n      @focus=${this._handleFocus}\n      @blur=${this._handleBlur}\n      @keydown=${this._handleKeydown}\n      @beforeinput=${this._handleBeforeInput}\n      @input=${this._handleInput}\n    >${this._editing ? nothing : this._getDisplayText()}</div>`;\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has(`_editing`) && this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this.value;\n        el.focus();\n        _selectAll(el);\n      }\n    }\n  }\n\n  // ── Styles ───────────────────────────────────────────────────────────────\n\n  static override styles: CSSResult[] = [themeFallbacks, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n\n      --_font-size:   var(--label-font-size,   var(--text-m,        12px));\n      --_font-family: var(--label-font-family, var(--font-family,   system-ui, sans-serif));\n      --_color:       var(--label-color,       var(--surface-2-text));\n      --_muted:       var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));\n      --_padding:     var(--label-padding,     var(--space-xs, 3px) var(--space-s, 4px));\n      --_radius:      var(--label-radius,      var(--radius-s, 3px));\n      --_align:       var(--label-align,       center);\n      --_min-width:   var(--label-min-width,   1ch);\n    }\n\n    .content {\n      box-sizing: border-box;\n      width: 100%;\n      text-align: var(--_align);\n      outline: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: var(--_min-width);\n      font-family: var(--_font-family);\n      font-size: var(--_font-size);\n      color: var(--_color);\n      padding: var(--_padding);\n      border: 1px solid transparent;\n      border-radius: var(--_radius);\n      cursor: pointer;\n      transition:\n        background var(--transition, 0.15s ease-out),\n        border-color var(--transition, 0.15s ease-out);\n    }\n\n    /* Remove overflow clipping while editing so the cursor is never hidden */\n    .content[contenteditable=\"plaintext-only\"] {\n      overflow: visible;\n      text-overflow: clip;\n    }\n\n    /* ── Label mode ── */\n    :host([mode=\"label\"]) .content {\n      background: transparent;\n    }\n\n    :host([mode=\"label\"]) .content[contenteditable=\"plaintext-only\"] {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n      cursor: text;\n    }\n\n    /* ── Editor mode — always shows box ── */\n    :host([mode=\"editor\"]) .content {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n    }\n\n    :host([mode=\"editor\"]) .content[contenteditable=\"plaintext-only\"] {\n      border-color: var(--accent, oklch(60% 0.15 140));\n      cursor: text;\n    }\n\n    /* ── Placeholder ── */\n    .content:empty::before {\n      content: attr(data-placeholder);\n      color: var(--_muted);\n      pointer-events: none;\n    }\n\n    /* ── Invalid ── */\n    :host([invalid]) .content {\n      border-color: var(--error, oklch(60% 0.15 20));\n    }\n\n    /* ── Disabled ── */\n    :host([disabled]) .content {\n      opacity: var(--disabled-opacity, 0.5);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `];\n}\n\nfunction _selectAll(el: HTMLElement): void {\n  const range = document.createRange();\n  range.selectNodeContents(el);\n  const sel = window.getSelection();\n  sel?.removeAllRanges();\n  sel?.addRange(range);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-editable-label': EditableLabel;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"editable-label.js","names":["customElement"],"sources":["../src/editable-label/editable-label.ts"],"sourcesContent":["/**\n * <ixfx-editable-label> — inline editable text label.\n *\n * Two display modes:\n *   label  (default) — renders as plain text until clicked, then becomes an editable box.\n *   editor           — always renders as an editable box; becomes active on focus/click.\n *\n * Entry modes (filter characters as typed):\n *   free    (default) — no restrictions\n *   text              — alphabetical characters and spaces only\n *   number            — digits, decimal point, minus sign\n *   percent           — digits, decimal point, percent sign\n *\n * Properties (not attributes):\n *   validator  (value: string) => boolean   — override commit validation; default uses entry-mode rules\n *   formatter  (value: string) => string    — transform committed value for display\n *\n * Events:\n *   input  — CustomEvent<{ value: string }>, bubbles + composed; fired as value changes during editing\n *   change — CustomEvent<{ value: string }>, bubbles + composed; fired when value is committed\n *\n * CSS variables:\n *   --label-font-size    defaults to var(--text-m, 12px)\n *   --label-font-family  defaults to var(--font-family, system-ui, sans-serif)\n *   --label-color        defaults to var(--surface-2-text)\n *   --label-muted-color  placeholder colour, defaults to var(--surface-muted-text)\n *   --label-padding      defaults to var(--space-xs, 3px) var(--space-s, 4px)\n *   --label-radius       defaults to var(--radius-s, 3px)\n *   --label-align        text alignment: left | center (default) | right\n */\nimport type { CSSResult, PropertyValues } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type EditableMode = `label` | `editor`;\nexport type EntryMode = `free` | `text` | `number` | `percent`;\nexport type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;\n\nexport type EditableLabelChangeDetail = {\n  readonly value: string;\n};\nexport type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;\n\n@customElement(`ixfx-editable-label`)\nexport class EditableLabel extends LitElement {\n  @property({ reflect: true }) mode: EditableMode = `label`;\n  @property({ attribute: `entry-mode`, reflect: true }) entryMode: EntryMode = `free`;\n  @property({ reflect: true }) value = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property() placeholder = ``;\n\n  /** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */\n  @property({ attribute: `display-text` }) displayText?: string;\n\n  /**\n   * Controls when displayText is shown:\n   *  - 'hidden' (default): never use displayText\n   *  - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay\n   *  - 'override': always show displayText, even when editing\n   *  - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay\n   */\n  @property({ attribute: `display-text-logic` }) displayTextLogic: DisplayTextLogic = `hidden`;\n\n  /** Delay before showing value in transient mode (ms). Default: 50 */\n  @property({ type: Number, attribute: `appear-delay` }) appearDelay = 50;\n\n  /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */\n  @property({ type: Number, attribute: `disappear-delay` }) disappearDelay = 1000;\n\n  /** Override commit validation. Return true to accept, false to reject (reverts). */\n  @property({ attribute: false }) validator?: (value: string) => boolean;\n\n  /** Transform the committed value for display. Does not affect the stored value. */\n  @property({ attribute: false }) formatter?: (value: string) => string;\n\n  @state() protected _editing = false;\n\n  protected get _contentEl(): HTMLElement | undefined {\n    return this.renderRoot?.querySelector<HTMLElement>(`.content`) ?? undefined;\n  }\n\n  /** Snapshot of value taken when editing begins; restored on cancel. */\n  protected _prevValue = ``;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`mouseenter`, this._onMouseEnter);\n    this.addEventListener(`mouseleave`, this._onMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`mouseenter`, this._onMouseEnter);\n    this.removeEventListener(`mouseleave`, this._onMouseLeave);\n    this._clearTransientTimer();\n  }\n\n  // ── Transient display state ─────────────────────────────────────────────────\n  protected _hovering = false;\n  protected _transientShowingValue = false;\n  protected _transientTimer: number | undefined = undefined;\n  protected _showModeWaitingToHide = false;\n\n  protected _clearTransientTimer(): void {\n    if (this._transientTimer !== undefined) {\n      clearTimeout(this._transientTimer);\n      this._transientTimer = undefined;\n    }\n  }\n\n  private _onMouseEnter = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = true;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  private _onMouseLeave = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = false;\n    this._startTransientRevertTimer();\n  };\n\n  protected _startTransientRevertTimer(): void {\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      if (!this._hovering && this.displayTextLogic === `transient`) {\n        this._transientShowingValue = false;\n        this._requestDisplayUpdate();\n      }\n    }, this.disappearDelay);\n  }\n\n  protected _requestDisplayUpdate(): void {\n    if (!this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this._getDisplayText();\n      }\n    }\n  }\n\n  /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */\n  protected _onUserInteraction(): void {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._startTransientRevertTimer();\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  protected _handleClick = (): void => {\n    if (this.mode === `label` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleFocus = (): void => {\n    if (this.mode === `editor` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleBlur = (): void => {\n    if (this._editing)\n      this._tryCommit();\n  };\n\n  protected _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._editing)\n      return;\n    if (e.key === `Enter`) {\n      e.preventDefault();\n      this._tryCommit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    } else if (e.key === `Escape`) {\n      e.preventDefault();\n      this._cancelEdit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    }\n  };\n\n  protected _handleBeforeInput = (e: InputEvent): void => {\n    if (e.inputType !== `insertText` || !e.data)\n      return;\n    if (!this._isAllowedInput(e.data)) {\n      e.preventDefault();\n    }\n  };\n\n  protected _handleInput = (): void => {\n    if (!this._editing)\n      return;\n\n    const raw = this._contentEl?.textContent?.trim() ?? ``;\n\n    this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`input`, {\n      detail: { value: raw },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  // ── Core logic ───────────────────────────────────────────────────────────\n\n  protected _beginEdit(): void {\n    this._prevValue = this.value;\n    this._editing = true;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _tryCommit(): void {\n    let raw = this._contentEl?.textContent?.trim() ?? ``;\n    if (this.entryMode === `percent`)\n      raw = raw.replaceAll(`%`, ``).trim();\n    const validate = this.validator ?? this._defaultValidator.bind(this);\n    if (validate(raw)) {\n      this.removeAttribute(`invalid`);\n      const prev = this.value;\n      this.value = raw;\n      this._editing = false;\n      if (raw !== prev) {\n        this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n          detail: { value: raw },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    } else {\n      this._cancelEdit();\n    }\n  }\n\n  protected _cancelEdit(): void {\n    this.value = this._prevValue;\n    this._editing = false;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _getDisplayText(): string {\n    const useDisplayText = this._shouldUseDisplayText();\n    if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {\n      return this.displayText;\n    }\n    if (!this.value)\n      return ``;\n    if (this.formatter)\n      return this.formatter(this.value);\n    if (this.entryMode === `percent`)\n      return `${this.value}%`;\n    return this.value;\n  }\n\n  protected _shouldUseDisplayText(): boolean {\n    if (this.displayTextLogic === `hidden`)\n      return false;\n    if (this.displayTextLogic === `override`)\n      return true;\n    if (this.displayTextLogic === `show`) {\n      if (this._editing)\n        return false;\n      return this._showModeWaitingToHide;\n    }\n    if (this.displayTextLogic === `transient`) {\n      if (this._editing)\n        return false;\n      if (this._transientShowingValue)\n        return false;\n      return true;\n    }\n    return false;\n  }\n\n  protected _isAllowedInput(char: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]$/i.test(char);\n      case `number`: return /^[\\d.\\-]$/.test(char);\n      case `percent`: return /^[\\d.%]$/.test(char);\n      default: return true;\n    }\n  }\n\n  private _defaultValidator(value: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]*$/i.test(value);\n      case `number`: return value === `` || /^-?\\d*(?:\\.\\d*)?$/.test(value);\n      case `percent`: return value === `` || /^\\d*(?:\\.\\d*)?$/.test(value);\n      default: return true;\n    } // asdf\n  }\n\n  // ── Render ───────────────────────────────────────────────────────────────\n\n  override render() {\n    const isEditor = this.mode === `editor`;\n    return html`<div\n      class=\"content\"\n      contenteditable=${this._editing ? `plaintext-only` : `false`}\n      data-placeholder=${this.placeholder}\n      tabindex=${isEditor && !this._editing ? `0` : nothing}\n      @click=${this._handleClick}\n      @focus=${this._handleFocus}\n      @blur=${this._handleBlur}\n      @keydown=${this._handleKeydown}\n      @beforeinput=${this._handleBeforeInput}\n      @input=${this._handleInput}\n    >${this._editing ? nothing : this._getDisplayText()}</div>`;\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has(`_editing`) && this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this.value;\n        el.focus();\n        _selectAll(el);\n      }\n    }\n  }\n\n  // ── Styles ───────────────────────────────────────────────────────────────\n\n  static override styles: CSSResult[] = [themeFallbacks, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n\n      --_font-size:   var(--label-font-size,   var(--text-m,        12px));\n      --_font-family: var(--label-font-family, var(--font-family,   system-ui, sans-serif));\n      --_color:       var(--label-color,       var(--surface-2-text));\n      --_muted:       var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));\n      --_padding:     var(--label-padding,     var(--space-xs, 3px) var(--space-s, 4px));\n      --_radius:      var(--label-radius,      var(--radius-s, 3px));\n      --_align:       var(--label-align,       center);\n      --_min-width:   var(--label-min-width,   1ch);\n    }\n\n    .content {\n      box-sizing: border-box;\n      width: 100%;\n      text-align: var(--_align);\n      outline: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: var(--_min-width);\n      font-family: var(--_font-family);\n      font-size: var(--_font-size);\n      color: var(--_color);\n      padding: var(--_padding);\n      border: 1px solid transparent;\n      border-radius: var(--_radius);\n      cursor: pointer;\n      transition:\n        background var(--transition, 0.15s ease-out),\n        border-color var(--transition, 0.15s ease-out);\n    }\n\n    /* Remove overflow clipping while editing so the cursor is never hidden */\n    .content[contenteditable=\"plaintext-only\"] {\n      overflow: visible;\n      text-overflow: clip;\n    }\n\n    /* ── Label mode ── */\n    :host([mode=\"label\"]) .content {\n      background: transparent;\n    }\n\n    :host([mode=\"label\"]) .content[contenteditable=\"plaintext-only\"] {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n      cursor: text;\n    }\n\n    /* ── Editor mode — always shows box ── */\n    :host([mode=\"editor\"]) .content {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n    }\n\n    :host([mode=\"editor\"]) .content[contenteditable=\"plaintext-only\"] {\n      border-color: var(--accent, oklch(60% 0.15 140));\n      cursor: text;\n    }\n\n    /* ── Placeholder ── */\n    .content:empty::before {\n      content: attr(data-placeholder);\n      color: var(--_muted);\n      pointer-events: none;\n    }\n\n    /* ── Invalid ── */\n    :host([invalid]) .content {\n      border-color: var(--error, oklch(60% 0.15 20));\n    }\n\n    /* ── Disabled ── */\n    :host([disabled]) .content {\n      opacity: var(--disabled-opacity, 0.5);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `];\n}\n\nfunction _selectAll(el: HTMLElement): void {\n  const range = document.createRange();\n  range.selectNodeContents(el);\n  const sel = window.getSelection();\n  sel?.removeAllRanges();\n  sel?.addRange(range);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-editable-label': EditableLabel;\n  }\n}\n"],"mappings":"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"}