@lcars-gui/core 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,19 +1,19 @@
1
1
  # @lcars-gui/core
2
2
 
3
- Gemeinsame Basis der lcars-gui-Fraktionspakete. Normalerweise brauchst du dieses Paket nicht direkt –
4
- es wird von [`@lcars-gui/federation`](https://www.npmjs.com/package/@lcars-gui/federation) und
5
- [`@lcars-gui/romulus`](https://www.npmjs.com/package/@lcars-gui/romulus) mitinstalliert.
3
+ Shared foundation of the lcars-gui faction packages. You usually don't need this package directly –
4
+ it is installed along with [`@lcars-gui/federation`](https://www.npmjs.com/package/@lcars-gui/federation) and
5
+ [`@lcars-gui/romulus`](https://www.npmjs.com/package/@lcars-gui/romulus).
6
6
 
7
- ## Inhalt
7
+ ## Contents
8
8
 
9
- | Export | Zweck |
10
- |-----------------------------|---------------------------------------------------------------------------|
11
- | `createLcarsSound()` | Synthetisierte Bedien-Töne über die Web Audio API (keine Audiodateien) |
12
- | `initBehaviors()` | Verhalten für reines HTML/JS: Toggles, Tabs, Keypads, Töne |
13
- | `seededRandom()`, `cx()` | Kleine Hilfsfunktionen |
14
- | `@lcars-gui/core/react` | `SoundProvider`, `useLcarsSound` – ein Sound-Kontext für alle Fraktionen |
15
- | `@lcars-gui/core/build` | `buildCss()` – erzeugt das CSS einer Fraktion aus Tokens und Komponenten-CSS |
9
+ | Export | Purpose |
10
+ |-----------------------------|-------------------------------------------------------------------------|
11
+ | `createLcarsSound()` | Synthesized interface sounds via the Web Audio API (no audio files) |
12
+ | `initBehaviors()` | Behavior for plain HTML/JS: toggles, tabs, keypads, sounds |
13
+ | `seededRandom()`, `cx()` | Small helpers |
14
+ | `@lcars-gui/core/react` | `SoundProvider`, `useLcarsSound` – one sound context for all factions |
15
+ | `@lcars-gui/core/build` | `buildCss()` – generates a faction's CSS from tokens and component CSS |
16
16
 
17
- ## Lizenz
17
+ ## License
18
18
 
19
19
  MIT
package/build/css.js CHANGED
@@ -1,14 +1,14 @@
1
- // Erzeugt das CSS eines Fraktionspakets aus dessen Tokens und Komponenten-Styles.
2
- // Erwartete Ordnerstruktur (relativ zu `root`):
1
+ // Generates a faction package's CSS from its tokens and component styles.
2
+ // Expected folder structure (relative to `root`):
3
3
  //
4
- // tokens/base.json Maße, Schriftgrößen, Grundfarben … → :root-Variablen
5
- // tokens/themes/<name>.json Farbpalette pro Theme → [data-theme="<name>"]
6
- // tokens/alerts/<name>.json Farbpalette pro Alarmstufe → [data-alert="<name>"]
7
- // css/*.css Komponenten-Styles (nach Dateiname sortiert)
8
- // themes/<name>/theme.css Theme-Extras (optional) → dist/themes/<name>.css
9
- // fonts/ Schriften (optional) → dist/fonts/
4
+ // tokens/base.json sizes, font sizes, base colors … → :root variables
5
+ // tokens/themes/<name>.json color palette per theme → [data-theme="<name>"]
6
+ // tokens/alerts/<name>.json color palette per alert level → [data-alert="<name>"]
7
+ // css/*.css component styles (sorted by file name)
8
+ // themes/<name>/theme.css theme extras (optional) → dist/themes/<name>.css
9
+ // fonts/ fonts (optional) → dist/fonts/
10
10
  //
11
- // Ergebnis: dist/ui.css (+ dist/themes/*.css, dist/fonts/).
11
+ // Output: dist/ui.css (+ dist/themes/*.css, dist/fonts/).
12
12
  import fs from "fs";
13
13
  import path from "path";
14
14
 
@@ -18,7 +18,7 @@ const kebab = (str) =>
18
18
 
19
19
  const readJson = (file) => JSON.parse(fs.readFileSync(file, "utf8"));
20
20
 
21
- // Alle JSON-Dateien eines Ordners als { name: inhalt }
21
+ // All JSON files in a folder as { name: content }
22
22
  function readJsonDir(dir) {
23
23
  if (!fs.existsSync(dir)) return {};
24
24
  return Object.fromEntries(
@@ -41,7 +41,7 @@ function generateCssVars(baseTokens, vars) {
41
41
  return css;
42
42
  }
43
43
 
44
- // Palette → --colors-* Variablen. Fehlende Hover-Farben werden abgeleitet.
44
+ // Palette → --colors-* variables. Missing hover colors are derived.
45
45
  function generatePalette(palette, vars) {
46
46
  let css = "";
47
47
  for (const [key, value] of Object.entries(palette)) {
@@ -80,11 +80,11 @@ function readComponentStyles(cssDir) {
80
80
 
81
81
  /**
82
82
  * @param {object} options
83
- * @param {string} options.root Paketordner der Fraktion
84
- * @param {string} options.defaultTheme Theme, dessen Palette auf :root liegt
85
- * @param {string} [options.prefix] Präfix der CSS-Klassen/-Variablen (z. B. "lcar")
86
- * @param {string} [options.varPrefix] Präfix der Token-Variablen (z. B. "rom-" → --rom-colors-color1),
87
- * damit mehrere Fraktionen auf einer Seite nicht kollidieren
83
+ * @param {string} options.root the faction's package folder
84
+ * @param {string} options.defaultTheme theme whose palette is applied to :root
85
+ * @param {string} [options.prefix] prefix of CSS classes/variables (e.g. "lcar")
86
+ * @param {string} [options.varPrefix] prefix of token variables (e.g. "rom-" → --rom-colors-color1),
87
+ * so several factions can coexist on one page
88
88
  */
89
89
  export function buildCss({ root, defaultTheme, prefix = "lcar", varPrefix = "" }) {
90
90
  const distDir = path.join(root, "dist");
@@ -93,7 +93,7 @@ export function buildCss({ root, defaultTheme, prefix = "lcar", varPrefix = "" }
93
93
  const alerts = readJsonDir(path.join(root, "tokens/alerts"));
94
94
 
95
95
  const defaultPalette = themes[defaultTheme];
96
- if (!defaultPalette) throw new Error(`Theme "${defaultTheme}" fehlt in tokens/themes/`);
96
+ if (!defaultPalette) throw new Error(`Theme "${defaultTheme}" is missing in tokens/themes/`);
97
97
 
98
98
  const finalCss =
99
99
  "/* AUTO-GENERATED FROM tokens/ + css/*.css — DO NOT EDIT */\n\n" +
@@ -106,7 +106,7 @@ export function buildCss({ root, defaultTheme, prefix = "lcar", varPrefix = "" }
106
106
  fs.mkdirSync(distDir, { recursive: true });
107
107
  fs.writeFileSync(path.join(distDir, "ui.css"), finalCss);
108
108
 
109
- // Theme-Extras
109
+ // Theme extras
110
110
  const themesDir = path.join(root, "themes");
111
111
  if (fs.existsSync(themesDir)) {
112
112
  fs.mkdirSync(path.join(distDir, "themes"), { recursive: true });
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  type LcarsSoundKind = "beep" | "confirm" | "deny" | "alert";
2
- /** [Frequenz in Hz, Dauer in ms] je Ton einer Folge */
2
+ /** [frequency in Hz, duration in ms] for each tone of a pattern */
3
3
  type LcarsSoundPatterns = Record<LcarsSoundKind, [number, number][]>;
4
4
  interface LcarsSoundOptions {
5
- /** Tonfolgen je Art (Standard: Föderations-Töne) */
5
+ /** Sound patterns per kind (default: Federation sounds) */
6
6
  patterns?: LcarsSoundPatterns;
7
- /** Wellenform des Oszillators (Standard: "sine") */
7
+ /** Oscillator waveform (default: "sine") */
8
8
  wave?: OscillatorType;
9
9
  }
10
10
  interface LcarsSound {
@@ -13,22 +13,22 @@ interface LcarsSound {
13
13
  declare function createLcarsSound(volume?: number, { patterns, wave }?: LcarsSoundOptions): LcarsSound;
14
14
 
15
15
  interface BehaviorSelectors {
16
- /** Elemente, die beim Klicken einen Ton spielen (Buttons, Tabs) */
16
+ /** Elements that play a sound when clicked (buttons, tabs) */
17
17
  control: string;
18
- /** Keypad-Container */
18
+ /** Keypad container */
19
19
  keypad: string;
20
- /** Taste innerhalb eines Keypads */
20
+ /** Key inside a keypad */
21
21
  keypadKey: string;
22
- /** Anzeige innerhalb eines Keypads */
22
+ /** Display inside a keypad */
23
23
  keypadDisplay: string;
24
24
  }
25
25
  interface InitBehaviorsOptions {
26
- /** Bereich, in dem verdrahtet wird (Standard: document) */
26
+ /** Area to wire up (default: document) */
27
27
  root?: Document | HTMLElement;
28
- /** Bedien-Töne von Anfang an an (später: setSound) */
28
+ /** Enable interface sounds from the start (later: setSound) */
29
29
  sound?: boolean;
30
30
  volume?: number;
31
- /** Prüft den Code eines Keypads; ohne Angabe wird mit data-code verglichen */
31
+ /** Checks a keypad's code; without it, the code is compared to data-code */
32
32
  onKeypadSubmit?: (code: string, keypad: HTMLElement) => boolean | void;
33
33
  }
34
34
  interface LcarsController {
@@ -36,19 +36,19 @@ interface LcarsController {
36
36
  setSound(enabled: boolean): void;
37
37
  destroy(): void;
38
38
  }
39
- /** Event, das ein Toggle nach jedem Umschalten auslöst (detail.pressed). */
39
+ /** Event a toggle dispatches after every change (detail.pressed). */
40
40
  declare const pressedChangeEvent = "lcar:pressedchange";
41
41
  /**
42
- * Macht statisches Markup interaktiv.
43
- * Der zurückgegebene Controller spielt Töne und entfernt die Listener wieder.
42
+ * Makes static markup interactive.
43
+ * The returned controller plays sounds and removes the listeners again.
44
44
  */
45
45
  declare function initBehaviors(selectors: BehaviorSelectors, { root, sound, volume, onKeypadSubmit }?: InitBehaviorsOptions, soundOptions?: LcarsSoundOptions): LcarsController;
46
46
 
47
47
  declare const cx: (base: string, extra?: string) => string;
48
48
 
49
49
  /**
50
- * Zufallszahlen 0–1, aber reproduzierbar (mulberry32):
51
- * gleicher Seed → gleiche Folge, wichtig für Server-Rendering.
50
+ * Random numbers 0–1, but reproducible (mulberry32):
51
+ * same seed → same sequence, important for server rendering.
52
52
  */
53
53
  declare function seededRandom(seed?: number): () => number;
54
54
 
@@ -2,20 +2,20 @@ import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  type LcarsSoundKind = "beep" | "confirm" | "deny" | "alert";
5
- /** [Frequenz in Hz, Dauer in ms] je Ton einer Folge */
5
+ /** [frequency in Hz, duration in ms] for each tone of a pattern */
6
6
  type LcarsSoundPatterns = Record<LcarsSoundKind, [number, number][]>;
7
7
 
8
8
  interface SoundProviderProps {
9
9
  enabled?: boolean;
10
10
  volume?: number;
11
- /** Eigene Tonfolgen (z. B. die einer Fraktion) */
11
+ /** Custom sound patterns (e.g. a faction's) */
12
12
  patterns?: LcarsSoundPatterns;
13
13
  wave?: OscillatorType;
14
14
  children?: ReactNode;
15
15
  }
16
- /** Aktiviert die Bedien-Töne für alle Komponenten darunter. */
16
+ /** Enables interface sounds for all components below. */
17
17
  declare function SoundProvider({ enabled, volume, patterns, wave, children }: SoundProviderProps): react.JSX.Element;
18
- /** Liefert play(kind); ohne SoundProvider (oder deaktiviert) passiert nichts. */
18
+ /** Returns play(kind); without a SoundProvider (or when disabled) nothing happens. */
19
19
  declare function useLcarsSound(): (kind?: LcarsSoundKind) => void | undefined;
20
20
 
21
21
  export { SoundProvider, useLcarsSound };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lcars-gui/core",
3
- "version": "0.1.0",
4
- "description": "Gemeinsame Basis für alle lcars-gui-Fraktionen: Sound-Engine, Verhalten für HTML/JS, CSS-Build",
3
+ "version": "0.1.1",
4
+ "description": "Shared foundation for all lcars-gui factions: sound engine, plain HTML/JS behavior, CSS build",
5
5
  "keywords": [
6
6
  "lcars",
7
7
  "star-trek",