@cosmicdrift/kumiko-renderer 0.1.0

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.
Files changed (28) hide show
  1. package/package.json +42 -0
  2. package/src/__tests__/i18n.test.tsx +127 -0
  3. package/src/__tests__/qn.test.ts +40 -0
  4. package/src/__tests__/use-list-url-state.test.tsx +161 -0
  5. package/src/app/action-form-shim.ts +50 -0
  6. package/src/app/column-renderers.tsx +64 -0
  7. package/src/app/config-edit-shim.ts +48 -0
  8. package/src/app/custom-screens.tsx +29 -0
  9. package/src/app/feature-schema.ts +59 -0
  10. package/src/app/kumiko-screen.tsx +1050 -0
  11. package/src/app/nav.tsx +124 -0
  12. package/src/app/qn.ts +23 -0
  13. package/src/components/render-edit.tsx +346 -0
  14. package/src/components/render-field.tsx +299 -0
  15. package/src/components/render-list.tsx +402 -0
  16. package/src/context/dispatcher-context.tsx +59 -0
  17. package/src/hooks/reference-limits.ts +18 -0
  18. package/src/hooks/use-form.ts +88 -0
  19. package/src/hooks/use-list-url-state.ts +113 -0
  20. package/src/hooks/use-query.ts +129 -0
  21. package/src/hooks/use-reference-lookup.ts +54 -0
  22. package/src/hooks/use-store.ts +47 -0
  23. package/src/i18n-defaults.ts +94 -0
  24. package/src/i18n.tsx +158 -0
  25. package/src/index.ts +104 -0
  26. package/src/primitives.tsx +528 -0
  27. package/src/sse/live-events.tsx +56 -0
  28. package/src/tokens.tsx +142 -0
package/src/tokens.tsx ADDED
@@ -0,0 +1,142 @@
1
+ // Design-Tokens im shadcn-Namensschema. Werte sind CSS-Variable-
2
+ // Referenzen (`var(--color-primary)`) — die echten Zahlen leben in
3
+ // styles.css (Web) bzw. in einer StyleSheet.create-Config (Native,
4
+ // später). Der Hook ist vor allem für Custom-Components die mal
5
+ // einen Token-Wert in eine JS-style-prop schieben müssen; die
6
+ // Default-Primitives nutzen direkt Tailwind-Klassen und brauchen
7
+ // ihn nicht.
8
+ //
9
+ // Theme-Toggle läuft über `.dark`-Class auf `<html>` — kein JS-State
10
+ // nötig, CSS rendert sofort neu. `useTokenController().toggleTheme()`
11
+ // ist nur ein DOM-Wrapper, kein eigener React-State.
12
+ //
13
+ // Erweiterbar: AppTokens-Interface wie bei Primitives. Dev kann
14
+ // eigene Token-Kategorien deklarieren und mit var-Strings befüllen.
15
+
16
+ import { createContext, type ReactNode, useContext } from "react";
17
+
18
+ // ---- Core-Token-Types (shadcn-Schema) ----
19
+
20
+ export type ColorTokens = {
21
+ readonly background: string;
22
+ readonly foreground: string;
23
+ readonly card: string;
24
+ readonly cardForeground: string;
25
+ readonly popover: string;
26
+ readonly popoverForeground: string;
27
+ readonly primary: string;
28
+ readonly primaryForeground: string;
29
+ readonly secondary: string;
30
+ readonly secondaryForeground: string;
31
+ readonly muted: string;
32
+ readonly mutedForeground: string;
33
+ readonly accent: string;
34
+ readonly accentForeground: string;
35
+ readonly destructive: string;
36
+ readonly destructiveForeground: string;
37
+ readonly border: string;
38
+ readonly input: string;
39
+ readonly ring: string;
40
+ };
41
+
42
+ export type RadiusTokens = {
43
+ readonly sm: string;
44
+ readonly md: string;
45
+ readonly lg: string;
46
+ readonly xl: string;
47
+ };
48
+
49
+ export type CoreTokens = {
50
+ readonly color: ColorTokens;
51
+ readonly radius: RadiusTokens;
52
+ };
53
+
54
+ /** Erweiterung für App-eigene Token-Kategorien. Devs augmentieren:
55
+ *
56
+ * declare module "@cosmicdrift/kumiko-renderer" {
57
+ * interface AppTokens {
58
+ * chart: { gridline: string; line: string };
59
+ * }
60
+ * }
61
+ *
62
+ * Und reichen im App-CSS die passenden `--chart-*` Variablen rein.
63
+ * Kumikos Default-Primitives nutzen nur CoreTokens. */
64
+ // biome-ignore lint/suspicious/noEmptyInterface: extension point for module augmentation
65
+ export interface AppTokens {}
66
+
67
+ export type Tokens = CoreTokens & AppTokens;
68
+
69
+ export type ThemeMode = "light" | "dark";
70
+
71
+ export type TokensApi = {
72
+ readonly tokens: Tokens;
73
+ readonly mode: ThemeMode;
74
+ readonly setMode: (mode: ThemeMode) => void;
75
+ readonly toggleMode: () => void;
76
+ };
77
+
78
+ // ---- Context + Provider + Hooks ----
79
+
80
+ const TokensContext = createContext<TokensApi | undefined>(undefined);
81
+
82
+ export type TokensProviderProps = {
83
+ readonly children: ReactNode;
84
+ readonly value: TokensApi;
85
+ };
86
+
87
+ export function TokensProvider({ children, value }: TokensProviderProps): ReactNode {
88
+ return <TokensContext.Provider value={value}>{children}</TokensContext.Provider>;
89
+ }
90
+
91
+ /** Read-only Tokens-Hook. Liefert CSS-var-Strings — nutzbar in
92
+ * style-Props oder Tailwind-arbitrary-values wie
93
+ * `bg-[var(--color-primary)]` (selten, die shadcn-Tailwind-Klassen
94
+ * `bg-primary` sind idiomatischer). */
95
+ export function useTokens(): Tokens {
96
+ return useTokenController().tokens;
97
+ }
98
+
99
+ /** Volle API inkl. Theme-Toggle. Für den Dark/Light-Switch-Button. */
100
+ export function useTokenController(): TokensApi {
101
+ const api = useContext(TokensContext);
102
+ if (api === undefined) {
103
+ throw new Error(
104
+ "useTokens/useTokenController: no <TokensProvider> mounted. createKumikoApp verdrahtet den Provider automatisch mit @cosmicdrift/kumiko-renderer-web defaults.",
105
+ );
106
+ }
107
+ return api;
108
+ }
109
+
110
+ /** Tokens mit var-string-Werten. Konstant — die "Werte" sind
111
+ * Referenzen, die echten Farben ändern sich per CSS ohne dass das
112
+ * Objekt mutiert werden muss. Plattform-Packages (renderer-web,
113
+ * -native) importieren das in ihre TokensApi-Impl. */
114
+ export const cssVarTokens: Tokens = {
115
+ color: {
116
+ background: "var(--color-background)",
117
+ foreground: "var(--color-foreground)",
118
+ card: "var(--color-card)",
119
+ cardForeground: "var(--color-card-foreground)",
120
+ popover: "var(--color-popover)",
121
+ popoverForeground: "var(--color-popover-foreground)",
122
+ primary: "var(--color-primary)",
123
+ primaryForeground: "var(--color-primary-foreground)",
124
+ secondary: "var(--color-secondary)",
125
+ secondaryForeground: "var(--color-secondary-foreground)",
126
+ muted: "var(--color-muted)",
127
+ mutedForeground: "var(--color-muted-foreground)",
128
+ accent: "var(--color-accent)",
129
+ accentForeground: "var(--color-accent-foreground)",
130
+ destructive: "var(--color-destructive)",
131
+ destructiveForeground: "var(--color-destructive-foreground)",
132
+ border: "var(--color-border)",
133
+ input: "var(--color-input)",
134
+ ring: "var(--color-ring)",
135
+ },
136
+ radius: {
137
+ sm: "var(--radius-sm)",
138
+ md: "var(--radius-md)",
139
+ lg: "var(--radius-lg)",
140
+ xl: "var(--radius-xl)",
141
+ },
142
+ } as Tokens;