@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 +12 -12
- package/build/css.js +18 -18
- package/dist/index.d.ts +15 -15
- package/dist/react/index.d.ts +4 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# @lcars-gui/core
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[`@lcars-gui/romulus`](https://www.npmjs.com/package/@lcars-gui/romulus)
|
|
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
|
-
##
|
|
7
|
+
## Contents
|
|
8
8
|
|
|
9
|
-
| Export |
|
|
10
|
-
|
|
11
|
-
| `createLcarsSound()` |
|
|
12
|
-
| `initBehaviors()` |
|
|
13
|
-
| `seededRandom()`, `cx()` |
|
|
14
|
-
| `@lcars-gui/core/react` | `SoundProvider`, `useLcarsSound` –
|
|
15
|
-
| `@lcars-gui/core/build` | `buildCss()` –
|
|
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
|
-
##
|
|
17
|
+
## License
|
|
18
18
|
|
|
19
19
|
MIT
|
package/build/css.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
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
|
|
5
|
-
// tokens/themes/<name>.json
|
|
6
|
-
// tokens/alerts/<name>.json
|
|
7
|
-
// css/*.css
|
|
8
|
-
// themes/<name>/theme.css
|
|
9
|
-
// 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
|
-
//
|
|
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
|
-
//
|
|
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-*
|
|
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
|
|
84
|
-
* @param {string} options.defaultTheme
|
|
85
|
-
* @param {string} [options.prefix]
|
|
86
|
-
* @param {string} [options.varPrefix]
|
|
87
|
-
*
|
|
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}"
|
|
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
|
|
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
|
-
/** [
|
|
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
|
-
/**
|
|
5
|
+
/** Sound patterns per kind (default: Federation sounds) */
|
|
6
6
|
patterns?: LcarsSoundPatterns;
|
|
7
|
-
/**
|
|
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
|
-
/**
|
|
16
|
+
/** Elements that play a sound when clicked (buttons, tabs) */
|
|
17
17
|
control: string;
|
|
18
|
-
/** Keypad
|
|
18
|
+
/** Keypad container */
|
|
19
19
|
keypad: string;
|
|
20
|
-
/**
|
|
20
|
+
/** Key inside a keypad */
|
|
21
21
|
keypadKey: string;
|
|
22
|
-
/**
|
|
22
|
+
/** Display inside a keypad */
|
|
23
23
|
keypadDisplay: string;
|
|
24
24
|
}
|
|
25
25
|
interface InitBehaviorsOptions {
|
|
26
|
-
/**
|
|
26
|
+
/** Area to wire up (default: document) */
|
|
27
27
|
root?: Document | HTMLElement;
|
|
28
|
-
/**
|
|
28
|
+
/** Enable interface sounds from the start (later: setSound) */
|
|
29
29
|
sound?: boolean;
|
|
30
30
|
volume?: number;
|
|
31
|
-
/**
|
|
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
|
|
39
|
+
/** Event a toggle dispatches after every change (detail.pressed). */
|
|
40
40
|
declare const pressedChangeEvent = "lcar:pressedchange";
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
43
|
-
*
|
|
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
|
-
*
|
|
51
|
-
*
|
|
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
|
|
package/dist/react/index.d.ts
CHANGED
|
@@ -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
|
-
/** [
|
|
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
|
-
/**
|
|
11
|
+
/** Custom sound patterns (e.g. a faction's) */
|
|
12
12
|
patterns?: LcarsSoundPatterns;
|
|
13
13
|
wave?: OscillatorType;
|
|
14
14
|
children?: ReactNode;
|
|
15
15
|
}
|
|
16
|
-
/**
|
|
16
|
+
/** Enables interface sounds for all components below. */
|
|
17
17
|
declare function SoundProvider({ enabled, volume, patterns, wave, children }: SoundProviderProps): react.JSX.Element;
|
|
18
|
-
/**
|
|
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.
|
|
4
|
-
"description": "
|
|
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",
|