@lcars-gui/federation 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,155 @@
+// 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/behaviors.ts
+import { initBehaviors } from "@lcars-gui/core";
+import { pressedChangeEvent } from "@lcars-gui/core";
+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("");
+  });
+}
+
+// src/index.ts
+import { createLcarsSound } from "@lcars-gui/core";
+export {
+  barDataAttributes,
+  blockDataAttributes,
+  buttonClassName,
+  buttonDataAttributes,
+  cascadeNumbers,
+  colorAttribute,
+  controlClassNames,
+  createLcarsSound,
+  defaultButtonProps,
+  displayClassNames,
+  elbowDataAttributes,
+  fillCascades,
+  frameClassNames,
+  initLcars,
+  levelSegments,
+  normalizeButtonProps,
+  pressedChangeEvent,
+  toPercent
+};

package/dist/react/index.d.ts

@@ -0,0 +1,241 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
+import { LcarsSoundKind } from '@lcars-gui/core';
+export { LcarsSoundKind } from '@lcars-gui/core';
+export { SoundProvider, SoundProviderProps, useLcarsSound } from '@lcars-gui/core/react';
+
+type LcarsColor = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+type LcarsLength = "xs" | "s" | "m" | "l" | "xl";
+
+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";
+/**
+ * Plattformneutrale Button-Props (ohne Events/Children,
+ * die liefert der jeweilige Renderer).
+ */
+interface ButtonProps$1 {
+    color?: ButtonColor;
+    size?: ButtonSize;
+    length?: ButtonLength;
+    shape?: ButtonShape;
+    align?: ButtonAlign;
+    disabled?: boolean;
+}
+
+type ElbowCorner = "tl" | "tr" | "bl" | "br";
+type BarCap = "left" | "right" | "both";
+interface ElbowProps$1 {
+    corner?: ElbowCorner;
+    color?: LcarsColor;
+}
+interface BarProps$1 {
+    color?: LcarsColor;
+    cap?: BarCap;
+    length?: LcarsLength;
+}
+interface BlockProps$1 {
+    color?: LcarsColor;
+    fill?: boolean;
+}
+
+type LcarsTheme = "tng" | "ds9" | "picard";
+type AlertLevel = "red" | "yellow";
+type StatusKind = "ok" | "warn" | "error" | "off";
+type Orientation = "horizontal" | "vertical";
+
+type ButtonProps = ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    /** Ton beim Klicken (nur innerhalb eines SoundProvider); false = stumm */
+    sound?: LcarsSoundKind | false;
+};
+declare const Button: react.ForwardRefExoticComponent<ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    /** Ton beim Klicken (nur innerhalb eines SoundProvider); false = stumm */
+    sound?: LcarsSoundKind | false;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type DivProps$1 = Omit<HTMLAttributes<HTMLDivElement>, "color">;
+type ElbowProps = ElbowProps$1 & DivProps$1;
+/** L-förmige Ecke, die Seitenleiste und Balken verbindet. */
+declare function Elbow({ corner, color, className, ...rest }: ElbowProps): react.JSX.Element;
+type BarProps = BarProps$1 & DivProps$1;
+/** Waagrechter Balken, optional mit abgerundetem Ende (End Cap). */
+declare function Bar({ color, cap, length, className, ...rest }: BarProps): react.JSX.Element;
+type BlockProps = BlockProps$1 & DivProps$1;
+/** Rechteckiges Segment, z. B. in der Seitenleiste; Label sitzt unten rechts. */
+declare function Block({ color, fill, className, ...rest }: BlockProps): react.JSX.Element;
+type TitleProps = {
+    color?: LcarsColor;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, "color">;
+/** Titel in der Balkenzeile. */
+declare function Title({ color, className, ...rest }: TitleProps): react.JSX.Element;
+/** Senkrechter Stapel aus Segmenten mit gleichmäßigen Lücken. */
+declare function Stack({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+interface FrameProps extends Omit<DivProps$1, "title"> {
+    color?: LcarsColor;
+    title?: ReactNode;
+    /** Label im oberen/unteren Elbow, z. B. eine Nummer wie "47-1138" */
+    topLabel?: ReactNode;
+    bottomLabel?: ReactNode;
+    /** Inhalt der Seitenleiste (Buttons/Blocks); wird nach unten aufgefüllt */
+    sidebar?: ReactNode;
+    /** Ersetzt den Standardbalken oben bzw. unten */
+    top?: ReactNode;
+    bottom?: ReactNode;
+}
+/** Klassisches LCARS-Panel: Seitenleiste, zwei Elbows, Balken und Inhaltsbereich. */
+declare function Frame({ color, title, topLabel, bottomLabel, sidebar, top, bottom, className, children, ...rest }: FrameProps): react.JSX.Element;
+interface SplitFrameProps extends Omit<DivProps$1, "title"> {
+    color?: LcarsColor;
+    title?: ReactNode;
+    /** Inhalt des oberen Bereichs (z. B. DataCascade, Readout) */
+    header?: ReactNode;
+    /** Seitenleiste oben bzw. unten (Buttons/Blocks); wird jeweils aufgefüllt */
+    headerSidebar?: ReactNode;
+    sidebar?: ReactNode;
+    /** Labels in den beiden mittleren Elbows */
+    upperLabel?: ReactNode;
+    lowerLabel?: ReactNode;
+    /** Ersetzt die Balken neben den mittleren Elbows */
+    upperBar?: ReactNode;
+    lowerBar?: ReactNode;
+}
+/** TNG-Hauptlayout: oberer Bereich und unterer Bereich, getrennt durch zwei Elbows. */
+declare function SplitFrame({ color, title, header, headerSidebar, sidebar, upperLabel, lowerLabel, upperBar, lowerBar, className, children, ...rest }: SplitFrameProps): react.JSX.Element;
+
+interface ToggleProps extends ButtonProps {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+/** Button mit Zustand an/aus (aria-pressed). */
+declare function Toggle({ pressed, defaultPressed, onPressedChange, onClick, ...rest }: ToggleProps): react.JSX.Element;
+type SliderProps = {
+    color?: LcarsColor;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "color">;
+/** Schieberegler (natives input type="range"). */
+declare const Slider: react.ForwardRefExoticComponent<{
+    color?: LcarsColor;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & react.RefAttributes<HTMLInputElement>>;
+type InputProps = {
+    color?: LcarsColor;
+    label?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
+/** Textfeld mit farbiger Beschriftung als End Cap. */
+declare const Input: react.ForwardRefExoticComponent<{
+    color?: LcarsColor;
+    label?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "color"> & react.RefAttributes<HTMLInputElement>>;
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    color?: LcarsColor;
+}
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    items: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    color?: LcarsColor;
+}
+/** Registerkarten; der aktive Tab geht in den Balken darunter über. */
+declare function Tabs({ items, value, defaultValue, onValueChange, color, className, ...rest }: TabsProps): react.JSX.Element;
+interface KeypadProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "onSubmit"> {
+    color?: LcarsColor;
+    /** Maximale Länge des Codes */
+    length?: number;
+    /** Code als Punkte anzeigen */
+    mask?: boolean;
+    /** Wird mit dem Code aufgerufen; true = Code akzeptiert, false = abgelehnt */
+    onSubmit?: (code: string) => boolean | void;
+}
+/** Ziffernfeld mit Anzeige, z. B. für Zugangscodes. */
+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;
+}
+/** Durchlaufende Zahlenspalten – der „Computer arbeitet“-Effekt. */
+declare function DataCascade({ columns, rows, seed, className, ...rest }: DataCascadeProps): react.JSX.Element;
+interface ReadoutItem {
+    label: ReactNode;
+    value: ReactNode;
+    color?: LcarsColor;
+}
+interface ReadoutProps extends Omit<HTMLAttributes<HTMLDListElement>, "color"> {
+    items: ReadoutItem[];
+    color?: LcarsColor;
+}
+/** Wertetabelle: Label links, Wert rechtsbündig. */
+declare function Readout({ items, color, className, ...rest }: ReadoutProps): react.JSX.Element;
+type NumberCodeProps = {
+    color?: LcarsColor;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "color">;
+/** Kennnummer wie „47-1138“. */
+declare function NumberCode({ color, className, ...rest }: NumberCodeProps): react.JSX.Element;
+declare function Divider({ color, className, ...rest }: {
+    color?: LcarsColor;
+} & DivProps): react.JSX.Element;
+interface ButtonGridProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: number;
+}
+/** Raster aus Buttons wie eine Brückenkonsole. */
+declare function ButtonGrid({ columns, className, style, ...rest }: ButtonGridProps): react.JSX.Element;
+interface LevelBarProps extends DivProps {
+    value: number;
+    max?: number;
+    segments?: number;
+    orientation?: Orientation;
+    color?: LcarsColor;
+}
+/** Segmentierte Pegelanzeige. */
+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?: LcarsColor;
+}
+/** Halbrunde Anzeige aus Bogensegmenten. */
+declare function Gauge({ value, max, segments, label, color, className, style, ...rest }: GaugeProps): react.JSX.Element;
+interface Blip {
+    x: number;
+    y: number;
+    color?: LcarsColor;
+}
+interface SensorProps extends DivProps {
+    blips?: Blip[];
+    scan?: boolean;
+    color?: LcarsColor;
+}
+/** Sensoranzeige mit Raster, Fadenkreuz, Kontakten und optionalem Scan. */
+declare function Sensor({ blips, scan, color, className, children, ...rest }: SensorProps): react.JSX.Element;
+interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    status?: StatusKind;
+    blink?: boolean;
+}
+/** Lämpchen mit Beschriftung. */
+declare function StatusIndicator({ status, blink, className, ...rest }: StatusIndicatorProps): react.JSX.Element;
+interface AlertBannerProps extends Omit<DivProps, "title"> {
+    level?: AlertLevel;
+    title?: ReactNode;
+}
+/** Großes, blinkendes Alarm-Banner. */
+declare function AlertBanner({ level, title, children, className, ...rest }: AlertBannerProps): react.JSX.Element;
+
+interface LcarsRootProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: LcarsTheme;
+    /** Färbt alles darunter rot/gelb und lässt Balken pulsieren */
+    alert?: AlertLevel | null;
+}
+/** Setzt Farbthema und Alarmzustand für alle Komponenten darunter. */
+declare function LcarsRoot({ theme, alert, ...rest }: LcarsRootProps): react.JSX.Element;
+
+export { AlertBanner, Bar, Block, Button, ButtonGrid, DataCascade, Divider, Elbow, Frame, Gauge, Input, Keypad, LcarsRoot, LevelBar, NumberCode, Readout, Sensor, Slider, SplitFrame, Stack, StatusIndicator, Tabs, Title, Toggle };
+export type { AlertBannerProps, AlertLevel, BarCap, BarProps, Blip, BlockProps, ButtonAlign, ButtonColor, ButtonGridProps, ButtonLength, ButtonProps, ButtonShape, ButtonSize, DataCascadeProps, ElbowCorner, ElbowProps, FrameProps, GaugeProps, InputProps, KeypadProps, LcarsColor, LcarsLength, LcarsRootProps, LcarsTheme, LevelBarProps, NumberCodeProps, Orientation, ReadoutItem, ReadoutProps, SensorProps, SliderProps, SplitFrameProps, StatusIndicatorProps, StatusKind, TabItem, TabsProps, TitleProps, ToggleProps };