@lcars-gui/federation 0.1.0 → 0.1.1

package/README.md

@@ -1,10 +1,10 @@
 # @lcars-gui/federation
 
-LCARS-UI-Komponenten im Stil der Föderation – für React und reines HTML/CSS/JS.
+LCARS UI components in the style of the Federation – for React and plain HTML/CSS/JS.
 
-**[Live-Demo](https://aarondnas.github.io/lcars-gui/federation.html)**
+**[▶ Live demo & docs](https://aarondnas.github.io/lcars-gui/#federation)**
 
-![Föderation](https://raw.githubusercontent.com/aarondnas/lcars-gui/main/docs/federation.gif)
+![Federation](https://raw.githubusercontent.com/aarondnas/lcars-gui/main/docs/federation.gif)
 
 ## Installation
 
@@ -12,7 +12,7 @@ LCARS-UI-Komponenten im Stil der Föderation – für React und reines HTML/CSS/
 npm install @lcars-gui/federation
 ```
 
-## Verwendung
+## Usage
 
 ```tsx
 // React
@@ -21,7 +21,7 @@ import { Frame, Button, LcarsRoot, SoundProvider } from "@lcars-gui/federation/r
 
 <SoundProvider>
   <LcarsRoot theme="tng">
-    <Frame title="Brücke" topLabel="47-1138" sidebar={<Button shape="rect" align="bottom-right">Taktik</Button>}>
+    <Frame title="Bridge" topLabel="47-1138" sidebar={<Button shape="rect" align="bottom-right">Tactical</Button>}>
       …
     </Frame>
   </LcarsRoot>
@@ -29,7 +29,7 @@ import { Frame, Button, LcarsRoot, SoundProvider } from "@lcars-gui/federation/r
 ```
 
 ```html
-<!-- Reines HTML/JS, ohne Bundler -->
+<!-- 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>
 
@@ -37,22 +37,23 @@ import { Frame, Button, LcarsRoot, SoundProvider } from "@lcars-gui/federation/r
 <script>const ui = LcarsFederation.initLcars({ sound: true });</script>
 ```
 
-`initLcars()` macht Toggles, Tabs, Keypads, Data Cascades und Bedien-Töne im statischen Markup interaktiv.
+`initLcars()` makes toggles, tabs, keypads, data cascades and interface sounds in static markup interactive.
 
-## Themes & Alarm
+## Themes & alert
 
-`data-theme` (bzw. `<LcarsRoot theme>`) wechselt die Farbpalette, `data-alert="red" | "yellow"` färbt alles darunter um und lässt die Balken pulsieren.
+`data-theme` (or `<LcarsRoot theme>`) switches the color palette; `data-alert="red" | "yellow"` recolors everything
+below and makes the bars pulse.
 
-| Theme    | Stil                          | Extras                                  |
-|----------|-------------------------------|-----------------------------------------|
-| `tng`    | Enterprise-D (Standard)       | `@lcars-gui/federation/themes/tng.css`  |
-| `ds9`    | Raumstation Deep Space Nine   | `@lcars-gui/federation/themes/ds9.css`  |
-| `picard` | 25. Jahrhundert               | `@lcars-gui/federation/themes/picard.css` |
+| 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` |
 
-## Schrift
+## Font
 
-Mitgeliefert wird [Antonio](https://github.com/googlefonts/antonioFont) (SIL Open Font License 1.1, siehe `dist/fonts/Antonio/OFL.txt`).
+The package bundles [Antonio](https://github.com/googlefonts/antonioFont) (SIL Open Font License 1.1, see `dist/fonts/Antonio/OFL.txt`).
 
-## Lizenz
+## License
 
-MIT. Star Trek und LCARS sind Marken von CBS Studios / Paramount; dies ist ein inoffizielles Fan-Projekt.
+MIT. Star Trek and LCARS are trademarks of CBS Studios / Paramount; this is an unofficial fan project.

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { LcarsController, LcarsSound, LcarsSoundKind, createLcarsSound, pressedC
 
 type LcarsColor = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 type LcarsLength = "xs" | "s" | "m" | "l" | "xl";
-/** data-color nur setzen, wenn eine Farbe angegeben ist (sonst CSS-Default). */
+/** Sets data-color only when a color is given (otherwise the CSS default applies). */
 declare function colorAttribute(color?: LcarsColor): {
     "data-color": string;
 } | {
@@ -16,8 +16,8 @@ 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).
+ * Platform-neutral button props (without events/children,
+ * those come from the respective renderer).
  */
 interface ButtonProps {
     color?: ButtonColor;
@@ -28,15 +28,15 @@ interface ButtonProps {
     disabled?: boolean;
 }
 /**
- * Defaultwerte aus Source-of-Truth.
- * (wird in allen Renderern verwendet)
+ * Default values, the single source of truth
+ * (used by all renderers).
  */
 declare const defaultButtonProps: Required<Omit<ButtonProps, "length">>;
-/** CSS-Klasse aus ui.css */
+/** CSS class from ui.css */
 declare const buttonClassName = "lcar-btn-std";
 /**
- * Utility-Funktion, die Props mergen & normalisieren kann,
- * bevor die Renderer sie weiterverwenden.
+ * Merges and normalizes props
+ * before the renderers use them.
  */
 declare function normalizeButtonProps<T extends ButtonProps>(props: T): {
     color: ButtonColor;
@@ -46,7 +46,7 @@ declare function normalizeButtonProps<T extends ButtonProps>(props: T): {
     disabled: boolean;
 } & T;
 /**
- * Liefert die data-Attribute, auf die das CSS reagiert.
+ * Returns the data attributes the CSS reacts to.
  */
 declare function buttonDataAttributes(props: ButtonProps): {
     "data-align"?: string | undefined;
@@ -71,7 +71,7 @@ interface BlockProps {
     color?: LcarsColor;
     fill?: boolean;
 }
-/** CSS-Klassen aus ui.css */
+/** CSS classes from ui.css */
 declare const frameClassNames: {
     readonly elbow: "lcar-elbow";
     readonly bar: "lcar-bar";
@@ -112,7 +112,7 @@ type LcarsTheme = "tng" | "ds9" | "picard";
 type AlertLevel = "red" | "yellow";
 type StatusKind = "ok" | "warn" | "error" | "off";
 type Orientation = "horizontal" | "vertical";
-/** CSS-Klassen aus ui.css */
+/** CSS classes from ui.css */
 declare const displayClassNames: {
     readonly cascade: "lcar-cascade";
     readonly cascadeCol: "lcar-cascade-col";
@@ -143,22 +143,22 @@ declare const controlClassNames: {
     readonly keypadDisplay: "lcar-keypad-display";
 };
 /**
- * Zufällige, aber reproduzierbare Zahlenspalten für die Data Cascade
- * (gleicher Seed → gleiche Zahlen, wichtig für Server-Rendering).
+ * 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[][];
-/** Welche Segmente einer Pegelanzeige leuchten. */
+/** Which segments of a level bar are lit. */
 declare function levelSegments(value: number, segments?: number, max?: number): boolean[];
-/** Wert auf 0–100 % umrechnen (für die Gauge). */
+/** Converts a value to 0–100 % (for the gauge). */
 declare function toPercent(value: number, max?: number): number;
 
 type InitLcarsOptions = InitBehaviorsOptions;
 /**
- * Macht statisches LCARS-Markup interaktiv.
- * Der zurückgegebene Controller spielt Töne und entfernt die Listener wieder.
+ * Makes static LCARS markup interactive.
+ * The returned controller plays sounds and removes the listeners again.
  */
 declare function initLcars(options?: InitLcarsOptions): LcarsController;
-/** Füllt leere Data Cascades (data-columns / data-rows / data-seed) mit Zahlen. */
+/** 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 };

package/dist/react/index.d.ts

@@ -13,8 +13,8 @@ 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).
+ * Platform-neutral button props (without events/children,
+ * those come from the respective renderer).
  */
 interface ButtonProps$1 {
     color?: ButtonColor;
@@ -47,61 +47,61 @@ 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 on click (only inside a SoundProvider); false = silent */
     sound?: LcarsSoundKind | false;
 };
 declare const Button: react.ForwardRefExoticComponent<ButtonProps$1 & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
-    /** Ton beim Klicken (nur innerhalb eines SoundProvider); false = stumm */
+    /** Sound on click (only inside a SoundProvider); false = silent */
     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. */
+/** L-shaped corner that connects the sidebar and a bar. */
 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). */
+/** Horizontal bar, optionally with a rounded end (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. */
+/** Rectangular segment, e.g. in the sidebar; the label sits bottom right. */
 declare function Block({ color, fill, className, ...rest }: BlockProps): react.JSX.Element;
 type TitleProps = {
     color?: LcarsColor;
 } & Omit<HTMLAttributes<HTMLHeadingElement>, "color">;
-/** Titel in der Balkenzeile. */
+/** Title in the bar row. */
 declare function Title({ color, className, ...rest }: TitleProps): react.JSX.Element;
-/** Senkrechter Stapel aus Segmenten mit gleichmäßigen Lücken. */
+/** Vertical stack of segments with even gaps. */
 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" */
+    /** Label in the top/bottom elbow, e.g. a number like "47-1138" */
     topLabel?: ReactNode;
     bottomLabel?: ReactNode;
-    /** Inhalt der Seitenleiste (Buttons/Blocks); wird nach unten aufgefüllt */
+    /** Sidebar content (buttons/blocks); filled up to the bottom */
     sidebar?: ReactNode;
-    /** Ersetzt den Standardbalken oben bzw. unten */
+    /** Replaces the default bar at the top or bottom */
     top?: ReactNode;
     bottom?: ReactNode;
 }
-/** Klassisches LCARS-Panel: Seitenleiste, zwei Elbows, Balken und Inhaltsbereich. */
+/** Classic LCARS panel: sidebar, two elbows, bars and a content area. */
 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) */
+    /** Content of the upper area (e.g. DataCascade, Readout) */
     header?: ReactNode;
-    /** Seitenleiste oben bzw. unten (Buttons/Blocks); wird jeweils aufgefüllt */
+    /** Upper and lower sidebar (buttons/blocks); each is filled up */
     headerSidebar?: ReactNode;
     sidebar?: ReactNode;
-    /** Labels in den beiden mittleren Elbows */
+    /** Labels in the two middle elbows */
     upperLabel?: ReactNode;
     lowerLabel?: ReactNode;
-    /** Ersetzt die Balken neben den mittleren Elbows */
+    /** Replaces the bars next to the middle elbows */
     upperBar?: ReactNode;
     lowerBar?: ReactNode;
 }
-/** TNG-Hauptlayout: oberer Bereich und unterer Bereich, getrennt durch zwei Elbows. */
+/** TNG main layout: upper and lower area, separated by two elbows. */
 declare function SplitFrame({ color, title, header, headerSidebar, sidebar, upperLabel, lowerLabel, upperBar, lowerBar, className, children, ...rest }: SplitFrameProps): react.JSX.Element;
 
 interface ToggleProps extends ButtonProps {
@@ -109,20 +109,20 @@ interface ToggleProps extends ButtonProps {
     defaultPressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
 }
-/** Button mit Zustand an/aus (aria-pressed). */
+/** Button with an on/off state (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"). */
+/** Slider (native input type="range"). */
 declare const Slider: react.ForwardRefExoticComponent<{
     color?: LcarsColor;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "color"> & react.RefAttributes<HTMLInputElement>>;
 type InputProps = {
     color?: LcarsColor;
     label?: ReactNode;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
-/** Textfeld mit farbiger Beschriftung als End Cap. */
+/** Text field with a colored label as end cap. */
 declare const Input: react.ForwardRefExoticComponent<{
     color?: LcarsColor;
     label?: ReactNode;
@@ -140,18 +140,18 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
     onValueChange?: (id: string) => void;
     color?: LcarsColor;
 }
-/** Registerkarten; der aktive Tab geht in den Balken darunter über. */
+/** Tabs; the active tab flows into the bar below. */
 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 */
+    /** Maximum code length */
     length?: number;
-    /** Code als Punkte anzeigen */
+    /** Show the code as dots */
     mask?: boolean;
-    /** Wird mit dem Code aufgerufen; true = Code akzeptiert, false = abgelehnt */
+    /** Called with the code; true = accepted, false = denied */
     onSubmit?: (code: string) => boolean | void;
 }
-/** Ziffernfeld mit Anzeige, z. B. für Zugangscodes. */
+/** 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">;
@@ -160,7 +160,7 @@ interface DataCascadeProps extends DivProps {
     rows?: number;
     seed?: number;
 }
-/** Durchlaufende Zahlenspalten – der „Computer arbeitet“-Effekt. */
+/** Cycling number columns – the "computer at work" effect. */
 declare function DataCascade({ columns, rows, seed, className, ...rest }: DataCascadeProps): react.JSX.Element;
 interface ReadoutItem {
     label: ReactNode;
@@ -171,12 +171,12 @@ interface ReadoutProps extends Omit<HTMLAttributes<HTMLDListElement>, "color"> {
     items: ReadoutItem[];
     color?: LcarsColor;
 }
-/** Wertetabelle: Label links, Wert rechtsbündig. */
+/** Value table: label on the left, value right-aligned. */
 declare function Readout({ items, color, className, ...rest }: ReadoutProps): react.JSX.Element;
 type NumberCodeProps = {
     color?: LcarsColor;
 } & Omit<HTMLAttributes<HTMLSpanElement>, "color">;
-/** Kennnummer wie „47-1138“. */
+/** ID number like "47-1138". */
 declare function NumberCode({ color, className, ...rest }: NumberCodeProps): react.JSX.Element;
 declare function Divider({ color, className, ...rest }: {
     color?: LcarsColor;
@@ -184,7 +184,7 @@ declare function Divider({ color, className, ...rest }: {
 interface ButtonGridProps extends HTMLAttributes<HTMLDivElement> {
     columns?: number;
 }
-/** Raster aus Buttons wie eine Brückenkonsole. */
+/** Grid of buttons like a bridge console. */
 declare function ButtonGrid({ columns, className, style, ...rest }: ButtonGridProps): react.JSX.Element;
 interface LevelBarProps extends DivProps {
     value: number;
@@ -193,7 +193,7 @@ interface LevelBarProps extends DivProps {
     orientation?: Orientation;
     color?: LcarsColor;
 }
-/** Segmentierte Pegelanzeige. */
+/** Segmented level bar. */
 declare function LevelBar({ value, max, segments, orientation, color, className, ...rest }: LevelBarProps): react.JSX.Element;
 interface GaugeProps extends DivProps {
     value: number;
@@ -202,7 +202,7 @@ interface GaugeProps extends DivProps {
     label?: ReactNode;
     color?: LcarsColor;
 }
-/** Halbrunde Anzeige aus Bogensegmenten. */
+/** Semicircular gauge made of arc segments. */
 declare function Gauge({ value, max, segments, label, color, className, style, ...rest }: GaugeProps): react.JSX.Element;
 interface Blip {
     x: number;
@@ -214,27 +214,27 @@ interface SensorProps extends DivProps {
     scan?: boolean;
     color?: LcarsColor;
 }
-/** Sensoranzeige mit Raster, Fadenkreuz, Kontakten und optionalem Scan. */
+/** Sensor display with grid, crosshair, contacts and optional 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. */
+/** 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;
 }
-/** Großes, blinkendes Alarm-Banner. */
+/** Large, blinking alert 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 */
+    /** Turns everything below red/yellow and makes the bars pulse */
     alert?: AlertLevel | null;
 }
-/** Setzt Farbthema und Alarmzustand für alle Komponenten darunter. */
+/** Sets the color theme and alert state for all components below. */
 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 };

package/dist/themes/ds9.css

@@ -1,5 +1,5 @@
-/* Theme-Extras: DS9 – Raumstation Deep Space Nine
-   Wird als @lcars-gui/federation/themes/ds9.css veröffentlicht.
-   Hier kommen zusätzliche Animationen/Effekte hin, die nur zu diesem Theme passen.
-   Alle Regeln unter [data-theme="ds9"] einhängen, damit die Datei auch bei
-   anderen aktiven Themes gefahrlos geladen werden kann. */
+/* 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

@@ -1,5 +1,5 @@
-/* Theme-Extras: Picard – 25. Jahrhundert
-   Wird als @lcars-gui/federation/themes/picard.css veröffentlicht.
-   Hier kommen zusätzliche Animationen/Effekte hin, die nur zu diesem Theme passen.
-   Alle Regeln unter [data-theme="picard"] einhängen, damit die Datei auch bei
-   anderen aktiven Themes gefahrlos geladen werden kann. */
+/* 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

@@ -1,5 +1,5 @@
-/* Theme-Extras: TNG – Enterprise-D
-   Wird als @lcars-gui/federation/themes/tng.css veröffentlicht.
-   Hier kommen zusätzliche Animationen/Effekte hin, die nur zu diesem Theme passen.
-   Alle Regeln unter [data-theme="tng"] einhängen, damit die Datei auch bei
-   anderen aktiven Themes gefahrlos geladen werden kann. */
+/* 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. */

package/dist/ui.css

@@ -143,7 +143,7 @@
 
 /* ==================== 00-base.css ==================== */
 
-/* Antonio (SIL Open Font License 1.1, siehe fonts/Antonio/OFL.txt) – variable Schrift 100–700 */
+/* Antonio (SIL Open Font License 1.1, see fonts/Antonio/OFL.txt) – variable font, weights 100–700 */
 @font-face {
   font-family: 'Antonio';
   src: url('./fonts/Antonio/Antonio-latin.woff2') format('woff2');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lcars-gui/federation",
-  "version": "0.1.0",
-  "description": "LCARS-UI-Komponenten im Stil der Föderation (TNG, DS9, Picard) für React und reines HTML/CSS/JS",
+  "version": "0.1.1",
+  "description": "LCARS UI components in the style of the Federation (TNG, DS9, Picard) for React and plain HTML/CSS/JS",
   "keywords": [
     "lcars",
     "star-trek",
@@ -53,7 +53,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@lcars-gui/core": "^0.1.0"
+    "@lcars-gui/core": "^0.1.1"
   },
   "peerDependencies": {
     "react": ">=18",