@lcars-gui/federation 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 aarondnas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,59 @@
-# Temporary Holding Version
+# @lcars-gui/federation
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+LCARS UI components in the style of the Federation – for React and plain HTML/CSS/JS.
+
+**[▶ Live demo & docs](https://aarondnas.github.io/lcars-gui/#federation)**
+
+![Federation](https://raw.githubusercontent.com/aarondnas/lcars-gui/main/docs/federation.gif)
+
+## Installation
+
+```sh
+npm install @lcars-gui/federation
+```
+
+## Usage
+
+```tsx
+// React
+import "@lcars-gui/federation/ui.css";
+import { Frame, Button, LcarsRoot, SoundProvider } from "@lcars-gui/federation/react";
+
+<SoundProvider>
+  <LcarsRoot theme="tng">
+    <Frame title="Bridge" topLabel="47-1138" sidebar={<Button shape="rect" align="bottom-right">Tactical</Button>}>
+      …
+    </Frame>
+  </LcarsRoot>
+</SoundProvider>
+```
+
+```html
+<!-- Plain HTML/JS, no bundler -->
+<link rel="stylesheet" href="https://unpkg.com/@lcars-gui/federation/dist/ui.css">
+<button class="lcar-btn-std" data-color="2" data-shape="rect">Warp</button>
+
+<script src="https://unpkg.com/@lcars-gui/federation/dist/index.global.js"></script>
+<script>const ui = LcarsFederation.initLcars({ sound: true });</script>
+```
+
+`initLcars()` makes toggles, tabs, keypads, data cascades and interface sounds in static markup interactive.
+
+## Themes & alert
+
+`data-theme` (or `<LcarsRoot theme>`) switches the color palette; `data-alert="red" | "yellow"` recolors everything
+below and makes the bars pulse.
+
+| Theme    | Style                      | Extras                                    |
+|----------|----------------------------|-------------------------------------------|
+| `tng`    | Enterprise-D (default)     | `@lcars-gui/federation/themes/tng.css`    |
+| `ds9`    | Deep Space Nine station    | `@lcars-gui/federation/themes/ds9.css`    |
+| `picard` | 25th century               | `@lcars-gui/federation/themes/picard.css` |
+
+## Font
+
+The package bundles [Antonio](https://github.com/googlefonts/antonioFont) (SIL Open Font License 1.1, see `dist/fonts/Antonio/OFL.txt`).
+
+## License
+
+MIT. Star Trek and LCARS are trademarks of CBS Studios / Paramount; this is an unofficial fan project.

package/dist/fonts/Antonio/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2013 The Antonio Project Authors (https://github.com/googlefonts/antonioFont)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,165 @@
+import { InitBehaviorsOptions, LcarsController } from '@lcars-gui/core';
+export { LcarsController, LcarsSound, LcarsSoundKind, createLcarsSound, pressedChangeEvent } from '@lcars-gui/core';
+
+type LcarsColor = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+type LcarsLength = "xs" | "s" | "m" | "l" | "xl";
+/** Sets data-color only when a color is given (otherwise the CSS default applies). */
+declare function colorAttribute(color?: LcarsColor): {
+    "data-color": string;
+} | {
+    "data-color"?: undefined;
+};
+
+type ButtonColor = LcarsColor;
+type ButtonSize = "xs" | "s" | "m" | "l" | "xl";
+type ButtonLength = LcarsLength;
+type ButtonShape = "capsule" | "rect" | "cap-left" | "cap-right";
+type ButtonAlign = "center" | "bottom-right";
+/**
+ * Platform-neutral button props (without events/children,
+ * those come from the respective renderer).
+ */
+interface ButtonProps {
+    color?: ButtonColor;
+    size?: ButtonSize;
+    length?: ButtonLength;
+    shape?: ButtonShape;
+    align?: ButtonAlign;
+    disabled?: boolean;
+}
+/**
+ * Default values, the single source of truth
+ * (used by all renderers).
+ */
+declare const defaultButtonProps: Required<Omit<ButtonProps, "length">>;
+/** CSS class from ui.css */
+declare const buttonClassName = "lcar-btn-std";
+/**
+ * Merges and normalizes props
+ * before the renderers use them.
+ */
+declare function normalizeButtonProps<T extends ButtonProps>(props: T): {
+    color: ButtonColor;
+    size: ButtonSize;
+    shape: ButtonShape;
+    align: ButtonAlign;
+    disabled: boolean;
+} & T;
+/**
+ * Returns the data attributes the CSS reacts to.
+ */
+declare function buttonDataAttributes(props: ButtonProps): {
+    "data-align"?: string | undefined;
+    "data-shape"?: "rect" | "cap-left" | "cap-right" | undefined;
+    "data-length"?: LcarsLength | undefined;
+    "data-color": string;
+    "data-size": "xs" | "s" | "m" | "l" | "xl";
+};
+
+type ElbowCorner = "tl" | "tr" | "bl" | "br";
+type BarCap = "left" | "right" | "both";
+interface ElbowProps {
+    corner?: ElbowCorner;
+    color?: LcarsColor;
+}
+interface BarProps {
+    color?: LcarsColor;
+    cap?: BarCap;
+    length?: LcarsLength;
+}
+interface BlockProps {
+    color?: LcarsColor;
+    fill?: boolean;
+}
+/** CSS classes from ui.css */
+declare const frameClassNames: {
+    readonly elbow: "lcar-elbow";
+    readonly bar: "lcar-bar";
+    readonly block: "lcar-block";
+    readonly title: "lcar-title";
+    readonly stack: "lcar-stack";
+    readonly frame: "lcar-frame";
+    readonly frameTop: "lcar-frame-top";
+    readonly frameBottom: "lcar-frame-bottom";
+    readonly frameContent: "lcar-frame-content";
+    readonly frameHeader: "lcar-frame-header";
+};
+declare function elbowDataAttributes({ corner, color }: ElbowProps): {
+    "data-color": string;
+    "data-corner": ElbowCorner;
+} | {
+    "data-color"?: undefined;
+    "data-corner": ElbowCorner;
+};
+declare function barDataAttributes({ color, cap, length }: BarProps): {
+    "data-length"?: LcarsLength | undefined;
+    "data-cap"?: BarCap | undefined;
+    "data-color": string;
+} | {
+    "data-length"?: LcarsLength | undefined;
+    "data-cap"?: BarCap | undefined;
+    "data-color"?: undefined;
+};
+declare function blockDataAttributes({ color, fill }: BlockProps): {
+    "data-fill"?: string | undefined;
+    "data-color": string;
+} | {
+    "data-fill"?: string | undefined;
+    "data-color"?: undefined;
+};
+
+type LcarsTheme = "tng" | "ds9" | "picard";
+type AlertLevel = "red" | "yellow";
+type StatusKind = "ok" | "warn" | "error" | "off";
+type Orientation = "horizontal" | "vertical";
+/** CSS classes from ui.css */
+declare const displayClassNames: {
+    readonly cascade: "lcar-cascade";
+    readonly cascadeCol: "lcar-cascade-col";
+    readonly readout: "lcar-readout";
+    readonly number: "lcar-number";
+    readonly divider: "lcar-divider";
+    readonly grid: "lcar-grid";
+    readonly level: "lcar-level";
+    readonly gauge: "lcar-gauge";
+    readonly sensor: "lcar-sensor";
+    readonly blip: "lcar-blip";
+    readonly scan: "lcar-scan";
+    readonly status: "lcar-status";
+    readonly alert: "lcar-alert";
+    readonly alertTitle: "lcar-alert-title";
+    readonly alertText: "lcar-alert-text";
+};
+declare const controlClassNames: {
+    readonly tabs: "lcar-tabs";
+    readonly tablist: "lcar-tablist";
+    readonly tab: "lcar-tab";
+    readonly tabpanel: "lcar-tabpanel";
+    readonly field: "lcar-field";
+    readonly fieldLabel: "lcar-field-label";
+    readonly input: "lcar-input";
+    readonly range: "lcar-range";
+    readonly keypad: "lcar-keypad";
+    readonly keypadDisplay: "lcar-keypad-display";
+};
+/**
+ * Random but reproducible number columns for the data cascade
+ * (same seed → same numbers, important for server rendering).
+ */
+declare function cascadeNumbers(columns: number, rows: number, seed?: number): string[][];
+/** Which segments of a level bar are lit. */
+declare function levelSegments(value: number, segments?: number, max?: number): boolean[];
+/** Converts a value to 0–100 % (for the gauge). */
+declare function toPercent(value: number, max?: number): number;
+
+type InitLcarsOptions = InitBehaviorsOptions;
+/**
+ * Makes static LCARS markup interactive.
+ * The returned controller plays sounds and removes the listeners again.
+ */
+declare function initLcars(options?: InitLcarsOptions): LcarsController;
+/** Fills empty data cascades (data-columns / data-rows / data-seed) with numbers. */
+declare function fillCascades(root?: Document | HTMLElement): void;
+
+export { barDataAttributes, blockDataAttributes, buttonClassName, buttonDataAttributes, cascadeNumbers, colorAttribute, controlClassNames, defaultButtonProps, displayClassNames, elbowDataAttributes, fillCascades, frameClassNames, initLcars, levelSegments, normalizeButtonProps, toPercent };
+export type { AlertLevel, BarCap, BarProps, BlockProps, ButtonAlign, ButtonColor, ButtonLength, ButtonProps, ButtonShape, ButtonSize, ElbowCorner, ElbowProps, InitLcarsOptions, LcarsColor, LcarsLength, LcarsTheme, Orientation, StatusKind };

package/dist/index.global.js

@@ -0,0 +1,292 @@
+"use strict";
+var LcarsFederation = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var src_exports = {};
+  __export(src_exports, {
+    barDataAttributes: () => barDataAttributes,
+    blockDataAttributes: () => blockDataAttributes,
+    buttonClassName: () => buttonClassName,
+    buttonDataAttributes: () => buttonDataAttributes,
+    cascadeNumbers: () => cascadeNumbers,
+    colorAttribute: () => colorAttribute,
+    controlClassNames: () => controlClassNames,
+    createLcarsSound: () => createLcarsSound,
+    defaultButtonProps: () => defaultButtonProps,
+    displayClassNames: () => displayClassNames,
+    elbowDataAttributes: () => elbowDataAttributes,
+    fillCascades: () => fillCascades,
+    frameClassNames: () => frameClassNames,
+    initLcars: () => initLcars,
+    levelSegments: () => levelSegments,
+    normalizeButtonProps: () => normalizeButtonProps,
+    pressedChangeEvent: () => pressedChangeEvent,
+    toPercent: () => toPercent
+  });
+
+  // src/shared.ts
+  function colorAttribute(color) {
+    return color ? { "data-color": String(color) } : {};
+  }
+
+  // src/button.ts
+  var defaultButtonProps = {
+    color: 1,
+    size: "m",
+    shape: "capsule",
+    align: "center",
+    disabled: false
+  };
+  var buttonClassName = "lcar-btn-std";
+  function normalizeButtonProps(props) {
+    return {
+      ...defaultButtonProps,
+      ...props
+    };
+  }
+  function buttonDataAttributes(props) {
+    const { color, size, length, shape, align } = normalizeButtonProps(props);
+    return {
+      "data-color": String(color),
+      "data-size": size,
+      ...length && { "data-length": length },
+      ...shape !== "capsule" && { "data-shape": shape },
+      ...align === "bottom-right" && { "data-align": "br" }
+    };
+  }
+
+  // src/frame.ts
+  var frameClassNames = {
+    elbow: "lcar-elbow",
+    bar: "lcar-bar",
+    block: "lcar-block",
+    title: "lcar-title",
+    stack: "lcar-stack",
+    frame: "lcar-frame",
+    frameTop: "lcar-frame-top",
+    frameBottom: "lcar-frame-bottom",
+    frameContent: "lcar-frame-content",
+    frameHeader: "lcar-frame-header"
+  };
+  function elbowDataAttributes({ corner = "tl", color }) {
+    return { "data-corner": corner, ...colorAttribute(color) };
+  }
+  function barDataAttributes({ color, cap, length }) {
+    return {
+      ...colorAttribute(color),
+      ...cap && { "data-cap": cap },
+      ...length && { "data-length": length }
+    };
+  }
+  function blockDataAttributes({ color, fill }) {
+    return {
+      ...colorAttribute(color),
+      ...fill && { "data-fill": "" }
+    };
+  }
+
+  // ../core/dist/index.js
+  var defaultPatterns = {
+    beep: [[1320, 70]],
+    confirm: [[880, 70], [1320, 110]],
+    deny: [[440, 110], [330, 180]],
+    alert: [[620, 220], [880, 220], [620, 220], [880, 220]]
+  };
+  function createLcarsSound(volume = 0.12, { patterns = defaultPatterns, wave = "sine" } = {}) {
+    let ctx;
+    return {
+      play(kind = "beep") {
+        if (typeof AudioContext === "undefined") return;
+        ctx ?? (ctx = new AudioContext());
+        let t = ctx.currentTime;
+        for (const [freq, ms] of patterns[kind]) {
+          const osc = ctx.createOscillator();
+          const gain = ctx.createGain();
+          const end = t + ms / 1e3;
+          osc.type = wave;
+          osc.frequency.value = freq;
+          gain.gain.setValueAtTime(volume, t);
+          gain.gain.exponentialRampToValueAtTime(1e-4, end);
+          osc.connect(gain).connect(ctx.destination);
+          osc.start(t);
+          osc.stop(end);
+          t = end + 0.02;
+        }
+      }
+    };
+  }
+  var pressedChangeEvent = "lcar:pressedchange";
+  function initBehaviors(selectors, { root = document, sound = false, volume, onKeypadSubmit } = {}, soundOptions) {
+    const player = createLcarsSound(volume, soundOptions);
+    let soundOn = sound;
+    const play = (kind) => soundOn && player.play(kind);
+    const onClick = (e) => {
+      const target = e.target;
+      const control = target.closest(selectors.control);
+      if (control && control.dataset.sound !== "none") play(control.dataset.sound || "beep");
+      const toggle = target.closest("[aria-pressed]");
+      if (toggle) {
+        const pressed = toggle.getAttribute("aria-pressed") !== "true";
+        toggle.setAttribute("aria-pressed", String(pressed));
+        toggle.dispatchEvent(new CustomEvent(pressedChangeEvent, { bubbles: true, detail: { pressed } }));
+      }
+      const tab = target.closest('[role="tab"]');
+      if (tab) selectTab(tab);
+      const key = target.closest(`${selectors.keypad} ${selectors.keypadKey}`);
+      if (key) pressKey(key.closest(selectors.keypad), key.textContent.trim());
+    };
+    const onKeyDown = (e) => {
+      const { key, target } = e;
+      const step = key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
+      const tab = target.closest('[role="tab"]');
+      if (!step || !tab) return;
+      const list = tabsOf(tab);
+      const next = list[(list.indexOf(tab) + step + list.length) % list.length];
+      selectTab(next);
+      play("beep");
+      next.focus();
+    };
+    const codes = /* @__PURE__ */ new WeakMap();
+    const pressKey = (pad, key) => {
+      const display = pad.querySelector(selectors.keypadDisplay);
+      const length = Number(pad.dataset.length) || 6;
+      let code = codes.get(pad) ?? "";
+      const show = (text, state) => {
+        if (!display) return;
+        display.textContent = text || "\u2013".repeat(length);
+        if (state) display.dataset.state = state;
+        else delete display.dataset.state;
+      };
+      if (key === "ENT") {
+        const accepted = onKeypadSubmit ? onKeypadSubmit(code, pad) : code === pad.dataset.code;
+        codes.set(pad, "");
+        if (accepted === void 0) return play("confirm");
+        play(accepted ? "confirm" : "deny");
+        return show(accepted ? "OK" : "Denied", accepted ? "ok" : "error");
+      }
+      if (key === "CLR") code = "";
+      else if (code.length < length) code += key;
+      codes.set(pad, code);
+      show(pad.dataset.mask === void 0 ? code : "\u2022".repeat(code.length));
+    };
+    root.addEventListener("click", onClick);
+    root.addEventListener("keydown", onKeyDown);
+    return {
+      play: (kind) => player.play(kind),
+      setSound: (enabled) => soundOn = enabled,
+      destroy() {
+        root.removeEventListener("click", onClick);
+        root.removeEventListener("keydown", onKeyDown);
+      }
+    };
+  }
+  function tabsOf(tab) {
+    return [...tab.closest('[role="tablist"]')?.querySelectorAll('[role="tab"]') ?? []];
+  }
+  function selectTab(tab) {
+    for (const t of tabsOf(tab)) {
+      const on = t === tab;
+      t.setAttribute("aria-selected", String(on));
+      t.tabIndex = on ? 0 : -1;
+      const panel = document.getElementById(t.getAttribute("aria-controls") ?? "");
+      if (panel) panel.hidden = !on;
+    }
+  }
+  function seededRandom(seed = 47) {
+    let state = seed >>> 0;
+    return () => {
+      state = state + 1831565813 >>> 0;
+      let t = state;
+      t = Math.imul(t ^ t >>> 15, t | 1);
+      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+      return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    };
+  }
+
+  // src/display.ts
+  var displayClassNames = {
+    cascade: "lcar-cascade",
+    cascadeCol: "lcar-cascade-col",
+    readout: "lcar-readout",
+    number: "lcar-number",
+    divider: "lcar-divider",
+    grid: "lcar-grid",
+    level: "lcar-level",
+    gauge: "lcar-gauge",
+    sensor: "lcar-sensor",
+    blip: "lcar-blip",
+    scan: "lcar-scan",
+    status: "lcar-status",
+    alert: "lcar-alert",
+    alertTitle: "lcar-alert-title",
+    alertText: "lcar-alert-text"
+  };
+  var controlClassNames = {
+    tabs: "lcar-tabs",
+    tablist: "lcar-tablist",
+    tab: "lcar-tab",
+    tabpanel: "lcar-tabpanel",
+    field: "lcar-field",
+    fieldLabel: "lcar-field-label",
+    input: "lcar-input",
+    range: "lcar-range",
+    keypad: "lcar-keypad",
+    keypadDisplay: "lcar-keypad-display"
+  };
+  function cascadeNumbers(columns, rows, seed = 47) {
+    const random = seededRandom(seed);
+    return Array.from({ length: columns }, (_, col) => {
+      const digits = 2 + col * 3 % 5;
+      return Array.from(
+        { length: rows },
+        () => String(Math.floor(random() * 10 ** digits)).padStart(digits, "0")
+      );
+    });
+  }
+  function levelSegments(value, segments = 10, max = 100) {
+    const lit = Math.round(Math.min(Math.max(value, 0), max) / max * segments);
+    return Array.from({ length: segments }, (_, i) => i < lit);
+  }
+  function toPercent(value, max = 100) {
+    return Math.min(Math.max(value / max * 100, 0), 100);
+  }
+
+  // src/behaviors.ts
+  function initLcars(options = {}) {
+    fillCascades(options.root);
+    return initBehaviors(
+      {
+        control: `.${buttonClassName}, .${controlClassNames.tab}`,
+        keypad: `.${controlClassNames.keypad}`,
+        keypadKey: `.${buttonClassName}`,
+        keypadDisplay: `.${controlClassNames.keypadDisplay}`
+      },
+      options
+    );
+  }
+  function fillCascades(root = document) {
+    root.querySelectorAll(`.${displayClassNames.cascade}[data-columns]`).forEach((el, k) => {
+      const { columns, rows = "6", seed } = el.dataset;
+      const data = cascadeNumbers(Number(columns), Number(rows), seed ? Number(seed) : 47 + k);
+      el.innerHTML = data.map((col, c) => `<div class="${displayClassNames.cascadeCol}">${col.map((n, r) => `<span style="--i:${r * 2 + c}">${n}</span>`).join("")}</div>`).join("");
+    });
+  }
+  return __toCommonJS(src_exports);
+})();