@lcars-gui/federation 0.0.0-stage → 0.1.1

package/dist/react/index.js

@@ -0,0 +1,506 @@
+"use client";
+
+// src/react/Button.tsx
+import { forwardRef } from "react";
+
+// 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": "" }
+  };
+}
+
+// src/display.ts
+import { seededRandom } from "@lcars-gui/core";
+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/react/Button.tsx
+import { cx } from "@lcars-gui/core";
+import { useLcarsSound } from "@lcars-gui/core/react";
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef(
+  function Button2({ color, size, length, shape, 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, align }),
+        onClick: (e) => {
+          if (sound) play(sound);
+          onClick?.(e);
+        },
+        ...rest
+      }
+    );
+  }
+);
+
+// src/react/Frame.tsx
+import { cx as cx2 } from "@lcars-gui/core";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Elbow({ corner, color, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(frameClassNames.elbow, className),
+      ...elbowDataAttributes({ corner, color }),
+      ...rest
+    }
+  );
+}
+function Bar({ color, cap, length, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(frameClassNames.bar, className),
+      ...barDataAttributes({ color, cap, length }),
+      ...rest
+    }
+  );
+}
+function Block({ color, fill, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(frameClassNames.block, className),
+      ...blockDataAttributes({ color, fill }),
+      ...rest
+    }
+  );
+}
+function Title({ color, className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "h1",
+    {
+      className: cx2(frameClassNames.title, className),
+      ...colorAttribute(color),
+      ...rest
+    }
+  );
+}
+function Stack({ className, ...rest }) {
+  return /* @__PURE__ */ jsx2("div", { className: cx2(frameClassNames.stack, className), ...rest });
+}
+function Frame({
+  color,
+  title,
+  topLabel,
+  bottomLabel,
+  sidebar,
+  top,
+  bottom,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx2(frameClassNames.frame, className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: frameClassNames.frameTop, children: [
+      /* @__PURE__ */ jsx2(Elbow, { corner: "tl", color, children: topLabel }),
+      top ?? /* @__PURE__ */ jsx2(Bar, { color }),
+      title != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Title, { color, children: title }),
+        /* @__PURE__ */ jsx2(Bar, { color, cap: "right", length: "xs" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      sidebar,
+      /* @__PURE__ */ jsx2(Block, { color, fill: true })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: frameClassNames.frameContent, children }),
+    /* @__PURE__ */ jsxs("div", { className: frameClassNames.frameBottom, children: [
+      /* @__PURE__ */ jsx2(Elbow, { corner: "bl", color, children: bottomLabel }),
+      bottom ?? /* @__PURE__ */ jsx2(Bar, { color, cap: "right" })
+    ] })
+  ] });
+}
+function SplitFrame({
+  color,
+  title,
+  header,
+  headerSidebar,
+  sidebar,
+  upperLabel,
+  lowerLabel,
+  upperBar,
+  lowerBar,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx2(frameClassNames.frame, className), "data-layout": "split", ...rest, children: [
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      headerSidebar,
+      /* @__PURE__ */ jsx2(Block, { color, fill: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cx2(frameClassNames.frameContent, frameClassNames.frameHeader), children: [
+      header,
+      title != null && /* @__PURE__ */ jsx2(Title, { color, children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: frameClassNames.frameBottom, children: [
+      /* @__PURE__ */ jsx2(Elbow, { corner: "bl", color, children: upperLabel }),
+      upperBar ?? /* @__PURE__ */ jsx2(Bar, { color, cap: "right" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: frameClassNames.frameTop, children: [
+      /* @__PURE__ */ jsx2(Elbow, { corner: "tl", color, children: lowerLabel }),
+      lowerBar ?? /* @__PURE__ */ jsx2(Bar, { color, cap: "right" })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      sidebar,
+      /* @__PURE__ */ jsx2(Block, { color, fill: true })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: frameClassNames.frameContent, children })
+  ] });
+}
+
+// src/react/Controls.tsx
+import {
+  forwardRef as forwardRef2,
+  useId,
+  useState
+} from "react";
+import { useLcarsSound as useLcarsSound2 } from "@lcars-gui/core/react";
+import { cx as cx3 } from "@lcars-gui/core";
+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 = 4, 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,
+      {
+        shape: "rect",
+        align: "bottom-right",
+        color: key === "CLR" ? 2 : key === "ENT" ? 6 : color,
+        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 = 8, rows = 6, seed = 47, className, ...rest }) {
+  const data = useMemo(() => cascadeNumbers(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((n, r) => /* @__PURE__ */ jsx4("span", { style: { "--i": r * 2 + c }, children: n }, 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", { style: { display: "contents" }, 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 = 10, 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 = 12, 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 LcarsRoot({ theme, alert, ...rest }) {
+  return /* @__PURE__ */ jsx5("div", { "data-theme": theme, "data-alert": alert ?? void 0, ...rest });
+}
+
+// src/react/index.ts
+import { SoundProvider, useLcarsSound as useLcarsSound3 } from "@lcars-gui/core/react";
+export {
+  AlertBanner,
+  Bar,
+  Block,
+  Button,
+  ButtonGrid,
+  DataCascade,
+  Divider,
+  Elbow,
+  Frame,
+  Gauge,
+  Input,
+  Keypad,
+  LcarsRoot,
+  LevelBar,
+  NumberCode,
+  Readout,
+  Sensor,
+  Slider,
+  SoundProvider,
+  SplitFrame,
+  Stack,
+  StatusIndicator,
+  Tabs,
+  Title,
+  Toggle,
+  useLcarsSound3 as useLcarsSound
+};

package/dist/themes/ds9.css

@@ -0,0 +1,5 @@
+/* Theme extras: DS9 – Deep Space Nine station
+   Published as @lcars-gui/federation/themes/ds9.css.
+   Add animations/effects here that only fit this theme.
+   Scope all rules under [data-theme="ds9"] so the file can safely be
+   loaded while other themes are active. */

package/dist/themes/picard.css

@@ -0,0 +1,5 @@
+/* Theme extras: Picard – 25th century
+   Published as @lcars-gui/federation/themes/picard.css.
+   Add animations/effects here that only fit this theme.
+   Scope all rules under [data-theme="picard"] so the file can safely be
+   loaded while other themes are active. */

package/dist/themes/tng.css

@@ -0,0 +1,5 @@
+/* Theme extras: TNG – Enterprise-D
+   Published as @lcars-gui/federation/themes/tng.css.
+   Add animations/effects here that only fit this theme.
+   Scope all rules under [data-theme="tng"] so the file can safely be
+   loaded while other themes are active. */