@lcars-gui/romulus 0.0.0-stage → 0.1.0

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/romulus
 
-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.
+UI-Komponenten im Stil des Romulanischen Sternenimperiums: leuchtende Linien auf dunklem Grund,
+abgeschrägte Ecken, Krallen-Ecken an Panels, Rauten statt Kreisen.
+
+**[Live-Demo](https://aarondnas.github.io/lcars-gui/romulus.html)**
+
+![Romulus](https://raw.githubusercontent.com/aarondnas/lcars-gui/main/docs/romulus.gif)
+
+## Installation
+
+```sh
+npm install @lcars-gui/romulus
+```
+
+## Verwendung
+
+```ts
+// React
+import "@lcars-gui/romulus/ui.css";
+import { Panel, Button, RomulusRoot, SoundProvider } from "@lcars-gui/romulus/react";
+
+<SoundProvider>
+  <RomulusRoot theme="warbird">
+    <Panel code="R-7734" title="Taktisch" sidebar={<Button>Tarnung</Button>}>
+      …
+    </Panel>
+  </RomulusRoot>
+</SoundProvider>
+```
+
+```html
+<!-- Reines HTML/JS -->
+<link rel="stylesheet" href="https://unpkg.com/@lcars-gui/romulus/dist/ui.css">
+<script src="https://unpkg.com/@lcars-gui/romulus/dist/index.global.js"></script>
+<script>const ui = LcarsRomulus.initRomulus({ sound: true });</script>
+```
+
+## Themes
+
+| Theme        | Stil                                    | Extras (`themes/<name>.css`)  |
+|--------------|-----------------------------------------|-------------------------------|
+| `warbird`    | TNG, D'deridex-Klasse (Standard)        | Scanlines auf Panels          |
+| `tal-shiar`  | kühler, blaugrün                        | flackernde Titel und Kennungen |
+| `free-state` | Picard-Ära, mit Goldakzent              | Leuchten auf Schrift/Kontakten |
+
+## Schrift
+
+Es wird keine Schrift mitgeliefert. Gut passt [Michroma](https://fonts.google.com/specimen/Michroma)
+(Google Fonts, frei); ohne sie greifen Eurostile, Bahnschrift oder Arial Narrow.
+
+## CSS-Variablen
+
+Alle Variablen tragen das Präfix `--rom-` (z. B. `--rom-colors-color1`), damit sich Romulus
+und andere Fraktionen auf einer Seite nicht in die Quere kommen.
+
+## Lizenz
+
+MIT. Star Trek ist eine Marke von CBS Studios / Paramount; dies ist ein inoffizielles Fan-Projekt.

package/dist/index.d.ts

@@ -0,0 +1,151 @@
+import { LcarsSoundOptions, InitBehaviorsOptions, LcarsController } from '@lcars-gui/core';
+export { LcarsController, LcarsSound, LcarsSoundKind, createLcarsSound, pressedChangeEvent } from '@lcars-gui/core';
+
+type RomulusColor = 1 | 2 | 3 | 4 | 5 | 6;
+type RomulusLength = "xs" | "s" | "m" | "l" | "xl";
+type RomulusTheme = "warbird" | "tal-shiar" | "free-state";
+type AlertLevel = "red" | "yellow";
+type StatusKind = "ok" | "warn" | "error" | "off";
+type Orientation = "horizontal" | "vertical";
+/** data-color nur setzen, wenn eine Farbe angegeben ist (sonst CSS-Default). */
+declare function colorAttribute(color?: RomulusColor): {
+    "data-color": string;
+} | {
+    "data-color"?: undefined;
+};
+
+type ButtonSize = "xs" | "s" | "m" | "l" | "xl";
+type ButtonShape = "chamfer" | "rect" | "point-left" | "point-right";
+type ButtonVariant = "outline" | "solid";
+type ButtonAlign = "center" | "start";
+/**
+ * Plattformneutrale Button-Props (ohne Events/Children,
+ * die liefert der jeweilige Renderer).
+ */
+interface ButtonProps {
+    color?: RomulusColor;
+    size?: ButtonSize;
+    length?: RomulusLength;
+    shape?: ButtonShape;
+    variant?: ButtonVariant;
+    align?: ButtonAlign;
+    disabled?: boolean;
+}
+/** CSS-Klasse aus ui.css */
+declare const buttonClassName = "rom-btn";
+/**
+ * Liefert die data-Attribute, auf die das CSS reagiert.
+ */
+declare function buttonDataAttributes({ color, size, length, shape, variant, align }: ButtonProps): {
+    "data-align"?: "start" | undefined;
+    "data-variant"?: "solid" | undefined;
+    "data-shape"?: "rect" | "point-left" | "point-right" | undefined;
+    "data-length"?: RomulusLength | undefined;
+    "data-size": ButtonSize;
+    "data-color": string;
+} | {
+    "data-align"?: "start" | undefined;
+    "data-variant"?: "solid" | undefined;
+    "data-shape"?: "rect" | "point-left" | "point-right" | undefined;
+    "data-length"?: RomulusLength | undefined;
+    "data-size": ButtonSize;
+    "data-color"?: undefined;
+};
+
+type BarCap = "left" | "right" | "both";
+interface BarProps {
+    color?: RomulusColor;
+    cap?: BarCap;
+    length?: RomulusLength;
+    segmented?: boolean;
+}
+interface BlockProps {
+    color?: RomulusColor;
+    fill?: boolean;
+}
+/** CSS-Klassen aus ui.css */
+declare const panelClassNames: {
+    readonly panel: "rom-panel";
+    readonly header: "rom-panel-header";
+    readonly code: "rom-panel-code";
+    readonly sidebar: "rom-panel-sidebar";
+    readonly content: "rom-panel-content";
+    readonly footer: "rom-panel-footer";
+    readonly bar: "rom-bar";
+    readonly block: "rom-block";
+    readonly title: "rom-title";
+    readonly stack: "rom-stack";
+};
+declare function barDataAttributes({ color, cap, length, segmented }: BarProps): {
+    "data-segmented"?: string | undefined;
+    "data-length"?: RomulusLength | undefined;
+    "data-cap"?: BarCap | undefined;
+    "data-color": string;
+} | {
+    "data-segmented"?: string | undefined;
+    "data-length"?: RomulusLength | 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;
+};
+
+/** CSS-Klassen aus ui.css */
+declare const displayClassNames: {
+    readonly cascade: "rom-cascade";
+    readonly cascadeCol: "rom-cascade-col";
+    readonly readout: "rom-readout";
+    readonly number: "rom-number";
+    readonly divider: "rom-divider";
+    readonly grid: "rom-grid";
+    readonly level: "rom-level";
+    readonly gauge: "rom-gauge";
+    readonly sensor: "rom-sensor";
+    readonly blip: "rom-blip";
+    readonly scan: "rom-scan";
+    readonly status: "rom-status";
+    readonly alert: "rom-alert";
+    readonly alertTitle: "rom-alert-title";
+    readonly alertText: "rom-alert-text";
+};
+declare const controlClassNames: {
+    readonly tabs: "rom-tabs";
+    readonly tablist: "rom-tablist";
+    readonly tab: "rom-tab";
+    readonly tabpanel: "rom-tabpanel";
+    readonly field: "rom-field";
+    readonly fieldLabel: "rom-field-label";
+    readonly input: "rom-input";
+    readonly range: "rom-range";
+    readonly keypad: "rom-keypad";
+    readonly keypadDisplay: "rom-keypad-display";
+};
+/**
+ * Spalten aus Hex-Gruppen wie „3F·A9“, zufällig aber reproduzierbar
+ * (gleicher Seed → gleiche Werte, wichtig für Server-Rendering).
+ */
+declare function cascadeGlyphs(columns: number, rows: number, seed?: number): string[][];
+/** Welche Segmente einer Pegelanzeige leuchten. */
+declare function levelSegments(value: number, segments?: number, max?: number): boolean[];
+/** Wert auf 0–100 % umrechnen (für die Gauge). */
+declare function toPercent(value: number, max?: number): number;
+
+/** Romulanische Bedien-Töne: tiefer, dreieckige Welle, absteigende Folgen. */
+declare const romulanSound: LcarsSoundOptions;
+
+type InitRomulusOptions = InitBehaviorsOptions;
+/**
+ * Macht statisches romulanisches Markup interaktiv.
+ * Der zurückgegebene Controller spielt Töne und entfernt die Listener wieder.
+ */
+declare function initRomulus(options?: InitRomulusOptions): LcarsController;
+/** Füllt leere Data Cascades (data-columns / data-rows / data-seed) mit Hex-Gruppen. */
+declare function fillCascades(root?: Document | HTMLElement): void;
+
+export { barDataAttributes, blockDataAttributes, buttonClassName, buttonDataAttributes, cascadeGlyphs, colorAttribute, controlClassNames, displayClassNames, fillCascades, initRomulus, levelSegments, panelClassNames, romulanSound, toPercent };
+export type { AlertLevel, BarCap, BarProps, BlockProps, ButtonAlign, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, InitRomulusOptions, Orientation, RomulusColor, RomulusLength, RomulusTheme, StatusKind };

package/dist/index.global.js

@@ -0,0 +1,285 @@
+"use strict";
+var LcarsRomulus = (() => {
+  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,
+    cascadeGlyphs: () => cascadeGlyphs,
+    colorAttribute: () => colorAttribute,
+    controlClassNames: () => controlClassNames,
+    createLcarsSound: () => createLcarsSound,
+    displayClassNames: () => displayClassNames,
+    fillCascades: () => fillCascades,
+    initRomulus: () => initRomulus,
+    levelSegments: () => levelSegments,
+    panelClassNames: () => panelClassNames,
+    pressedChangeEvent: () => pressedChangeEvent,
+    romulanSound: () => romulanSound,
+    toPercent: () => toPercent
+  });
+
+  // src/shared.ts
+  function colorAttribute(color) {
+    return color ? { "data-color": String(color) } : {};
+  }
+
+  // src/button.ts
+  var buttonClassName = "rom-btn";
+  function buttonDataAttributes({ color, size = "m", length, shape = "chamfer", variant = "outline", align = "center" }) {
+    return {
+      ...colorAttribute(color),
+      "data-size": size,
+      ...length && { "data-length": length },
+      ...shape !== "chamfer" && { "data-shape": shape },
+      ...variant !== "outline" && { "data-variant": variant },
+      ...align !== "center" && { "data-align": align }
+    };
+  }
+
+  // src/panel.ts
+  var panelClassNames = {
+    panel: "rom-panel",
+    header: "rom-panel-header",
+    code: "rom-panel-code",
+    sidebar: "rom-panel-sidebar",
+    content: "rom-panel-content",
+    footer: "rom-panel-footer",
+    bar: "rom-bar",
+    block: "rom-block",
+    title: "rom-title",
+    stack: "rom-stack"
+  };
+  function barDataAttributes({ color, cap, length, segmented }) {
+    return {
+      ...colorAttribute(color),
+      ...cap && { "data-cap": cap },
+      ...length && { "data-length": length },
+      ...segmented && { "data-segmented": "" }
+    };
+  }
+  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: "rom-cascade",
+    cascadeCol: "rom-cascade-col",
+    readout: "rom-readout",
+    number: "rom-number",
+    divider: "rom-divider",
+    grid: "rom-grid",
+    level: "rom-level",
+    gauge: "rom-gauge",
+    sensor: "rom-sensor",
+    blip: "rom-blip",
+    scan: "rom-scan",
+    status: "rom-status",
+    alert: "rom-alert",
+    alertTitle: "rom-alert-title",
+    alertText: "rom-alert-text"
+  };
+  var controlClassNames = {
+    tabs: "rom-tabs",
+    tablist: "rom-tablist",
+    tab: "rom-tab",
+    tabpanel: "rom-tabpanel",
+    field: "rom-field",
+    fieldLabel: "rom-field-label",
+    input: "rom-input",
+    range: "rom-range",
+    keypad: "rom-keypad",
+    keypadDisplay: "rom-keypad-display"
+  };
+  function cascadeGlyphs(columns, rows, seed = 1701) {
+    const random = seededRandom(seed);
+    const hex = () => Math.floor(random() * 256).toString(16).toUpperCase().padStart(2, "0");
+    return Array.from({ length: columns }, (_, col) => {
+      const groups = 1 + col % 3;
+      return Array.from({ length: rows }, () => Array.from({ length: groups }, hex).join("\xB7"));
+    });
+  }
+  function levelSegments(value, segments = 12, 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/sound.ts
+  var romulanSound = {
+    wave: "triangle",
+    patterns: {
+      beep: [[523, 55]],
+      confirm: [[392, 60], [523, 60], [784, 100]],
+      deny: [[311, 140], [233, 220]],
+      alert: [[466, 180], [349, 180], [466, 180], [349, 180]]
+    }
+  };
+
+  // src/behaviors.ts
+  function initRomulus(options = {}) {
+    fillCascades(options.root);
+    return initBehaviors(
+      {
+        control: `.${buttonClassName}, .${controlClassNames.tab}`,
+        keypad: `.${controlClassNames.keypad}`,
+        keypadKey: `.${buttonClassName}`,
+        keypadDisplay: `.${controlClassNames.keypadDisplay}`
+      },
+      options,
+      romulanSound
+    );
+  }
+  function fillCascades(root = document) {
+    root.querySelectorAll(`.${displayClassNames.cascade}[data-columns]`).forEach((el, k) => {
+      const { columns, rows = "6", seed } = el.dataset;
+      const data = cascadeGlyphs(Number(columns), Number(rows), seed ? Number(seed) : 1701 + k);
+      el.innerHTML = data.map((col, c) => `<div class="${displayClassNames.cascadeCol}">${col.map((g, r) => `<span style="--i:${r * 3 + c}">${g}</span>`).join("")}</div>`).join("");
+    });
+  }
+  return __toCommonJS(src_exports);
+})();

package/dist/index.js

@@ -0,0 +1,148 @@
+// src/shared.ts
+function colorAttribute(color) {
+  return color ? { "data-color": String(color) } : {};
+}
+
+// src/button.ts
+var buttonClassName = "rom-btn";
+function buttonDataAttributes({ color, size = "m", length, shape = "chamfer", variant = "outline", align = "center" }) {
+  return {
+    ...colorAttribute(color),
+    "data-size": size,
+    ...length && { "data-length": length },
+    ...shape !== "chamfer" && { "data-shape": shape },
+    ...variant !== "outline" && { "data-variant": variant },
+    ...align !== "center" && { "data-align": align }
+  };
+}
+
+// src/panel.ts
+var panelClassNames = {
+  panel: "rom-panel",
+  header: "rom-panel-header",
+  code: "rom-panel-code",
+  sidebar: "rom-panel-sidebar",
+  content: "rom-panel-content",
+  footer: "rom-panel-footer",
+  bar: "rom-bar",
+  block: "rom-block",
+  title: "rom-title",
+  stack: "rom-stack"
+};
+function barDataAttributes({ color, cap, length, segmented }) {
+  return {
+    ...colorAttribute(color),
+    ...cap && { "data-cap": cap },
+    ...length && { "data-length": length },
+    ...segmented && { "data-segmented": "" }
+  };
+}
+function blockDataAttributes({ color, fill }) {
+  return {
+    ...colorAttribute(color),
+    ...fill && { "data-fill": "" }
+  };
+}
+
+// src/display.ts
+import { seededRandom } from "@lcars-gui/core";
+var displayClassNames = {
+  cascade: "rom-cascade",
+  cascadeCol: "rom-cascade-col",
+  readout: "rom-readout",
+  number: "rom-number",
+  divider: "rom-divider",
+  grid: "rom-grid",
+  level: "rom-level",
+  gauge: "rom-gauge",
+  sensor: "rom-sensor",
+  blip: "rom-blip",
+  scan: "rom-scan",
+  status: "rom-status",
+  alert: "rom-alert",
+  alertTitle: "rom-alert-title",
+  alertText: "rom-alert-text"
+};
+var controlClassNames = {
+  tabs: "rom-tabs",
+  tablist: "rom-tablist",
+  tab: "rom-tab",
+  tabpanel: "rom-tabpanel",
+  field: "rom-field",
+  fieldLabel: "rom-field-label",
+  input: "rom-input",
+  range: "rom-range",
+  keypad: "rom-keypad",
+  keypadDisplay: "rom-keypad-display"
+};
+function cascadeGlyphs(columns, rows, seed = 1701) {
+  const random = seededRandom(seed);
+  const hex = () => Math.floor(random() * 256).toString(16).toUpperCase().padStart(2, "0");
+  return Array.from({ length: columns }, (_, col) => {
+    const groups = 1 + col % 3;
+    return Array.from({ length: rows }, () => Array.from({ length: groups }, hex).join("\xB7"));
+  });
+}
+function levelSegments(value, segments = 12, 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/sound.ts
+var romulanSound = {
+  wave: "triangle",
+  patterns: {
+    beep: [[523, 55]],
+    confirm: [[392, 60], [523, 60], [784, 100]],
+    deny: [[311, 140], [233, 220]],
+    alert: [[466, 180], [349, 180], [466, 180], [349, 180]]
+  }
+};
+
+// src/behaviors.ts
+import { initBehaviors } from "@lcars-gui/core";
+import { pressedChangeEvent } from "@lcars-gui/core";
+function initRomulus(options = {}) {
+  fillCascades(options.root);
+  return initBehaviors(
+    {
+      control: `.${buttonClassName}, .${controlClassNames.tab}`,
+      keypad: `.${controlClassNames.keypad}`,
+      keypadKey: `.${buttonClassName}`,
+      keypadDisplay: `.${controlClassNames.keypadDisplay}`
+    },
+    options,
+    romulanSound
+  );
+}
+function fillCascades(root = document) {
+  root.querySelectorAll(`.${displayClassNames.cascade}[data-columns]`).forEach((el, k) => {
+    const { columns, rows = "6", seed } = el.dataset;
+    const data = cascadeGlyphs(Number(columns), Number(rows), seed ? Number(seed) : 1701 + k);
+    el.innerHTML = data.map((col, c) => `<div class="${displayClassNames.cascadeCol}">${col.map((g, r) => `<span style="--i:${r * 3 + c}">${g}</span>`).join("")}</div>`).join("");
+  });
+}
+
+// src/index.ts
+import { createLcarsSound } from "@lcars-gui/core";
+export {
+  barDataAttributes,
+  blockDataAttributes,
+  buttonClassName,
+  buttonDataAttributes,
+  cascadeGlyphs,
+  colorAttribute,
+  controlClassNames,
+  createLcarsSound,
+  displayClassNames,
+  fillCascades,
+  initRomulus,
+  levelSegments,
+  panelClassNames,
+  pressedChangeEvent,
+  romulanSound,
+  toPercent
+};