@lattice-php/lattice 0.6.0 → 0.7.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.
- package/dist/appearance/index.d.ts +1 -0
- package/dist/appearance/index.js +9 -10
- package/dist/appearance/index.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/provider.js +7 -1
- package/dist/provider.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,5 +5,6 @@ export type UseAppearanceReturn = {
|
|
|
5
5
|
readonly resolvedAppearance: ResolvedAppearance;
|
|
6
6
|
readonly updateAppearance: (mode: Appearance) => void;
|
|
7
7
|
};
|
|
8
|
+
export declare function updateAppearance(mode: Appearance): void;
|
|
8
9
|
export declare function initializeTheme(): void;
|
|
9
10
|
export declare function useAppearance(): UseAppearanceReturn;
|
package/dist/appearance/index.js
CHANGED
|
@@ -38,6 +38,13 @@ var handleSystemThemeChange = () => {
|
|
|
38
38
|
applyTheme(currentAppearance);
|
|
39
39
|
notify();
|
|
40
40
|
};
|
|
41
|
+
function updateAppearance(mode) {
|
|
42
|
+
currentAppearance = mode;
|
|
43
|
+
localStorage.setItem("appearance", mode);
|
|
44
|
+
setCookie("appearance", mode);
|
|
45
|
+
applyTheme(mode);
|
|
46
|
+
notify();
|
|
47
|
+
}
|
|
41
48
|
function initializeTheme() {
|
|
42
49
|
if (typeof window === "undefined") return;
|
|
43
50
|
if (!localStorage.getItem("appearance")) {
|
|
@@ -51,21 +58,13 @@ function initializeTheme() {
|
|
|
51
58
|
function useAppearance() {
|
|
52
59
|
const appearance = useSyncExternalStore(subscribe, () => currentAppearance, () => "system");
|
|
53
60
|
const systemAppearance = useSyncExternalStore(subscribe, getSystemAppearance, () => "light");
|
|
54
|
-
const resolvedAppearance = appearance === "system" ? systemAppearance : appearance;
|
|
55
|
-
const updateAppearance = (mode) => {
|
|
56
|
-
currentAppearance = mode;
|
|
57
|
-
localStorage.setItem("appearance", mode);
|
|
58
|
-
setCookie("appearance", mode);
|
|
59
|
-
applyTheme(mode);
|
|
60
|
-
notify();
|
|
61
|
-
};
|
|
62
61
|
return {
|
|
63
62
|
appearance,
|
|
64
|
-
resolvedAppearance,
|
|
63
|
+
resolvedAppearance: appearance === "system" ? systemAppearance : appearance,
|
|
65
64
|
updateAppearance
|
|
66
65
|
};
|
|
67
66
|
}
|
|
68
67
|
//#endregion
|
|
69
|
-
export { initializeTheme, useAppearance };
|
|
68
|
+
export { initializeTheme, updateAppearance, useAppearance };
|
|
70
69
|
|
|
71
70
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/appearance/index.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport type { Appearance } from \"../events/event-bridge\";\n\nexport type ResolvedAppearance = \"light\" | \"dark\";\n\nexport type UseAppearanceReturn = {\n readonly appearance: Appearance;\n readonly resolvedAppearance: ResolvedAppearance;\n readonly updateAppearance: (mode: Appearance) => void;\n};\n\nconst listeners = new Set<() => void>();\nlet currentAppearance: Appearance = \"system\";\n\nconst prefersDark = (): boolean => {\n if (typeof window === \"undefined\") {\n return false;\n }\n\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n};\n\nconst setCookie = (name: string, value: string, days = 365): void => {\n if (typeof document === \"undefined\") {\n return;\n }\n\n const maxAge = days * 24 * 60 * 60;\n document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;\n};\n\nconst getStoredAppearance = (): Appearance => {\n if (typeof window === \"undefined\") {\n return \"system\";\n }\n\n return (localStorage.getItem(\"appearance\") as Appearance) || \"system\";\n};\n\nconst isDarkMode = (appearance: Appearance): boolean => {\n return appearance === \"dark\" || (appearance === \"system\" && prefersDark());\n};\n\nconst getSystemAppearance = (): ResolvedAppearance => (prefersDark() ? \"dark\" : \"light\");\n\nconst applyTheme = (appearance: Appearance): void => {\n if (typeof document === \"undefined\") {\n return;\n }\n\n const isDark = isDarkMode(appearance);\n\n document.documentElement.classList.toggle(\"dark\", isDark);\n document.documentElement.style.colorScheme = isDark ? \"dark\" : \"light\";\n};\n\nconst subscribe = (callback: () => void) => {\n listeners.add(callback);\n\n return () => listeners.delete(callback);\n};\n\nconst notify = (): void => listeners.forEach((listener) => listener());\n\nconst mediaQuery = (): MediaQueryList | null => {\n if (typeof window === \"undefined\") {\n return null;\n }\n\n return window.matchMedia(\"(prefers-color-scheme: dark)\");\n};\n\nconst handleSystemThemeChange = (): void => {\n applyTheme(currentAppearance);\n notify();\n};\n\nexport function initializeTheme(): void {\n if (typeof window === \"undefined\") {\n return;\n }\n\n if (!localStorage.getItem(\"appearance\")) {\n localStorage.setItem(\"appearance\", \"system\");\n setCookie(\"appearance\", \"system\");\n }\n\n currentAppearance = getStoredAppearance();\n applyTheme(currentAppearance);\n\n mediaQuery()?.addEventListener(\"change\", handleSystemThemeChange);\n}\n\nexport function useAppearance(): UseAppearanceReturn {\n const appearance: Appearance = useSyncExternalStore(\n subscribe,\n () => currentAppearance,\n () => \"system\",\n );\n const systemAppearance: ResolvedAppearance = useSyncExternalStore(\n subscribe,\n getSystemAppearance,\n () => \"light\",\n );\n\n const resolvedAppearance: ResolvedAppearance =\n appearance === \"system\" ? systemAppearance : appearance;\n\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/appearance/index.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport type { Appearance } from \"../events/event-bridge\";\n\nexport type ResolvedAppearance = \"light\" | \"dark\";\n\nexport type UseAppearanceReturn = {\n readonly appearance: Appearance;\n readonly resolvedAppearance: ResolvedAppearance;\n readonly updateAppearance: (mode: Appearance) => void;\n};\n\nconst listeners = new Set<() => void>();\nlet currentAppearance: Appearance = \"system\";\n\nconst prefersDark = (): boolean => {\n if (typeof window === \"undefined\") {\n return false;\n }\n\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n};\n\nconst setCookie = (name: string, value: string, days = 365): void => {\n if (typeof document === \"undefined\") {\n return;\n }\n\n const maxAge = days * 24 * 60 * 60;\n document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;\n};\n\nconst getStoredAppearance = (): Appearance => {\n if (typeof window === \"undefined\") {\n return \"system\";\n }\n\n return (localStorage.getItem(\"appearance\") as Appearance) || \"system\";\n};\n\nconst isDarkMode = (appearance: Appearance): boolean => {\n return appearance === \"dark\" || (appearance === \"system\" && prefersDark());\n};\n\nconst getSystemAppearance = (): ResolvedAppearance => (prefersDark() ? \"dark\" : \"light\");\n\nconst applyTheme = (appearance: Appearance): void => {\n if (typeof document === \"undefined\") {\n return;\n }\n\n const isDark = isDarkMode(appearance);\n\n document.documentElement.classList.toggle(\"dark\", isDark);\n document.documentElement.style.colorScheme = isDark ? \"dark\" : \"light\";\n};\n\nconst subscribe = (callback: () => void) => {\n listeners.add(callback);\n\n return () => listeners.delete(callback);\n};\n\nconst notify = (): void => listeners.forEach((listener) => listener());\n\nconst mediaQuery = (): MediaQueryList | null => {\n if (typeof window === \"undefined\") {\n return null;\n }\n\n return window.matchMedia(\"(prefers-color-scheme: dark)\");\n};\n\nconst handleSystemThemeChange = (): void => {\n applyTheme(currentAppearance);\n notify();\n};\n\nexport function updateAppearance(mode: Appearance): void {\n currentAppearance = mode;\n\n localStorage.setItem(\"appearance\", mode);\n\n setCookie(\"appearance\", mode);\n\n applyTheme(mode);\n notify();\n}\n\nexport function initializeTheme(): void {\n if (typeof window === \"undefined\") {\n return;\n }\n\n if (!localStorage.getItem(\"appearance\")) {\n localStorage.setItem(\"appearance\", \"system\");\n setCookie(\"appearance\", \"system\");\n }\n\n currentAppearance = getStoredAppearance();\n applyTheme(currentAppearance);\n\n mediaQuery()?.addEventListener(\"change\", handleSystemThemeChange);\n}\n\nexport function useAppearance(): UseAppearanceReturn {\n const appearance: Appearance = useSyncExternalStore(\n subscribe,\n () => currentAppearance,\n () => \"system\",\n );\n const systemAppearance: ResolvedAppearance = useSyncExternalStore(\n subscribe,\n getSystemAppearance,\n () => \"light\",\n );\n\n const resolvedAppearance: ResolvedAppearance =\n appearance === \"system\" ? systemAppearance : appearance;\n\n return { appearance, resolvedAppearance, updateAppearance } as const;\n}\n"],"mappings":";;AAWA,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI,oBAAgC;AAEpC,IAAM,oBAA6B;CACjC,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,OAAO,OAAO,WAAW,8BAA8B,EAAE;AAC3D;AAEA,IAAM,aAAa,MAAc,OAAe,OAAO,QAAc;CACnE,IAAI,OAAO,aAAa,aACtB;CAGF,MAAM,SAAS,OAAO,KAAK,KAAK;CAChC,SAAS,SAAS,GAAG,KAAK,GAAG,MAAM,kBAAkB,OAAO;AAC9D;AAEA,IAAM,4BAAwC;CAC5C,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,OAAQ,aAAa,QAAQ,YAAY,KAAoB;AAC/D;AAEA,IAAM,cAAc,eAAoC;CACtD,OAAO,eAAe,UAAW,eAAe,YAAY,YAAY;AAC1E;AAEA,IAAM,4BAAiD,YAAY,IAAI,SAAS;AAEhF,IAAM,cAAc,eAAiC;CACnD,IAAI,OAAO,aAAa,aACtB;CAGF,MAAM,SAAS,WAAW,UAAU;CAEpC,SAAS,gBAAgB,UAAU,OAAO,QAAQ,MAAM;CACxD,SAAS,gBAAgB,MAAM,cAAc,SAAS,SAAS;AACjE;AAEA,IAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CAEtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,IAAM,eAAqB,UAAU,SAAS,aAAa,SAAS,CAAC;AAErE,IAAM,mBAA0C;CAC9C,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,OAAO,OAAO,WAAW,8BAA8B;AACzD;AAEA,IAAM,gCAAsC;CAC1C,WAAW,iBAAiB;CAC5B,OAAO;AACT;AAEA,SAAgB,iBAAiB,MAAwB;CACvD,oBAAoB;CAEpB,aAAa,QAAQ,cAAc,IAAI;CAEvC,UAAU,cAAc,IAAI;CAE5B,WAAW,IAAI;CACf,OAAO;AACT;AAEA,SAAgB,kBAAwB;CACtC,IAAI,OAAO,WAAW,aACpB;CAGF,IAAI,CAAC,aAAa,QAAQ,YAAY,GAAG;EACvC,aAAa,QAAQ,cAAc,QAAQ;EAC3C,UAAU,cAAc,QAAQ;CAClC;CAEA,oBAAoB,oBAAoB;CACxC,WAAW,iBAAiB;CAE5B,WAAW,GAAG,iBAAiB,UAAU,uBAAuB;AAClE;AAEA,SAAgB,gBAAqC;CACnD,MAAM,aAAyB,qBAC7B,iBACM,yBACA,QACR;CACA,MAAM,mBAAuC,qBAC3C,WACA,2BACM,OACR;CAKA,OAAO;EAAE;EAAY,oBAFnB,eAAe,WAAW,mBAAmB;EAEN;CAAiB;AAC5D"}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export { chatPlugin } from './chat';
|
|
|
4
4
|
export { getActionEffects, isActionEffect, dispatchEffects, dispatchActionError, } from './effects/dispatch';
|
|
5
5
|
export { useEffectDispatcher } from './effects/use-effect-dispatcher';
|
|
6
6
|
export { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from './effects/registry';
|
|
7
|
-
export { initializeTheme, useAppearance } from './appearance';
|
|
7
|
+
export { initializeTheme, updateAppearance, useAppearance } from './appearance';
|
|
8
8
|
export { copyToClipboard, useClipboard } from './clipboard';
|
|
9
9
|
export { createLatticeApp, type CreateLatticeAppOptions } from './create-app';
|
|
10
10
|
export { EventBridge } from './events/event-bridge';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { initializeTheme, useAppearance } from "./appearance/index.js";
|
|
1
|
+
import { initializeTheme, updateAppearance, useAppearance } from "./appearance/index.js";
|
|
2
2
|
import { LATTICE_EVENT } from "./events/event-names.js";
|
|
3
3
|
import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
|
|
4
4
|
import { withHeaders } from "./core/headers.js";
|
|
@@ -28,4 +28,4 @@ import { Provider } from "./provider.js";
|
|
|
28
28
|
import { createLatticeApp } from "./create-app.js";
|
|
29
29
|
import { copyToClipboard, useClipboard } from "./clipboard/index.js";
|
|
30
30
|
import { columnCell } from "./table/registry.js";
|
|
31
|
-
export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
|
|
31
|
+
export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, updateAppearance, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
|
package/dist/provider.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { updateAppearance } from "./appearance/index.js";
|
|
1
2
|
import { SpriteProvider } from "./icons/sprite.js";
|
|
2
3
|
import { RegistryContext, setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry } from "./core/registry-context.js";
|
|
4
|
+
import { EventBridge } from "./events/event-bridge.js";
|
|
3
5
|
import { registry } from "./registry.js";
|
|
4
6
|
import { Toaster } from "./toast/toaster.js";
|
|
5
7
|
import { useFlashEffects } from "./effects/use-flash-effects.js";
|
|
@@ -13,7 +15,11 @@ function Provider({ children, registry: registry$1 = registry, sprite = defaultS
|
|
|
13
15
|
value: registry$1,
|
|
14
16
|
children: /* @__PURE__ */ jsxs(SpriteProvider, {
|
|
15
17
|
sprite,
|
|
16
|
-
children: [
|
|
18
|
+
children: [
|
|
19
|
+
children,
|
|
20
|
+
/* @__PURE__ */ jsx(EventBridge, { onAppearanceChange: updateAppearance }),
|
|
21
|
+
toaster ? /* @__PURE__ */ jsx(Toaster, {}) : null
|
|
22
|
+
]
|
|
17
23
|
})
|
|
18
24
|
});
|
|
19
25
|
}
|
package/dist/provider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { SpriteProvider } from \"./icons/sprite\";\nimport { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { RegistryContext, setDefaultRegistry } from \"./core/registry-context\";\nimport { Toaster } from \"./toast\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport function Provider({\n children,\n registry = defaultRegistry,\n sprite = defaultSprite,\n toaster = true,\n}: {\n children: ReactNode;\n registry?: Registry;\n sprite?: SpriteValue;\n toaster?: boolean;\n}) {\n useFlashEffects();\n\n return (\n <RegistryContext.Provider value={registry}>\n <SpriteProvider sprite={sprite}>\n {children}\n {toaster ? <Toaster /> : null}\n </SpriteProvider>\n </RegistryContext.Provider>\n );\n}\n\nexport {\n useComponentRegistry,\n useColumnRegistry,\n useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { SpriteValue } from \"./icons/sprite\";\nimport { SpriteProvider } from \"./icons/sprite\";\nimport { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { RegistryContext, setDefaultRegistry } from \"./core/registry-context\";\nimport { Toaster } from \"./toast\";\nimport { updateAppearance } from \"./appearance\";\nimport { EventBridge } from \"./events/event-bridge\";\nimport { useFlashEffects } from \"./effects/use-flash-effects\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\nconst defaultSprite: SpriteValue = { href: \"\" };\n\nexport function Provider({\n children,\n registry = defaultRegistry,\n sprite = defaultSprite,\n toaster = true,\n}: {\n children: ReactNode;\n registry?: Registry;\n sprite?: SpriteValue;\n toaster?: boolean;\n}) {\n useFlashEffects();\n\n return (\n <RegistryContext.Provider value={registry}>\n <SpriteProvider sprite={sprite}>\n {children}\n <EventBridge onAppearanceChange={updateAppearance} />\n {toaster ? <Toaster /> : null}\n </SpriteProvider>\n </RegistryContext.Provider>\n );\n}\n\nexport {\n useComponentRegistry,\n useColumnRegistry,\n useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":";;;;;;;;;AAcA,mBAAmB,QAAe;AAElC,IAAM,gBAA6B,EAAE,MAAM,GAAG;AAE9C,SAAgB,SAAS,EACvB,UACA,UAAA,aAAW,UACX,SAAS,eACT,UAAU,QAMT;CACD,gBAAgB;CAEhB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,qBAAC,gBAAD;GAAwB;aAAxB;IACG;IACD,oBAAC,aAAD,EAAa,oBAAoB,iBAAmB,CAAA;IACnD,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI;GACX;;CACQ,CAAA;AAE9B"}
|