@ixfx/components 0.8.1 → 0.8.3

package/dist/timeline-THyvH8xy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-THyvH8xy.js","names":["#host","#config","#onTrackSelect","#bpm","#updateFormatLabel","#timeSignatureNumerator","#timeSignatureDenominator","#dragging","#startScreenY","#startHeight","#fireResizeEvent","#isInResizeZone","#pointerId","#resetDrag","#onPointerMove","#onPointerDown","#onPointerUp","#onPointerCancel","customElement","#hasInitializedZoom","#initZoomToFit","#initVerticalZoomToFit","#recomputeTrackLayout","#deriveViewRange","#deriveVerticalZoom","#syncVCanvas","#invalidateCanvas","#cssVarsCache","#getViewportWidth","#vcanvas","#axisHeight","#minPpu","#applyTrackResize","#tabWidth","#getTotalBaseHeight","#getViewportHeight","#getLargestBaseTrackHeight","#getSmallestBaseTrackHeight","#vScrollOffset","#fireSelectionChange","#pendingVerticalZoomToFit","#drawCallback","#onScrollVirtual","#cleanupInteractions","#resizeObserver","#onResize","#syncVCanvasVertical","#positionTabs","#syncVerticalScroll","#prevTickledId","#onVAxisPointerDown","#onVAxisPointerMove","#onVAxisPointerUp","#onTrackResizeMove","#onTrackResizeEnd","#onVZoomInput","#onHZoomInput","#syncVCanvasScroll","customElement"],"sources":["../src/timeline/timeline-controller.ts","../src/timeline/timeline-draw.ts","../src/timeline/timeline-interactions.ts","../src/timeline/timeline-styles.ts","../src/timeline/timeline-track-tabs.ts","../src/timeline/timeline-element.ts"],"sourcesContent":["import type { GridResolution, TimelineEvent, TimelineTrackSelectDetail, UserScale, ViewRange } from './types.js';\n\n/**\n * Configuration for the TimelineController external adapter.\n */\nexport type TimelineControllerConfig = {\n  readonly logicalMin: number;\n  readonly logicalMax: number;\n  readonly labelFormatter?: (value: number) => string;\n  readonly gridResolver?: (viewRange: ViewRange, userScale: UserScale) => GridResolution;\n};\n\n/**\n * Minimal interface the controller expects from the timeline element.\n * Avoids coupling to the concrete element class.\n */\ntype TimelineHost = {\n  formatLabel: (v: number) => string;\n  setViewRange: (r: ViewRange) => void;\n  min: number;\n  max: number;\n  userScale: string;\n  getTrackEvents: (trackKey: string) => TimelineEvent[];\n  get selectedIds(): readonly string[];\n  set selectedIds(ids: readonly string[]);\n  addEventListener: (type: string, listener: EventListener) => void;\n  removeEventListener: (type: string, listener: EventListener) => void;\n};\n\n/**\n * External adapter class that can configure a timeline element\n * with musical time, custom label formatting, etc.\n *\n * The controller has no import of any timeline element type.\n * Users create a controller, pass it the component instance,\n * and the controller calls the component's public API.\n */\nexport class TimelineController {\n  #host: TimelineHost;\n  #config: TimelineControllerConfig;\n  #bpm = 120;\n  #timeSignatureNumerator = 4;\n  #timeSignatureDenominator = 4;\n\n  constructor(timeline: TimelineHost, config: TimelineControllerConfig) {\n    this.#host = timeline;\n    this.#config = config;\n\n    // Apply initial configuration\n    timeline.min = config.logicalMin;\n    timeline.max = config.logicalMax;\n\n    if (config.labelFormatter) {\n      timeline.formatLabel = config.labelFormatter;\n    }\n\n    timeline.addEventListener(`track-select`, this.#onTrackSelect as EventListener);\n  }\n\n  /** Update the tempo (BPM) for musical time calculations. */\n  setTempo(bpm: number): void {\n    this.#bpm = bpm;\n    this.#updateFormatLabel();\n  }\n\n  /** Update the time signature for musical time calculations. */\n  setTimeSignature(numerator: number, denominator: number): void {\n    this.#timeSignatureNumerator = numerator;\n    this.#timeSignatureDenominator = denominator;\n    this.#updateFormatLabel();\n  }\n\n  /** Set the visible view range on the timeline. */\n  setViewRange(range: ViewRange): void {\n    this.#host.setViewRange(range);\n  }\n\n  /** Clean up any resources held by the controller. */\n  dispose(): void {\n    this.#host.removeEventListener(`track-select`, this.#onTrackSelect as EventListener);\n  }\n\n  #onTrackSelect = (e: Event): void => {\n    const detail = (e as CustomEvent<TimelineTrackSelectDetail>).detail;\n    const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map(e => e.id);\n\n    if (detail.shiftKey) {\n      const current = new Set(this.#host.selectedIds);\n      for (const id of trackEventIds) {\n        if (current.has(id)) {\n          current.delete(id);\n        } else {\n          current.add(id);\n        }\n      }\n      this.#host.selectedIds = [...current];\n    } else {\n      this.#host.selectedIds = trackEventIds;\n    }\n  };\n\n  #updateFormatLabel(): void {\n    if (this.#config.labelFormatter) {\n      // User provided a custom formatter — don't override\n      return;\n    }\n\n    const _bpm = this.#bpm;\n    const num = this.#timeSignatureNumerator;\n\n    // Musical time formatter: convert logical units to bars:beats\n    this.#host.formatLabel = (v: number) => {\n      const beatsPerBar = num;\n      const totalBeats = v; // Assume 1 logical unit = 1 beat\n      const bar = Math.floor(totalBeats / beatsPerBar) + 1;\n      const beat = Math.floor(totalBeats % beatsPerBar) + 1;\n      return `${bar}.${beat}`;\n    };\n  }\n}\n","import type { DragTarget, GridMode, GridResolution, TimelineEvent, TrackLayout, UserScale, ViewRange } from './types.js';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport type CssVars = Record<string, string>;\n\nexport type Rect = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n};\n\n// ── Grid resolution ───────────────────────────────────────────────────\n\nconst NICE_STEPS = [1, 2, 5, 10];\n\n/**\n * Dispatch to adaptive or fixed grid mode.\n */\nexport function resolveGrid(viewRange: ViewRange, userScale: UserScale, viewportWidth: number, mode: GridMode = `adaptive`, fixedMinorStep?: number, ppu?: number): GridResolution {\n  if (mode === `fixed` && fixedMinorStep !== undefined && ppu !== undefined) {\n    return resolveFixedGrid(fixedMinorStep, ppu);\n  }\n  return resolveAdaptiveGrid(viewRange, userScale, viewportWidth);\n}\n\n/**\n * Compute a nice major/minor grid resolution for the current view.\n * Uses a 1-2-5-10 \"nice number\" algorithm.\n */\nfunction resolveAdaptiveGrid(viewRange: ViewRange, userScale: UserScale, viewportWidth: number): GridResolution {\n  const span = viewRange.max - viewRange.min;\n  if (span <= 0 || viewportWidth <= 0) {\n    return { majorStep: 100, minorDivisions: 4, minorStep: 25 };\n  }\n\n  // Target ~60-120px between major gridlines\n  const densityMultiplier = scaleMultiplier(userScale);\n  const targetPx = 80 * densityMultiplier;\n  const targetMajors = Math.max(2, Math.floor(viewportWidth / targetPx));\n  const rawStep = span / targetMajors;\n\n  // Find nearest \"nice\" step\n  const magnitude = 10 ** Math.floor(Math.log10(rawStep));\n  let bestStep = magnitude;\n  for (const n of NICE_STEPS) {\n    const candidate = n * magnitude;\n    if (candidate >= rawStep * 0.8) {\n      bestStep = candidate;\n      break;\n    }\n  }\n\n  // Minor divisions: 4 for most, 5 for steps of 5/10\n  const normalised = bestStep / magnitude;\n  const minorDivisions = normalised === 5 || normalised === 10 ? 5 : 4;\n  const minorStep = bestStep / minorDivisions;\n\n  return { majorStep: bestStep, minorDivisions, minorStep };\n}\n\n/**\n * Fixed grid: user specifies a base minor step in logical units.\n * If the minor step at current zoom would produce lines < 5px apart,\n * double the effective step until they're >= 5px.\n * Major = 4× effective minor.\n */\nfunction resolveFixedGrid(baseMinorStep: number, ppu: number): GridResolution {\n  const MIN_PX_BETWEEN = 5;\n  let effectiveMinor = baseMinorStep;\n\n  // Double until minor gridlines are at least MIN_PX_BETWEEN apart\n  while (effectiveMinor * ppu < MIN_PX_BETWEEN && effectiveMinor < 1e12) {\n    effectiveMinor *= 2;\n  }\n\n  const minorDivisions = 4;\n  const majorStep = effectiveMinor * minorDivisions;\n  return { majorStep, minorDivisions, minorStep: effectiveMinor };\n}\n\nfunction scaleMultiplier(scale: UserScale): number {\n  switch (scale) {\n    case `x-wide`: return 2.0;\n    case `wide`: return 1.5;\n    case `normal`: return 1.0;\n    case `slim`: return 0.7;\n    case `x-slim`: return 0.5;\n    default: return 1.0;\n  }\n}\n\n// ── Draw: major/minor grid ────────────────────────────────────────────\n\nexport function drawMajorMinorGrid(ctx: CanvasRenderingContext2D, region: Rect, resolution: GridResolution, altMajorBg: boolean, vars: CssVars, ppu: number): void {\n  const { majorStep, minorStep } = resolution;\n  if (majorStep <= 0)\n    return;\n\n  const regionEnd = region.x + region.width;\n\n  // Draw alternating major background tints\n  if (altMajorBg) {\n    const altColor = vars[`--timeline-alt-major-bg`] ?? `rgba(255,255,255,0.03)`;\n    ctx.fillStyle = altColor;\n    const firstMajor = Math.floor(region.x / majorStep);\n    for (let i = firstMajor; i * majorStep < regionEnd; i++) {\n      if (i % 2 !== 0) {\n        const x = i * majorStep * ppu;\n        ctx.fillRect(x, region.y, majorStep * ppu, region.height);\n      }\n    }\n  }\n\n  // Minor gridlines\n  if (minorStep > 0) {\n    ctx.strokeStyle = vars[`--timeline-grid-minor-color`] ?? `rgba(255,255,255,0.05)`;\n    ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-minor-width`] ?? `0.5`);\n    ctx.beginPath();\n    const firstMinor = Math.floor(region.x / minorStep) * minorStep;\n    for (let val = firstMinor; val < regionEnd; val += minorStep) {\n      // Skip positions that are major gridlines\n      if (Math.abs(val % majorStep) < minorStep * 0.01)\n        continue;\n      const px = val * ppu;\n      ctx.moveTo(px, region.y);\n      ctx.lineTo(px, region.y + region.height);\n    }\n    ctx.stroke();\n  }\n\n  // Major gridlines\n  ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;\n  ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);\n  ctx.beginPath();\n  const firstMajor = Math.floor(region.x / majorStep) * majorStep;\n  for (let val = firstMajor; val < regionEnd; val += majorStep) {\n    const px = val * ppu;\n    ctx.moveTo(px, region.y);\n    ctx.lineTo(px, region.y + region.height);\n  }\n  ctx.stroke();\n}\n\n// ── Draw: axis labels ─────────────────────────────────────────────────\n\n/**\n * Draw the axis header band. With 2D virtualization the axis is \"sticky\" —\n * it is always drawn at the current vertical scroll position (`scrollTop`)\n * so it appears fixed at the viewport top.\n */\nexport function drawAxis(ctx: CanvasRenderingContext2D, region: Rect, resolution: GridResolution, axisHeight: number, formatLabel: (v: number) => string, vars: CssVars, ppu: number, scrollTop = 0): void {\n  const { majorStep } = resolution;\n  if (majorStep <= 0 || axisHeight <= 0)\n    return;\n\n  // Axis band occupies [scrollTop, scrollTop + axisHeight] in logical Y\n  const axisTop = scrollTop;\n  const axisBottom = scrollTop + axisHeight;\n\n  // Only draw if this tile's region overlaps the axis band\n  if (region.y + region.height < axisTop || region.y > axisBottom)\n    return;\n\n  const regionEnd = region.x + region.width;\n\n  // How far major gridlines extend into the axis band (from the bottom)\n  const tickHeight = 6;\n  const bgHeight = axisHeight - tickHeight;\n\n  // 1. Solid background covers upper portion; leaves bottom strip for gridline ticks.\n  const bgColor = vars[`--timeline-bg`] ?? `#111`;\n  ctx.fillStyle = bgColor;\n  const bgLeft = region.x * ppu;\n  ctx.fillRect(bgLeft, axisTop, region.width * ppu, bgHeight);\n\n  // 2. Major gridline ticks extending into the axis band\n  ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;\n  ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);\n  ctx.beginPath();\n  const firstMajor = Math.ceil(region.x / majorStep) * majorStep;\n  for (let val = firstMajor; val < regionEnd; val += majorStep) {\n    const px = val * ppu;\n    ctx.moveTo(px, axisTop + bgHeight);\n    ctx.lineTo(px, axisBottom);\n  }\n  ctx.stroke();\n\n  // 3. Bottom border\n  ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;\n  ctx.lineWidth = 1;\n  ctx.beginPath();\n  ctx.moveTo(bgLeft, axisBottom);\n  ctx.lineTo(bgLeft + region.width * ppu, axisBottom);\n  ctx.stroke();\n\n  // 4. Labels to the right of each major gridline\n  const labelColor = vars[`--timeline-axis-label-color`] ?? `rgba(255,255,255,0.5)`;\n  ctx.fillStyle = labelColor;\n  ctx.font = `11px system-ui, sans-serif`;\n  ctx.textBaseline = `middle`;\n  ctx.textAlign = `left`;\n\n  const labelPadding = 4;\n  for (let val = firstMajor; val < regionEnd; val += majorStep) {\n    const px = val * ppu;\n    ctx.fillText(formatLabel(val), px + labelPadding, axisTop + bgHeight / 2);\n  }\n\n  // Reset textAlign for subsequent draw calls\n  ctx.textAlign = `start`;\n}\n\n// ── Draw: track backgrounds ───────────────────────────────────────────\n\nexport type TrackInfo = {\n  readonly key: string;\n  readonly color?: string;\n};\n\nexport function drawTrackBackgrounds(ctx: CanvasRenderingContext2D, region: Rect, trackLayout: readonly TrackLayout[], tracks: readonly TrackInfo[], vars: CssVars, ppu: number): void {\n  const bgDefault = vars[`--timeline-track-bg`] ?? `#1a1a1a`;\n  const bgAlt = vars[`--timeline-track-bg-alt`] ?? `#1e1e1e`;\n\n  for (let i = 0; i < trackLayout.length; i++) {\n    const layout = trackLayout[i];\n    // Skip if entirely outside the drawn region vertically\n    if (layout.y + layout.height < region.y)\n      continue;\n    if (layout.y > region.y + region.height)\n      break;\n\n    const track = tracks.find(t => t.key === layout.trackKey);\n    const bg = track?.color ? `${track.color}22` : (i % 2 === 0 ? bgDefault : bgAlt);\n\n    ctx.fillStyle = bg;\n    ctx.fillRect(region.x * ppu, layout.y, region.width * ppu, layout.height);\n\n    // Subtle separator line between tracks\n    ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;\n    ctx.lineWidth = 0.5;\n    ctx.beginPath();\n    ctx.moveTo(region.x * ppu, layout.y + layout.height);\n    ctx.lineTo((region.x + region.width) * ppu, layout.y + layout.height);\n    ctx.stroke();\n  }\n}\n\n// ── Draw: event rectangles ────────────────────────────────────────────\n\nexport function drawEventRects(ctx: CanvasRenderingContext2D, region: Rect, events: readonly TimelineEvent[], trackLayout: readonly TrackLayout[], selectedIds: ReadonlySet<string>, tickledId: string | undefined, drag: DragTarget, vars: CssVars, ppu: number): void {\n  const eventBg = vars[`--timeline-event-bg`] ?? `#3498db`;\n  const eventSelectedBg = vars[`--timeline-event-selected-bg`] ?? `#5dade2`;\n  const eventTickledBg = vars[`--timeline-event-tickled-bg`] ?? `#444`;\n  const eventLabelColor = vars[`--timeline-event-label-color`] ?? `#fff`;\n  const radius = Number.parseFloat(vars[`--timeline-event-radius`] ?? `4`);\n\n  const regionEnd = region.x + region.width;\n  const padding = 3; // vertical padding inside track\n\n  for (const evt of events) {\n    // Skip events outside horizontal view\n    if (evt.end < region.x || evt.start > regionEnd)\n      continue;\n\n    const layout = trackLayout.find(l => l.trackKey === evt.trackKey);\n    if (!layout)\n      continue;\n\n    // Skip events outside vertical region\n    if (layout.y + layout.height < region.y)\n      continue;\n    if (layout.y > region.y + region.height)\n      continue;\n\n    // Compute provisional position during drag\n    let isDragging = false;\n\n    if (drag.kind === `event-move` && drag.eventId === evt.id) {\n      isDragging = true;\n    } else if (drag.kind === `event-start` && drag.eventId === evt.id) {\n      isDragging = true;\n    } else if (drag.kind === `event-end` && drag.eventId === evt.id) {\n      isDragging = true;\n    }\n\n    const x = evt.start * ppu;\n    const w = (evt.end - evt.start) * ppu;\n    const y = layout.y + padding;\n    const h = layout.height - padding * 2;\n\n    if (w < 1)\n      continue;\n\n    // Choose fill color\n    const isSelected = selectedIds.has(evt.id);\n    const isTickled = tickledId === evt.id;\n    let fill: string;\n    if (isSelected) {\n      fill = eventSelectedBg;\n    } else if (isTickled) {\n      fill = eventTickledBg;\n    } else {\n      fill = evt.color ?? eventBg;\n    }\n\n    // Draw rounded rect\n    ctx.fillStyle = fill;\n    ctx.beginPath();\n    drawRoundRect(ctx, x, y, w, h, Math.min(radius, w / 2, h / 2));\n    ctx.fill();\n\n    // Drag outline\n    if (isDragging) {\n      ctx.strokeStyle = `#fff`;\n      ctx.lineWidth = 1.5;\n      ctx.beginPath();\n      drawRoundRect(ctx, x, y, w, h, Math.min(radius, w / 2, h / 2));\n      ctx.stroke();\n    }\n\n    // Selection outline\n    if (isSelected && !isDragging) {\n      ctx.strokeStyle = eventSelectedBg;\n      ctx.lineWidth = 1;\n      ctx.beginPath();\n      drawRoundRect(ctx, x, y, w, h, Math.min(radius, w / 2, h / 2));\n      ctx.stroke();\n    }\n\n    // Label (only if wide enough in pixels)\n    if (w >= 40 && evt.label) {\n      ctx.fillStyle = eventLabelColor;\n      ctx.font = `11px system-ui, sans-serif`;\n      ctx.textBaseline = `middle`;\n      ctx.save();\n      ctx.beginPath();\n      ctx.rect(x + 4, y, w - 8, h);\n      ctx.clip();\n      ctx.fillText(evt.label, x + 6, y + h / 2);\n      ctx.restore();\n    }\n  }\n}\n\n// ── Draw: marquee selection rectangle ─────────────────────────────────\n\nexport function drawMarquee(ctx: CanvasRenderingContext2D, drag: DragTarget, ppu: number): void {\n  if (drag.kind !== `marquee`)\n    return;\n\n  const x1 = Math.min(drag.startLogicalX, drag.currentLogicalX) * ppu;\n  const x2 = Math.max(drag.startLogicalX, drag.currentLogicalX) * ppu;\n  const y1 = Math.min(drag.startY, drag.currentY);\n  const y2 = Math.max(drag.startY, drag.currentY);\n\n  ctx.fillStyle = `rgba(100, 150, 255, 0.15)`;\n  ctx.fillRect(x1, y1, x2 - x1, y2 - y1);\n\n  ctx.strokeStyle = `rgba(100, 150, 255, 0.6)`;\n  ctx.lineWidth = 1;\n  ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────\n\nfunction drawRoundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void {\n  r = Math.max(0, r);\n  ctx.moveTo(x + r, y);\n  ctx.arcTo(x + w, y, x + w, y + h, r);\n  ctx.arcTo(x + w, y + h, x, y + h, r);\n  ctx.arcTo(x, y + h, x, y, r);\n  ctx.arcTo(x, y, x + w, y, r);\n  ctx.closePath();\n}\n\n// ── CSS variable resolution helper ────────────────────────────────────\n\nconst TIMELINE_CSS_VARS = [\n  `--timeline-bg`,\n  `--timeline-track-bg`,\n  `--timeline-track-bg-alt`,\n  `--timeline-alt-major-bg`,\n  `--timeline-grid-major-color`,\n  `--timeline-grid-minor-color`,\n  `--timeline-grid-major-width`,\n  `--timeline-grid-minor-width`,\n  `--timeline-event-bg`,\n  `--timeline-event-selected-bg`,\n  `--timeline-event-tickled-bg`,\n  `--timeline-event-label-color`,\n  `--timeline-event-radius`,\n  `--timeline-axis-label-color`,\n] as const;\n\nexport function resolveCssVars(host: HTMLElement): CssVars {\n  const computed = getComputedStyle(host);\n  const vars: CssVars = {};\n  for (const v of TIMELINE_CSS_VARS) {\n    vars[v] = computed.getPropertyValue(v).trim();\n  }\n  return vars;\n}\n","import type { IxfxTimelineElement } from './timeline-element.js';\nimport type { GridResolution, TimelineEvent, TimelineEventMoveDetail, TimelineEventResizeDetail, TimelineSelectionChangeDetail, TrackLayout } from './types.js';\nimport { resolveGrid } from './timeline-draw.js';\n\n// Minimal type for the x-vcanvas element\ntype VCanvasElement = HTMLElement & {\n  convertFromViewportToCanvas: (x: number, y: number) => { x: number; y: number };\n  viewportWidth: number;\n  viewportHeight: number;\n  logicalScrollTop: number;\n  invalidateAll: () => void;\n  invalidateRegion: (x: number, y: number, w: number, h: number) => void;\n};\n\n/** Hit zone near the edge of an event (px in screen space) */\nconst EDGE_HIT_PX = 8;\n\n// ── Coordinate conversion ─────────────────────────────────────────────\n\n/**\n * Convert a vcanvas logical (pixel) coordinate to timeline logical units.\n * vcanvas pixel coordinates are in the 1:1 pixel space; divide by ppu then add min.\n */\nfunction canvasToTimeline(canvasX: number, ppu: number, min: number): number {\n  return canvasX / ppu + min;\n}\n\n/**\n * Convert screen-space pixel distance to timeline logical units.\n * Used for edge hit threshold: how many logical units does EDGE_HIT_PX correspond to.\n */\nfunction pxToLogicalUnits(ppu: number): number {\n  return ppu > 0 ? 1 / ppu : 1;\n}\n\n// ── Hit testing ───────────────────────────────────────────────────────\n\ntype HitResult\n  = | { kind: `none` }\n    | { kind: `event-move`; eventId: string; trackKey: string; offsetX: number }\n    | { kind: `event-start`; eventId: string }\n    | { kind: `event-end`; eventId: string }\n    | { kind: `empty`; logicalX: number; y: number; trackKey: string | undefined };\n\nfunction hitTest(logicalX: number, y: number, events: readonly TimelineEvent[], trackLayout: readonly TrackLayout[], ppu: number): HitResult {\n  // Find which track was clicked\n  const track = trackLayout.find(tl => y >= tl.y && y < tl.y + tl.height);\n  if (!track) {\n    return { kind: `empty`, logicalX, y, trackKey: undefined };\n  }\n\n  // Edge threshold in logical units\n  const edgeThreshold = EDGE_HIT_PX * pxToLogicalUnits(ppu);\n  const trackEvents = events.filter(e => e.trackKey === track.trackKey);\n\n  for (const evt of trackEvents) {\n    if (logicalX < evt.start || logicalX > evt.end)\n      continue;\n\n    // Within event — check edges\n    if (logicalX <= evt.start + edgeThreshold) {\n      return { kind: `event-start`, eventId: evt.id };\n    }\n    if (logicalX >= evt.end - edgeThreshold) {\n      return { kind: `event-end`, eventId: evt.id };\n    }\n    return {\n      kind: `event-move`,\n      eventId: evt.id,\n      trackKey: track.trackKey,\n      offsetX: logicalX - evt.start,\n    };\n  }\n\n  return { kind: `empty`, logicalX, y, trackKey: track.trackKey };\n}\n\n// ── Find track at Y position ──────────────────────────────────────────\n\nfunction trackAtY(y: number, trackLayout: readonly TrackLayout[]): string | undefined {\n  const track = trackLayout.find(tl => y >= tl.y && y < tl.y + tl.height);\n  return track?.trackKey;\n}\n\n// ── Axis zoom helpers ─────────────────────────────────────────────────\n\n/** Sensitivity: how many pixels of vertical drag = 1 e-fold of zoom */\nconst ZOOM_SENSITIVITY_PX = 100;\n\n/** Total pointer movement (px) before an axis drag activates */\nexport const DRAG_ACTIVATION_PX = 5;\n\n/** Per-axis deadzone (px) — small off-axis movement is ignored */\nexport const AXIS_DEADZONE_PX = 4;\n\n/**\n * Subtract a deadzone from a value.\n * Returns 0 if |value| <= deadzone, otherwise value shifted toward zero by deadzone.\n */\nexport function applyDeadzone(value: number, deadzone: number): number {\n  return Math.abs(value) > deadzone ? value - Math.sign(value) * deadzone : 0;\n}\n\n/**\n * Compute new ppu + viewMin from an axis-zoom drag.\n * Vertical delta (dy) controls zoom (up = zoom in, down = zoom out), anchored at `anchorUnit`.\n * Horizontal delta (dx) controls pan.\n *\n * Returns { ppu, viewMin } — the caller uses host.setZoomPan() to apply.\n */\nfunction computeAxisZoom(startViewMin: number, startPpu: number, anchorUnit: number, dx: number, dy: number): { ppu: number; viewMin: number } {\n  // Zoom: exponential scale factor from vertical drag (drag up = zoom in)\n  const zoomFactor = Math.exp(-dy / ZOOM_SENSITIVITY_PX);\n  const newPpu = startPpu * zoomFactor;\n\n  // Anchor: the anchorUnit should stay at the same fraction of the viewport.\n  // At startPpu, its screen position was: (anchorUnit - startViewMin) * startPpu\n  // At newPpu, we want the same screen position, so:\n  //   (anchorUnit - newMin) * newPpu = (anchorUnit - startViewMin) * startPpu\n  //   newMin = anchorUnit - (anchorUnit - startViewMin) * startPpu / newPpu\n  const anchorScreenX = (anchorUnit - startViewMin) * startPpu;\n  let newMin = anchorUnit - anchorScreenX / newPpu;\n\n  // Pan: horizontal drag shifts the view in screen pixels, convert to timeline units\n  if (newPpu > 0) {\n    newMin += -dx / newPpu;\n  }\n\n  // Don't clamp here — host.setZoomPan() handles clamping via #deriveViewRange\n  return { ppu: newPpu, viewMin: newMin };\n}\n\n/**\n * Compute new vertical view range from a v-axis-zoom drag.\n * Horizontal delta (dx) controls zoom (right = zoom in, left = zoom out),\n * anchored at `anchorBaseY` (a position in base-height units).\n * Vertical delta (dy) controls pan (drag down = scroll down through tracks).\n *\n * Returns { vMin, vMax } — the caller uses host.setVerticalZoomPan() to apply.\n */\nexport function computeVerticalAxisZoom(startVMin: number, startVMax: number, startVScale: number, anchorBaseY: number, dx: number, dy: number): { vMin: number; vMax: number } {\n  const startSpan = startVMax - startVMin;\n\n  // Zoom: exponential scale factor from horizontal drag (right = zoom in)\n  const zoomFactor = Math.exp(-dx / ZOOM_SENSITIVITY_PX);\n  const newSpan = startSpan * zoomFactor;\n\n  // Anchor: keep anchorBaseY at the same visual fraction\n  const anchorFrac = startSpan > 0\n    ? (anchorBaseY - startVMin) / startSpan\n    : 0.5;\n  let newMin = anchorBaseY - anchorFrac * newSpan;\n\n  // Pan: vertical drag shifts the view in screen pixels, convert to base-height units\n  if (startVScale > 0) {\n    newMin += dy / startVScale;\n  }\n\n  // Don't clamp here — host.setVerticalZoomPan() handles clamping via #deriveVerticalZoom\n  return { vMin: newMin, vMax: newMin + newSpan };\n}\n\n// ── Attach interactions ───────────────────────────────────────────────\n\n/**\n * Attaches pointer and keyboard interaction handlers to the timeline.\n * Returns a cleanup function.\n */\nexport function attachTimelineInteractions(host: IxfxTimelineElement, vcanvasEl: VCanvasElement): (() => void) {\n  const ac = new AbortController();\n  const signal = ac.signal;\n\n  // ── Pointer down on vcanvas ───────────────────────────────────────\n  vcanvasEl.addEventListener(`pointerdown`, (e: PointerEvent) => {\n    const ppu = host.pxPerUnit;\n    const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);\n    // canvasCoord.x is in vcanvas logical space which is pure timeline pixel space\n    const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);\n    const ly = canvasCoord.y;\n\n    // Check if click is in the axis header band → start axis-zoom\n    // Axis is \"sticky\" at the current logicalScrollTop\n    const axisTop = vcanvasEl.logicalScrollTop;\n    if (ly >= axisTop && ly < axisTop + host.axisHeight) {\n      vcanvasEl.setPointerCapture(e.pointerId);\n      host._drag = {\n        kind: `axis-zoom`,\n        anchorUnit: lx,\n        startScreenX: e.screenX,\n        startScreenY: e.screenY,\n        startViewMin: host._viewRange.min,\n        startPpu: ppu,\n      };\n      return;\n    }\n\n    const hit = hitTest(lx, ly, host._internalEvents, host._trackLayout, ppu);\n\n    if (e.shiftKey && hit.kind === `event-move`) {\n      // SHIFT+click toggles selection\n      toggleSelection(host, hit.eventId);\n      return;\n    }\n\n    if (hit.kind === `event-move`) {\n      // Start move drag\n      vcanvasEl.setPointerCapture(e.pointerId);\n      host._drag = {\n        kind: `event-move`,\n        eventId: hit.eventId,\n        originTrackKey: hit.trackKey,\n        offsetX: hit.offsetX,\n      };\n      return;\n    }\n\n    if (hit.kind === `event-start`) {\n      vcanvasEl.setPointerCapture(e.pointerId);\n      host._drag = { kind: `event-start`, eventId: hit.eventId };\n      return;\n    }\n\n    if (hit.kind === `event-end`) {\n      vcanvasEl.setPointerCapture(e.pointerId);\n      host._drag = { kind: `event-end`, eventId: hit.eventId };\n      return;\n    }\n\n    if (hit.kind === `empty`) {\n      // Start marquee or clear selection\n      vcanvasEl.setPointerCapture(e.pointerId);\n      host._drag = {\n        kind: `marquee`,\n        startLogicalX: lx,\n        startY: ly,\n        currentLogicalX: lx,\n        currentY: ly,\n      };\n    }\n  }, { signal });\n\n  // ── Pointer move ──────────────────────────────────────────────────\n  vcanvasEl.addEventListener(`pointermove`, (e: PointerEvent) => {\n    const drag = host._drag;\n    if (drag.kind === `none`) {\n      // Tickle (hover) detection\n      handleHover(host, vcanvasEl, e);\n      return;\n    }\n\n    const ppu = host.pxPerUnit;\n    const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);\n    // canvasCoord.x is in vcanvas logical space which is pure timeline pixel space\n    const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);\n    const ly = canvasCoord.y;\n\n    if (drag.kind === `axis-zoom`) {\n      const rawDx = e.screenX - drag.startScreenX;\n      const rawDy = e.screenY - drag.startScreenY;\n\n      // Activation threshold — don't start until enough total movement\n      if (Math.abs(rawDx) + Math.abs(rawDy) < DRAG_ACTIVATION_PX)\n        return;\n\n      // Per-axis deadzone — ignore small off-axis movement\n      const dx = applyDeadzone(rawDx, AXIS_DEADZONE_PX);\n      const dy = applyDeadzone(rawDy, AXIS_DEADZONE_PX);\n\n      const result = computeAxisZoom(\n        drag.startViewMin,\n        drag.startPpu,\n        drag.anchorUnit,\n        dx,\n        dy,\n      );\n      host.setZoomPan(result.viewMin, result.ppu);\n      return;\n    }\n\n    if (drag.kind === `marquee`) {\n      host._drag = { ...drag, currentLogicalX: lx, currentY: ly };\n      vcanvasEl.invalidateAll();\n      return;\n    }\n\n    if (drag.kind === `event-move`) {\n      const evt = host._internalEvents.find(ev => ev.id === drag.eventId);\n      if (!evt)\n        return;\n      const duration = evt.end - evt.start;\n      const rawLx = lx;\n      const rawLy = ly;\n      const newStart = lx - drag.offsetX;\n      const newEnd = newStart + duration;\n      const newTrackKey = trackAtY(ly, host._trackLayout) ?? evt.trackKey;\n\n      const ppu = host.pxPerUnit;\n      const grid: GridResolution = resolveGrid(\n        host._viewRange,\n        host.userScale,\n        vcanvasEl.viewportWidth,\n        host.gridMode,\n        host.minorStep,\n        ppu,\n      );\n\n      const snapped = host.processDrag(\n        drag.eventId,\n        rawLx,\n        rawLy,\n        newStart,\n        newEnd,\n        newTrackKey,\n        drag.originTrackKey,\n        grid,\n      );\n\n      host._internalEvents = host._internalEvents.map(ev =>\n        ev.id === drag.eventId\n          ? { ...ev, start: snapped.start, end: snapped.end, trackKey: snapped.trackKey }\n          : ev,\n      );\n      vcanvasEl.invalidateAll();\n      return;\n    }\n\n    if (drag.kind === `event-start`) {\n      const evt = host._internalEvents.find(ev => ev.id === drag.eventId);\n      if (!evt)\n        return;\n      const newStart = Math.min(lx, evt.end - 1);\n      host._internalEvents = host._internalEvents.map(ev =>\n        ev.id === drag.eventId ? { ...ev, start: newStart } : ev,\n      );\n      vcanvasEl.invalidateAll();\n      return;\n    }\n\n    if (drag.kind === `event-end`) {\n      const evt = host._internalEvents.find(ev => ev.id === drag.eventId);\n      if (!evt)\n        return;\n      const newEnd = Math.max(lx, evt.start + 1);\n      host._internalEvents = host._internalEvents.map(ev =>\n        ev.id === drag.eventId ? { ...ev, end: newEnd } : ev,\n      );\n      vcanvasEl.invalidateAll();\n    }\n  }, { signal });\n\n  // ── Pointer up ────────────────────────────────────────────────────\n  vcanvasEl.addEventListener(`pointerup`, (e: PointerEvent) => {\n    const drag = host._drag;\n    vcanvasEl.releasePointerCapture(e.pointerId);\n\n    if (drag.kind === `axis-zoom`) {\n      // Final zoom/pan is already applied continuously in pointermove\n      host._drag = { kind: `none` };\n      return;\n    }\n\n    if (drag.kind === `marquee`) {\n      // Compute marquee selection\n      const x1 = Math.min(drag.startLogicalX, drag.currentLogicalX);\n      const x2 = Math.max(drag.startLogicalX, drag.currentLogicalX);\n      const y1 = Math.min(drag.startY, drag.currentY);\n      const y2 = Math.max(drag.startY, drag.currentY);\n\n      // Check if it was just a click (no drag distance)\n      if (Math.abs(x2 - x1) < 2 && Math.abs(y2 - y1) < 2) {\n        // Click on empty space — clear selection\n        host._selectedIds = new Set();\n        fireSelectionChange(host);\n      } else {\n        // Select events intersecting the marquee\n        const selected = new Set<string>();\n        for (const evt of host._internalEvents) {\n          const layout = host._trackLayout.find(l => l.trackKey === evt.trackKey);\n          if (!layout)\n            continue;\n          const evtTop = layout.y + 3;\n          const evtBottom = layout.y + layout.height - 3;\n\n          // Intersection test\n          if (evt.end >= x1 && evt.start <= x2 && evtBottom >= y1 && evtTop <= y2) {\n            selected.add(evt.id);\n          }\n        }\n        host._selectedIds = selected;\n        fireSelectionChange(host);\n      }\n\n      host._drag = { kind: `none` };\n      vcanvasEl.invalidateAll();\n      return;\n    }\n\n    if (drag.kind === `event-move`) {\n      const evt = host._internalEvents.find(ev => ev.id === drag.eventId);\n      if (evt) {\n        host.dispatchEvent(\n          new CustomEvent<TimelineEventMoveDetail>(`event-move`, {\n            detail: {\n              eventId: evt.id,\n              fromTrackKey: drag.originTrackKey,\n              toTrackKey: evt.trackKey,\n              start: evt.start,\n              end: evt.end,\n            },\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }\n      host._drag = { kind: `none` };\n      return;\n    }\n\n    if (drag.kind === `event-start` || drag.kind === `event-end`) {\n      const evt = host._internalEvents.find(ev => ev.id === drag.eventId);\n      if (evt) {\n        host.dispatchEvent(\n          new CustomEvent<TimelineEventResizeDetail>(`event-resize`, {\n            detail: {\n              eventId: evt.id,\n              start: evt.start,\n              end: evt.end,\n            },\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }\n      host._drag = { kind: `none` };\n      return;\n    }\n\n    host._drag = { kind: `none` };\n  }, { signal });\n\n  // ── Pointer leave (clear tickle) ──────────────────────────────────\n  vcanvasEl.addEventListener(`pointerleave`, () => {\n    if (host._tickledId !== undefined) {\n      host._tickledId = undefined;\n      vcanvasEl.invalidateAll();\n    }\n  }, { signal });\n\n  return () => ac.abort();\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────\n\nfunction handleHover(host: IxfxTimelineElement, vcanvasEl: VCanvasElement, e: PointerEvent): void {\n  const ppu = host.pxPerUnit;\n  const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);\n  // canvasCoord.x is in vcanvas logical space which is pure timeline pixel space\n  const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);\n  const ly = canvasCoord.y;\n\n  // Axis band: show appropriate cursor (sticky at logicalScrollTop)\n  const axisTop = vcanvasEl.logicalScrollTop;\n  if (ly >= axisTop && ly < axisTop + host.axisHeight) {\n    vcanvasEl.style.cursor = `col-resize`;\n    // Clear tickle if any\n    if (host._tickledId !== undefined) {\n      host._tickledId = undefined;\n      vcanvasEl.invalidateAll();\n    }\n    return;\n  }\n\n  const hit = hitTest(lx, ly, host._internalEvents, host._trackLayout, ppu);\n\n  let newTickledId: string | undefined;\n  if (hit.kind === `event-move` || hit.kind === `event-start` || hit.kind === `event-end`) {\n    newTickledId = hit.eventId;\n  }\n\n  // Update cursor\n  if (hit.kind === `event-start` || hit.kind === `event-end`) {\n    vcanvasEl.style.cursor = `ew-resize`;\n  } else if (hit.kind === `event-move`) {\n    vcanvasEl.style.cursor = `grab`;\n  } else {\n    vcanvasEl.style.cursor = `crosshair`;\n  }\n\n  if (newTickledId !== host._tickledId) {\n    host._tickledId = newTickledId;\n    vcanvasEl.invalidateAll();\n  }\n}\n\nfunction toggleSelection(host: IxfxTimelineElement, eventId: string): void {\n  const next = new Set(host._selectedIds);\n  if (next.has(eventId)) {\n    next.delete(eventId);\n  } else {\n    next.add(eventId);\n  }\n  host._selectedIds = next;\n  fireSelectionChange(host);\n  host.getVCanvas()?.invalidateAll();\n}\n\nfunction fireSelectionChange(host: IxfxTimelineElement): void {\n  host.dispatchEvent(\n    new CustomEvent<TimelineSelectionChangeDetail>(`selection-change`, {\n      detail: { selectedIds: [...host._selectedIds] },\n      bubbles: true,\n      composed: true,\n    }),\n  );\n}\n","import { css } from 'lit';\n\nexport const timelineStyles = css`\n  :host {\n    /* Layout */\n    --timeline-axis-height: 24px;\n    --timeline-tab-width: 120px;\n\n    /* Backgrounds */\n    --timeline-bg: var(--content, #111);\n    --timeline-track-bg: var(--surface-2);\n    --timeline-track-bg-alt: var(--surface-3);\n    --timeline-alt-major-bg: color-mix(in oklch, var(--surface-3) 40%, transparent);\n    --timeline-meta-bg: var(--surface-2);\n\n    /* Grid */\n    --timeline-grid-major-color: var(--surface-5);\n    --timeline-grid-minor-color: var(--surface-4);\n    --timeline-grid-major-width: 1px;\n    --timeline-grid-minor-width: 0.5px;\n\n    /* Events */\n    --timeline-event-bg: var(--accent);\n    --timeline-event-selected-bg: color-mix(in oklch, var(--accent) 80%, white);\n    --timeline-event-tickled-bg: var(--surface-6);\n    --timeline-event-label-color: var(--accent-text);\n    --timeline-event-radius: var(--radius-s, 4px);\n\n    /* Tabs */\n    --timeline-tab-bg: var(--surface-3);\n    --timeline-tab-text: var(--surface-3-text);\n    --timeline-tab-selected-bg: var(--accent);\n\n    /* Axis */\n    --timeline-axis-label-color: var(--surface-muted-text);\n\n    /* Resizer */\n    --timeline-resizer-color: var(--surface-5);\n\n    display: grid;\n    grid-template-rows: 1fr auto auto auto;\n    background: var(--timeline-bg);\n    overflow: hidden;\n    position: relative;\n  }\n\n  /* ── Content wrapper ───────────────────────────────────────────────── */\n\n  .content-wrapper {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* ── Vertical zoom (right sidebar) ─────────────────────────────────── */\n\n  .v-zoom {\n    padding: 6px 4px;\n    padding-top: var(--timeline-axis-height);\n    display: flex;\n    align-items: stretch;\n    width: 30px;\n    box-sizing: content-box;\n  }\n\n  .v-zoom ixfx-range-multi {\n    height: 100%;\n    width: 100%;\n  }\n\n  /* ── Content area ──────────────────────────────────────────────────── */\n\n  .content-area {\n    position: relative;\n    display: grid;\n    grid-template-columns: var(--timeline-tab-width) 1fr;\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* ── Tab column (sits beside vcanvas) ────────────────────────────── */\n\n  .tab-column {\n    position: relative;\n    overflow: hidden;\n    z-index: 2;\n  }\n\n  .tab-column ixfx-timeline-track-tab {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    box-sizing: border-box;\n    pointer-events: auto;\n  }\n\n  /* ── Vertical axis interaction zone ─────────────────────────────────── */\n\n  .v-axis-zone {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: var(--timeline-tab-width);\n    height: 100%;\n    cursor: ns-resize;\n    z-index: 3;\n  }\n\n  /* ── VCanvas ───────────────────────────────────────────────────────── */\n\n  .content-area x-vcanvas {\n    width: 100%;\n    height: 100%;\n    display: block;\n    --scrollbar-width: none;\n  }\n\n  /* ── Horizontal zoom ───────────────────────────────────────────────── */\n\n  .h-zoom {\n    padding: 4px 8px;\n    padding-left: var(--timeline-tab-width);\n    padding-right: 38px; /* align with v-zoom column (30px + 2×4px padding) */\n  }\n\n  .h-zoom ixfx-range-multi {\n    width: 100%;\n  }\n\n  /* ── Meta area ─────────────────────────────────────────────────────── */\n\n  .meta-resizer {\n    display: none;\n    height: 6px;\n    cursor: ns-resize;\n    background: var(--timeline-resizer-color);\n  }\n\n  .meta-resizer.visible {\n    display: block;\n  }\n\n  .meta-area {\n    display: none;\n    background: var(--timeline-meta-bg);\n    overflow: hidden;\n  }\n\n  .meta-area.visible {\n    display: block;\n  }\n`;\n","import type { TimelineTrackResizeDetail } from './types.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { handleStyles } from '../styles/handle.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n/** Minimum track height in px */\nconst MIN_TRACK_HEIGHT = 24;\n\n/** How close to the bottom edge the pointer must be (px) to trigger resize */\nconst EDGE_ZONE_PX = 6;\n\n/**\n * A single track tab in the timeline's left margin.\n * Displays the track label, optional drag handle for reordering,\n * and handles vertical resize via bottom-edge drag.\n *\n * Fires:\n *  - `track-resize-move`  (composed, bubbles) — live preview during drag\n *  - `track-resize`       (composed, bubbles) — final value on pointerup\n *\n * Both carry `TimelineTrackResizeDetail` in their `detail`.\n */\n@customElement(`ixfx-timeline-track-tab`)\nexport class TimelineTrackTabElement extends LitElement {\n  static override styles = [themeFallbacks, handleStyles, css`\n    :host {\n      display: flex;\n      align-items: center;\n      background: color-mix(in oklch, var(--timeline-tab-bg, #2a2a2a) 70%, transparent);\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n      color: var(--timeline-tab-text, #ccc);\n      font-size: 0.75rem;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      cursor: pointer;\n      user-select: none;\n      border-bottom: 1px solid var(--timeline-grid-major-color, rgba(255,255,255,0.12));\n      box-sizing: border-box;\n      position: relative;\n    }\n\n    :host([selected]) {\n      background: color-mix(in oklch, var(--timeline-tab-selected-bg, #3498db) 75%, transparent);\n      color: white;\n    }\n\n    .handle {\n      display: none;\n      cursor: grab;\n      margin: 0 4px;\n      --ixfx-handle-spot-size: 12px;\n      --ixfx-handle-dot-size: 3px;\n    }\n\n    :host([reorderable]) .handle {\n      display: inline-block;\n    }\n\n    .label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding: 0 8px;\n    }\n  `];\n\n  @property({ type: String }) label = ``;\n  @property({ type: String, attribute: `track-key` }) trackKey = ``;\n  @property({ type: Boolean, reflect: true }) selected = false;\n  @property({ type: Boolean, reflect: true }) reorderable = false;\n  @property({ type: Boolean, reflect: true }) resizable = false;\n\n  // ── Private drag state (not reactive — no re-render needed) ─────────\n  #dragging = false;\n  #startScreenY = 0;\n  #startHeight = 0;\n  #pointerId: number | undefined = undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`pointermove`, this.#onPointerMove);\n    this.addEventListener(`pointerdown`, this.#onPointerDown);\n    this.addEventListener(`pointerup`, this.#onPointerUp);\n    this.addEventListener(`pointercancel`, this.#onPointerCancel);\n    this.addEventListener(`lostpointercapture`, this.#onPointerCancel);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`pointermove`, this.#onPointerMove);\n    this.removeEventListener(`pointerdown`, this.#onPointerDown);\n    this.removeEventListener(`pointerup`, this.#onPointerUp);\n    this.removeEventListener(`pointercancel`, this.#onPointerCancel);\n    this.removeEventListener(`lostpointercapture`, this.#onPointerCancel);\n    this.#dragging = false;\n  }\n\n  protected override render() {\n    return html`\n      <span class=\"handle ixfx-handle\" data-handle=\"dotted\" data-shape=\"spot\" part=\"handle\"></span>\n      <span class=\"label\">${this.label}</span>\n    `;\n  }\n\n  // ── Helpers ──────────────────────────────────────────────────────────\n\n  /** Is the pointer within the bottom edge zone? */\n  #isInResizeZone(e: PointerEvent): boolean {\n    if (!this.resizable)\n      return false;\n    const rect = this.getBoundingClientRect();\n    return e.clientY >= rect.bottom - EDGE_ZONE_PX;\n  }\n\n  #fireResizeEvent(eventName: string, height: number): void {\n    this.dispatchEvent(\n      new CustomEvent<TimelineTrackResizeDetail>(eventName, {\n        detail: { trackKey: this.trackKey, height },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // ── Pointer handlers ────────────────────────────────────────────────\n\n  #onPointerMove = (e: PointerEvent): void => {\n    if (this.#dragging) {\n      // During drag: compute new height from delta\n      const dy = e.screenY - this.#startScreenY;\n      const newHeight = Math.max(MIN_TRACK_HEIGHT, this.#startHeight + dy);\n      this.#fireResizeEvent(`track-resize-move`, newHeight);\n      return;\n    }\n\n    // Hover: show ns-resize cursor when near bottom edge\n    if (this.#isInResizeZone(e)) {\n      this.style.cursor = `ns-resize`;\n    } else {\n      this.style.cursor = ``;\n    }\n  };\n\n  #onPointerDown = (e: PointerEvent): void => {\n    if (!this.#isInResizeZone(e))\n      return;\n\n    // Prevent the click handler on the parent from firing (track-select)\n    e.stopPropagation();\n    e.preventDefault();\n\n    this.#dragging = true;\n    this.#startScreenY = e.screenY;\n    this.#startHeight = this.offsetHeight;\n    this.#pointerId = e.pointerId;\n    this.setPointerCapture(e.pointerId);\n  };\n\n  #onPointerUp = (e: PointerEvent): void => {\n    if (!this.#dragging)\n      return;\n\n    const dy = e.screenY - this.#startScreenY;\n    const finalHeight = Math.max(MIN_TRACK_HEIGHT, this.#startHeight + dy);\n\n    this.#fireResizeEvent(`track-resize`, finalHeight);\n    this.#resetDrag(e.pointerId);\n  };\n\n  #onPointerCancel = (_e: Event): void => {\n    if (!this.#dragging)\n      return;\n    this.#resetDrag(this.#pointerId);\n  };\n\n  #resetDrag(pointerId?: number): void {\n    this.#dragging = false;\n    this.#startScreenY = 0;\n    this.#startHeight = 0;\n    if (pointerId !== undefined) {\n      try {\n        this.releasePointerCapture(pointerId);\n      } catch { /* already released */ }\n    }\n    this.#pointerId = undefined;\n    this.style.cursor = ``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-timeline-track-tab': TimelineTrackTabElement;\n  }\n}\n","/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type { PropertyValues } from 'lit';\nimport type { CssVars, Rect } from './timeline-draw.js';\nimport type {\n  DragSnappingFn,\n  DragTarget,\n  GridMode,\n  GridResolution,\n  TimelineElementEventMap,\n  TimelineEvent,\n  TimelineSelectionChangeDetail,\n  TimelineTickleChangeDetail,\n  TimelineTrack,\n  TimelineTrackResizeDetail,\n  TimelineTrackSelectDetail,\n  TrackHeightMode,\n  TrackLayout,\n  UserScale,\n  ViewRange,\n} from './types.js';\nimport { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport {\n  drawAxis,\n  drawEventRects,\n  drawMajorMinorGrid,\n  drawMarquee,\n  drawTrackBackgrounds,\n  resolveCssVars,\n  resolveGrid,\n} from './timeline-draw.js';\nimport { applyDeadzone, attachTimelineInteractions, AXIS_DEADZONE_PX, computeVerticalAxisZoom, DRAG_ACTIVATION_PX } from './timeline-interactions.js';\nimport { timelineStyles } from './timeline-styles.js';\nimport './timeline-track-tabs.js';\n\nimport '@clinth/vcanvas';\n\n// Minimal type for the x-vcanvas element we need\ntype VCanvasElement = HTMLElement & {\n  logicalWidth: number;\n  logicalHeight: number;\n  logicalScrollLeft: number;\n  logicalScrollTop: number;\n  viewportWidth: number;\n  viewportHeight: number;\n  drawCallback: ((ctx: CanvasRenderingContext2D, region: Rect, signal: AbortSignal) => void) | null;\n  invalidateAll: () => void;\n  invalidateRegion: (x: number, y: number, w: number, h: number) => void;\n  convertFromViewportToCanvas: (x: number, y: number) => { x: number; y: number };\n  convertFromCanvasToViewport: (x: number, y: number) => { x: number; y: number };\n};\n\n/** Reasonable maximum ppu to prevent infinite zoom-in */\nconst MAX_PPU = 10_000;\n\n/** Minimum rendered track height (~1.5em) at max zoom-out */\nconst MIN_TRACK_RENDER_HEIGHT = 24;\n\n@customElement(`ixfx-timeline`)\nexport class IxfxTimelineElement extends LitElement {\n  static override styles = [timelineStyles];\n\n  // ── Public properties ───────────────────────────────────────────────\n  @property({ type: Array }) tracks: TimelineTrack[] = [];\n  @property({ type: Array }) events: TimelineEvent[] = [];\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 1000;\n  @property({ type: String, attribute: `track-height` }) trackHeight: TrackHeightMode = `fixed`;\n  @property({ type: String, attribute: `user-scale` }) userScale: UserScale = `normal`;\n  @property({ type: Boolean }) reorderable = false;\n  @property({ type: Boolean, attribute: `meta` }) metaEnabled = false;\n  @property({ type: Boolean, attribute: `alt-major-bg` }) altMajorBg = false;\n  @property({ type: Number, attribute: `default-track-height` }) defaultTrackHeight = 48;\n  @property({ type: String, attribute: `grid-mode` }) gridMode: GridMode = `adaptive`;\n  @property({ type: Number, attribute: `minor-step` }) minorStep = 10;\n  @property({ type: Object }) onDragging: DragSnappingFn | null = null;\n\n  /** Set by TimelineController — formats logical value to label string */\n  formatLabel: (v: number) => string = String;\n\n  // ── Internal state ──────────────────────────────────────────────────\n  /**\n   * _ppu (pixels per unit) is the PRIMARY horizontal zoom state.\n   * _viewRange.min is the PRIMARY horizontal pan state.\n   * _viewRange.max is DERIVED: min + viewportWidth / _ppu.\n   */\n  @state() _ppu = 1;\n  @state() _viewRange: ViewRange = { min: 0, max: 4000 };\n\n  /**\n   * Vertical zoom/pan state. Analogous to horizontal:\n   * - _vViewRange is in \"base height units\" (pre-scale track pixels).\n   * - _vScale = viewportHeight / (b - a). When range spans all base height, all tracks fit.\n   * - _vScrollOffset = _vViewRange.min * _vScale — the pixel offset applied to content.\n   */\n  @state() _vViewRange: ViewRange = { min: 0, max: 1 };\n  @state() _vScale = 1.0;\n\n  @state() _selectedIds: Set<string> = new Set();\n  @state() _tickledId: string | undefined = undefined;\n  @state() _drag: DragTarget = { kind: `none` };\n  @state() _metaHeight = 120;\n  @state() _trackHeightOverrides: Map<string, number> = new Map();\n  @state() _trackLayout: TrackLayout[] = [];\n  @state() _internalEvents: TimelineEvent[] = [];\n  @state() _internalTracks: TimelineTrack[] = [];\n\n  // ── Private refs ────────────────────────────────────────────────────\n  #vcanvas: VCanvasElement | null = null;\n  #cssVarsCache: CssVars = {};\n  #cleanupInteractions: (() => void) | null = null;\n  #axisHeight = 24;\n  #prevTickledId: string | undefined = undefined;\n  #resizeObserver: ResizeObserver | null = null;\n  #pendingVerticalZoomToFit = false;\n  #hasInitializedZoom = false;\n\n  // ── Computed getters (for interactions module) ──────────────────────\n\n  /** Pixels per logical unit — the zoom level */\n  get pxPerUnit(): number {\n    return this._ppu;\n  }\n\n  /** Height of the axis header band in pixels */\n  get axisHeight(): number {\n    return this.#axisHeight;\n  }\n\n  /** Width of the track tab area in pixels (from --timeline-tab-width CSS var) */\n  get tabWidth(): number {\n    return this.#tabWidth;\n  }\n\n  // ── Viewport helpers ────────────────────────────────────────────────\n\n  #getViewportWidth(): number {\n    const raw = this.#vcanvas?.viewportWidth\n      ?? (this.#vcanvas as HTMLElement | null)?.clientWidth\n      ?? 800;\n    return raw;\n  }\n\n  /** Minimum ppu: fits the full total range into the viewport */\n  #minPpu(): number {\n    const totalSpan = this.max - this.min;\n    if (totalSpan <= 0)\n      return 1;\n    const vpWidth = this.#getViewportWidth();\n    return vpWidth / totalSpan;\n  }\n\n  // ── Vertical viewport helpers ───────────────────────────────────────\n\n  /** Available vertical pixels for track content (excludes axis) */\n  #getViewportHeight(): number {\n    return this.#vcanvas?.viewportHeight\n      ?? (this.#vcanvas as HTMLElement | null)?.clientHeight\n      ?? 300;\n  }\n\n  /**\n   * Total base height: sum of all visible track base heights (before vScale).\n   * This is the \"total range\" for the vertical slider.\n   */\n  #getTotalBaseHeight(): number {\n    let total = 0;\n    for (const track of this._internalTracks) {\n      if (track.hidden)\n        continue;\n      const override = this._trackHeightOverrides.get(track.key);\n      total += override ?? track.height ?? this.defaultTrackHeight;\n    }\n    return total || 1; // avoid zero\n  }\n\n  /** Smallest base height among visible tracks (before vScale) */\n  #getSmallestBaseTrackHeight(): number {\n    let smallest = Infinity;\n    for (const track of this._internalTracks) {\n      if (track.hidden)\n        continue;\n      const override = this._trackHeightOverrides.get(track.key);\n      const h = override ?? track.height ?? this.defaultTrackHeight;\n      if (h < smallest)\n        smallest = h;\n    }\n    return smallest === Infinity ? this.defaultTrackHeight : smallest;\n  }\n\n  /** Largest base height among visible tracks (before vScale) */\n  #getLargestBaseTrackHeight(): number {\n    let largest = 0;\n    for (const track of this._internalTracks) {\n      if (track.hidden)\n        continue;\n      const override = this._trackHeightOverrides.get(track.key);\n      const h = override ?? track.height ?? this.defaultTrackHeight;\n      if (h > largest)\n        largest = h;\n    }\n    return largest || this.defaultTrackHeight;\n  }\n\n  /**\n   * Derive vScale and vViewRange from a given vertical view range.\n   * viewportHeight / span = scale factor applied to base track heights.\n   * The axis header takes up fixed space, so available height for tracks is reduced.\n   */\n  #deriveVerticalZoom(vMin: number, vMax: number): void {\n    const totalBase = this.#getTotalBaseHeight();\n    const vpHeight = this.#getViewportHeight() - this.#axisHeight;\n\n    // Clamp range to [0, totalBase]\n    let a = vMin;\n    let b = vMax;\n\n    // Min span (max zoom-in): largest visible track fills the viewport\n    const largestBase = this.#getLargestBaseTrackHeight();\n    const minSpan = Math.max(largestBase, totalBase * 0.05);\n\n    // Max span (max zoom-out): smallest visible track must not shrink below MIN_TRACK_RENDER_HEIGHT\n    // Since renderedHeight = baseHeight * vScale and vScale = vpHeight / span,\n    // we need: smallestBase * (vpHeight / span) >= MIN_TRACK_RENDER_HEIGHT\n    // → span <= vpHeight * smallestBase / MIN_TRACK_RENDER_HEIGHT\n    const smallestBase = this.#getSmallestBaseTrackHeight();\n    const maxSpanFromMinHeight = vpHeight > 0\n      ? vpHeight * smallestBase / MIN_TRACK_RENDER_HEIGHT\n      : totalBase;\n    const maxSpan = Math.min(totalBase, maxSpanFromMinHeight);\n\n    let span = b - a;\n    if (span < minSpan) {\n      const center = (a + b) / 2;\n      a = center - minSpan / 2;\n      b = center + minSpan / 2;\n      span = minSpan;\n    }\n    if (span > maxSpan) {\n      const center = (a + b) / 2;\n      a = center - maxSpan / 2;\n      b = center + maxSpan / 2;\n      span = maxSpan;\n    }\n\n    if (b > totalBase) {\n      b = totalBase;\n      a = Math.max(0, b - span);\n    }\n    if (a < 0) {\n      a = 0;\n      b = Math.min(totalBase, a + span);\n    }\n\n    this._vViewRange = { min: a, max: b };\n    this._vScale = vpHeight > 0 ? vpHeight / (b - a) : 1;\n  }\n\n  /** Reset vertical zoom to fit all tracks */\n  #initVerticalZoomToFit(): void {\n    const totalBase = this.#getTotalBaseHeight();\n    this.#deriveVerticalZoom(0, totalBase);\n  }\n\n  /** Pixel offset to scroll the content area */\n  get #vScrollOffset(): number {\n    return this._vViewRange.min * this._vScale;\n  }\n\n  /**\n   * Derive viewRange from ppu + viewMin, clamped to [min, max].\n   * Returns a new ViewRange.\n   */\n  #deriveViewRange(viewMin: number, ppu: number): ViewRange {\n    const vpWidth = this.#getViewportWidth();\n    const viewSpan = ppu > 0 ? vpWidth / ppu : (this.max - this.min);\n    let newMin = viewMin;\n    let newMax = newMin + viewSpan;\n\n    // Clamp: don't let max exceed total max\n    if (newMax > this.max) {\n      newMax = this.max;\n      newMin = Math.max(this.min, newMax - viewSpan);\n    }\n    // Clamp: don't let min go below total min\n    if (newMin < this.min) {\n      newMin = this.min;\n      newMax = Math.min(this.max, newMin + viewSpan);\n    }\n\n    return { min: newMin, max: newMax };\n  }\n\n  // ── Public methods: zoom & pan ──────────────────────────────────────\n\n  /** Set the zoom level (pixels per logical unit) */\n  setPpu(ppu: number): void {\n    this._ppu = Math.max(this.#minPpu(), Math.min(ppu, MAX_PPU));\n    this._viewRange = this.#deriveViewRange(this._viewRange.min, this._ppu);\n  }\n\n  /**\n   * Set the view range. ppu is back-computed from the span.\n   * Use for programmatic view changes (e.g. TimelineController).\n   */\n  setViewRange(range: ViewRange): void {\n    const vpWidth = this.#getViewportWidth();\n    const span = range.max - range.min;\n    if (span > 0) {\n      this._ppu = Math.max(this.#minPpu(), Math.min(vpWidth / span, MAX_PPU));\n    }\n    this._viewRange = this.#deriveViewRange(range.min, this._ppu);\n  }\n\n  /**\n   * Set zoom + pan atomically. Used by axis-zoom interaction.\n   * viewMin is the left edge in timeline units; ppu is the new zoom level.\n   */\n  setZoomPan(viewMin: number, ppu: number): void {\n    this._ppu = Math.max(this.#minPpu(), Math.min(ppu, MAX_PPU));\n    this._viewRange = this.#deriveViewRange(viewMin, this._ppu);\n  }\n\n  /**\n   * Set vertical zoom + pan atomically. Used by v-axis-zoom interaction.\n   * vMin/vMax define the vertical view range in base-height units.\n   */\n  setVerticalZoomPan(vMin: number, vMax: number): void {\n    this.#deriveVerticalZoom(vMin, vMax);\n  }\n\n  selectAll(): void {\n    this._selectedIds = new Set(this._internalEvents.map(e => e.id));\n    this.#fireSelectionChange();\n    this.#invalidateCanvas();\n  }\n\n  deselectAll(): void {\n    this._selectedIds = new Set();\n    this.#fireSelectionChange();\n    this.#invalidateCanvas();\n  }\n\n  getTrackEvents(trackKey: string): TimelineEvent[] {\n    return this._internalEvents.filter(e => e.trackKey === trackKey);\n  }\n\n  get selectedIds(): readonly string[] {\n    return [...this._selectedIds];\n  }\n\n  set selectedIds(ids: readonly string[]) {\n    this._selectedIds = new Set(ids);\n    this.#fireSelectionChange();\n    this.#invalidateCanvas();\n  }\n\n  selectTrack(key: string, shiftKey: boolean = false): void {\n    this.dispatchEvent(\n      new CustomEvent<TimelineTrackSelectDetail>(`track-select`, {\n        detail: { trackKey: key, shiftKey },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** Resets all track height overrides to the default height and resets vertical zoom. */\n  resetTrackHeights(): void {\n    this._trackHeightOverrides = new Map();\n    this.#pendingVerticalZoomToFit = true;\n    // willUpdate will see the flag and reset vertical zoom during the same update cycle\n  }\n\n  /** Default no-op snapping - no modification of drag values */\n  static defaultDragSnapping: DragSnappingFn = () => ({});\n\n  /** Grid-snapping - snaps start/end to nearest minor gridline */\n  static gridSnapping: DragSnappingFn = (detail) => {\n    const { gridResolution, currentStart, currentEnd } = detail;\n    const { minorStep } = gridResolution;\n    return {\n      start: Math.round(currentStart / minorStep) * minorStep,\n      end: Math.round(currentEnd / minorStep) * minorStep,\n    };\n  };\n\n  /**\n   * Called by timeline-interactions during drag.\n   * Applies onDragging callback if set, then fires 'dragging' event.\n   * Returns constrained values.\n   */\n  processDrag(\n    eventId: string,\n    rawLogicalX: number,\n    rawY: number,\n    currentStart: number,\n    currentEnd: number,\n    currentTrackKey: string,\n    originTrackKey: string,\n    gridResolution: GridResolution,\n  ): { start: number; end: number; trackKey: string } {\n    let constrainedStart = currentStart;\n    let constrainedEnd = currentEnd;\n    let constrainedTrackKey = currentTrackKey;\n\n    if (this.onDragging) {\n      const result = this.onDragging({\n        eventId,\n        rawLogicalX,\n        rawY,\n        currentStart,\n        currentEnd,\n        currentTrackKey,\n        gridResolution,\n        originTrackKey,\n      });\n      constrainedStart = result.start ?? currentStart;\n      constrainedEnd = result.end ?? currentEnd;\n      constrainedTrackKey = result.trackKey ?? currentTrackKey;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(`dragging`, {\n        detail: {\n          eventId,\n          start: constrainedStart,\n          end: constrainedEnd,\n          trackKey: constrainedTrackKey,\n          rawLogicalX,\n          rawY,\n          originTrackKey,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    return {\n      start: constrainedStart,\n      end: constrainedEnd,\n      trackKey: constrainedTrackKey,\n    };\n  }\n\n  /** Returns the vcanvas element (for timeline-interactions) */\n  getVCanvas(): VCanvasElement | null {\n    return this.#vcanvas;\n  }\n\n  /** Returns the currently hovered (tickled) event, or null if none. */\n  get tickledEvent(): TimelineEvent | null {\n    if (this._tickledId === undefined)\n      return null;\n    return this._internalEvents.find(e => e.id === this._tickledId) ?? null;\n  }\n\n  // ── Lifecycle ───────────────────────────────────────────────────────\n\n  protected override firstUpdated(): void {\n    this.#vcanvas = this.shadowRoot?.querySelector(`x-vcanvas`) as VCanvasElement | null;\n\n    if (this.#vcanvas) {\n      this.#vcanvas.drawCallback = this.#drawCallback;\n      this.#vcanvas.addEventListener(`scroll-virtual`, this.#onScrollVirtual as EventListener);\n      this.#cleanupInteractions = attachTimelineInteractions(this, this.#vcanvas);\n\n      // Watch for viewport resizes — adjust viewRange.max, keep ppu stable.\n      // The observer fires immediately with the initial size, which handles\n      // the initial zoom-to-fit without setting state in firstUpdated.\n      this.#resizeObserver = new ResizeObserver(this.#onResize);\n      this.#resizeObserver.observe(this.#vcanvas);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupInteractions?.();\n    this.#cleanupInteractions = null;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  /**\n   * willUpdate runs before render — safe to set @state() properties here\n   * without triggering an additional update cycle. All state derivation\n   * (internal copies, track layout, vertical zoom) happens here.\n   */\n  protected override willUpdate(changedProps: PropertyValues): void {\n    // Sync external tracks/events into internal managed copies on shallow change\n    let needsLayoutRecompute = false;\n    let needsVerticalZoomReset = false;\n    let needsHorizontalZoomToFit = false;\n\n    if (changedProps.has(`tracks`)) {\n      this._internalTracks = [...this.tracks];\n      needsLayoutRecompute = true;\n      needsVerticalZoomReset = true;\n    }\n    if (changedProps.has(`events`)) {\n      this._internalEvents = [...this.events];\n    }\n    if (changedProps.has(`trackHeight`)) {\n      // Mode changed — clear per-track overrides when leaving 'free' mode\n      if (this.trackHeight !== `free` && this._trackHeightOverrides.size > 0) {\n        this._trackHeightOverrides = new Map();\n      }\n      needsLayoutRecompute = true;\n      needsVerticalZoomReset = true;\n    }\n    if (changedProps.has(`_vScale`) || changedProps.has(`defaultTrackHeight`) || changedProps.has(`_trackHeightOverrides`)) {\n      needsLayoutRecompute = true;\n    }\n    if (changedProps.has(`min`) || changedProps.has(`max`)) {\n      needsHorizontalZoomToFit = true;\n    }\n\n    // Consume pending zoom-to-fit flag (from resetTrackHeights)\n    if (this.#pendingVerticalZoomToFit) {\n      this.#pendingVerticalZoomToFit = false;\n      needsVerticalZoomReset = true;\n    }\n\n    // Horizontal zoom-to-fit when total range changes\n    if (needsHorizontalZoomToFit) {\n      this.#initZoomToFit();\n    }\n    // Vertical zoom reset must happen BEFORE layout recompute (layout uses _vScale)\n    if (needsVerticalZoomReset) {\n      this.#initVerticalZoomToFit();\n    }\n    if (needsLayoutRecompute) {\n      this.#recomputeTrackLayout();\n    }\n  }\n\n  /**\n   * updated runs after render — for DOM side-effects only (syncing vcanvas,\n   * scrolling, invalidating canvas, dispatching events).\n   */\n  protected override updated(changedProps: PropertyValues): void {\n    if (changedProps.has(`_ppu`) || changedProps.has(`_viewRange`) || changedProps.has(`min`) || changedProps.has(`max`)) {\n      this.#syncVCanvas();\n      this.#invalidateCanvas();\n    }\n    if (changedProps.has(`events`) || changedProps.has(`userScale`) || changedProps.has(`altMajorBg`) || changedProps.has(`gridMode`) || changedProps.has(`minorStep`)) {\n      this.#invalidateCanvas();\n    }\n    if (changedProps.has(`_trackLayout`)) {\n      this.#syncVCanvasVertical();\n      this.#positionTabs();\n      this.#invalidateCanvas();\n    }\n\n    // Sync vertical zoom/pan to vcanvas logicalScrollTop + logicalHeight\n    if (changedProps.has(`_vViewRange`) || changedProps.has(`_vScale`)) {\n      this.#syncVerticalScroll();\n      this.#invalidateCanvas();\n    }\n\n    if (this._tickledId !== this.#prevTickledId) {\n      this.#prevTickledId = this._tickledId;\n      this.dispatchEvent(\n        new CustomEvent<TimelineTickleChangeDetail>(`tickle-change`, {\n          detail: { event: this.tickledEvent },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  protected override render() {\n    const totalBaseHeight = this.#getTotalBaseHeight();\n\n    return html`\n      <div class=\"content-wrapper\">\n        <div class=\"content-area\">\n          <div class=\"v-axis-zone\"\n            @pointerdown=${this.#onVAxisPointerDown}\n            @pointermove=${this.#onVAxisPointerMove}\n            @pointerup=${this.#onVAxisPointerUp}\n            @pointercancel=${this.#onVAxisPointerUp}\n          ></div>\n          <div class=\"tab-column\">\n            ${this._internalTracks\n              .filter(t => !t.hidden)\n              .map((t) => {\n                const layout = this._trackLayout.find(l => l.trackKey === t.key);\n                if (!layout)\n                  return nothing;\n                return html`\n                  <ixfx-timeline-track-tab\n                    .label=${t.label}\n                    track-key=\"${t.key}\"\n                    ?resizable=${this.trackHeight !== `none`}\n                    ?reorderable=${this.reorderable}\n                    @click=${(e: MouseEvent) => this.selectTrack(t.key, e.shiftKey)}\n                    @track-resize-move=${this.#onTrackResizeMove}\n                    @track-resize=${this.#onTrackResizeEnd}\n                  ></ixfx-timeline-track-tab>\n                `;\n              })}\n          </div>\n          <x-vcanvas></x-vcanvas>\n        </div>\n        <div class=\"v-zoom\">\n          <ixfx-range-multi\n            orientation=\"vertical\"\n            min=\"0\"\n            max=\"${totalBaseHeight}\"\n            a=\"${this._vViewRange.min}\"\n            b=\"${this._vViewRange.max}\"\n            step=\"any\"\n            crossover=\"stop\"\n            resize-mode=\"bipolar-flex\"\n            @input=${this.#onVZoomInput}\n          ></ixfx-range-multi>\n        </div>\n      </div>\n\n      <div class=\"h-zoom\">\n        <ixfx-range-multi\n          min=\"${this.min}\"\n          max=\"${this.max}\"\n          a=\"${this._viewRange.min}\"\n          b=\"${this._viewRange.max}\"\n          crossover=\"stop\"\n          resize-mode=\"bipolar-flex\"\n          @input=${this.#onHZoomInput}\n        ></ixfx-range-multi>\n      </div>\n\n      <div class=\"meta-resizer ${this.metaEnabled ? `visible` : ``}\"></div>\n      <div class=\"meta-area ${this.metaEnabled ? `visible` : ``}\" style=\"height:${this._metaHeight}px\"></div>\n    `;\n  }\n\n  // ── VCanvas wiring ──────────────────────────────────────────────────\n\n  /** Compute initial ppu to fit 80% of the range, then derive viewRange */\n  #initZoomToFit(): void {\n    const vpWidth = this.#getViewportWidth();\n    const totalSpan = this.max - this.min;\n    const zoomFactor = 0.8;\n    this._ppu = totalSpan > 0 ? vpWidth / (totalSpan * zoomFactor) : 1;\n    this._viewRange = { min: this.min, max: this.min + totalSpan * zoomFactor };\n    this.#syncVCanvas();\n    // ResizeObserver will re-derive viewRange once vcanvas has its final layout\n  }\n\n  #syncVCanvas(): void {\n    if (!this.#vcanvas)\n      return;\n    const totalSpan = this.max - this.min;\n    // logicalWidth = pure timeline content width in pixels (no tab offset)\n    this.#vcanvas.logicalWidth = totalSpan * this._ppu;\n    this.#syncVCanvasVertical();\n    this.#syncVCanvasScroll();\n  }\n\n  /** Sync logicalHeight and logicalScrollTop to the vcanvas */\n  #syncVCanvasVertical(): void {\n    if (!this.#vcanvas)\n      return;\n    const totalHeight = this._trackLayout.reduce((sum, tl) => sum + tl.height, 0);\n    const canvasHeight = Math.max(totalHeight, 40) + this.#axisHeight;\n    this.#vcanvas.logicalHeight = canvasHeight;\n    this.#vcanvas.logicalScrollTop = this.#vScrollOffset;\n  }\n\n  #syncVCanvasScroll(): void {\n    if (!this.#vcanvas)\n      return;\n    // Scroll position in logical pixels: pure timeline scroll offset (no tab area)\n    this.#vcanvas.logicalScrollLeft = (this._viewRange.min - this.min) * this._ppu;\n  }\n\n  #invalidateCanvas(): void {\n    this.#vcanvas?.invalidateAll();\n  }\n\n  /** Called by ResizeObserver when vcanvas/content-area changes size */\n  #onResize = (_entries: ResizeObserverEntry[]): void => {\n    if (!this.#hasInitializedZoom) {\n      // First resize after mount — compute initial zoom-to-fit\n      this.#hasInitializedZoom = true;\n      this.#initZoomToFit();\n      this.#initVerticalZoomToFit();\n      this.#recomputeTrackLayout();\n    } else {\n      // Subsequent resizes — keep ppu/vViewRange, re-derive from new viewport size\n      this._viewRange = this.#deriveViewRange(this._viewRange.min, this._ppu);\n      this.#deriveVerticalZoom(this._vViewRange.min, this._vViewRange.max);\n    }\n    this.#syncVCanvas();\n\n    this.#invalidateCanvas();\n  };\n\n  #drawCallback = (ctx: CanvasRenderingContext2D, region: Rect, _signal: AbortSignal): void => {\n    const ppu = this._ppu;\n\n    // Convert pixel region back to timeline logical units for culling.\n    // region.x is in vcanvas logical pixels (pure timeline content, no tab offset).\n    const logicalRegion: Rect = {\n      x: region.x / ppu + this.min,\n      y: region.y,\n      width: region.width / ppu,\n      height: region.height,\n    };\n\n    // Resolve CSS vars once per frame\n    this.#cssVarsCache = resolveCssVars(this);\n\n    const grid = resolveGrid(\n      this._viewRange,\n      this.userScale,\n      this.#getViewportWidth(),\n      this.gridMode,\n      this.minorStep,\n      ppu,\n    );\n\n    // 1. Track backgrounds\n    const trackInfos = this._internalTracks.map(t => ({ key: t.key, color: t.color }));\n    drawTrackBackgrounds(ctx, logicalRegion, this._trackLayout, trackInfos, this.#cssVarsCache, ppu);\n\n    // 2. Grid\n    drawMajorMinorGrid(ctx, logicalRegion, grid, this.altMajorBg, this.#cssVarsCache, ppu);\n\n    // 3. Event rects\n    drawEventRects(\n      ctx,\n      logicalRegion,\n      this._internalEvents,\n      this._trackLayout,\n      this._selectedIds,\n      this._tickledId,\n      this._drag,\n      this.#cssVarsCache,\n      ppu,\n    );\n\n    // 4. Marquee\n    drawMarquee(ctx, this._drag, ppu);\n\n    // 5. Axis (drawn last so it overlays grid lines in the axis band)\n    const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;\n    drawAxis(ctx, logicalRegion, grid, this.#axisHeight, this.formatLabel, this.#cssVarsCache, ppu, scrollTop);\n  };\n\n  // ── Scroll / axis labels ────────────────────────────────────────────\n\n  #onScrollVirtual = (e: Event): void => {\n    const detail = (e as CustomEvent<{\n      logicalScrollLeft: number;\n      logicalScrollTop: number;\n      viewportStartLogical: number;\n      viewportEndLogical: number;\n      userGesture?: boolean;\n    }>).detail;\n\n    // Only react to user-initiated scrolls to avoid feedback loops\n    if (detail.userGesture === false)\n      return;\n\n    const ppu = this._ppu;\n    if (ppu <= 0)\n      return;\n\n    // Horizontal: convert pixel scroll position to timeline units (no tab offset)\n    const viewMin = detail.logicalScrollLeft / ppu + this.min;\n    this._viewRange = this.#deriveViewRange(viewMin, ppu);\n\n    // Vertical: reverse-derive _vViewRange from the new logicalScrollTop\n    // logicalScrollTop = _vViewRange.min * _vScale, so _vViewRange.min = logicalScrollTop / _vScale\n    if (this._vScale > 0) {\n      const span = this._vViewRange.max - this._vViewRange.min;\n      const newVMin = detail.logicalScrollTop / this._vScale;\n      this.#deriveVerticalZoom(newVMin, newVMin + span);\n    }\n  };\n\n  // ── Private helpers ─────────────────────────────────────────────────\n\n  #recomputeTrackLayout(): void {\n    const layout: TrackLayout[] = [];\n    let y = this.#axisHeight;\n    for (const track of this._internalTracks) {\n      if (track.hidden)\n        continue;\n      const override = this._trackHeightOverrides.get(track.key);\n      const baseHeight = override ?? track.height ?? this.defaultTrackHeight;\n      const height = Math.round(baseHeight * this._vScale);\n      layout.push({ trackKey: track.key, y, height });\n      y += height;\n    }\n    this._trackLayout = layout;\n  }\n\n  /**\n   * Range slider handler.\n   * Slider controls zoom (via span) + pan (via position).\n   * Derive ppu from the span the slider produces.\n   */\n  #onHZoomInput = (e: Event): void => {\n    const detail = (e as CustomEvent<{ a: number; b: number }>).detail;\n    const span = detail.b - detail.a;\n    const vpWidth = this.#getViewportWidth();\n    if (span > 0) {\n      this._ppu = Math.max(this.#minPpu(), Math.min(vpWidth / span, MAX_PPU));\n    }\n    this._viewRange = this.#deriveViewRange(detail.a, this._ppu);\n    this.#syncVCanvas();\n  };\n\n  /**\n   * Vertical range slider handler.\n   * Slider controls vertical zoom (via span) + vertical pan (via position).\n   * Derive _vScale from the span the slider produces.\n   */\n  #onVZoomInput = (e: Event): void => {\n    const detail = (e as CustomEvent<{ a: number; b: number }>).detail;\n    this.#deriveVerticalZoom(detail.a, detail.b);\n  };\n\n  // ── Vertical axis drag-zoom handlers ──────────────────────────────────\n\n  #onVAxisPointerDown = (e: PointerEvent): void => {\n    const zone = e.currentTarget as HTMLElement;\n    zone.setPointerCapture(e.pointerId);\n    e.stopPropagation(); // prevent track-tab click/select\n    e.preventDefault();\n\n    // Compute anchor in base-height units from the click Y position\n    // The zone covers the track area (below the axis header padding)\n    const rect = zone.getBoundingClientRect();\n    const clickFrac = rect.height > 0\n      ? (e.clientY - rect.top) / rect.height\n      : 0.5;\n    const span = this._vViewRange.max - this._vViewRange.min;\n    const anchorBaseY = this._vViewRange.min + clickFrac * span;\n\n    this._drag = {\n      kind: `v-axis-zoom`,\n      anchorBaseY,\n      startScreenX: e.screenX,\n      startScreenY: e.screenY,\n      startVMin: this._vViewRange.min,\n      startVMax: this._vViewRange.max,\n      startVScale: this._vScale,\n    };\n  };\n\n  #onVAxisPointerMove = (e: PointerEvent): void => {\n    if (this._drag.kind !== `v-axis-zoom`)\n      return;\n    const drag = this._drag;\n\n    const rawDx = e.screenX - drag.startScreenX;\n    const rawDy = e.screenY - drag.startScreenY;\n\n    // Activation threshold — don't start until enough total movement\n    if (Math.abs(rawDx) + Math.abs(rawDy) < DRAG_ACTIVATION_PX)\n      return;\n\n    // Per-axis deadzone — ignore small off-axis movement\n    const dx = applyDeadzone(rawDx, AXIS_DEADZONE_PX);\n    const dy = applyDeadzone(rawDy, AXIS_DEADZONE_PX);\n\n    const result = computeVerticalAxisZoom(\n      drag.startVMin,\n      drag.startVMax,\n      drag.startVScale,\n      drag.anchorBaseY,\n      dx,\n      dy,\n    );\n    this.setVerticalZoomPan(result.vMin, result.vMax);\n  };\n\n  #onVAxisPointerUp = (e: PointerEvent): void => {\n    if (this._drag.kind !== `v-axis-zoom`)\n      return;\n    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n    this._drag = { kind: `none` };\n  };\n\n  /** Sync vertical scroll position to vcanvas logicalScrollTop */\n  #syncVerticalScroll(): void {\n    this.#syncVCanvasVertical();\n    this.#positionTabs();\n  }\n\n  /**\n   * Position track tabs in the .tab-column via absolute CSS positioning.\n   * Applies a vertical translateY to offset for the current vertical scroll.\n   */\n  #positionTabs(): void {\n    const tabColumn = this.shadowRoot?.querySelector<HTMLElement>(`.tab-column`);\n    if (!tabColumn)\n      return;\n\n    const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;\n    tabColumn.style.transform = `translateY(${-scrollTop}px)`;\n\n    for (const layout of this._trackLayout) {\n      const tab = tabColumn.querySelector<HTMLElement>(\n        `ixfx-timeline-track-tab[track-key=\"${layout.trackKey}\"]`,\n      );\n      if (!tab)\n        continue;\n      tab.style.top = `${layout.y}px`;\n      tab.style.height = `${layout.height}px`;\n    }\n  }\n\n  /** Read the tab width from the CSS custom property */\n  get #tabWidth(): number {\n    const raw = getComputedStyle(this).getPropertyValue(`--timeline-tab-width`).trim();\n    return Number.parseInt(raw, 10) || 120;\n  }\n\n  // ── Track resize handlers ────────────────────────────────────────────\n\n  /** Live preview during drag — update heights but don't fire public event */\n  #onTrackResizeMove = (e: Event): void => {\n    const { trackKey, height } = (e as CustomEvent<TimelineTrackResizeDetail>).detail;\n    this.#applyTrackResize(trackKey, height);\n  };\n\n  /** Final resize on pointerup — apply height and fire public event */\n  #onTrackResizeEnd = (e: Event): void => {\n    const { trackKey, height } = (e as CustomEvent<TimelineTrackResizeDetail>).detail;\n    this.#applyTrackResize(trackKey, height);\n\n    this.dispatchEvent(\n      new CustomEvent<TimelineTrackResizeDetail>(`track-resize`, {\n        detail: { trackKey, height },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  /**\n   * Apply track height based on the current `trackHeight` mode.\n   * - `fixed`: sets `defaultTrackHeight` (all tracks change uniformly)\n   * - `free`: sets per-track override in `_trackHeightOverrides`\n   * - `none`: should never be called (resize is disabled)\n   */\n  #applyTrackResize(trackKey: string, height: number): void {\n    if (this.trackHeight === `fixed`) {\n      this.defaultTrackHeight = height;\n    } else if (this.trackHeight === `free`) {\n      const next = new Map(this._trackHeightOverrides);\n      next.set(trackKey, height);\n      this._trackHeightOverrides = next;\n    }\n    // `updated()` will trigger #recomputeTrackLayout via defaultTrackHeight or _trackHeightOverrides change\n  }\n\n  #fireSelectionChange(): void {\n    this.dispatchEvent(\n      new CustomEvent<TimelineSelectionChangeDetail>(`selection-change`, {\n        detail: { selectedIds: [...this._selectedIds] },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\n// ── Global tag name registration ──────────────────────────────────────\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-timeline': IxfxTimelineElement;\n  }\n}\n\n// ── Module-scope interface merge (typed addEventListener) ─────────────\nexport interface IxfxTimelineElement {\n  addEventListener: (<K extends keyof TimelineElementEventMap>(\n    type: K,\n    listener: (this: IxfxTimelineElement, event: TimelineElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}

package/dist/timeline.d.ts

@@ -1,2 +1,2 @@
-import { A as TimelineTrackReorderEvent, C as TimelineEventResizeEvent, D as TimelineTickleChangeEvent, E as TimelineTickleChangeDetail, F as TrackHeightMode, I as TrackLayout, L as UserScale, M as TimelineTrackResizeEvent, N as TimelineTrackSelectDetail, O as TimelineTrack, P as TimelineTrackSelectEvent, R as ViewRange, S as TimelineEventResizeDetail, T as TimelineSelectionChangeEvent, _ as TimelineDraggingEvent, a as CssVars, b as TimelineEventMoveDetail, c as resolveGrid, d as DragSnappingFn, f as DragTarget, g as TimelineDraggingDetail, h as TimelineDraggingCallbackDetail, i as TimelineTrackTabElement, j as TimelineTrackResizeDetail, k as TimelineTrackReorderDetail, l as TimelineController, m as GridResolution, n as attachTimelineInteractions, o as Rect, p as GridMode, r as IxfxTimelineElement, s as resolveCssVars, t as timelineStyles, u as TimelineControllerConfig, v as TimelineElementEventMap, w as TimelineSelectionChangeDetail, x as TimelineEventMoveEvent, y as TimelineEvent } from "./index-BeuCXtiO.js";
+import { A as TimelineTrackReorderEvent, C as TimelineEventResizeEvent, D as TimelineTickleChangeEvent, E as TimelineTickleChangeDetail, F as TrackHeightMode, I as TrackLayout, L as UserScale, M as TimelineTrackResizeEvent, N as TimelineTrackSelectDetail, O as TimelineTrack, P as TimelineTrackSelectEvent, R as ViewRange, S as TimelineEventResizeDetail, T as TimelineSelectionChangeEvent, _ as TimelineDraggingEvent, a as CssVars, b as TimelineEventMoveDetail, c as resolveGrid, d as DragSnappingFn, f as DragTarget, g as TimelineDraggingDetail, h as TimelineDraggingCallbackDetail, i as TimelineTrackTabElement, j as TimelineTrackResizeDetail, k as TimelineTrackReorderDetail, l as TimelineController, m as GridResolution, n as attachTimelineInteractions, o as Rect, p as GridMode, r as IxfxTimelineElement, s as resolveCssVars, t as timelineStyles, u as TimelineControllerConfig, v as TimelineElementEventMap, w as TimelineSelectionChangeDetail, x as TimelineEventMoveEvent, y as TimelineEvent } from "./index-DV3iaUBW.js";
 export { type CssVars, DragSnappingFn, DragTarget, GridMode, GridResolution, IxfxTimelineElement, type Rect, TimelineController, TimelineControllerConfig, TimelineDraggingCallbackDetail, TimelineDraggingDetail, TimelineDraggingEvent, TimelineElementEventMap, TimelineEvent, TimelineEventMoveDetail, TimelineEventMoveEvent, TimelineEventResizeDetail, TimelineEventResizeEvent, TimelineSelectionChangeDetail, TimelineSelectionChangeEvent, TimelineTickleChangeDetail, TimelineTickleChangeEvent, TimelineTrack, TimelineTrackReorderDetail, TimelineTrackReorderEvent, TimelineTrackResizeDetail, TimelineTrackResizeEvent, TimelineTrackSelectDetail, TimelineTrackSelectEvent, TimelineTrackTabElement, TrackHeightMode, TrackLayout, UserScale, ViewRange, attachTimelineInteractions, resolveCssVars, resolveGrid, timelineStyles };

package/dist/timeline.js

@@ -1,2 +1,2 @@
-import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-B2fgDL4U.js";
+import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-THyvH8xy.js";
 export { IxfxTimelineElement, TimelineController, TimelineTrackTabElement, attachTimelineInteractions, resolveCssVars, resolveGrid, timelineStyles };

package/dist/{titlebar-YQ-jVQoS.d.ts → titlebar-Tqu-VvMU.d.ts}

@@ -20,6 +20,10 @@ interface TitlebarElementEventMap {
  * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and
  * `toggle-interaction` is inert. `close` is fired without removing the
  * element — the host decides what closing means.
+ *
+ * CSS variables
+ *   `--titlebar-background` – bar fill (default: `var(--surface-4)`).
+ *     Set to `transparent` for a translucent header over blurred content.
  */
 declare class TitlebarElement extends LitElement {
   title: string;
@@ -47,4 +51,4 @@ interface TitlebarElement {
 }
 //#endregion
 export { TitlebarToggleDetail as a, TitlebarVariant as c, TitlebarOrientation as i, TitlebarElement as n, TitlebarToggleEvent as o, TitlebarElementEventMap as r, TitlebarToggleInteraction as s, TitlebarCloseEvent as t };
-//# sourceMappingURL=titlebar-YQ-jVQoS.d.ts.map
+//# sourceMappingURL=titlebar-Tqu-VvMU.d.ts.map

package/dist/titlebar-Tqu-VvMU.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titlebar-Tqu-VvMU.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;;;;;cAgBI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAkET,sBAAM;;QA4RhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/titlebar.d.ts

@@ -1,2 +1,2 @@
-import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-YQ-jVQoS.js";
+import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Tqu-VvMU.js";
 export { TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant };

package/dist/titlebar.js

@@ -1,6 +1,6 @@
-import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./icon-DcEEGQa_.js";
+import "./icon-Dy33gu4Z.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/titlebar/titlebar.ts
@@ -91,6 +91,8 @@ let TitlebarElement = class TitlebarElement extends LitElement {
 	static {
 		this.styles = [themeFallbacks, css`
     :host {
+      --titlebar-background: var(--surface-4);
+
       display: block;
       box-sizing: border-box;
     }
@@ -100,7 +102,7 @@ let TitlebarElement = class TitlebarElement extends LitElement {
       flex-direction: row;
       align-items: center;
       padding: var(--space-s) var(--space-m);
-      background: var(--surface-4);
+      background: var(--titlebar-background);
       color: var(--surface-3-text);
       min-height: 2em;
       height: 100%;

package/dist/titlebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"titlebar.js","names":["customElement"],"sources":["../src/titlebar/titlebar.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type TitlebarOrientation = `horizontal` | `vertical`;\nexport type TitlebarVariant = `titlebar` | `midline` | `tree`;\nexport type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface TitlebarToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type TitlebarToggleEvent = CustomEvent<TitlebarToggleDetail>;\nexport type TitlebarCloseEvent = CustomEvent<void>;\n\nexport interface TitlebarElementEventMap {\n  toggle: TitlebarToggleEvent;\n  close: TitlebarCloseEvent;\n}\n\n/**\n * Standalone titlebar chrome: title, icon, toolbar slot, close button and\n * optional collapse/expand caret. Extracted from `ixfx-panel`.\n *\n * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and\n * `toggle-interaction` is inert. `close` is fired without removing the\n * element — the host decides what closing means.\n */\n@customElement(`ixfx-titlebar`)\nexport class TitlebarElement extends LitElement {\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: TitlebarOrientation = `horizontal`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: TitlebarVariant = `titlebar`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: TitlebarToggleInteraction = `implicit`;\n\n  private _onToggleClick() {\n    if (!this.collapsible)\n      return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<TitlebarToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const isVertical = this.orientation === `vertical`;\n    const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;\n\n    const caretRotation = isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    const treeVariant = this.variant === `tree`;\n\n    return html`\n      <div\n        class=\"bar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        ${treeVariant && showCaret\n          ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n          : nothing}\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${!treeVariant && showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: block;\n      box-sizing: border-box;\n    }\n\n    .bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      height: 100%;\n      flex-shrink: 0;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) .bar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([collapsible][toggle-interaction=\"implicit\"]) .bar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .title-text-wrapper {\n      display: flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) .bar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .bar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    /* === Tree variant: VS Code explorer / Outline style === */\n    :host([variant=\"tree\"]) .bar {\n      background: transparent;\n      padding: 0 var(--space-xs);\n      min-height: unset;\n      gap: var(--space-xs);\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-xs) 0;\n      flex-direction: column;\n      min-width: unset;\n      writing-mode: horizontal-tb;\n    }\n\n    :host([variant=\"tree\"]) .title-text-wrapper {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--space-xs);\n      padding: 0;\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"tree\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      transform: rotate(180deg);\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .caret-btn {\n      background: transparent;\n      opacity: var(--prominence-idle-opacity);\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .caret-btn:hover {\n      background: transparent;\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    :host([variant=\"tree\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .toolbar {\n      flex-direction: row;\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    :host([variant=\"tree\"]) ixfx-icon {\n      width: 1em;\n      height: 1em;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-titlebar': TitlebarElement;\n  }\n}\n\nexport interface TitlebarElement {\n  addEventListener: (<K extends keyof TitlebarElementEventMap>(\n    type: K,\n    listener: (this: TitlebarElement, event: TitlebarElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}
+{"version":3,"file":"titlebar.js","names":["customElement"],"sources":["../src/titlebar/titlebar.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type TitlebarOrientation = `horizontal` | `vertical`;\nexport type TitlebarVariant = `titlebar` | `midline` | `tree`;\nexport type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface TitlebarToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type TitlebarToggleEvent = CustomEvent<TitlebarToggleDetail>;\nexport type TitlebarCloseEvent = CustomEvent<void>;\n\nexport interface TitlebarElementEventMap {\n  toggle: TitlebarToggleEvent;\n  close: TitlebarCloseEvent;\n}\n\n/**\n * Standalone titlebar chrome: title, icon, toolbar slot, close button and\n * optional collapse/expand caret. Extracted from `ixfx-panel`.\n *\n * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and\n * `toggle-interaction` is inert. `close` is fired without removing the\n * element — the host decides what closing means.\n *\n * CSS variables\n *   `--titlebar-background` – bar fill (default: `var(--surface-4)`).\n *     Set to `transparent` for a translucent header over blurred content.\n */\n@customElement(`ixfx-titlebar`)\nexport class TitlebarElement extends LitElement {\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: TitlebarOrientation = `horizontal`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: TitlebarVariant = `titlebar`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: TitlebarToggleInteraction = `implicit`;\n\n  private _onToggleClick() {\n    if (!this.collapsible)\n      return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<TitlebarToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const isVertical = this.orientation === `vertical`;\n    const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;\n\n    const caretRotation = isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    const treeVariant = this.variant === `tree`;\n\n    return html`\n      <div\n        class=\"bar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        ${treeVariant && showCaret\n          ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n          : nothing}\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${!treeVariant && showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      --titlebar-background: var(--surface-4);\n\n      display: block;\n      box-sizing: border-box;\n    }\n\n    .bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--titlebar-background);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      height: 100%;\n      flex-shrink: 0;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) .bar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([collapsible][toggle-interaction=\"implicit\"]) .bar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .title-text-wrapper {\n      display: flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) .bar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .bar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    /* === Tree variant: VS Code explorer / Outline style === */\n    :host([variant=\"tree\"]) .bar {\n      background: transparent;\n      padding: 0 var(--space-xs);\n      min-height: unset;\n      gap: var(--space-xs);\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-xs) 0;\n      flex-direction: column;\n      min-width: unset;\n      writing-mode: horizontal-tb;\n    }\n\n    :host([variant=\"tree\"]) .title-text-wrapper {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--space-xs);\n      padding: 0;\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"tree\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      transform: rotate(180deg);\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .caret-btn {\n      background: transparent;\n      opacity: var(--prominence-idle-opacity);\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .caret-btn:hover {\n      background: transparent;\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    :host([variant=\"tree\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .toolbar {\n      flex-direction: row;\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    :host([variant=\"tree\"]) ixfx-icon {\n      width: 1em;\n      height: 1em;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-titlebar': TitlebarElement;\n  }\n}\n\nexport interface TitlebarElement {\n  addEventListener: (<K extends keyof TitlebarElementEventMap>(\n    type: K,\n    listener: (this: TitlebarElement, event: TitlebarElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}

package/dist/{tree-Chptss7I.js → tree-DTQon838.js}

@@ -1,10 +1,10 @@
-import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
+import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-C05WjbZh.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-DuiwgN3l.js";
-import "./interaction-Cr13azbM.js";
+import "./interaction-B9AAlsFO.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -1580,4 +1580,4 @@ var TreeController = class {
 //#endregion
 export { TreeDataModel as i, TreeListElement as n, TreeBaseElement as r, TreeController as t };
 
-//# sourceMappingURL=tree-Chptss7I.js.map
+//# sourceMappingURL=tree-DTQon838.js.map