@ixfx/components 0.7.5 → 0.8.0

package/dist/led.d.ts

@@ -1,14 +1,46 @@
 import { LitElement } from "lit";
 //#region src/led/led.d.ts
+type LedMode = `brightness` | `blink` | `pulse`;
 declare class LedElement extends LitElement {
   #private;
   value: number;
   lit: boolean;
   color: string;
+  glow: boolean;
+  /**
+   * Operating mode:
+   * - `brightness` (default): {@link value} sets the LED brightness directly
+   * - `blink`: LED blinks on/off every {@link rate} milliseconds (this mode
+   *   is what the legacy `blinking` attribute now selects)
+   * - `pulse`: LED sits unlit until {@link pulse} is called, which fires an
+   *   attack/release envelope up to {@link value} and back down
+   */
+  mode: LedMode;
+  /**
+   * Legacy alias for `mode="blink"`. Setting `blinking` switches {@link mode}
+   * to `blink`; clearing it returns to `brightness`.
+   */
   blinking: boolean;
   rate: number;
+  /** Pulse-mode attack time in milliseconds (0 → instant). */
+  attackTime: number;
+  /** Pulse-mode release/decay time in milliseconds (0 → instant). */
+  releaseTime: number;
+  /**
+   * Pulse-mode retrigger behaviour. When set, each {@link pulse} call restarts
+   * the envelope from 0. When unset (default), the attack ramps from wherever
+   * the envelope currently sits, so a retrigger mid-decay is continuous.
+   */
+  pulseRetrigger: boolean;
   willUpdate(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
+  /**
+   * Pulse-mode trigger: lights the LED to {@link value} using an attack/release
+   * envelope, then decays back to unlit. Calling again restarts the envelope
+   * (from 0 if {@link pulseRetrigger} is set, otherwise from the current level).
+   * No-op unless {@link mode} is `pulse`.
+   */
+  pulse(): void;
   protected render(): import("lit").TemplateResult<1>;
   static styles: import("lit").CSSResult;
 }
@@ -18,5 +50,5 @@ declare global {
   }
 }
 //#endregion
-export { LedElement };
+export { LedElement, LedMode };
 //# sourceMappingURL=led.d.ts.map

package/dist/led.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led/led.ts"],"mappings":";;cAKa,mBAAmB;;EAE9B;EAGA;EAGA;EAGA;EAGA;EAIA,WAAW,mBAAmB;EAmB9B;YAwBU,wBAAM;SAIT,sBAAM;;QAqBP;YACI;IACR,YAAY"}
+{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led/led.ts"],"mappings":";;KAIY;cAGC,mBAAmB;;EAE9B;EAGA;EAGA;EAGA;;;;;;;;;EAWA,MAAM;;;;;EAON;EAGA;;EAIA;;EAIA;;;;;;EAQA;EAWA,WAAW,mBAAmB;EA+C9B;;;;;;;EAYA;YA6EU,wBAAM;SAIT,sBAAM;;QAwEP;YACI;IACR,YAAY"}

package/dist/led.js

@@ -8,15 +8,62 @@ let LedElement = class LedElement extends LitElement {
 		this.value = 0;
 		this.lit = false;
 		this.color = `oklch(50% 0.15 25)`;
+		this.glow = false;
+		this.mode = `brightness`;
 		this.blinking = false;
 		this.rate = 500;
+		this.attackTime = 40;
+		this.releaseTime = 400;
+		this.pulseRetrigger = false;
+		this.#appliedMode = `brightness`;
+		this.#pulseStart = 0;
+		this.#pulsePeak = 0;
+		this.#pulseFrom = 0;
+		this.#pulseLevel = 0;
+		this.#pulseTick = (now) => {
+			const attack = Math.max(0, this.attackTime);
+			const release = Math.max(0, this.releaseTime);
+			const from = this.#pulseFrom;
+			const peak = this.#pulsePeak;
+			const elapsed = now - this.#pulseStart;
+			let level;
+			if (attack > 0 && elapsed < attack) level = from + (peak - from) * (elapsed / attack);
+			else if (elapsed < attack + release) level = release > 0 ? peak * (1 - (elapsed - attack) / release) : 0;
+			else level = 0;
+			level = Math.max(0, Math.min(Math.max(from, peak), level));
+			this.#pulseLevel = level;
+			this.style.setProperty(`--value`, String(level));
+			if (elapsed < attack + release) this.#pulseRaf = requestAnimationFrame(this.#pulseTick);
+			else {
+				this.#pulseRaf = void 0;
+				this.#pulseLevel = 0;
+			}
+		};
 	}
 	#blinkInterval;
+	#appliedMode;
+	#pulseRaf;
+	#pulseStart;
+	#pulsePeak;
+	#pulseFrom;
+	#pulseLevel;
 	willUpdate(changedProperties) {
-		if (changedProperties.has(`lit`)) this.value = this.lit ? 1 : 0;
-		if (changedProperties.has(`value`) || changedProperties.has(`lit`)) this.style.setProperty(`--value`, String(this.value));
-		if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) this.#updateBlinking();
+		if (changedProperties.has(`blinking`)) {
+			if (this.blinking) this.mode = `blink`;
+			else if (this.mode === `blink`) this.mode = `brightness`;
+		}
+		if (this.mode !== this.#appliedMode) {
+			this.#appliedMode = this.mode;
+			this.#onModeChange();
+		}
+		if (changedProperties.has(`lit`)) {
+			if (this.lit) this.value = 1;
+			else if (changedProperties.get(`lit`) !== void 0) this.value = 0;
+		}
+		if (changedProperties.has(`color`)) this.style.setProperty(`--_color-attr`, this.color);
+		if (this.mode !== `pulse` && (changedProperties.has(`value`) || changedProperties.has(`lit`))) this.style.setProperty(`--value`, String(this.value));
 		if (changedProperties.has(`rate`)) {
+			this.#updateBlinking();
 			const transitionMs = this.rate < 300 ? this.rate * .5 : 150;
 			this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);
 		}
@@ -24,18 +71,43 @@ let LedElement = class LedElement extends LitElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#stopBlinking();
+		this.#stopPulse();
 	}
-	#updateBlinking() {
-		if (this.blinking && this.rate > 0) {
-			this.#stopBlinking();
-			this.#blinkInterval = window.setInterval(() => {
-				this.value = this.value === 0 ? 1 : 0;
-			}, this.rate);
-		} else {
-			this.#stopBlinking();
-			this.value = 0;
+	/**
+	* Pulse-mode trigger: lights the LED to {@link value} using an attack/release
+	* envelope, then decays back to unlit. Calling again restarts the envelope
+	* (from 0 if {@link pulseRetrigger} is set, otherwise from the current level).
+	* No-op unless {@link mode} is `pulse`.
+	*/
+	pulse() {
+		if (this.mode !== `pulse`) return;
+		this.#pulsePeak = this.value;
+		this.#pulseFrom = this.pulseRetrigger ? 0 : this.#pulseLevel;
+		this.#pulseStart = performance.now();
+		if (this.#pulseRaf === void 0) this.#pulseRaf = requestAnimationFrame(this.#pulseTick);
+	}
+	#onModeChange() {
+		this.#stopPulse();
+		this.#pulseLevel = 0;
+		this.blinking = this.mode === `blink`;
+		this.#updateBlinking();
+		this.style.setProperty(`--value`, this.mode === `pulse` ? `0` : String(this.value));
+	}
+	#pulseTick;
+	#stopPulse() {
+		if (this.#pulseRaf !== void 0) {
+			cancelAnimationFrame(this.#pulseRaf);
+			this.#pulseRaf = void 0;
 		}
 	}
+	#updateBlinking() {
+		const wasBlinking = this.#blinkInterval !== void 0;
+		this.#stopBlinking();
+		if (this.mode === `blink` && this.rate > 0) this.#blinkInterval = window.setInterval(() => {
+			this.value = this.value === 0 ? 1 : 0;
+		}, this.rate);
+		else if (wasBlinking || this.mode === `blink`) this.value = 0;
+	}
 	#stopBlinking() {
 		if (this.#blinkInterval !== void 0) {
 			clearInterval(this.#blinkInterval);
@@ -49,6 +121,8 @@ let LedElement = class LedElement extends LitElement {
 		this.styles = css`
     :host {
       --_size: var(--size, 1ex);
+      /* Resolved colour: explicit --colour wins, then the \`color\` attribute, then a default. */
+      --_colour: var(--colour, var(--_color-attr, oklch(50% 0.15 25)));
       display: inline-block;
       min-width: 1ex;
       min-height: 1ex;
@@ -58,12 +132,61 @@ let LedElement = class LedElement extends LitElement {
     }
 
     div {
+      position: relative;
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));
+      background: color-mix(in oklch, var(--_colour), white calc((1 - var(--value, 0)) * 50%));
       transition: background var(--transition-duration, 150ms) ease-out;
     }
+
+    /* Glow: a more realistic domed LED with a specular highlight and coloured bloom. */
+    :host([glow]) {
+      /* Body darkens toward black as the LED dims, so an unlit LED reads as a dark dome. */
+      --_body: color-mix(in oklch, var(--_colour), black calc((1 - var(--value, 0)) * 60%));
+      overflow: visible;
+    }
+
+    :host([glow]) div {
+      background:
+        radial-gradient(circle at 32% 28%,
+          color-mix(in oklch, var(--_body), white 55%) 0%,
+          var(--_body) 45%,
+          color-mix(in oklch, var(--_body), black 32%) 100%);
+      box-shadow:
+        /* inner rim shading for depth */
+        inset 0 calc(var(--_size) * -0.1) calc(var(--_size) * 0.18)
+          color-mix(in oklch, var(--_body), black 45%),
+        inset 0 calc(var(--_size) * 0.08) calc(var(--_size) * 0.14)
+          color-mix(in oklch, var(--_body), white 25%),
+        /* coloured bloom, scaled by value so it only glows when lit */
+        0 0 calc(var(--_size) * 0.6 * var(--value, 0)) calc(var(--_size) * 0.12 * var(--value, 0))
+          var(--_colour),
+        0 0 calc(var(--_size) * 1.7 * var(--value, 0)) calc(var(--_size) * 0.5 * var(--value, 0))
+          color-mix(in oklch, var(--_colour), transparent 45%);
+      transition:
+        background var(--transition-duration, 150ms) ease-out,
+        box-shadow var(--transition-duration, 150ms) ease-out;
+    }
+
+    /* Specular highlight blob near the top-left. */
+    :host([glow]) div::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: radial-gradient(ellipse 55% 45% at 30% 22%,
+        color-mix(in oklch, white, transparent 10%) 0%,
+        transparent 60%);
+      pointer-events: none;
+    }
+
+    /* Pulse mode animates --value frame-by-frame, so drop the CSS transition
+       that would otherwise smear the envelope. Placed last to win over the
+       glow rule for elements matching both. */
+    :host([mode="pulse"]) div {
+      transition: none;
+    }
   `;
 	}
 };
@@ -74,6 +197,15 @@ __decorate([property({
 	reflect: true
 })], LedElement.prototype, "lit", void 0);
 __decorate([property({ type: String })], LedElement.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `glow`,
+	reflect: true
+})], LedElement.prototype, "glow", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LedElement.prototype, "mode", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: `blinking`,
@@ -83,6 +215,18 @@ __decorate([property({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `attack-time`
+})], LedElement.prototype, "attackTime", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `release-time`
+})], LedElement.prototype, "releaseTime", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `pulse-retrigger`
+})], LedElement.prototype, "pulseRetrigger", void 0);
 LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 export { LedElement };

package/dist/led.js.map

@@ -1 +1 @@
-{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval","customElement"],"sources":["../src/led/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Boolean, attribute: `lit`, reflect: true })\n  lit = false;\n\n  @property({ type: String })\n  color = `oklch(50% 0.15 25)`;\n\n  @property({ type: Boolean, attribute: `blinking`, reflect: true })\n  blinking = false;\n\n  @property({ type: Number, attribute: `rate` })\n  rate = 500;\n\n  #blinkInterval: number | undefined;\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`lit`)) {\n      this.value = this.lit ? 1 : 0;\n    }\n\n    if (changedProperties.has(`value`) || changedProperties.has(`lit`)) {\n      this.style.setProperty(`--value`, String(this.value));\n    }\n\n    if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {\n      this.#updateBlinking();\n    }\n\n    if (changedProperties.has(`rate`)) {\n      const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n      this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#stopBlinking();\n  }\n\n  #updateBlinking() {\n    if (this.blinking && this.rate > 0) {\n      this.#stopBlinking();\n      this.#blinkInterval = window.setInterval(() => {\n        this.value = this.value === 0 ? 1 : 0;\n      }, this.rate);\n    } else {\n      this.#stopBlinking();\n      this.value = 0;\n    }\n  }\n\n  #stopBlinking() {\n    if (this.#blinkInterval !== undefined) {\n      clearInterval(this.#blinkInterval);\n      this.#blinkInterval = undefined;\n    }\n  }\n\n  protected render() {\n    return html`<div part=\"circle\"></div>`;\n  }\n\n  static styles = css`\n    :host {\n      --_size: var(--size, 1ex);\n      display: inline-block;\n      min-width: 1ex;\n      min-height: 1ex;\n      width: var(--_size);\n      height: var(--_size);\n      vertical-align: middle;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));\n      transition: background var(--transition-duration, 150ms) ease-out;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-led\": LedElement;\n  }\n}\n"],"mappings":";;;;AAKO,IAAM,aAAN,MAAM,mBAAmB,WAAW;;;EAEjC,KAAA,QAAA;EAGF,KAAA,MAAA;EAGE,KAAA,QAAA;EAGG,KAAA,WAAA;EAGJ,KAAA,OAAA;;CAEP;CAEA,WAAW,mBAAyC;EAClD,IAAI,kBAAkB,IAAI,KAAK,GAC7B,KAAK,QAAQ,KAAK,MAAM,IAAI;EAG9B,IAAI,kBAAkB,IAAI,OAAO,KAAK,kBAAkB,IAAI,KAAK,GAC/D,KAAK,MAAM,YAAY,WAAW,OAAO,KAAK,KAAK,CAAC;EAGtD,IAAI,kBAAkB,IAAI,UAAU,KAAK,kBAAkB,IAAI,MAAM,GACnE,KAAKA,gBAAgB;EAGvB,IAAI,kBAAkB,IAAI,MAAM,GAAG;GACjC,MAAM,eAAe,KAAK,OAAO,MAAM,KAAK,OAAO,KAAM;GACzD,KAAK,MAAM,YAAY,yBAAyB,GAAG,aAAa,GAAG;EACrE;CACF;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAKC,cAAc;CACrB;CAEA,kBAAkB;EAChB,IAAI,KAAK,YAAY,KAAK,OAAO,GAAG;GAClC,KAAKA,cAAc;GACnB,KAAKC,iBAAiB,OAAO,kBAAkB;IAC7C,KAAK,QAAQ,KAAK,UAAU,IAAI,IAAI;GACtC,GAAG,KAAK,IAAI;EACd,OAAO;GACL,KAAKD,cAAc;GACnB,KAAK,QAAQ;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,KAAKC,mBAAmB,KAAA,GAAW;GACrC,cAAc,KAAKA,cAAc;GACjC,KAAKA,iBAAiB,KAAA;EACxB;CACF;CAEA,SAAmB;EACjB,OAAO,IAAI;CACb;;EAEgB,KAAA,SAAA,GAAG;;;;;;;;;;;;;;;;;;;;AAmBrB;AAnFG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,OAAA,KAAA,CAAA;AAG3D,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,YAAA,KAAA,CAAA;AAGhE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAO,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAd9CC,aAAAA,WAAAA,CAAAA,kBAAc,UAAU,CAAA,GAAA,UAAA"}
+{"version":3,"file":"led.js","names":["#pulseFrom","#pulsePeak","#pulseStart","#pulseLevel","#pulseRaf","#pulseTick","#appliedMode","#onModeChange","#updateBlinking","#stopBlinking","#stopPulse","#blinkInterval","customElement"],"sources":["../src/led/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\nexport type LedMode = `brightness` | `blink` | `pulse`;\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Boolean, attribute: `lit`, reflect: true })\n  lit = false;\n\n  @property({ type: String })\n  color = `oklch(50% 0.15 25)`;\n\n  @property({ type: Boolean, attribute: `glow`, reflect: true })\n  glow = false;\n\n  /**\n   * Operating mode:\n   * - `brightness` (default): {@link value} sets the LED brightness directly\n   * - `blink`: LED blinks on/off every {@link rate} milliseconds (this mode\n   *   is what the legacy `blinking` attribute now selects)\n   * - `pulse`: LED sits unlit until {@link pulse} is called, which fires an\n   *   attack/release envelope up to {@link value} and back down\n   */\n  @property({ type: String, reflect: true })\n  mode: LedMode = `brightness`;\n\n  /**\n   * Legacy alias for `mode=\"blink\"`. Setting `blinking` switches {@link mode}\n   * to `blink`; clearing it returns to `brightness`.\n   */\n  @property({ type: Boolean, attribute: `blinking`, reflect: true })\n  blinking = false;\n\n  @property({ type: Number, attribute: `rate` })\n  rate = 500;\n\n  /** Pulse-mode attack time in milliseconds (0 → instant). */\n  @property({ type: Number, attribute: `attack-time` })\n  attackTime = 40;\n\n  /** Pulse-mode release/decay time in milliseconds (0 → instant). */\n  @property({ type: Number, attribute: `release-time` })\n  releaseTime = 400;\n\n  /**\n   * Pulse-mode retrigger behaviour. When set, each {@link pulse} call restarts\n   * the envelope from 0. When unset (default), the attack ramps from wherever\n   * the envelope currently sits, so a retrigger mid-decay is continuous.\n   */\n  @property({ type: Boolean, attribute: `pulse-retrigger` })\n  pulseRetrigger = false;\n\n  #blinkInterval: number | undefined;\n  #appliedMode: LedMode = `brightness`;\n\n  #pulseRaf: number | undefined;\n  #pulseStart = 0;\n  #pulsePeak = 0;\n  #pulseFrom = 0;\n  #pulseLevel = 0;\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    // `blinking` is a compatibility alias for mode=\"blink\".\n    if (changedProperties.has(`blinking`)) {\n      if (this.blinking) {\n        this.mode = `blink`;\n      } else if (this.mode === `blink`) {\n        this.mode = `brightness`;\n      }\n    }\n\n    // Handle a mode change (including one triggered by `blinking`, above, in\n    // this same update). `#appliedMode` is compared directly rather than via\n    // `changedProperties` so a same-pass change is still caught.\n    if (this.mode !== this.#appliedMode) {\n      this.#appliedMode = this.mode;\n      this.#onModeChange();\n    }\n\n    if (changedProperties.has(`lit`)) {\n      // Map `lit` onto `value`, but don't let the initial (undefined -> false)\n      // change clobber an explicit `value` attribute.\n      if (this.lit) {\n        this.value = 1;\n      } else if (changedProperties.get(`lit`) !== undefined) {\n        this.value = 0;\n      }\n    }\n\n    if (changedProperties.has(`color`)) {\n      this.style.setProperty(`--_color-attr`, this.color);\n    }\n\n    // In pulse mode `--value` is driven by the envelope, not by `value`.\n    if (\n      this.mode !== `pulse`\n      && (changedProperties.has(`value`) || changedProperties.has(`lit`))\n    ) {\n      this.style.setProperty(`--value`, String(this.value));\n    }\n\n    if (changedProperties.has(`rate`)) {\n      this.#updateBlinking();\n      const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n      this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#stopBlinking();\n    this.#stopPulse();\n  }\n\n  /**\n   * Pulse-mode trigger: lights the LED to {@link value} using an attack/release\n   * envelope, then decays back to unlit. Calling again restarts the envelope\n   * (from 0 if {@link pulseRetrigger} is set, otherwise from the current level).\n   * No-op unless {@link mode} is `pulse`.\n   */\n  pulse() {\n    if (this.mode !== `pulse`)\n      return;\n    this.#pulsePeak = this.value;\n    this.#pulseFrom = this.pulseRetrigger ? 0 : this.#pulseLevel;\n    this.#pulseStart = performance.now();\n    if (this.#pulseRaf === undefined) {\n      this.#pulseRaf = requestAnimationFrame(this.#pulseTick);\n    }\n  }\n\n  #onModeChange() {\n    this.#stopPulse();\n    this.#pulseLevel = 0;\n    this.blinking = this.mode === `blink`;\n    this.#updateBlinking();\n    this.style.setProperty(\n      `--value`,\n      this.mode === `pulse` ? `0` : String(this.value),\n    );\n  }\n\n  #pulseTick = (now: number) => {\n    const attack = Math.max(0, this.attackTime);\n    const release = Math.max(0, this.releaseTime);\n    const from = this.#pulseFrom;\n    const peak = this.#pulsePeak;\n    const elapsed = now - this.#pulseStart;\n\n    let level: number;\n    if (attack > 0 && elapsed < attack) {\n      // Ramp from the envelope's starting level up to the peak.\n      level = from + (peak - from) * (elapsed / attack);\n    } else if (elapsed < attack + release) {\n      level = release > 0 ? peak * (1 - (elapsed - attack) / release) : 0;\n    } else {\n      level = 0;\n    }\n    level = Math.max(0, Math.min(Math.max(from, peak), level));\n    this.#pulseLevel = level;\n    this.style.setProperty(`--value`, String(level));\n\n    if (elapsed < attack + release) {\n      this.#pulseRaf = requestAnimationFrame(this.#pulseTick);\n    } else {\n      this.#pulseRaf = undefined;\n      this.#pulseLevel = 0;\n    }\n  };\n\n  #stopPulse() {\n    if (this.#pulseRaf !== undefined) {\n      cancelAnimationFrame(this.#pulseRaf);\n      this.#pulseRaf = undefined;\n    }\n  }\n\n  #updateBlinking() {\n    const wasBlinking = this.#blinkInterval !== undefined;\n    this.#stopBlinking();\n    if (this.mode === `blink` && this.rate > 0) {\n      this.#blinkInterval = window.setInterval(() => {\n        this.value = this.value === 0 ? 1 : 0;\n      }, this.rate);\n    } else if (wasBlinking || this.mode === `blink`) {\n      // Leaving blink mode (or blink with rate 0): settle to off.\n      this.value = 0;\n    }\n  }\n\n  #stopBlinking() {\n    if (this.#blinkInterval !== undefined) {\n      clearInterval(this.#blinkInterval);\n      this.#blinkInterval = undefined;\n    }\n  }\n\n  protected render() {\n    return html`<div part=\"circle\"></div>`;\n  }\n\n  static styles = css`\n    :host {\n      --_size: var(--size, 1ex);\n      /* Resolved colour: explicit --colour wins, then the \\`color\\` attribute, then a default. */\n      --_colour: var(--colour, var(--_color-attr, oklch(50% 0.15 25)));\n      display: inline-block;\n      min-width: 1ex;\n      min-height: 1ex;\n      width: var(--_size);\n      height: var(--_size);\n      vertical-align: middle;\n    }\n\n    div {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: color-mix(in oklch, var(--_colour), white calc((1 - var(--value, 0)) * 50%));\n      transition: background var(--transition-duration, 150ms) ease-out;\n    }\n\n    /* Glow: a more realistic domed LED with a specular highlight and coloured bloom. */\n    :host([glow]) {\n      /* Body darkens toward black as the LED dims, so an unlit LED reads as a dark dome. */\n      --_body: color-mix(in oklch, var(--_colour), black calc((1 - var(--value, 0)) * 60%));\n      overflow: visible;\n    }\n\n    :host([glow]) div {\n      background:\n        radial-gradient(circle at 32% 28%,\n          color-mix(in oklch, var(--_body), white 55%) 0%,\n          var(--_body) 45%,\n          color-mix(in oklch, var(--_body), black 32%) 100%);\n      box-shadow:\n        /* inner rim shading for depth */\n        inset 0 calc(var(--_size) * -0.1) calc(var(--_size) * 0.18)\n          color-mix(in oklch, var(--_body), black 45%),\n        inset 0 calc(var(--_size) * 0.08) calc(var(--_size) * 0.14)\n          color-mix(in oklch, var(--_body), white 25%),\n        /* coloured bloom, scaled by value so it only glows when lit */\n        0 0 calc(var(--_size) * 0.6 * var(--value, 0)) calc(var(--_size) * 0.12 * var(--value, 0))\n          var(--_colour),\n        0 0 calc(var(--_size) * 1.7 * var(--value, 0)) calc(var(--_size) * 0.5 * var(--value, 0))\n          color-mix(in oklch, var(--_colour), transparent 45%);\n      transition:\n        background var(--transition-duration, 150ms) ease-out,\n        box-shadow var(--transition-duration, 150ms) ease-out;\n    }\n\n    /* Specular highlight blob near the top-left. */\n    :host([glow]) div::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: 50%;\n      background: radial-gradient(ellipse 55% 45% at 30% 22%,\n        color-mix(in oklch, white, transparent 10%) 0%,\n        transparent 60%);\n      pointer-events: none;\n    }\n\n    /* Pulse mode animates --value frame-by-frame, so drop the CSS transition\n       that would otherwise smear the envelope. Placed last to win over the\n       glow rule for elements matching both. */\n    :host([mode=\"pulse\"]) div {\n      transition: none;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-led\": LedElement;\n  }\n}\n"],"mappings":"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"}

package/dist/miller.d.ts

@@ -1,6 +1,6 @@
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Bc23SI94.js";
 import { a as TreeComponent, c as TreeExpandEvent, d as TreeSearchHost, f as TreeSelectDetail, g as TreeDataModel, h as TreeTickleEvent, i as TreeCollapseEvent, l as TreeItemClickDetail, m as TreeTickleDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, r as TreeCollapseDetail, s as TreeExpandDetail, t as TreeActivateDetail, u as TreeItemClickEvent } from "./tree-component-F6qZ0Gdv.js";
-import { y as ListSearchController } from "./index-CBS4z1v-.js";
+import { S as ListSearchController } from "./index-h6gxtfHH.js";
 import { n as TickledController } from "./tickled-controller-Bn3YdQsM.js";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";

package/dist/miller.js

@@ -2,7 +2,7 @@ import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.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-DpbSJtgj.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 "./interaction-Cr13azbM.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";

package/dist/narrowed-text.js

@@ -3,7 +3,7 @@ import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { f as createIncrSearch } from "./incr-search-DpbSJtgj.js";
+import { p as createIncrSearch } from "./incr-search-C05WjbZh.js";
 import "./interaction-Cr13azbM.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";

package/dist/panel.d.ts

@@ -1,4 +1,4 @@
-import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, o as TitlebarToggleEvent, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Bj5pfdw_.js";
+import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, o as TitlebarToggleEvent, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-YQ-jVQoS.js";
 import { LitElement } from "lit";
 //#region src/panel/panel.d.ts
 /** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */
@@ -24,6 +24,8 @@ declare class PanelElement extends LitElement {
   variant: PanelVariant;
   /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */
   hideTitlebar: boolean;
+  /** Keep the toolbar visible even when the panel is collapsed. */
+  keepToolbar: boolean;
   private _onTitlebarToggle;
   private _onCloseClick;
   protected render(): import("lit").TemplateResult<1>;

package/dist/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;;KAgBY,mBAAmB;KACnB,eAAe;KACf,yBAAyB;KACzB,oBAAoB;KACpB,mBAAmB;KACnB,kBAAkB;UAEb;EACf,QAAQ;EACR,OAAO;;cAII,qBAAqB;EACY;EACyB,aAAa;EACrD;;EAEe;EAChB;EACwB;EACS,mBAAmB;EACf,SAAS;;EAEjB;UAEjD;UAYA;YAWW,wBAAM;SA6BT,sBAAM;;QA2FhB;YACI;IACR,cAAc;;;UAID;EACf,oBAAoB,gBAAgB,sBAClC,MAAM,GACN,WAAW,MAAM,cAAc,OAAO,qBAAqB,aAC3D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;;KAgBY,mBAAmB;KACnB,eAAe;KACf,yBAAyB;KACzB,oBAAoB;KACpB,mBAAmB;KACnB,kBAAkB;UAEb;EACf,QAAQ;EACR,OAAO;;cAII,qBAAqB;EACY;EACyB,aAAa;EACrD;;EAEe;EAChB;EACwB;EACS,mBAAmB;EACf,SAAS;;EAEjB;;EAED;UAEhD;UAYA;YAWW,wBAAM;SA8BT,sBAAM;;QAmHhB;YACI;IACR,cAAc;;;UAID;EACf,oBAAoB,gBAAgB,sBAClC,MAAM,GACN,WAAW,MAAM,cAAc,OAAO,qBAAqB,aAC3D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/panel.js

@@ -16,6 +16,7 @@ let PanelElement = class PanelElement extends LitElement {
 		this.toggleInteraction = `implicit`;
 		this.variant = `titlebar`;
 		this.hideTitlebar = false;
+		this.keepToolbar = false;
 	}
 	_onTitlebarToggle(event) {
 		event.stopPropagation();
@@ -35,6 +36,7 @@ let PanelElement = class PanelElement extends LitElement {
 		this.remove();
 	}
 	render() {
+		const showToolbar = this.keepToolbar || !this.collapsed;
 		return html`
       ${this.hideTitlebar ? nothing : html`
         <ixfx-titlebar
@@ -49,7 +51,7 @@ let PanelElement = class PanelElement extends LitElement {
           @toggle=${this._onTitlebarToggle}
           @close=${this._onCloseClick}
         >
-          <slot name="toolbar" slot="toolbar"></slot>
+          ${showToolbar ? html`<slot name="toolbar" slot="toolbar"></slot>` : nothing}
         </ixfx-titlebar>
         `}
 
@@ -149,6 +151,30 @@ let PanelElement = class PanelElement extends LitElement {
     :host([variant="midline"][orientation="vertical"]) .content-wrapper {
       background: transparent;
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+
+    :host([variant="tree"]) {
+      border: none !important;
+      border-radius: 0 !important;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .content-inner {
+      box-shadow: none;
+      background: transparent;
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .content-wrapper {
+      background: transparent;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .content-inner {
+      width: max-content;
+      height: 100%;
+      transform: none;
+    }
   `];
 	}
 };
@@ -184,6 +210,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-titlebar`
 })], PanelElement.prototype, "hideTitlebar", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `keep-toolbar`
+})], PanelElement.prototype, "keepToolbar", void 0);
 PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 export { PanelElement };

package/dist/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type {\n  TitlebarCloseEvent,\n  TitlebarOrientation,\n  TitlebarToggleDetail,\n  TitlebarToggleEvent,\n  TitlebarToggleInteraction,\n  TitlebarVariant,\n} from '../titlebar/titlebar.js';\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 '../titlebar/titlebar.js';\n\n/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */\nexport type PanelOrientation = TitlebarOrientation;\nexport type PanelVariant = TitlebarVariant;\nexport type PanelToggleInteraction = TitlebarToggleInteraction;\nexport type PanelToggleDetail = TitlebarToggleDetail;\nexport type PanelToggleEvent = TitlebarToggleEvent;\nexport type PanelCloseEvent = TitlebarCloseEvent;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */\n  @property({ type: Boolean, reflect: true }) collapsible = true;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */\n  @property({ type: Boolean, attribute: `hide-titlebar` }) hideTitlebar = false;\n\n  private _onTitlebarToggle(event: TitlebarToggleEvent) {\n    event.stopPropagation();\n    this.collapsed = event.detail.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  protected override render() {\n    return html`\n      ${this.hideTitlebar\n        ? nothing\n        : html`\n        <ixfx-titlebar\n          .title=${this.title}\n          .iconName=${this.iconName}\n          .orientation=${this.orientation}\n          .variant=${this.variant}\n          .closable=${this.closable}\n          .collapsible=${this.collapsible}\n          .collapsed=${this.collapsed}\n          .toggleInteraction=${this.toggleInteraction}\n          @toggle=${this._onTitlebarToggle}\n          @close=${this._onCloseClick}\n        >\n          <slot name=\"toolbar\" slot=\"toolbar\"></slot>\n        </ixfx-titlebar>\n        `}\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    ixfx-titlebar {\n      flex-shrink: 0;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-s);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height: 100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    /* === Midline variant (host + content only; bar chrome lives in ixfx-titlebar) === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AA6BO,IAAM,eAAN,MAAM,qBAAqB,WAAW;;;EACa,KAAA,YAAA;EAC6C,KAAA,cAAA;EAC7D,KAAA,WAAA;EAEkB,KAAA,cAAA;EACtB,KAAA,QAAA;EAC2B,KAAA,WAAA;EAC0C,KAAA,oBAAA;EAChB,KAAA,UAAA;EAEjB,KAAA,eAAA;;CAExE,kBAA0B,OAA4B;EACpD,MAAM,gBAAgB;EACtB,KAAK,YAAY,MAAM,OAAO;EAC9B,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,cAAsB,OAAc;EAClC,MAAM,gBAAgB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,SAA4B;EAC1B,OAAO,IAAI;QACP,KAAK,eACH,UACA,IAAI;;mBAEK,KAAK,MAAM;sBACR,KAAK,SAAS;yBACX,KAAK,YAAY;qBACrB,KAAK,QAAQ;sBACZ,KAAK,SAAS;yBACX,KAAK,YAAY;uBACnB,KAAK,UAAU;+BACP,KAAK,kBAAkB;oBAClC,KAAK,kBAAkB;mBACxB,KAAK,cAAc;;;;UAI5B;;+CAEqC,CAAC,KAAK,UAAU;;;;;;CAM7D;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwF5C;;AACH;AAzJG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;AAC1D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;AAE9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAgB,CAAC,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;AAZxDA,eAAAA,WAAAA,CAAAA,kBAAc,YAAY,CAAA,GAAA,YAAA"}
+{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type {\n  TitlebarCloseEvent,\n  TitlebarOrientation,\n  TitlebarToggleDetail,\n  TitlebarToggleEvent,\n  TitlebarToggleInteraction,\n  TitlebarVariant,\n} from '../titlebar/titlebar.js';\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 '../titlebar/titlebar.js';\n\n/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */\nexport type PanelOrientation = TitlebarOrientation;\nexport type PanelVariant = TitlebarVariant;\nexport type PanelToggleInteraction = TitlebarToggleInteraction;\nexport type PanelToggleDetail = TitlebarToggleDetail;\nexport type PanelToggleEvent = TitlebarToggleEvent;\nexport type PanelCloseEvent = TitlebarCloseEvent;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */\n  @property({ type: Boolean, reflect: true }) collapsible = true;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */\n  @property({ type: Boolean, attribute: `hide-titlebar` }) hideTitlebar = false;\n  /** Keep the toolbar visible even when the panel is collapsed. */\n  @property({ type: Boolean, attribute: `keep-toolbar` }) keepToolbar = false;\n\n  private _onTitlebarToggle(event: TitlebarToggleEvent) {\n    event.stopPropagation();\n    this.collapsed = event.detail.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  protected override render() {\n    const showToolbar = this.keepToolbar || !this.collapsed;\n    return html`\n      ${this.hideTitlebar\n        ? nothing\n        : html`\n        <ixfx-titlebar\n          .title=${this.title}\n          .iconName=${this.iconName}\n          .orientation=${this.orientation}\n          .variant=${this.variant}\n          .closable=${this.closable}\n          .collapsible=${this.collapsible}\n          .collapsed=${this.collapsed}\n          .toggleInteraction=${this.toggleInteraction}\n          @toggle=${this._onTitlebarToggle}\n          @close=${this._onCloseClick}\n        >\n          ${showToolbar ? html`<slot name=\"toolbar\" slot=\"toolbar\"></slot>` : nothing}\n        </ixfx-titlebar>\n        `}\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    ixfx-titlebar {\n      flex-shrink: 0;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-s);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height: 100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    /* === Midline variant (host + content only; bar chrome lives in ixfx-titlebar) === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    /* === Tree variant: VS Code explorer / Outline style === */\n\n    :host([variant=\"tree\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"]) .content-inner {\n      box-shadow: none;\n      background: transparent;\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height: 100%;\n      transform: none;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AA6BO,IAAM,eAAN,MAAM,qBAAqB,WAAW;;;EACa,KAAA,YAAA;EAC6C,KAAA,cAAA;EAC7D,KAAA,WAAA;EAEkB,KAAA,cAAA;EACtB,KAAA,QAAA;EAC2B,KAAA,WAAA;EAC0C,KAAA,oBAAA;EAChB,KAAA,UAAA;EAEjB,KAAA,eAAA;EAEF,KAAA,cAAA;;CAEtE,kBAA0B,OAA4B;EACpD,MAAM,gBAAgB;EACtB,KAAK,YAAY,MAAM,OAAO;EAC9B,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,cAAsB,OAAc;EAClC,MAAM,gBAAgB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,SAA4B;EAC1B,MAAM,cAAc,KAAK,eAAe,CAAC,KAAK;EAC9C,OAAO,IAAI;QACP,KAAK,eACH,UACA,IAAI;;mBAEK,KAAK,MAAM;sBACR,KAAK,SAAS;yBACX,KAAK,YAAY;qBACrB,KAAK,QAAQ;sBACZ,KAAK,SAAS;yBACX,KAAK,YAAY;uBACnB,KAAK,UAAU;+BACP,KAAK,kBAAkB;oBAClC,KAAK,kBAAkB;mBACxB,KAAK,cAAc;;YAE1B,cAAc,IAAI,gDAAgD,QAAQ;;UAE5E;;+CAEqC,CAAC,KAAK,UAAU;;;;;;CAM7D;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgH5C;;AACH;AApLG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;AAC1D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;AAE9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAgB,CAAC,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;AAEtD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAe,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAdvDA,eAAAA,WAAAA,CAAAA,kBAAc,YAAY,CAAA,GAAA,YAAA"}

package/dist/plots.d.ts

@@ -1,2 +1,2 @@
-import { C as ColourMapConfig, D as computeColour, E as applyAgeModification, O as parseColourScaleAttr, S as PlotDataSeriesOptions, T as ColourResult, _ as PlotSingleAxisPointerMoveDetail, a as PlotHistogramBucketClickDetail, b as SingleAxisDrawStyle, c as PlotHistogramOrientation, d as PlotMultiAxisDataPointClickDetail, f as PlotMultiAxisDataPointClickEvent, g as PlotSingleAxisElementEventMap, h as PlotSingleAxis, i as PlotHistogram, k as readBaseColour, l as PlotHistogramValueTooltips, m as PlotMultiAxisLayout, n as XyAgeStyle, o as PlotHistogramBucketClickEvent, p as PlotMultiAxisElementEventMap, r as XyDrawStyle, s as PlotHistogramElementEventMap, t as PlotXyAxis, u as PlotMultiAxis, v as PlotSingleAxisPointerMoveEvent, w as ColourMode, x as PlotDataSeries, y as SingleAxisAgeStyle } from "./xy-axis-5KhVTNoX.js";
-export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };
+import { A as readBaseColour, C as PlotDataSeriesOptions, D as applyAgeModification, E as ColourResult, O as computeColour, S as PlotDataSeries, T as ColourMode, _ as PlotSingleAxisElementEventMap, a as PlotHistogramBucketClickDetail, b as SingleAxisAgeStyle, c as PlotHistogramInteractionMode, d as PlotMultiAxis, f as PlotMultiAxisDataPointClickDetail, g as PlotSingleAxis, h as PlotMultiAxisLayout, i as PlotHistogram, k as parseColourScaleAttr, l as PlotHistogramOrientation, m as PlotMultiAxisElementEventMap, n as XyAgeStyle, o as PlotHistogramBucketClickEvent, p as PlotMultiAxisDataPointClickEvent, r as XyDrawStyle, s as PlotHistogramElementEventMap, t as PlotXyAxis, u as PlotHistogramValueTooltips, v as PlotSingleAxisPointerMoveDetail, w as ColourMapConfig, x as SingleAxisDrawStyle, y as PlotSingleAxisPointerMoveEvent } from "./xy-axis-BfP9hKLj.js";
+export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramInteractionMode, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/plots.js

@@ -1,2 +1,2 @@
-import { c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-VrX8dmvS.js";
+import { c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-DzM1brBZ.js";
 export { PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

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

@@ -2,7 +2,7 @@ import "./icon-CDGprSdE.js";
 import { LitElement } from "lit";
 //#region src/titlebar/titlebar.d.ts
 type TitlebarOrientation = `horizontal` | `vertical`;
-type TitlebarVariant = `titlebar` | `midline`;
+type TitlebarVariant = `titlebar` | `midline` | `tree`;
 type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;
 interface TitlebarToggleDetail {
   readonly collapsed: boolean;
@@ -47,4 +47,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-Bj5pfdw_.d.ts.map
+//# sourceMappingURL=titlebar-YQ-jVQoS.d.ts.map

package/dist/{titlebar-Bj5pfdw_.d.ts.map → titlebar-YQ-jVQoS.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"titlebar-Bj5pfdw_.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;cAYI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAoDT,sBAAM;;QAmNhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"titlebar-YQ-jVQoS.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;cAYI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAkET,sBAAM;;QA0RhB;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-Bj5pfdw_.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-YQ-jVQoS.js";
 export { TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant };

package/dist/titlebar.js

@@ -40,12 +40,23 @@ let TitlebarElement = class TitlebarElement extends LitElement {
 		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
 		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
 		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		const treeVariant = this.variant === `tree`;
 		return html`
       <div
         class="bar"
         role="toolbar"
         @click=${implicitToggle ? this._onToggleClick : nothing}
       >
+        ${treeVariant && showCaret ? html`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>
+          </button>
+          ` : nothing}
         <div class="title-text-wrapper">
           ${this.iconName ? html`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : nothing}
           <span class="title-text">${this.title}</span>
@@ -63,7 +74,7 @@ let TitlebarElement = class TitlebarElement extends LitElement {
               <ixfx-icon name="close"></ixfx-icon>
             </button>
           ` : nothing}
-          ${showCaret ? html`
+          ${!treeVariant && showCaret ? html`
           <button
             class="caret-btn"
             type="button"
@@ -286,6 +297,77 @@ let TitlebarElement = class TitlebarElement extends LitElement {
         -1px 0 0 var(--surface-5),
         1px 0 0 var(--surface-1);
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+    :host([variant="tree"]) .bar {
+      background: transparent;
+      padding: 0 var(--space-xs);
+      min-height: unset;
+      gap: var(--space-xs);
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .bar {
+      padding: var(--space-xs) 0;
+      flex-direction: column;
+      min-width: unset;
+      writing-mode: horizontal-tb;
+    }
+
+    :host([variant="tree"]) .title-text-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="tree"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn {
+      background: transparent;
+      opacity: var(--prominence-idle-opacity);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn:hover {
+      background: transparent;
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    :host([variant="tree"]) .toolbar {
+      margin-left: auto;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .toolbar {
+      flex-direction: row;
+      margin-left: 0;
+      margin-top: auto;
+    }
+
+    :host([variant="tree"]) ixfx-icon {
+      width: 1em;
+      height: 1em;
+    }
   `];
 	}
 };