@lcars-gui/romulus 0.0.0-stage → 0.1.1

package/dist/react/index.d.ts

@@ -0,0 +1,221 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
+import { LcarsSoundKind } from '@lcars-gui/core';
+export { LcarsSoundKind } from '@lcars-gui/core';
+import { SoundProviderProps } from '@lcars-gui/core/react';
+export { SoundProviderProps, useLcarsSound } from '@lcars-gui/core/react';
+
+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";
+
+type ButtonSize = "xs" | "s" | "m" | "l" | "xl";
+type ButtonShape = "chamfer" | "rect" | "point-left" | "point-right";
+type ButtonVariant = "outline" | "solid";
+type ButtonAlign = "center" | "start";
+/**
+ * Platform-neutral button props (without events/children,
+ * those come from the respective renderer).
+ */
+interface ButtonProps$1 {
+    color?: RomulusColor;
+    size?: ButtonSize;
+    length?: RomulusLength;
+    shape?: ButtonShape;
+    variant?: ButtonVariant;
+    align?: ButtonAlign;
+    disabled?: boolean;
+}
+
+type BarCap = "left" | "right" | "both";
+interface BarProps$1 {
+    color?: RomulusColor;
+    cap?: BarCap;
+    length?: RomulusLength;
+    segmented?: boolean;
+}
+interface BlockProps$1 {
+    color?: RomulusColor;
+    fill?: boolean;
+}
+
+type ButtonProps = ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    /** Sound on click (only inside a SoundProvider); false = silent */
+    sound?: LcarsSoundKind | false;
+};
+declare const Button: react.ForwardRefExoticComponent<ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    /** Sound on click (only inside a SoundProvider); false = silent */
+    sound?: LcarsSoundKind | false;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type DivProps$1 = Omit<HTMLAttributes<HTMLDivElement>, "color">;
+type BarProps = BarProps$1 & DivProps$1;
+/** Glowing line, optionally with pointed ends or dashed. */
+declare function Bar({ color, cap, length, segmented, className, ...rest }: BarProps): react.JSX.Element;
+type BlockProps = BlockProps$1 & DivProps$1;
+/** Filled segment with chamfered corners; the label sits bottom left. */
+declare function Block({ color, fill, className, ...rest }: BlockProps): react.JSX.Element;
+type TitleProps = {
+    color?: RomulusColor;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, "color">;
+/** Letter-spaced title in the header. */
+declare function Title({ color, className, ...rest }: TitleProps): react.JSX.Element;
+/** Vertical stack of buttons/blocks with even gaps. */
+declare function Stack({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+interface PanelProps extends Omit<DivProps$1, "title"> {
+    color?: RomulusColor;
+    title?: ReactNode;
+    /** ID code in the filled trapezoid at the start of the header, e.g. "R-7734" */
+    code?: ReactNode;
+    /** Sidebar content (buttons/blocks); filled up to the bottom */
+    sidebar?: ReactNode;
+    /** Replaces the default line in the header or footer; footer={null} hides the footer */
+    header?: ReactNode;
+    footer?: ReactNode;
+}
+/** Romulan console: chamfered corners, talon corners, header with ID code, optional sidebar. */
+declare function Panel({ color, title, code, sidebar, header, footer, className, children, ...rest }: PanelProps): react.JSX.Element;
+
+interface ToggleProps extends ButtonProps {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+/** Button with an on/off state (aria-pressed). */
+declare function Toggle({ pressed, defaultPressed, onPressedChange, onClick, ...rest }: ToggleProps): react.JSX.Element;
+type SliderProps = {
+    color?: RomulusColor;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "color">;
+/** Slider (native input type="range") with a diamond thumb. */
+declare const Slider: react.ForwardRefExoticComponent<{
+    color?: RomulusColor;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & react.RefAttributes<HTMLInputElement>>;
+type InputProps = {
+    color?: RomulusColor;
+    label?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
+/** Text field with a filled trapezoid label. */
+declare const Input: react.ForwardRefExoticComponent<{
+    color?: RomulusColor;
+    label?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "color"> & react.RefAttributes<HTMLInputElement>>;
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    color?: RomulusColor;
+}
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    items: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    color?: RomulusColor;
+}
+/** Tabs as parallelograms above a glowing line. */
+declare function Tabs({ items, value, defaultValue, onValueChange, color, className, ...rest }: TabsProps): react.JSX.Element;
+interface KeypadProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "onSubmit"> {
+    color?: RomulusColor;
+    /** Maximum code length */
+    length?: number;
+    /** Show the code as dots */
+    mask?: boolean;
+    /** Called with the code; true = accepted, false = denied */
+    onSubmit?: (code: string) => boolean | void;
+}
+/** Number pad with display, e.g. for access codes. */
+declare function Keypad({ color, length, mask, onSubmit, className, ...rest }: KeypadProps): react.JSX.Element;
+
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "color">;
+interface DataCascadeProps extends DivProps {
+    columns?: number;
+    rows?: number;
+    seed?: number;
+}
+/** Columns of hex groups that flicker one by one. */
+declare function DataCascade({ columns, rows, seed, className, ...rest }: DataCascadeProps): react.JSX.Element;
+interface ReadoutItem {
+    label: ReactNode;
+    value: ReactNode;
+    color?: RomulusColor;
+}
+interface ReadoutProps extends Omit<HTMLAttributes<HTMLDListElement>, "color"> {
+    items: ReadoutItem[];
+    color?: RomulusColor;
+}
+/** Value table: label, dotted leader line, value. */
+declare function Readout({ items, color, className, ...rest }: ReadoutProps): react.JSX.Element;
+type NumberCodeProps = {
+    color?: RomulusColor;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "color">;
+/** ID code like "R-7734". */
+declare function NumberCode({ color, className, ...rest }: NumberCodeProps): react.JSX.Element;
+/** Line with tick marks and a diamond in the middle. */
+declare function Divider({ color, className, ...rest }: {
+    color?: RomulusColor;
+} & DivProps): react.JSX.Element;
+interface ButtonGridProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: number;
+}
+/** Grid of buttons. */
+declare function ButtonGrid({ columns, className, style, ...rest }: ButtonGridProps): react.JSX.Element;
+interface LevelBarProps extends DivProps {
+    value: number;
+    max?: number;
+    segments?: number;
+    orientation?: Orientation;
+    color?: RomulusColor;
+}
+/** Level bar of slanted segments (vertical: chevrons). */
+declare function LevelBar({ value, max, segments, orientation, color, className, ...rest }: LevelBarProps): react.JSX.Element;
+interface GaugeProps extends DivProps {
+    value: number;
+    max?: number;
+    segments?: number;
+    label?: ReactNode;
+    color?: RomulusColor;
+}
+/** Ring gauge made of segments, value in the center. */
+declare function Gauge({ value, max, segments, label, color, className, style, ...rest }: GaugeProps): react.JSX.Element;
+interface Blip {
+    x: number;
+    y: number;
+    color?: RomulusColor;
+}
+interface SensorProps extends DivProps {
+    blips?: Blip[];
+    /** Radar sweep around the center */
+    scan?: boolean;
+    color?: RomulusColor;
+}
+/** Sensor display with a triangular grid, crosshair and diamond contacts. */
+declare function Sensor({ blips, scan, color, className, children, ...rest }: SensorProps): react.JSX.Element;
+interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    status?: StatusKind;
+    blink?: boolean;
+}
+/** Diamond indicator light with label. */
+declare function StatusIndicator({ status, blink, className, ...rest }: StatusIndicatorProps): react.JSX.Element;
+interface AlertBannerProps extends Omit<DivProps, "title"> {
+    level?: AlertLevel;
+    title?: ReactNode;
+}
+/** Hexagonal, blinking alert banner. */
+declare function AlertBanner({ level, title, children, className, ...rest }: AlertBannerProps): react.JSX.Element;
+
+interface RomulusRootProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: RomulusTheme;
+    /** Turns everything below red/yellow and makes the lines pulse */
+    alert?: AlertLevel | null;
+}
+/** Sets the color theme and alert state for all components below. */
+declare function RomulusRoot({ theme, alert, ...rest }: RomulusRootProps): react.JSX.Element;
+
+/** Enables interface sounds (Romulan patterns) for all components below. */
+declare function SoundProvider(props: SoundProviderProps): react.JSX.Element;
+
+export { AlertBanner, Bar, Block, Button, ButtonGrid, DataCascade, Divider, Gauge, Input, Keypad, LevelBar, NumberCode, Panel, Readout, RomulusRoot, Sensor, Slider, SoundProvider, Stack, StatusIndicator, Tabs, Title, Toggle };
+export type { AlertBannerProps, AlertLevel, BarCap, BarProps, Blip, BlockProps, ButtonAlign, ButtonGridProps, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, DataCascadeProps, GaugeProps, InputProps, KeypadProps, LevelBarProps, NumberCodeProps, Orientation, PanelProps, ReadoutItem, ReadoutProps, RomulusColor, RomulusLength, RomulusRootProps, RomulusTheme, SensorProps, SliderProps, StatusIndicatorProps, StatusKind, TabItem, TabsProps, TitleProps, ToggleProps };

package/dist/react/index.js

@@ -0,0 +1,452 @@
+"use client";
+
+// src/react/Button.tsx
+import { forwardRef } from "react";
+import { cx } from "@lcars-gui/core";
+import { useLcarsSound } from "@lcars-gui/core/react";
+
+// 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/react/Button.tsx
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef(
+  function Button2({ color, size, length, shape, variant, align, sound = "beep", className, type = "button", onClick, ...rest }, ref) {
+    const play = useLcarsSound();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: cx(buttonClassName, className),
+        ...buttonDataAttributes({ color, size, length, shape, variant, align }),
+        onClick: (e) => {
+          if (sound) play(sound);
+          onClick?.(e);
+        },
+        ...rest
+      }
+    );
+  }
+);
+
+// src/react/Panel.tsx
+import { cx as cx2 } from "@lcars-gui/core";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Bar({ color, cap, length, segmented, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(panelClassNames.bar, className),
+      ...barDataAttributes({ color, cap, length, segmented }),
+      ...rest
+    }
+  );
+}
+function Block({ color, fill, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(panelClassNames.block, className),
+      ...blockDataAttributes({ color, fill }),
+      ...rest
+    }
+  );
+}
+function Title({ color, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "h1",
+    {
+      className: cx2(panelClassNames.title, className),
+      ...colorAttribute(color),
+      ...rest
+    }
+  );
+}
+function Stack({ className, ...rest }) {
+  return /* @__PURE__ */ jsx2("div", { className: cx2(panelClassNames.stack, className), ...rest });
+}
+function Panel({
+  color,
+  title,
+  code,
+  sidebar,
+  header,
+  footer,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cx2(panelClassNames.panel, className), ...colorAttribute(color), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: panelClassNames.header, children: [
+      code != null && /* @__PURE__ */ jsx2("span", { className: panelClassNames.code, children: code }),
+      title != null && /* @__PURE__ */ jsx2(Title, { children: title }),
+      header ?? /* @__PURE__ */ jsx2(Bar, { cap: "right" })
+    ] }),
+    sidebar != null && /* @__PURE__ */ jsxs(Stack, { className: panelClassNames.sidebar, children: [
+      sidebar,
+      /* @__PURE__ */ jsx2(Block, { fill: true })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: panelClassNames.content, children }),
+    footer !== null && /* @__PURE__ */ jsx2("div", { className: panelClassNames.footer, children: footer ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Bar, { segmented: true }),
+      /* @__PURE__ */ jsx2(Bar, { length: "s", cap: "right" })
+    ] }) })
+  ] });
+}
+
+// src/react/Controls.tsx
+import {
+  forwardRef as forwardRef2,
+  useId,
+  useState
+} from "react";
+import { cx as cx3 } from "@lcars-gui/core";
+import { useLcarsSound as useLcarsSound2 } from "@lcars-gui/core/react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Toggle({ pressed, defaultPressed = false, onPressedChange, onClick, ...rest }) {
+  const [inner, setInner] = useState(defaultPressed);
+  const isOn = pressed ?? inner;
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      "aria-pressed": isOn,
+      onClick: (e) => {
+        setInner(!isOn);
+        onPressedChange?.(!isOn);
+        onClick?.(e);
+      },
+      ...rest
+    }
+  );
+}
+var Slider = forwardRef2(function Slider2({ color, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ref,
+      type: "range",
+      className: cx3(controlClassNames.range, className),
+      ...colorAttribute(color),
+      ...rest
+    }
+  );
+});
+var Input = forwardRef2(function Input2({ color, label, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2("label", { className: controlClassNames.field, ...colorAttribute(color), children: [
+    label != null && /* @__PURE__ */ jsx3("span", { className: controlClassNames.fieldLabel, children: label }),
+    /* @__PURE__ */ jsx3("input", { ref, className: cx3(controlClassNames.input, className), ...rest })
+  ] });
+});
+function Tabs({ items, value, defaultValue, onValueChange, color, className, ...rest }) {
+  const base = useId();
+  const play = useLcarsSound2();
+  const [inner, setInner] = useState(defaultValue ?? items[0]?.id);
+  const active = value ?? inner;
+  const select = (id) => {
+    setInner(id);
+    onValueChange?.(id);
+    play("beep");
+  };
+  const onKeyDown = (e) => {
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (!step) return;
+    const index = items.findIndex((item) => item.id === active);
+    const next = items[(index + step + items.length) % items.length];
+    select(next.id);
+    document.getElementById(`${base}-tab-${next.id}`)?.focus();
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cx3(controlClassNames.tabs, className), ...colorAttribute(color), ...rest, children: [
+    /* @__PURE__ */ jsx3("div", { role: "tablist", className: controlClassNames.tablist, onKeyDown, children: items.map((item) => {
+      const selected = item.id === active;
+      return /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          id: `${base}-tab-${item.id}`,
+          "aria-selected": selected,
+          "aria-controls": `${base}-panel-${item.id}`,
+          tabIndex: selected ? 0 : -1,
+          className: controlClassNames.tab,
+          ...colorAttribute(item.color),
+          onClick: () => select(item.id),
+          children: item.label
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx3(Bar, { cap: "right", color }),
+    items.map((item) => /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${base}-panel-${item.id}`,
+        "aria-labelledby": `${base}-tab-${item.id}`,
+        hidden: item.id !== active,
+        className: controlClassNames.tabpanel,
+        children: item.content
+      },
+      item.id
+    ))
+  ] });
+}
+var keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "CLR", "0", "ENT"];
+function Keypad({ color = 1, length = 6, mask, onSubmit, className, ...rest }) {
+  const play = useLcarsSound2();
+  const [code, setCode] = useState("");
+  const [state, setState] = useState();
+  const press = (key) => {
+    setState(void 0);
+    if (key === "CLR") return setCode("");
+    if (key === "ENT") {
+      const accepted = onSubmit?.(code);
+      if (accepted === void 0) return play("confirm");
+      setState(accepted ? "ok" : "error");
+      play(accepted ? "confirm" : "deny");
+      return setCode("");
+    }
+    if (code.length < length) setCode(code + key);
+  };
+  const shown = state === "ok" ? "OK" : state === "error" ? "DENIED" : mask ? "\u2022".repeat(code.length) : code;
+  return /* @__PURE__ */ jsxs2("div", { className: cx3(controlClassNames.keypad, className), ...colorAttribute(color), ...rest, children: [
+    /* @__PURE__ */ jsx3("output", { className: controlClassNames.keypadDisplay, "data-state": state, children: shown || "\u2013".repeat(length) }),
+    keys.map((key) => /* @__PURE__ */ jsx3(
+      Button,
+      {
+        color: key === "CLR" ? 2 : key === "ENT" ? 4 : color,
+        variant: key === "ENT" ? "solid" : "outline",
+        sound: key === "ENT" ? false : "beep",
+        onClick: () => press(key),
+        children: key
+      },
+      key
+    ))
+  ] });
+}
+
+// src/react/Display.tsx
+import { useMemo } from "react";
+import { cx as cx4 } from "@lcars-gui/core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DataCascade({ columns = 6, rows = 6, seed = 1701, className, ...rest }) {
+  const data = useMemo(() => cascadeGlyphs(columns, rows, seed), [columns, rows, seed]);
+  return /* @__PURE__ */ jsx4("div", { className: cx4(displayClassNames.cascade, className), "aria-hidden": true, ...rest, children: data.map((col, c) => /* @__PURE__ */ jsx4("div", { className: displayClassNames.cascadeCol, children: col.map((g, r) => /* @__PURE__ */ jsx4("span", { style: { "--i": r * 3 + c }, children: g }, r)) }, c)) });
+}
+function Readout({ items, color, className, ...rest }) {
+  return /* @__PURE__ */ jsx4("dl", { className: cx4(displayClassNames.readout, className), ...colorAttribute(color), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx4("dt", { ...colorAttribute(item.color), children: item.label }),
+    /* @__PURE__ */ jsx4("dd", { children: item.value })
+  ] }, i)) });
+}
+function NumberCode({ color, className, ...rest }) {
+  return /* @__PURE__ */ jsx4("span", { className: cx4(displayClassNames.number, className), ...colorAttribute(color), ...rest });
+}
+function Divider({ color, className, ...rest }) {
+  return /* @__PURE__ */ jsx4("div", { role: "separator", className: cx4(displayClassNames.divider, className), ...colorAttribute(color), ...rest });
+}
+function ButtonGrid({ columns = 4, className, style, ...rest }) {
+  return /* @__PURE__ */ jsx4("div", { className: cx4(displayClassNames.grid, className), style: { "--cols": columns, ...style }, ...rest });
+}
+function LevelBar({ value, max = 100, segments = 12, orientation, color, className, ...rest }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      className: cx4(displayClassNames.level, className),
+      "data-orientation": orientation,
+      ...colorAttribute(color),
+      ...rest,
+      children: levelSegments(value, segments, max).map((on, i) => /* @__PURE__ */ jsx4("span", { "data-on": on ? "" : void 0 }, i))
+    }
+  );
+}
+function Gauge({ value, max = 100, segments = 24, label, color, className, style, ...rest }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      className: cx4(displayClassNames.gauge, className),
+      style: { "--value": toPercent(value, max), "--segments": segments, ...style },
+      ...colorAttribute(color),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx4("span", { children: Math.round(value) }),
+        label != null && /* @__PURE__ */ jsx4("small", { children: label })
+      ]
+    }
+  );
+}
+function Sensor({ blips = [], scan, color, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cx4(cx4(displayClassNames.sensor, scan ? displayClassNames.scan : void 0), className), ...colorAttribute(color), ...rest, children: [
+    blips.map((b, i) => /* @__PURE__ */ jsx4("span", { className: displayClassNames.blip, style: { "--x": b.x, "--y": b.y }, ...colorAttribute(b.color) }, i)),
+    children
+  ] });
+}
+function StatusIndicator({ status = "ok", blink, className, ...rest }) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      role: "status",
+      className: cx4(displayClassNames.status, className),
+      "data-status": status,
+      "data-blink": blink ? "" : void 0,
+      ...rest
+    }
+  );
+}
+function AlertBanner({ level = "red", title = "Alert", children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs3("div", { role: "alert", className: cx4(displayClassNames.alert, className), "data-level": level, ...rest, children: [
+    /* @__PURE__ */ jsx4("span", { className: displayClassNames.alertTitle, children: title }),
+    /* @__PURE__ */ jsx4("span", { className: displayClassNames.alertText, children: children ?? `Condition: ${level}` })
+  ] });
+}
+
+// src/react/Root.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function RomulusRoot({ theme, alert, ...rest }) {
+  return /* @__PURE__ */ jsx5("div", { "data-theme": theme, "data-alert": alert ?? void 0, ...rest });
+}
+
+// src/react/Sound.tsx
+import {
+  SoundProvider as CoreSoundProvider
+} from "@lcars-gui/core/react";
+import { useLcarsSound as useLcarsSound3 } from "@lcars-gui/core/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SoundProvider(props) {
+  return /* @__PURE__ */ jsx6(CoreSoundProvider, { ...romulanSound, ...props });
+}
+export {
+  AlertBanner,
+  Bar,
+  Block,
+  Button,
+  ButtonGrid,
+  DataCascade,
+  Divider,
+  Gauge,
+  Input,
+  Keypad,
+  LevelBar,
+  NumberCode,
+  Panel,
+  Readout,
+  RomulusRoot,
+  Sensor,
+  Slider,
+  SoundProvider,
+  Stack,
+  StatusIndicator,
+  Tabs,
+  Title,
+  Toggle,
+  useLcarsSound3 as useLcarsSound
+};

package/dist/themes/free-state.css

@@ -0,0 +1,11 @@
+/* Theme extras: Romulan Free State (Picard era)
+   Published as @lcars-gui/romulus/themes/free-state.css.
+   Soft glow on text and contacts. */
+
+[data-theme="free-state"] :is(.rom-btn, .rom-title, .rom-tab, .rom-number) {
+  text-shadow: 0 0 0.6em color-mix(in srgb, currentColor 70%, transparent);
+}
+
+[data-theme="free-state"] .rom-blip {
+  box-shadow: 0 0 1.2rem 0.2rem var(--rom-bg);
+}

package/dist/themes/tal-shiar.css

@@ -0,0 +1,11 @@
+/* Theme extras: Tal Shiar – intelligence service
+   Published as @lcars-gui/romulus/themes/tal-shiar.css.
+   Titles and ID codes flicker irregularly, as if the signal were jammed. */
+
+[data-theme="tal-shiar"] :is(.rom-title, .rom-panel-code) {
+  animation: rom-flicker 7s infinite;
+}
+
+[data-theme="tal-shiar"] .rom-panel-code {
+  animation-delay: 2.3s;
+}