@editframe/elements 0.37.3-beta → 0.38.1

package/dist/gui/TargetOrContextMixin.js

@@ -4,7 +4,7 @@ import { loopContext, playingContext } from "./playingContext.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { isEFTemporal } from "../elements/EFTemporal.js";
 import { TargetController } from "../elements/TargetController.js";
-import { isControllable } from "./Controllable.js";
+import { createDirectTemporalSubscription, determineTargetType, isControllable } from "./Controllable.js";
 import { consume } from "@lit/context";
 import { property, state } from "lit/decorators.js";
 
@@ -33,6 +33,7 @@ function TargetOrContextMixin(superClass, contextToProxy) {
 		#contextUnsubscribe;
 		#contextRequestHandler;
 		#additionalContextUnsubscribes = /* @__PURE__ */ new Map();
+		#directTemporalSubscription;
 		get effectiveContext() {
 			return this.targetElement ?? this.contextFromParent;
 		}
@@ -47,11 +48,49 @@ function TargetOrContextMixin(superClass, contextToProxy) {
 			};
 			this.addEventListener("context-request", this.#contextRequestHandler, true);
 		}
-		#subscribeToTargetContext() {
-			if (!this.targetElement) return;
+		#unsubscribeAll() {
 			this.#contextUnsubscribe?.();
+			this.#contextUnsubscribe = void 0;
 			for (const unsubscribe of this.#additionalContextUnsubscribes.values()) unsubscribe();
 			this.#additionalContextUnsubscribes.clear();
+			this.#directTemporalSubscription?.unsubscribe();
+			this.#directTemporalSubscription = void 0;
+		}
+		#tryDirectTemporalSubscription() {
+			if (!this.targetElement) return false;
+			if (determineTargetType(this.targetElement) !== "direct-temporal") return false;
+			this.#directTemporalSubscription = createDirectTemporalSubscription(this.targetElement, {
+				onPlayingChange: (value) => {
+					this.playing = value;
+				},
+				onLoopChange: (value) => {
+					if ("loop" in this) this.loop = value;
+				},
+				onCurrentTimeMsChange: (value) => {
+					if ("currentTimeMs" in this) this.currentTimeMs = value;
+				},
+				onDurationMsChange: (value) => {
+					if ("durationMs" in this) this.durationMs = value;
+				},
+				onTargetTemporalChange: () => {}
+			});
+			return true;
+		}
+		#subscribeToTargetContext() {
+			if (!this.targetElement) return;
+			this.#unsubscribeAll();
+			if (this.#tryDirectTemporalSubscription()) return;
+			if (isEFTemporal(this.targetElement)) {
+				const target = this.targetElement;
+				target.updateComplete.then(() => {
+					if (this.targetElement !== target) return;
+					if (!this.#tryDirectTemporalSubscription()) target.updateComplete.then(() => {
+						if (this.targetElement !== target) return;
+						this.#tryDirectTemporalSubscription();
+					});
+				});
+				return;
+			}
 			const event = new ContextRequestEvent(contextToProxy, this, (value, unsubscribe) => {
 				this.contextFromParent = value;
 				this.#contextUnsubscribe = unsubscribe;
@@ -83,9 +122,7 @@ function TargetOrContextMixin(superClass, contextToProxy) {
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback();
-			this.#contextUnsubscribe?.();
-			for (const unsubscribe of this.#additionalContextUnsubscribes.values()) unsubscribe();
-			this.#additionalContextUnsubscribes.clear();
+			this.#unsubscribeAll();
 			if (this.#contextRequestHandler) this.removeEventListener("context-request", this.#contextRequestHandler, true);
 		}
 	}

package/dist/gui/TargetOrContextMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"TargetOrContextMixin.js","names":["#targetController","#contextRequestHandler","#contextUnsubscribe","#additionalContextUnsubscribes","additionalContexts: Array<[Context<any, any>, string]>","#subscribeToTargetContext"],"sources":["../../src/gui/TargetOrContextMixin.ts"],"sourcesContent":["import { type Context, consume } from \"@lit/context\";\nimport type { LitElement } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { isEFTemporal } from \"../elements/EFTemporal.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport { type ControllableInterface, isControllable } from \"./Controllable.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nclass ContextRequestEvent extends Event {\n  context: Context<any, any>;\n  contextTarget: Element;\n  callback: (value: any, unsubscribe: () => void) => void;\n  subscribe: boolean;\n\n  constructor(\n    context: Context<any, any>,\n    contextTarget: Element,\n    callback: (value: any, unsubscribe: () => void) => void,\n    subscribe: boolean,\n  ) {\n    super(\"context-request\", { bubbles: true, composed: true });\n    this.context = context;\n    this.contextTarget = contextTarget;\n    this.callback = callback;\n    this.subscribe = subscribe ?? false;\n  }\n}\n\nexport function TargetOrContextMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  contextToProxy: Context<any, any>,\n) {\n  class TargetOrContextClass extends superClass {\n    @property({ type: String })\n    target = \"\";\n\n    @state()\n    targetElement: ControllableInterface | null = null;\n\n    // @ts-expect-error contextToProxy is generic but provides ControllableInterface at runtime\n    @consume({ context: contextToProxy, subscribe: true })\n    contextFromParent: ControllableInterface | null = null;\n\n    #targetController?: TargetController;\n    #contextUnsubscribe?: () => void;\n    #contextRequestHandler?: (event: Event) => void;\n    #additionalContextUnsubscribes = new Map<Context<any, any>, () => void>();\n\n    get effectiveContext(): ControllableInterface | null {\n      return this.targetElement ?? this.contextFromParent;\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n      if (this.target) {\n        this.#targetController = new TargetController(\n          this as any as LitElement & {\n            targetElement: Element | null;\n            target: string;\n          },\n        );\n      }\n\n      // Intercept context-request events and redirect them to targetElement\n      this.#contextRequestHandler = (event: Event) => {\n        if (this.targetElement && event.type === \"context-request\") {\n          event.stopPropagation();\n          this.targetElement.dispatchEvent(\n            new (event.constructor as any)(event.type, event),\n          );\n        }\n      };\n      this.addEventListener(\n        \"context-request\",\n        this.#contextRequestHandler,\n        true,\n      );\n    }\n\n    #subscribeToTargetContext() {\n      if (!this.targetElement) return;\n\n      this.#contextUnsubscribe?.();\n\n      // Unsubscribe from all additional contexts\n      for (const unsubscribe of this.#additionalContextUnsubscribes.values()) {\n        unsubscribe();\n      }\n      this.#additionalContextUnsubscribes.clear();\n\n      // Subscribe to efContext\n      const event = new ContextRequestEvent(\n        contextToProxy,\n        this,\n        (value, unsubscribe) => {\n          (this as any).contextFromParent = value;\n          this.#contextUnsubscribe = unsubscribe;\n        },\n        true,\n      );\n      this.targetElement.dispatchEvent(event);\n\n      // Subscribe to additional contexts that controls commonly need\n      const additionalContexts: Array<[Context<any, any>, string]> = [\n        [playingContext, \"playing\"],\n        [loopContext, \"loop\"],\n        [currentTimeContext, \"currentTimeMs\"],\n        [durationContext, \"durationMs\"],\n      ];\n\n      for (const [context, propertyName] of additionalContexts) {\n        const contextEvent = new ContextRequestEvent(\n          context,\n          this,\n          (value, unsubscribe) => {\n            // Update the control's property if it exists\n            if (propertyName in this) {\n              (this as any)[propertyName] = value;\n            }\n            this.#additionalContextUnsubscribes.set(context, unsubscribe);\n          },\n          true,\n        );\n        this.targetElement.dispatchEvent(contextEvent);\n      }\n    }\n\n    updated(changedProperties: Map<string | number | symbol, unknown>): void {\n      super.updated?.(changedProperties);\n\n      if (changedProperties.has(\"targetElement\") && this.targetElement) {\n        if (\n          isEFTemporal(this.targetElement) &&\n          !isControllable(this.targetElement)\n        ) {\n          console.warn(\n            \"Control element is targeting a non-root temporal element without playbackController. \" +\n              \"Controls can only target root temporal elements (not nested within a timegroup). \" +\n              \"Target element:\",\n            this.targetElement,\n          );\n        }\n        this.#subscribeToTargetContext();\n      }\n\n      if (changedProperties.has(\"target\")) {\n        if (this.target && !this.#targetController) {\n          this.#targetController = new TargetController(\n            this as any as LitElement & {\n              targetElement: Element | null;\n              target: string;\n            },\n          );\n        }\n      }\n    }\n\n    disconnectedCallback() {\n      super.disconnectedCallback();\n      this.#contextUnsubscribe?.();\n      for (const unsubscribe of this.#additionalContextUnsubscribes.values()) {\n        unsubscribe();\n      }\n      this.#additionalContextUnsubscribes.clear();\n      if (this.#contextRequestHandler) {\n        this.removeEventListener(\n          \"context-request\",\n          this.#contextRequestHandler,\n          true,\n        );\n      }\n    }\n  }\n\n  return TargetOrContextClass as Constructor<{\n    target: string;\n    targetElement: ControllableInterface | null;\n    effectiveContext: ControllableInterface | null;\n  }> &\n    T;\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,sBAAN,cAAkC,MAAM;CAMtC,YACE,SACA,eACA,UACA,WACA;AACA,QAAM,mBAAmB;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC;AAC3D,OAAK,UAAU;AACf,OAAK,gBAAgB;AACrB,OAAK,WAAW;AAChB,OAAK,YAAY,aAAa;;;AAIlC,SAAgB,qBACd,YACA,gBACA;CACA,MAAM,6BAA6B,WAAW;;;iBAEnC;wBAGqC;4BAII;;EAElD;EACA;EACA;EACA,iDAAiC,IAAI,KAAoC;EAEzE,IAAI,mBAAiD;AACnD,UAAO,KAAK,iBAAiB,KAAK;;EAGpC,oBAAoB;AAClB,SAAM,mBAAmB;AACzB,OAAI,KAAK,OACP,OAAKA,mBAAoB,IAAI,iBAC3B,KAID;AAIH,SAAKC,yBAA0B,UAAiB;AAC9C,QAAI,KAAK,iBAAiB,MAAM,SAAS,mBAAmB;AAC1D,WAAM,iBAAiB;AACvB,UAAK,cAAc,cACjB,IAAK,MAAM,YAAoB,MAAM,MAAM,MAAM,CAClD;;;AAGL,QAAK,iBACH,mBACA,MAAKA,uBACL,KACD;;EAGH,4BAA4B;AAC1B,OAAI,CAAC,KAAK,cAAe;AAEzB,SAAKC,sBAAuB;AAG5B,QAAK,MAAM,eAAe,MAAKC,8BAA+B,QAAQ,CACpE,cAAa;AAEf,SAAKA,8BAA+B,OAAO;GAG3C,MAAM,QAAQ,IAAI,oBAChB,gBACA,OACC,OAAO,gBAAgB;AACtB,IAAC,KAAa,oBAAoB;AAClC,UAAKD,qBAAsB;MAE7B,KACD;AACD,QAAK,cAAc,cAAc,MAAM;GAGvC,MAAME,qBAAyD;IAC7D,CAAC,gBAAgB,UAAU;IAC3B,CAAC,aAAa,OAAO;IACrB,CAAC,oBAAoB,gBAAgB;IACrC,CAAC,iBAAiB,aAAa;IAChC;AAED,QAAK,MAAM,CAAC,SAAS,iBAAiB,oBAAoB;IACxD,MAAM,eAAe,IAAI,oBACvB,SACA,OACC,OAAO,gBAAgB;AAEtB,SAAI,gBAAgB,KAClB,CAAC,KAAa,gBAAgB;AAEhC,WAAKD,8BAA+B,IAAI,SAAS,YAAY;OAE/D,KACD;AACD,SAAK,cAAc,cAAc,aAAa;;;EAIlD,QAAQ,mBAAiE;AACvE,SAAM,UAAU,kBAAkB;AAElC,OAAI,kBAAkB,IAAI,gBAAgB,IAAI,KAAK,eAAe;AAChE,QACE,aAAa,KAAK,cAAc,IAChC,CAAC,eAAe,KAAK,cAAc,CAEnC,SAAQ,KACN,yLAGA,KAAK,cACN;AAEH,UAAKE,0BAA2B;;AAGlC,OAAI,kBAAkB,IAAI,SAAS,EACjC;QAAI,KAAK,UAAU,CAAC,MAAKL,iBACvB,OAAKA,mBAAoB,IAAI,iBAC3B,KAID;;;EAKP,uBAAuB;AACrB,SAAM,sBAAsB;AAC5B,SAAKE,sBAAuB;AAC5B,QAAK,MAAM,eAAe,MAAKC,8BAA+B,QAAQ,CACpE,cAAa;AAEf,SAAKA,8BAA+B,OAAO;AAC3C,OAAI,MAAKF,sBACP,MAAK,oBACH,mBACA,MAAKA,uBACL,KACD;;;aAxIJ,SAAS,EAAE,MAAM,QAAQ,CAAC;aAG1B,OAAO;aAIP,QAAQ;EAAE,SAAS;EAAgB,WAAW;EAAM,CAAC;AAsIxD,QAAO"}
+{"version":3,"file":"TargetOrContextMixin.js","names":["#targetController","#contextRequestHandler","#contextUnsubscribe","#additionalContextUnsubscribes","#directTemporalSubscription","#unsubscribeAll","#tryDirectTemporalSubscription","additionalContexts: Array<[Context<any, any>, string]>","#subscribeToTargetContext"],"sources":["../../src/gui/TargetOrContextMixin.ts"],"sourcesContent":["import { type Context, consume } from \"@lit/context\";\nimport type { LitElement } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../elements/EFTemporal.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport {\n  type ControllableInterface,\n  type ControllableSubscription,\n  isControllable,\n  determineTargetType,\n  createDirectTemporalSubscription,\n} from \"./Controllable.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nclass ContextRequestEvent extends Event {\n  context: Context<any, any>;\n  contextTarget: Element;\n  callback: (value: any, unsubscribe: () => void) => void;\n  subscribe: boolean;\n\n  constructor(\n    context: Context<any, any>,\n    contextTarget: Element,\n    callback: (value: any, unsubscribe: () => void) => void,\n    subscribe: boolean,\n  ) {\n    super(\"context-request\", { bubbles: true, composed: true });\n    this.context = context;\n    this.contextTarget = contextTarget;\n    this.callback = callback;\n    this.subscribe = subscribe ?? false;\n  }\n}\n\nexport function TargetOrContextMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  contextToProxy: Context<any, any>,\n) {\n  class TargetOrContextClass extends superClass {\n    @property({ type: String })\n    target = \"\";\n\n    @state()\n    targetElement: ControllableInterface | null = null;\n\n    // @ts-expect-error contextToProxy is generic but provides ControllableInterface at runtime\n    @consume({ context: contextToProxy, subscribe: true })\n    contextFromParent: ControllableInterface | null = null;\n\n    #targetController?: TargetController;\n    #contextUnsubscribe?: () => void;\n    #contextRequestHandler?: (event: Event) => void;\n    #additionalContextUnsubscribes = new Map<Context<any, any>, () => void>();\n    #directTemporalSubscription?: ControllableSubscription;\n\n    get effectiveContext(): ControllableInterface | null {\n      return this.targetElement ?? this.contextFromParent;\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n      if (this.target) {\n        this.#targetController = new TargetController(\n          this as any as LitElement & {\n            targetElement: Element | null;\n            target: string;\n          },\n        );\n      }\n\n      // Intercept context-request events and redirect them to targetElement\n      this.#contextRequestHandler = (event: Event) => {\n        if (this.targetElement && event.type === \"context-request\") {\n          event.stopPropagation();\n          this.targetElement.dispatchEvent(\n            new (event.constructor as any)(event.type, event),\n          );\n        }\n      };\n      this.addEventListener(\n        \"context-request\",\n        this.#contextRequestHandler,\n        true,\n      );\n    }\n\n    #unsubscribeAll() {\n      this.#contextUnsubscribe?.();\n      this.#contextUnsubscribe = undefined;\n      for (const unsubscribe of this.#additionalContextUnsubscribes.values()) {\n        unsubscribe();\n      }\n      this.#additionalContextUnsubscribes.clear();\n      this.#directTemporalSubscription?.unsubscribe();\n      this.#directTemporalSubscription = undefined;\n    }\n\n    #tryDirectTemporalSubscription(): boolean {\n      if (!this.targetElement) return false;\n\n      const targetType = determineTargetType(this.targetElement);\n      if (targetType !== \"direct-temporal\") return false;\n\n      this.#directTemporalSubscription = createDirectTemporalSubscription(\n        this.targetElement as unknown as TemporalMixinInterface & HTMLElement,\n        {\n          onPlayingChange: (value) => {\n            (this as any).playing = value;\n          },\n          onLoopChange: (value) => {\n            if (\"loop\" in this) (this as any).loop = value;\n          },\n          onCurrentTimeMsChange: (value) => {\n            if (\"currentTimeMs\" in this) (this as any).currentTimeMs = value;\n          },\n          onDurationMsChange: (value) => {\n            if (\"durationMs\" in this) (this as any).durationMs = value;\n          },\n          onTargetTemporalChange: () => {},\n        },\n      );\n      return true;\n    }\n\n    #subscribeToTargetContext() {\n      if (!this.targetElement) return;\n\n      this.#unsubscribeAll();\n\n      if (this.#tryDirectTemporalSubscription()) return;\n\n      // Temporal target without PlaybackController yet — wait for initialization\n      if (isEFTemporal(this.targetElement)) {\n        const target = this.targetElement as unknown as TemporalMixinInterface &\n          HTMLElement;\n        target.updateComplete.then(() => {\n          if ((this.targetElement as unknown) !== target) return;\n          if (!this.#tryDirectTemporalSubscription()) {\n            // Still not ready — one more cycle (PlaybackController created in updateComplete.then)\n            target.updateComplete.then(() => {\n              if ((this.targetElement as unknown) !== target) return;\n              this.#tryDirectTemporalSubscription();\n            });\n          }\n        });\n        return;\n      }\n\n      // Context-provider path (EFPreview, etc.)\n      const event = new ContextRequestEvent(\n        contextToProxy,\n        this,\n        (value, unsubscribe) => {\n          (this as any).contextFromParent = value;\n          this.#contextUnsubscribe = unsubscribe;\n        },\n        true,\n      );\n      this.targetElement.dispatchEvent(event);\n\n      const additionalContexts: Array<[Context<any, any>, string]> = [\n        [playingContext, \"playing\"],\n        [loopContext, \"loop\"],\n        [currentTimeContext, \"currentTimeMs\"],\n        [durationContext, \"durationMs\"],\n      ];\n\n      for (const [context, propertyName] of additionalContexts) {\n        const contextEvent = new ContextRequestEvent(\n          context,\n          this,\n          (value, unsubscribe) => {\n            if (propertyName in this) {\n              (this as any)[propertyName] = value;\n            }\n            this.#additionalContextUnsubscribes.set(context, unsubscribe);\n          },\n          true,\n        );\n        this.targetElement.dispatchEvent(contextEvent);\n      }\n    }\n\n    updated(changedProperties: Map<string | number | symbol, unknown>): void {\n      super.updated?.(changedProperties);\n\n      if (changedProperties.has(\"targetElement\") && this.targetElement) {\n        if (\n          isEFTemporal(this.targetElement) &&\n          !isControllable(this.targetElement)\n        ) {\n          console.warn(\n            \"Control element is targeting a non-root temporal element without playbackController. \" +\n              \"Controls can only target root temporal elements (not nested within a timegroup). \" +\n              \"Target element:\",\n            this.targetElement,\n          );\n        }\n        this.#subscribeToTargetContext();\n      }\n\n      if (changedProperties.has(\"target\")) {\n        if (this.target && !this.#targetController) {\n          this.#targetController = new TargetController(\n            this as any as LitElement & {\n              targetElement: Element | null;\n              target: string;\n            },\n          );\n        }\n      }\n    }\n\n    disconnectedCallback() {\n      super.disconnectedCallback();\n      this.#unsubscribeAll();\n      if (this.#contextRequestHandler) {\n        this.removeEventListener(\n          \"context-request\",\n          this.#contextRequestHandler,\n          true,\n        );\n      }\n    }\n  }\n\n  return TargetOrContextClass as Constructor<{\n    target: string;\n    targetElement: ControllableInterface | null;\n    effectiveContext: ControllableInterface | null;\n  }> &\n    T;\n}\n"],"mappings":"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"}

package/dist/gui/ef-theme.css

@@ -0,0 +1,136 @@
+/**
+ * Editframe GUI Theme System
+ * 
+ * Global design tokens for all ef-* components.
+ * CSS custom properties inherit through shadow DOM boundaries.
+ * 
+ * Usage:
+ *   - Dark theme is default
+ *   - Add .light class to any ancestor to activate light mode
+ *   - Override tokens on any ancestor to customize theme
+ */
+
+:root,
+:host {
+  /* Backgrounds — Strong hierarchy with deep blacks */
+  --ef-color-bg: #0a0a0a; /* Deep black workspace */
+  --ef-color-bg-panel: #111111; /* Elevated panels (hierarchy, timeline header) */
+  --ef-color-bg-elevated: #1a1a1a; /* Dropdowns, popovers */
+  --ef-color-bg-inset: #050505; /* Track wells (darker than workspace) */
+
+  /* Borders — Visible but refined */
+  --ef-color-border: rgba(255, 255, 255, 0.15); /* More visible borders */
+  --ef-color-border-subtle: rgba(255, 255, 255, 0.08); /* Subtle dividers */
+
+  /* Text — High contrast */
+  --ef-color-text: #FAFAFA; /* Primary text */
+  --ef-color-text-muted: #9CA3AF; /* Labels, timestamps, hints */
+  --ef-color-text-subtle: #6B7280; /* Empty states, placeholders */
+
+  /* Interactive states — Neutral hover, accent for selection */
+  --ef-color-primary: #3B82F6; /* Blue-500 — primary actions (not red) */
+  --ef-color-primary-hover: #60A5FA; /* Blue-400 — primary hover */
+  --ef-color-primary-subtle: rgba(59, 130, 246, 0.15); /* Low-opacity accent */
+  --ef-color-hover: rgba(255, 255, 255, 0.06); /* Neutral gray hover */
+  --ef-color-selected: rgba(59, 130, 246, 0.2); /* Selected state (blue) */
+  --ef-color-selected-subtle: rgba(59, 130, 246, 0.1); /* Ancestor/related selection */
+  --ef-color-focused: rgba(59, 130, 246, 0.25); /* Keyboard focus (blue) */
+
+  /* Semantic colors — Desaturated for professional GUI */
+  --ef-color-danger: #DC2626; /* Red-600 (less bright) */
+  --ef-color-success: #059669; /* Emerald-600 (more muted) */
+  --ef-color-warning: #D97706; /* Amber-600 (less bright) */
+  --ef-color-playhead: #DC2626; /* Red-600 for playhead */
+  --ef-color-error: #DC2626; /* Error state */
+
+  /* Element type colors — Desaturated, professional */
+  --ef-color-type-video: #3B82F6; /* Blue-500 (less bright) */
+  --ef-color-type-audio: #10B981; /* Emerald-500 (more muted) */
+  --ef-color-type-image: #8B5CF6; /* Violet-500 (less bright) */
+  --ef-color-type-text: #F59E0B; /* Amber-500 (less bright) */
+  --ef-color-type-captions: #14B8A6; /* Teal-500 (distinct from audio) */
+  --ef-color-type-timegroup: #64748B; /* Slate-500 (more muted) */
+
+  /* Typography */
+  --ef-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --ef-font-size-xs: 0.75rem; /* 12px */
+  --ef-font-size-sm: 0.875rem; /* 14px */
+  --ef-font-size-base: 1rem; /* 16px */
+
+  /* Layout */
+  --ef-row-height: 24px; /* timeline row height */
+  --ef-track-height: 24px; /* track item height */
+  --ef-hierarchy-width: 200px; /* hierarchy panel width */
+  --ef-thumbnail-gap: 2px; /* minimum gap between thumbnails */
+  --ef-radius-sm: 0.25rem; /* 4px */
+  --ef-radius-md: 0.375rem; /* 6px */
+
+  /* Filmstrip component tokens (reference globals) */
+  --filmstrip-bg: var(--ef-color-bg-inset);
+  --filmstrip-item-bg: rgba(17, 17, 17, 0.9); /* Darker */
+  --filmstrip-item-focused: rgba(229, 57, 53, 0.3); /* Poster red */
+  --filmstrip-border: var(--ef-color-border);
+  --filmstrip-caption-bg: rgba(76, 175, 80, 0.15); /* Green with more opacity */
+  --filmstrip-caption-border: rgba(76, 175, 80, 0.5);
+  --filmstrip-segment-bg: rgba(76, 175, 80, 0.3);
+  --filmstrip-segment-border: rgba(76, 175, 80, 0.6);
+  --filmstrip-waveform-bg: rgba(0, 0, 0, 0.4);
+  --filmstrip-waveform-border: rgba(255, 255, 255, 0.15);
+  --filmstrip-timegroup-focused: var(--ef-color-focused);
+  --filmstrip-animation-bg: rgba(229, 57, 53, 0.2); /* Poster red */
+  --filmstrip-keyframe-bg: rgba(229, 57, 53, 0.4); /* Poster red */
+
+  /* Trim handle tokens */
+  --trim-handle-color: rgba(255, 255, 255, 0.7);
+  --trim-handle-active-color: var(--ef-color-primary);
+  --trim-overlay-color: rgba(0, 0, 0, 0.4);
+}
+
+/* Light mode theme — High contrast, clean professional */
+.light,
+:host(.light),
+:host-context(.light) {
+  /* Backgrounds — Clear hierarchy with strong separation */
+  --ef-color-bg: #FFFFFF; /* Pure white workspace */
+  --ef-color-bg-panel: #F8F8F8; /* Very light gray panels */
+  --ef-color-bg-elevated: #FFFFFF; /* Pure white elevated */
+  --ef-color-bg-inset: #EEEEEE; /* Light gray inset (track wells) */
+
+  /* Borders — Strong, visible */
+  --ef-color-border: rgba(0, 0, 0, 0.20); /* Clearly visible borders */
+  --ef-color-border-subtle: rgba(0, 0, 0, 0.10); /* Subtle but visible dividers */
+
+  /* Text — Maximum contrast */
+  --ef-color-text: #0A0A0A; /* Near black (neutral-950) */
+  --ef-color-text-muted: #404040; /* Neutral-700 */
+  --ef-color-text-subtle: #666666; /* Neutral-600 */
+
+  /* Interactive states — Neutral hover, blue for selection */
+  --ef-color-primary: #2563EB; /* Blue-600 — primary actions */
+  --ef-color-primary-hover: #1D4ED8; /* Blue-700 — primary hover */
+  --ef-color-primary-subtle: rgba(37, 99, 235, 0.12);
+  --ef-color-hover: rgba(0, 0, 0, 0.06); /* Visible neutral hover */
+  --ef-color-selected: rgba(37, 99, 235, 0.18); /* Stronger selected state */
+  --ef-color-selected-subtle: rgba(37, 99, 235, 0.10); /* Visible ancestor selection */
+  --ef-color-focused: rgba(37, 99, 235, 0.25); /* Strong keyboard focus */
+
+  /* Semantic colors — Desaturated but visible */
+  --ef-color-danger: #DC2626; /* Red-600 */
+  --ef-color-success: #059669; /* Emerald-600 */
+  --ef-color-warning: #D97706; /* Amber-600 */
+  --ef-color-playhead: #DC2626; /* Red-600 for playhead */
+  --ef-color-error: #DC2626;
+
+  /* Element type colors — More saturated for light mode visibility */
+  --ef-color-type-video: #2563EB; /* Blue-600 */
+  --ef-color-type-audio: #059669; /* Emerald-600 */
+  --ef-color-type-image: #7C3AED; /* Violet-600 */
+  --ef-color-type-text: #EA580C; /* Orange-600 */
+  --ef-color-type-captions: #0891B2; /* Cyan-600 */
+  --ef-color-type-timegroup: #475569; /* Slate-600 */
+
+  /* Filmstrip light mode adjustments */
+  --filmstrip-item-bg: rgba(238, 238, 238, 0.95);
+  --filmstrip-waveform-bg: rgba(0, 0, 0, 0.06);
+  --filmstrip-waveform-border: rgba(0, 0, 0, 0.12);
+}

package/dist/gui/hierarchy/EFHierarchy.d.ts

@@ -1,12 +1,12 @@
 import { SelectionContext } from "../../canvas/selection/selectionContext.js";
-import * as lit10 from "lit";
+import * as lit11 from "lit";
 import { LitElement, PropertyValues } from "lit";
 import * as lit_html11 from "lit-html";
 
 //#region src/gui/hierarchy/EFHierarchy.d.ts
 declare const EFHierarchy_base: typeof LitElement;
 declare class EFHierarchy extends EFHierarchy_base {
-  static styles: lit10.CSSResult[];
+  static styles: lit11.CSSResult[];
   target: string;
   header: string;
   showHeader: boolean;

package/dist/gui/hierarchy/EFHierarchy.js

@@ -1,6 +1,6 @@
+import { TWMixin } from "../TWMixin2.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { isEFTemporal } from "../../elements/EFTemporal.js";
-import { TWMixin } from "../TWMixin2.js";
 import { TargetController } from "../../elements/TargetController.js";
 import { selectionContext } from "../../canvas/selection/selectionContext.js";
 import { hierarchyContext } from "./hierarchyContext.js";
@@ -113,30 +113,20 @@ let EFHierarchy = class EFHierarchy$1 extends TWMixin(LitElement) {
         height: 100%;
         font-size: 12px;
         
-        --hierarchy-bg: rgb(30 41 59);
-        --hierarchy-border: rgb(71 85 105);
-        --hierarchy-text: rgb(226 232 240);
-        --hierarchy-hover-bg: rgba(148, 163, 184, 0.2);
-        --hierarchy-selected-bg: rgba(59, 130, 246, 0.3);
-        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.15);
-        --hierarchy-focused-bg: rgba(148, 163, 184, 0.4);
-        --hierarchy-drop-indicator: #3b82f6;
-      }
-      
-      :host(.light) {
-        --hierarchy-bg: rgb(241 245 249);
-        --hierarchy-border: rgb(203 213 225);
-        --hierarchy-text: rgb(30 41 59);
-        --hierarchy-hover-bg: rgba(100, 116, 139, 0.15);
-        --hierarchy-selected-bg: rgba(59, 130, 246, 0.2);
-        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.1);
-        --hierarchy-focused-bg: rgba(100, 116, 139, 0.25);
+        /* Component tokens (reference globals from ef-theme.css) */
+        --hierarchy-bg: var(--ef-color-bg);
+        --hierarchy-border: var(--ef-color-border);
+        --hierarchy-text: var(--ef-color-text);
+        --hierarchy-hover-bg: var(--ef-color-hover);
+        --hierarchy-selected-bg: var(--ef-color-selected);
+        --hierarchy-ancestor-selected-bg: var(--ef-color-selected-subtle);
+        --hierarchy-focused-bg: var(--ef-color-focused);
+        --hierarchy-drop-indicator: var(--ef-color-primary);
       }
       
       .hierarchy-container {
         background: var(--hierarchy-bg);
         color: var(--hierarchy-text);
-        min-height: 100%;
         padding: 4px 0;
       }
       
@@ -146,7 +136,7 @@ let EFHierarchy = class EFHierarchy$1 extends TWMixin(LitElement) {
         font-size: 11px;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: rgba(148, 163, 184, 0.8);
+        color: var(--ef-color-text-muted);
         border-bottom: 1px solid var(--hierarchy-border);
         margin-bottom: 4px;
       }
@@ -154,7 +144,7 @@ let EFHierarchy = class EFHierarchy$1 extends TWMixin(LitElement) {
       .empty {
         padding: 16px;
         text-align: center;
-        color: rgba(148, 163, 184, 0.6);
+        color: var(--ef-color-text-subtle);
         font-style: italic;
       }
     `];
@@ -303,8 +293,8 @@ let EFHierarchy = class EFHierarchy$1 extends TWMixin(LitElement) {
 	render() {
 		const roots = this.getRootElements();
 		return html`
-      <div class="hierarchy-container">
-        ${this.showHeader ? html`<div class="header">${this.header}</div>` : nothing}
+      <div class="hierarchy-container" part="list">
+        ${this.showHeader ? html`<div class="header" part="header">${this.header}</div>` : nothing}
         ${roots.length > 0 ? renderHierarchyChildren(roots, this.hideSelectors, this.showSelectors, true) : html`<div class="empty">No elements</div>`}
       </div>
     `;

package/dist/gui/hierarchy/EFHierarchy.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFHierarchy.js","names":["EFHierarchy","selectedId: string | null"],"sources":["../../../src/gui/hierarchy/EFHierarchy.ts"],"sourcesContent":["import { consume, provide } from \"@lit/context\";\nimport { css, html, LitElement, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport { isEFTemporal } from \"../../elements/EFTemporal.js\";\nimport { selectionContext } from \"../../canvas/selection/selectionContext.js\";\nimport { TargetController } from \"../../elements/TargetController.js\";\nimport { TWMixin } from \"../TWMixin.js\";\nimport {\n  type HierarchyActions,\n  type HierarchyContext,\n  type HierarchyState,\n  hierarchyContext,\n} from \"./hierarchyContext.js\";\nimport { renderHierarchyChildren } from \"./EFHierarchyItem.js\";\nimport type { EFCanvas } from \"../../canvas/EFCanvas.js\";\n\n@customElement(\"ef-hierarchy\")\nexport class EFHierarchy extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: auto;\n        height: 100%;\n        font-size: 12px;\n        \n        --hierarchy-bg: rgb(30 41 59);\n        --hierarchy-border: rgb(71 85 105);\n        --hierarchy-text: rgb(226 232 240);\n        --hierarchy-hover-bg: rgba(148, 163, 184, 0.2);\n        --hierarchy-selected-bg: rgba(59, 130, 246, 0.3);\n        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.15);\n        --hierarchy-focused-bg: rgba(148, 163, 184, 0.4);\n        --hierarchy-drop-indicator: #3b82f6;\n      }\n      \n      :host(.light) {\n        --hierarchy-bg: rgb(241 245 249);\n        --hierarchy-border: rgb(203 213 225);\n        --hierarchy-text: rgb(30 41 59);\n        --hierarchy-hover-bg: rgba(100, 116, 139, 0.15);\n        --hierarchy-selected-bg: rgba(59, 130, 246, 0.2);\n        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.1);\n        --hierarchy-focused-bg: rgba(100, 116, 139, 0.25);\n      }\n      \n      .hierarchy-container {\n        background: var(--hierarchy-bg);\n        color: var(--hierarchy-text);\n        min-height: 100%;\n        padding: 4px 0;\n      }\n      \n      .header {\n        padding: 8px 12px;\n        font-weight: 600;\n        font-size: 11px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: rgba(148, 163, 184, 0.8);\n        border-bottom: 1px solid var(--hierarchy-border);\n        margin-bottom: 4px;\n      }\n      \n      .empty {\n        padding: 16px;\n        text-align: center;\n        color: rgba(148, 163, 184, 0.6);\n        font-style: italic;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  target = \"\";\n\n  @property({ type: String })\n  header = \"\";\n\n  @property({ type: Boolean, attribute: \"show-header\" })\n  showHeader = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  @state()\n  targetElement: Element | null = null;\n\n  private targetController?: TargetController;\n\n  @consume({ context: selectionContext, subscribe: true })\n  canvasSelectionContext?: import(\"../../canvas/selection/selectionContext.js\").SelectionContext;\n\n  /**\n   * Get the target canvas element.\n   * The canvas is the source of truth for selection and highlight state.\n   */\n  private getCanvas(): EFCanvas | null {\n    // First try TargetController (for registered elements like EFCanvas)\n    if (this.targetElement && (this.targetElement as any).selectionContext) {\n      return this.targetElement as EFCanvas;\n    }\n    // Fall back to direct lookup for any element with matching ID\n    if (this.target) {\n      const target = document.getElementById(this.target);\n      if (target && (target as any).selectionContext) {\n        return target as EFCanvas;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Get canvas selection context from the target canvas element.\n   * Used when hierarchy is a sibling of canvas (can't access via Lit context).\n   */\n  private getCanvasSelectionContext():\n    | import(\"../../canvas/selection/selectionContext.js\").SelectionContext\n    | undefined {\n    // First try Lit context (works when hierarchy is inside canvas)\n    if (this.canvasSelectionContext) {\n      return this.canvasSelectionContext;\n    }\n    // Use target canvas\n    const canvas = this.getCanvas();\n    return canvas?.selectionContext;\n  }\n\n  /**\n   * Get the currently highlighted element from the canvas.\n   */\n  getHighlightedElement(): HTMLElement | null {\n    const canvas = this.getCanvas();\n    return canvas?.highlightedElement ?? null;\n  }\n\n  /**\n   * Set the highlighted element on the canvas.\n   * Called when user hovers an item in the hierarchy.\n   */\n  setHighlightedElement(element: HTMLElement | null): void {\n    const canvas = this.getCanvas();\n    canvas?.setHighlightedElement(element);\n  }\n\n  @state()\n  private hierarchyState: HierarchyState = {\n    selectedElementId: null,\n    expandedIds: new Set(),\n    draggedElementId: null,\n    dropTargetId: null,\n    dropPosition: null,\n  };\n\n  private selectionChangeHandler?: (event: CustomEvent) => void;\n\n  private hierarchyActions: HierarchyActions = {\n    select: (elementId: string | null) => {\n      const selectionCtx = this.getCanvasSelectionContext();\n      if (selectionCtx) {\n        if (elementId) {\n          // Ensure element is registered with canvas before selecting\n          const element = document.getElementById(elementId);\n          if (element) {\n            // Find the canvas element\n            const canvas = element.closest(\"ef-canvas\") as any;\n            if (canvas && canvas.tryRegisterElement) {\n              // Try to register if not already registered\n              canvas.tryRegisterElement(element);\n            }\n          }\n\n          // Select the element directly by its ID\n          selectionCtx.select(elementId);\n        } else {\n          selectionCtx.clear();\n        }\n      } else {\n        this.hierarchyState = {\n          ...this.hierarchyState,\n          selectedElementId: elementId,\n        };\n      }\n      this.dispatchEvent(\n        new CustomEvent(\"hierarchy-select\", {\n          detail: { elementId },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    },\n\n    toggleExpanded: (elementId: string) => {\n      const newExpanded = new Set(this.hierarchyState.expandedIds);\n      if (newExpanded.has(elementId)) {\n        newExpanded.delete(elementId);\n      } else {\n        newExpanded.add(elementId);\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    setExpanded: (elementId: string, expanded: boolean) => {\n      const newExpanded = new Set(this.hierarchyState.expandedIds);\n      if (expanded) {\n        newExpanded.add(elementId);\n      } else {\n        newExpanded.delete(elementId);\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    startDrag: (elementId: string) => {\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        draggedElementId: elementId,\n      };\n    },\n\n    updateDropTarget: (\n      targetId: string | null,\n      position: \"before\" | \"after\" | \"inside\" | null,\n    ) => {\n      if (targetId === this.hierarchyState.draggedElementId) {\n        return;\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        dropTargetId: targetId,\n        dropPosition: position,\n      };\n    },\n\n    endDrag: () => {\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        draggedElementId: null,\n        dropTargetId: null,\n        dropPosition: null,\n      };\n    },\n\n    reorder: (\n      sourceId: string,\n      targetId: string,\n      position: \"before\" | \"after\" | \"inside\",\n    ) => {\n      this.dispatchEvent(\n        new CustomEvent(\"hierarchy-reorder\", {\n          detail: { sourceId, targetId, position },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    },\n  };\n\n  @provide({ context: hierarchyContext })\n  @state()\n  private providedContext: HierarchyContext = {\n    state: this.hierarchyState,\n    actions: this.hierarchyActions,\n    getCanvasSelectionContext: () => this.getCanvasSelectionContext(),\n    getHighlightedElement: () => this.getHighlightedElement(),\n    setHighlightedElement: (el) => this.setHighlightedElement(el),\n  };\n\n  private getTargetElement(): Element | null {\n    // First try TargetController (for registered elements like EFCanvas)\n    if (this.targetElement) {\n      return this.targetElement;\n    }\n    // Fall back to direct lookup for any element with matching ID\n    if (this.target) {\n      return document.getElementById(this.target);\n    }\n    return null;\n  }\n\n  private getRootElements(): Element[] {\n    const target = this.getTargetElement();\n    if (!target) return [];\n\n    if (isEFTemporal(target)) {\n      return [target];\n    }\n\n    return Array.from(target.children);\n  }\n\n  private initializeExpandedState(): void {\n    const roots = this.getRootElements();\n    const newExpanded = new Set<string>();\n\n    const addExpandedIds = (element: Element) => {\n      if (element.id) {\n        newExpanded.add(element.id);\n      }\n      for (const child of Array.from(element.children)) {\n        if (child.children.length > 0) {\n          addExpandedIds(child);\n        }\n      }\n    };\n\n    for (const root of roots) {\n      addExpandedIds(root);\n    }\n\n    this.hierarchyState = {\n      ...this.hierarchyState,\n      expandedIds: newExpanded,\n    };\n  }\n\n  select(elementId: string | null): void {\n    this.hierarchyActions.select(elementId);\n  }\n\n  getSelectedElementId(): string | null {\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx) {\n      const selectedIds = Array.from(selectionCtx.selectedIds);\n      if (selectedIds.length === 0) {\n        return null;\n      }\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      return selectedIds[0]!;\n    }\n    return this.hierarchyState.selectedElementId;\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    // Set up TargetController if target changes\n    if (changedProperties.has(\"target\") && !this.targetController) {\n      this.targetController = new TargetController(this as any);\n    }\n\n    // Retry setting up selection listener if not yet connected\n    this.setupSelectionListener();\n\n    // Check for selection changes from canvas (via context or direct access)\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx) {\n      const selectedIds = Array.from(selectionCtx.selectedIds);\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const selectedId: string | null =\n        selectedIds.length === 0 ? null : selectedIds[0]!;\n\n      if (this.hierarchyState.selectedElementId !== selectedId) {\n        this.hierarchyState = {\n          ...this.hierarchyState,\n          selectedElementId: selectedId,\n        };\n      }\n    }\n\n    // Always update provided context to ensure children have fresh getters\n    this.providedContext = {\n      state: this.hierarchyState,\n      actions: this.hierarchyActions,\n      getCanvasSelectionContext: () => this.getCanvasSelectionContext(),\n      getHighlightedElement: () => this.getHighlightedElement(),\n      setHighlightedElement: (el) => this.setHighlightedElement(el),\n    };\n\n    super.willUpdate(changedProperties);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.initializeExpandedState();\n    this.setupSelectionListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeSelectionListener();\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Re-initialize when target changes\n    if (changedProperties.has(\"targetElement\") || changedProperties.has(\"target\")) {\n      this.initializeExpandedState();\n      this.removeSelectionListener();\n      this.selectionChangeHandler = undefined;\n      this.setupSelectionListener();\n      \n      // Auto-select first root timegroup if nothing is selected\n      this.autoSelectFirstRootTimegroup();\n    }\n  }\n\n  /**\n   * Auto-select the first root timegroup if nothing is currently selected\n   */\n  private autoSelectFirstRootTimegroup(): void {\n    // Only auto-select if nothing is currently selected\n    const currentSelection = this.getSelectedElementId();\n    if (currentSelection) return;\n\n    const roots = this.getRootElements();\n    for (const root of roots) {\n      // Select the first root that is a timegroup (ef-timegroup)\n      if (root.tagName.toLowerCase() === \"ef-timegroup\" && root.id) {\n        this.hierarchyActions.select(root.id);\n        return;\n      }\n    }\n\n    // Fallback: select first root with an ID\n    for (const root of roots) {\n      if (root.id) {\n        this.hierarchyActions.select(root.id);\n        return;\n      }\n    }\n  }\n\n  private setupSelectionListener(): void {\n    // Don't set up if already set up\n    if (this.selectionChangeHandler) {\n      return;\n    }\n\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx && \"addEventListener\" in selectionCtx) {\n      this.selectionChangeHandler = () => {\n        this.requestUpdate(); // Trigger re-render to update hierarchy items\n      };\n      (selectionCtx as any).addEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n    }\n  }\n\n  private removeSelectionListener(): void {\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (\n      selectionCtx &&\n      \"removeEventListener\" in selectionCtx &&\n      this.selectionChangeHandler\n    ) {\n      (selectionCtx as any).removeEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n      this.selectionChangeHandler = undefined;\n    }\n  }\n\n  render() {\n    const roots = this.getRootElements();\n\n    return html`\n      <div class=\"hierarchy-container\">\n        ${this.showHeader ? html`<div class=\"header\">${this.header}</div>` : nothing}\n        ${\n          roots.length > 0\n            ? renderHierarchyChildren(\n                roots,\n                this.hideSelectors,\n                this.showSelectors,\n                true,\n              )\n            : html`<div class=\"empty\">No elements</div>`\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-hierarchy\": EFHierarchy;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFHierarchy.js","names":["EFHierarchy","selectedId: string | null"],"sources":["../../../src/gui/hierarchy/EFHierarchy.ts"],"sourcesContent":["import { consume, provide } from \"@lit/context\";\nimport { css, html, LitElement, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport { isEFTemporal } from \"../../elements/EFTemporal.js\";\nimport { selectionContext } from \"../../canvas/selection/selectionContext.js\";\nimport { TargetController } from \"../../elements/TargetController.js\";\nimport { TWMixin } from \"../TWMixin.js\";\nimport {\n  type HierarchyActions,\n  type HierarchyContext,\n  type HierarchyState,\n  hierarchyContext,\n} from \"./hierarchyContext.js\";\nimport { renderHierarchyChildren } from \"./EFHierarchyItem.js\";\nimport type { EFCanvas } from \"../../canvas/EFCanvas.js\";\n\n@customElement(\"ef-hierarchy\")\nexport class EFHierarchy extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: auto;\n        height: 100%;\n        font-size: 12px;\n        \n        /* Component tokens (reference globals from ef-theme.css) */\n        --hierarchy-bg: var(--ef-color-bg);\n        --hierarchy-border: var(--ef-color-border);\n        --hierarchy-text: var(--ef-color-text);\n        --hierarchy-hover-bg: var(--ef-color-hover);\n        --hierarchy-selected-bg: var(--ef-color-selected);\n        --hierarchy-ancestor-selected-bg: var(--ef-color-selected-subtle);\n        --hierarchy-focused-bg: var(--ef-color-focused);\n        --hierarchy-drop-indicator: var(--ef-color-primary);\n      }\n      \n      .hierarchy-container {\n        background: var(--hierarchy-bg);\n        color: var(--hierarchy-text);\n        padding: 4px 0;\n      }\n      \n      .header {\n        padding: 8px 12px;\n        font-weight: 600;\n        font-size: 11px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--ef-color-text-muted);\n        border-bottom: 1px solid var(--hierarchy-border);\n        margin-bottom: 4px;\n      }\n      \n      .empty {\n        padding: 16px;\n        text-align: center;\n        color: var(--ef-color-text-subtle);\n        font-style: italic;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  target = \"\";\n\n  @property({ type: String })\n  header = \"\";\n\n  @property({ type: Boolean, attribute: \"show-header\" })\n  showHeader = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  @state()\n  targetElement: Element | null = null;\n\n  private targetController?: TargetController;\n\n  @consume({ context: selectionContext, subscribe: true })\n  canvasSelectionContext?: import(\"../../canvas/selection/selectionContext.js\").SelectionContext;\n\n  /**\n   * Get the target canvas element.\n   * The canvas is the source of truth for selection and highlight state.\n   */\n  private getCanvas(): EFCanvas | null {\n    // First try TargetController (for registered elements like EFCanvas)\n    if (this.targetElement && (this.targetElement as any).selectionContext) {\n      return this.targetElement as EFCanvas;\n    }\n    // Fall back to direct lookup for any element with matching ID\n    if (this.target) {\n      const target = document.getElementById(this.target);\n      if (target && (target as any).selectionContext) {\n        return target as EFCanvas;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Get canvas selection context from the target canvas element.\n   * Used when hierarchy is a sibling of canvas (can't access via Lit context).\n   */\n  private getCanvasSelectionContext():\n    | import(\"../../canvas/selection/selectionContext.js\").SelectionContext\n    | undefined {\n    // First try Lit context (works when hierarchy is inside canvas)\n    if (this.canvasSelectionContext) {\n      return this.canvasSelectionContext;\n    }\n    // Use target canvas\n    const canvas = this.getCanvas();\n    return canvas?.selectionContext;\n  }\n\n  /**\n   * Get the currently highlighted element from the canvas.\n   */\n  getHighlightedElement(): HTMLElement | null {\n    const canvas = this.getCanvas();\n    return canvas?.highlightedElement ?? null;\n  }\n\n  /**\n   * Set the highlighted element on the canvas.\n   * Called when user hovers an item in the hierarchy.\n   */\n  setHighlightedElement(element: HTMLElement | null): void {\n    const canvas = this.getCanvas();\n    canvas?.setHighlightedElement(element);\n  }\n\n  @state()\n  private hierarchyState: HierarchyState = {\n    selectedElementId: null,\n    expandedIds: new Set(),\n    draggedElementId: null,\n    dropTargetId: null,\n    dropPosition: null,\n  };\n\n  private selectionChangeHandler?: (event: CustomEvent) => void;\n\n  private hierarchyActions: HierarchyActions = {\n    select: (elementId: string | null) => {\n      const selectionCtx = this.getCanvasSelectionContext();\n      if (selectionCtx) {\n        if (elementId) {\n          // Ensure element is registered with canvas before selecting\n          const element = document.getElementById(elementId);\n          if (element) {\n            // Find the canvas element\n            const canvas = element.closest(\"ef-canvas\") as any;\n            if (canvas && canvas.tryRegisterElement) {\n              // Try to register if not already registered\n              canvas.tryRegisterElement(element);\n            }\n          }\n\n          // Select the element directly by its ID\n          selectionCtx.select(elementId);\n        } else {\n          selectionCtx.clear();\n        }\n      } else {\n        this.hierarchyState = {\n          ...this.hierarchyState,\n          selectedElementId: elementId,\n        };\n      }\n      this.dispatchEvent(\n        new CustomEvent(\"hierarchy-select\", {\n          detail: { elementId },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    },\n\n    toggleExpanded: (elementId: string) => {\n      const newExpanded = new Set(this.hierarchyState.expandedIds);\n      if (newExpanded.has(elementId)) {\n        newExpanded.delete(elementId);\n      } else {\n        newExpanded.add(elementId);\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    setExpanded: (elementId: string, expanded: boolean) => {\n      const newExpanded = new Set(this.hierarchyState.expandedIds);\n      if (expanded) {\n        newExpanded.add(elementId);\n      } else {\n        newExpanded.delete(elementId);\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    startDrag: (elementId: string) => {\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        draggedElementId: elementId,\n      };\n    },\n\n    updateDropTarget: (\n      targetId: string | null,\n      position: \"before\" | \"after\" | \"inside\" | null,\n    ) => {\n      if (targetId === this.hierarchyState.draggedElementId) {\n        return;\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        dropTargetId: targetId,\n        dropPosition: position,\n      };\n    },\n\n    endDrag: () => {\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        draggedElementId: null,\n        dropTargetId: null,\n        dropPosition: null,\n      };\n    },\n\n    reorder: (\n      sourceId: string,\n      targetId: string,\n      position: \"before\" | \"after\" | \"inside\",\n    ) => {\n      this.dispatchEvent(\n        new CustomEvent(\"hierarchy-reorder\", {\n          detail: { sourceId, targetId, position },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    },\n  };\n\n  @provide({ context: hierarchyContext })\n  @state()\n  // @ts-ignore\n  private providedContext: HierarchyContext = {\n    state: this.hierarchyState,\n    actions: this.hierarchyActions,\n    getCanvasSelectionContext: () => this.getCanvasSelectionContext(),\n    getHighlightedElement: () => this.getHighlightedElement(),\n    setHighlightedElement: (el) => this.setHighlightedElement(el),\n  };\n\n  private getTargetElement(): Element | null {\n    // First try TargetController (for registered elements like EFCanvas)\n    if (this.targetElement) {\n      return this.targetElement;\n    }\n    // Fall back to direct lookup for any element with matching ID\n    if (this.target) {\n      return document.getElementById(this.target);\n    }\n    return null;\n  }\n\n  private getRootElements(): Element[] {\n    const target = this.getTargetElement();\n    if (!target) {\n      return [];\n    }\n\n    if (isEFTemporal(target)) {\n      return [target];\n    }\n\n    return Array.from(target.children);\n  }\n\n  private initializeExpandedState(): void {\n    const roots = this.getRootElements();\n    const newExpanded = new Set<string>();\n\n    const addExpandedIds = (element: Element) => {\n      if (element.id) {\n        newExpanded.add(element.id);\n      }\n      for (const child of Array.from(element.children)) {\n        if (child.children.length > 0) {\n          addExpandedIds(child);\n        }\n      }\n    };\n\n    for (const root of roots) {\n      addExpandedIds(root);\n    }\n\n    this.hierarchyState = {\n      ...this.hierarchyState,\n      expandedIds: newExpanded,\n    };\n  }\n\n  select(elementId: string | null): void {\n    this.hierarchyActions.select(elementId);\n  }\n\n  getSelectedElementId(): string | null {\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx) {\n      const selectedIds = Array.from(selectionCtx.selectedIds);\n      if (selectedIds.length === 0) {\n        return null;\n      }\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      return selectedIds[0]!;\n    }\n    return this.hierarchyState.selectedElementId;\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    // Set up TargetController if target changes\n    if (changedProperties.has(\"target\") && !this.targetController) {\n      this.targetController = new TargetController(this as any);\n    }\n\n    // Retry setting up selection listener if not yet connected\n    this.setupSelectionListener();\n\n    // Check for selection changes from canvas (via context or direct access)\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx) {\n      const selectedIds = Array.from(selectionCtx.selectedIds);\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const selectedId: string | null =\n        selectedIds.length === 0 ? null : selectedIds[0]!;\n\n      if (this.hierarchyState.selectedElementId !== selectedId) {\n        this.hierarchyState = {\n          ...this.hierarchyState,\n          selectedElementId: selectedId,\n        };\n      }\n    }\n\n    // Always update provided context to ensure children have fresh getters\n    this.providedContext = {\n      state: this.hierarchyState,\n      actions: this.hierarchyActions,\n      getCanvasSelectionContext: () => this.getCanvasSelectionContext(),\n      getHighlightedElement: () => this.getHighlightedElement(),\n      setHighlightedElement: (el) => this.setHighlightedElement(el),\n    };\n\n    super.willUpdate(changedProperties);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.initializeExpandedState();\n    this.setupSelectionListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeSelectionListener();\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Re-initialize when target changes\n    if (\n      changedProperties.has(\"targetElement\") ||\n      changedProperties.has(\"target\")\n    ) {\n      this.initializeExpandedState();\n      this.removeSelectionListener();\n      this.selectionChangeHandler = undefined;\n      this.setupSelectionListener();\n\n      // Auto-select first root timegroup if nothing is selected\n      this.autoSelectFirstRootTimegroup();\n    }\n  }\n\n  /**\n   * Auto-select the first root timegroup if nothing is currently selected\n   */\n  private autoSelectFirstRootTimegroup(): void {\n    // Only auto-select if nothing is currently selected\n    const currentSelection = this.getSelectedElementId();\n    if (currentSelection) return;\n\n    const roots = this.getRootElements();\n    for (const root of roots) {\n      // Select the first root that is a timegroup (ef-timegroup)\n      if (root.tagName.toLowerCase() === \"ef-timegroup\" && root.id) {\n        this.hierarchyActions.select(root.id);\n        return;\n      }\n    }\n\n    // Fallback: select first root with an ID\n    for (const root of roots) {\n      if (root.id) {\n        this.hierarchyActions.select(root.id);\n        return;\n      }\n    }\n  }\n\n  private setupSelectionListener(): void {\n    // Don't set up if already set up\n    if (this.selectionChangeHandler) {\n      return;\n    }\n\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx && \"addEventListener\" in selectionCtx) {\n      this.selectionChangeHandler = () => {\n        this.requestUpdate(); // Trigger re-render to update hierarchy items\n      };\n      (selectionCtx as any).addEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n    }\n  }\n\n  private removeSelectionListener(): void {\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (\n      selectionCtx &&\n      \"removeEventListener\" in selectionCtx &&\n      this.selectionChangeHandler\n    ) {\n      (selectionCtx as any).removeEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n      this.selectionChangeHandler = undefined;\n    }\n  }\n\n  render() {\n    const roots = this.getRootElements();\n\n    return html`\n      <div class=\"hierarchy-container\" part=\"list\">\n        ${this.showHeader ? html`<div class=\"header\" part=\"header\">${this.header}</div>` : nothing}\n        ${\n          roots.length > 0\n            ? renderHierarchyChildren(\n                roots,\n                this.hideSelectors,\n                this.showSelectors,\n                true,\n              )\n            : html`<div class=\"empty\">No elements</div>`\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-hierarchy\": EFHierarchy;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/hierarchy/EFHierarchyItem.d.ts

@@ -1,16 +1,16 @@
-import { EFVideo } from "../../elements/EFVideo.js";
 import { SelectionContext } from "../../canvas/selection/selectionContext.js";
 import { EFAudio } from "../../elements/EFAudio.js";
+import { EFVideo } from "../../elements/EFVideo.js";
 import { EFTimegroup } from "../../elements/EFTimegroup.js";
 import { EFImage } from "../../elements/EFImage.js";
 import { HierarchyContext } from "./hierarchyContext.js";
-import * as lit11 from "lit";
+import * as lit12 from "lit";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 
 //#region src/gui/hierarchy/EFHierarchyItem.d.ts
 declare const EFHierarchyItem_base: typeof LitElement;
 declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> extends EFHierarchyItem_base {
-  static styles: lit11.CSSResult[];
+  static styles: lit12.CSSResult[];
   hierarchyContext?: HierarchyContext;
   canvasSelectionContext?: SelectionContext;
   element: ElementType;

package/dist/gui/hierarchy/EFHierarchyItem.js

@@ -1,5 +1,5 @@
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { TWMixin } from "../TWMixin2.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { selectionContext } from "../../canvas/selection/selectionContext.js";
 import { hierarchyContext } from "./hierarchyContext.js";
 import { EFAudio } from "../../elements/EFAudio.js";
@@ -10,6 +10,7 @@ import { EFText } from "../../elements/EFText.js";
 import { EFTextSegment } from "../../elements/EFTextSegment.js";
 import { EFWaveform } from "../../elements/EFWaveform.js";
 import { ICONS, phosphorIcon } from "../icons.js";
+import { getElementTypeColor } from "../theme.js";
 import { EFTimegroup } from "../../elements/EFTimegroup.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html, nothing } from "lit";
@@ -147,18 +148,21 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
         cursor: pointer;
         user-select: none;
         border-left: 3px solid transparent;
+        transition: background-color 0.1s ease;
       }
       .item-row:hover {
-        background: var(--hierarchy-hover-bg, rgba(148, 163, 184, 0.2));
+        background: var(--ef-color-hover);
       }
       .item-row[data-selected] {
-        background: var(--hierarchy-selected-bg, rgba(59, 130, 246, 0.3));
+        background: var(--ef-color-selected);
+        border-left-color: var(--ef-color-primary);
       }
       .item-row[data-ancestor-selected] {
-        background: var(--hierarchy-ancestor-selected-bg, rgba(59, 130, 246, 0.15));
+        background: var(--ef-color-selected-subtle);
       }
       .item-row[data-focused] {
-        background: var(--hierarchy-focused-bg, var(--filmstrip-timegroup-focused, rgba(148, 163, 184, 0.4)));
+        background: var(--ef-color-focused);
+        border-left-color: var(--ef-color-primary);
       }
       .item-row[data-dragging] {
         opacity: 0.5;
@@ -214,7 +218,7 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
 		return phosphorIcon(ICONS.code);
 	}
 	get typeColor() {
-		return "rgb(148, 163, 184)";
+		return getElementTypeColor("timegroup", this);
 	}
 	get isFocused() {
 		const highlightedElement = this.hierarchyContext?.getHighlightedElement?.();
@@ -342,6 +346,7 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
       ${this.dropPosition === "before" ? html`<div class="drop-indicator"></div>` : nothing}
       <div
         class="item-row ${this.dropPosition === "inside" ? "drop-inside" : ""}"
+        part="row"
         style=${styleMap({ borderLeftColor: this.typeColor })}
         ?data-focused=${this.isFocused}
         ?data-selected=${this.isSelected}
@@ -368,8 +373,8 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
                 </svg>
               </span>
             ` : html`<span class="expand-icon"></span>`}
-        <span class="icon">${this.icon}</span>
-        <span class="label">${this.displayLabel()}</span>
+        <span class="icon" part="icon">${this.icon}</span>
+        <span class="label" part="label">${this.displayLabel()}</span>
       </div>
       ${this.hasChildren ? html`
             <div class="children" ?data-collapsed=${!expanded}>
@@ -430,10 +435,17 @@ let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierar
 		return phosphorIcon(ICONS.filmSlate);
 	}
 	get typeColor() {
-		return "rgb(148, 163, 184)";
+		return getElementTypeColor("timegroup", this);
 	}
 	displayLabel() {
-		return getFriendlyLabel(this.element, "Composition");
+		const label = getFriendlyLabel(this.element, "Composition");
+		const mode = this.element.mode || "fixed";
+		return html`${label} <span style="opacity: 0.5; font-size: 0.65rem;">${{
+			fixed: "Fixed",
+			sequence: "Sequence",
+			contain: "Container",
+			fit: "Fit"
+		}[mode] || mode}</span>`;
 	}
 };
 EFTimegroupHierarchyItem = __decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);