@lattice-php/lattice 0.25.0 → 0.27.0

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { getActionEffects, isActionEffect, dispatchEffects, dispatchActionError,
 export { useEffectDispatcher } from './effects/use-effect-dispatcher.js';
 export { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from './effects/registry.js';
 export { registerRichEditorExtension } from './form/rich-editor/registry.js';
-export { initializeTheme, updateAppearance, useAppearance } from './appearance/index.js';
+export { initializeAppearance, updateAppearance, useAppearance } from './appearance/index.js';
 export { copyToClipboard } from './clipboard/index.js';
 export { createLatticeApp, type CreateLatticeAppI18nOptions, type CreateLatticeAppOptions, } from './create-app.js';
 export { EventBridge } from './event-bridge.js';
@@ -22,7 +22,7 @@ export { Renderer } from './core/renderer.js';
 export { LATTICE_REF_HEADER, withRefHeader } from './core/component-ref.js';
 export { withHeaders } from './core/headers.js';
 export { LATTICE_EVENT } from './core/event-names.js';
-export type { ButtonVariant } from './ui/button.js';
+export type { Emphasis } from './ui/button.js';
 export type { ReloadComponentEvent } from './core/event-names.js';
 export type { ComponentProps, KnownPageContainer, LayoutPayload, Node, NodeProps, NodeType, PageContainer, PageBreadcrumb, PagePayload, ComponentPropsOf, RendererComponent, RendererComponentModule, RendererComponentProps, Schema, UnknownComponent, } from './core/types.js';
 export { RealtimeListeners } from './realtime/listeners.js';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { initializeTheme, updateAppearance, useAppearance } from "./appearance/index.js";
-import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
-import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
-import { LATTICE_EVENT } from "./core/event-names.js";
+import { initializeAppearance, updateAppearance, useAppearance } from "./appearance/index.js";
 import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
+import { LATTICE_EVENT } from "./core/event-names.js";
 import { withHeaders } from "./core/headers.js";
+import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
+import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
 import { Icon, SpriteProvider } from "./icons/sprite.js";
 import { IconRenderer, IconRendererProvider } from "./icons/icon-renderer.js";
 import { CollapsedContext, useCollapsed } from "./core/collapsed-context.js";
@@ -29,4 +29,4 @@ import { registry } from "./registry.js";
 import { createLatticeApp } from "./create-app.js";
 import { registerRichEditorExtension } from "./form/rich-editor/registry.js";
 import { Provider } from "./provider.js";
-export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatComponents, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registerRichEditorExtension, registry, updateAppearance, useAppearance, useChat, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
+export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatComponents, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeAppearance, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registerRichEditorExtension, registry, updateAppearance, useAppearance, useChat, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };

package/dist/inertia.d.ts

@@ -11,3 +11,10 @@ export type CreateLayoutResolverOptions = {
 export declare function createPageResolver(pages: PageModules): (name: string) => ResolvedPage;
 export declare function createLayoutResolver({ defaultLayout }?: CreateLayoutResolverOptions): (name: string, page: InertiaPage) => unknown;
 export declare function withVisitHeaders(_href: string, options: VisitOptions): VisitOptions;
+/**
+ * Resolve the outgoing X-Lattice-Ref header through the renewed-token map at
+ * request time. Component props bake the originally sealed ref into headers at
+ * render time, so without this rewrite an Inertia request fired between a
+ * renewal and the next re-render would still carry the expired token.
+ */
+export declare function registerRefRenewal(): void;

package/dist/inertia.js

@@ -1,6 +1,8 @@
+import { LATTICE_REF_HEADER, latestRef } from "./core/component-ref.js";
 import { withHeaders } from "./core/headers.js";
 import SchemaLayout from "./layout/components/schema-layout.js";
 import Page from "./page.js";
+import { http } from "@inertiajs/react";
 //#region resources/js/inertia.ts
 var pageComponentName = "lattice/page";
 function createPageResolver(pages) {
@@ -23,7 +25,23 @@ function withVisitHeaders(_href, options) {
 		headers: withHeaders("", options.headers)
 	};
 }
+var refRenewalRegistered = false;
+/**
+* Resolve the outgoing X-Lattice-Ref header through the renewed-token map at
+* request time. Component props bake the originally sealed ref into headers at
+* render time, so without this rewrite an Inertia request fired between a
+* renewal and the next re-render would still carry the expired token.
+*/
+function registerRefRenewal() {
+	if (refRenewalRegistered) return;
+	refRenewalRegistered = true;
+	http.onRequest((config) => {
+		const sealed = config.headers?.[LATTICE_REF_HEADER];
+		if (config.headers && typeof sealed === "string" && sealed !== "") config.headers[LATTICE_REF_HEADER] = latestRef(sealed);
+		return config;
+	});
+}
 //#endregion
-export { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders };
+export { createLayoutResolver, createPageResolver, pageComponentName, registerRefRenewal, withVisitHeaders };
 
 //# sourceMappingURL=inertia.js.map

package/dist/inertia.js.map

@@ -1 +1 @@
-{"version":3,"file":"inertia.js","names":[],"sources":["../resources/js/inertia.ts"],"sourcesContent":["import type { Page as InertiaPage, VisitOptions } from \"@inertiajs/core\";\nimport type { ResolvedComponent } from \"@inertiajs/react\";\nimport { withHeaders } from \"./core/headers\";\nimport { SchemaLayout } from \"./layout\";\nimport Page from \"./page\";\nimport type { PagePayload } from \"./core/types\";\n\nexport const pageComponentName = \"lattice/page\";\n\nexport type ResolvedPage =\n  | ResolvedComponent\n  | Promise<ResolvedComponent>\n  | { default: ResolvedComponent };\nexport type PageModules = Record<string, () => Promise<ResolvedComponent>>;\n\nexport type CreateLayoutResolverOptions = {\n  defaultLayout?: (name: string, page: InertiaPage) => unknown;\n};\n\nexport function createPageResolver(pages: PageModules) {\n  return (name: string): ResolvedPage => {\n    if (name === pageComponentName) {\n      return { default: Page };\n    }\n\n    const resolvedPage = pages[`./Pages/${name}.tsx`] ?? pages[`./pages/${name}.tsx`];\n\n    if (resolvedPage) {\n      return resolvedPage();\n    }\n\n    throw new Error(`Page not found: ${name}`);\n  };\n}\n\nexport function createLayoutResolver({ defaultLayout }: CreateLayoutResolverOptions = {}) {\n  return (name: string, page: InertiaPage): unknown => {\n    if (name === pageComponentName) {\n      const lattice = page.props.lattice as PagePayload | undefined;\n\n      return lattice?.layout ? SchemaLayout : null;\n    }\n\n    return defaultLayout?.(name, page) ?? null;\n  };\n}\n\nexport function withVisitHeaders(_href: string, options: VisitOptions): VisitOptions {\n  return {\n    ...options,\n    headers: withHeaders(\"\", options.headers),\n  };\n}\n"],"mappings":";;;;AAOA,IAAa,oBAAoB;AAYjC,SAAgB,mBAAmB,OAAoB;CACrD,QAAQ,SAA+B;EACrC,IAAI,SAAA,gBACF,OAAO,EAAE,SAAS,KAAK;EAGzB,MAAM,eAAe,MAAM,WAAW,KAAK,UAAU,MAAM,WAAW,KAAK;EAE3E,IAAI,cACF,OAAO,aAAa;EAGtB,MAAM,IAAI,MAAM,mBAAmB,MAAM;CAC3C;AACF;AAEA,SAAgB,qBAAqB,EAAE,kBAA+C,CAAC,GAAG;CACxF,QAAQ,MAAc,SAA+B;EACnD,IAAI,SAAA,gBAGF,OAFgB,KAAK,MAAM,SAEX,SAAS,eAAe;EAG1C,OAAO,gBAAgB,MAAM,IAAI,KAAK;CACxC;AACF;AAEA,SAAgB,iBAAiB,OAAe,SAAqC;CACnF,OAAO;EACL,GAAG;EACH,SAAS,YAAY,IAAI,QAAQ,OAAO;CAC1C;AACF"}
+{"version":3,"file":"inertia.js","names":[],"sources":["../resources/js/inertia.ts"],"sourcesContent":["import type { Page as InertiaPage, VisitOptions } from \"@inertiajs/core\";\nimport { http, type ResolvedComponent } from \"@inertiajs/react\";\nimport { LATTICE_REF_HEADER, latestRef } from \"./core/component-ref\";\nimport { withHeaders } from \"./core/headers\";\nimport { SchemaLayout } from \"./layout\";\nimport Page from \"./page\";\nimport type { PagePayload } from \"./core/types\";\n\nexport const pageComponentName = \"lattice/page\";\n\nexport type ResolvedPage =\n  | ResolvedComponent\n  | Promise<ResolvedComponent>\n  | { default: ResolvedComponent };\nexport type PageModules = Record<string, () => Promise<ResolvedComponent>>;\n\nexport type CreateLayoutResolverOptions = {\n  defaultLayout?: (name: string, page: InertiaPage) => unknown;\n};\n\nexport function createPageResolver(pages: PageModules) {\n  return (name: string): ResolvedPage => {\n    if (name === pageComponentName) {\n      return { default: Page };\n    }\n\n    const resolvedPage = pages[`./Pages/${name}.tsx`] ?? pages[`./pages/${name}.tsx`];\n\n    if (resolvedPage) {\n      return resolvedPage();\n    }\n\n    throw new Error(`Page not found: ${name}`);\n  };\n}\n\nexport function createLayoutResolver({ defaultLayout }: CreateLayoutResolverOptions = {}) {\n  return (name: string, page: InertiaPage): unknown => {\n    if (name === pageComponentName) {\n      const lattice = page.props.lattice as PagePayload | undefined;\n\n      return lattice?.layout ? SchemaLayout : null;\n    }\n\n    return defaultLayout?.(name, page) ?? null;\n  };\n}\n\nexport function withVisitHeaders(_href: string, options: VisitOptions): VisitOptions {\n  return {\n    ...options,\n    headers: withHeaders(\"\", options.headers),\n  };\n}\n\nlet refRenewalRegistered = false;\n\n/**\n * Resolve the outgoing X-Lattice-Ref header through the renewed-token map at\n * request time. Component props bake the originally sealed ref into headers at\n * render time, so without this rewrite an Inertia request fired between a\n * renewal and the next re-render would still carry the expired token.\n */\nexport function registerRefRenewal(): void {\n  if (refRenewalRegistered) {\n    return;\n  }\n\n  refRenewalRegistered = true;\n\n  http.onRequest((config) => {\n    const sealed = config.headers?.[LATTICE_REF_HEADER];\n\n    if (config.headers && typeof sealed === \"string\" && sealed !== \"\") {\n      config.headers[LATTICE_REF_HEADER] = latestRef(sealed);\n    }\n\n    return config;\n  });\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAoB;AAYjC,SAAgB,mBAAmB,OAAoB;CACrD,QAAQ,SAA+B;EACrC,IAAI,SAAA,gBACF,OAAO,EAAE,SAAS,KAAK;EAGzB,MAAM,eAAe,MAAM,WAAW,KAAK,UAAU,MAAM,WAAW,KAAK;EAE3E,IAAI,cACF,OAAO,aAAa;EAGtB,MAAM,IAAI,MAAM,mBAAmB,MAAM;CAC3C;AACF;AAEA,SAAgB,qBAAqB,EAAE,kBAA+C,CAAC,GAAG;CACxF,QAAQ,MAAc,SAA+B;EACnD,IAAI,SAAA,gBAGF,OAFgB,KAAK,MAAM,SAEX,SAAS,eAAe;EAG1C,OAAO,gBAAgB,MAAM,IAAI,KAAK;CACxC;AACF;AAEA,SAAgB,iBAAiB,OAAe,SAAqC;CACnF,OAAO;EACL,GAAG;EACH,SAAS,YAAY,IAAI,QAAQ,OAAO;CAC1C;AACF;AAEA,IAAI,uBAAuB;;;;;;;AAQ3B,SAAgB,qBAA2B;CACzC,IAAI,sBACF;CAGF,uBAAuB;CAEvB,KAAK,WAAW,WAAW;EACzB,MAAM,SAAS,OAAO,UAAU;EAEhC,IAAI,OAAO,WAAW,OAAO,WAAW,YAAY,WAAW,IAC7D,OAAO,QAAQ,sBAAsB,UAAU,MAAM;EAGvD,OAAO;CACT,CAAC;AACH"}

package/dist/lattice.css

@@ -1,49 +1,87 @@
 @source "./**/*.js";
 
-:root,
-[data-theme="light"] {
-  --lt-bg: var(--background, oklch(0.97 0 0));
-  --lt-fg: var(--foreground, oklch(0.145 0 0));
-  --lt-surface: var(--card, oklch(1 0 0));
-  --lt-surface-fg: var(--card-foreground, oklch(0.145 0 0));
-  --lt-popover: var(--popover, oklch(1 0 0));
-  --lt-popover-fg: var(--popover-foreground, oklch(0.145 0 0));
-  --lt-primary: var(--primary, oklch(0.48 0.092 182));
-  --lt-primary-fg: var(--primary-foreground, oklch(0.985 0 0));
-  --lt-secondary: var(--secondary, oklch(0.97 0 0));
-  --lt-secondary-fg: var(--secondary-foreground, oklch(0.205 0 0));
-  --lt-muted: var(--muted, oklch(0.97 0 0));
-  --lt-muted-fg: var(--muted-foreground, oklch(0.556 0 0));
-  --lt-accent: var(--accent, oklch(0.965 0.013 182));
-  --lt-accent-fg: var(--accent-foreground, oklch(0.4 0.07 182));
-  --lt-danger: var(--destructive, oklch(0.585 0.21 27.3));
-  --lt-danger-fg: var(--destructive-foreground, oklch(0.985 0 0));
-  --lt-border: var(--border, oklch(0.922 0 0));
-  --lt-input: var(--input, oklch(0.922 0 0));
-  --lt-ring: var(--ring, oklch(0.72 0.075 182));
-  --lt-overlay: var(--overlay, oklch(0 0 0 / 0.5));
-  --lt-warning: var(--warning, oklch(0.84 0.14 88));
-  --lt-success: var(--success, oklch(0.62 0.125 160));
-  --lt-success-fg: var(--success-foreground, oklch(0.985 0 0));
-  --lt-info: var(--info, oklch(0.62 0.14 240));
-  --lt-info-fg: var(--info-foreground, oklch(0.985 0 0));
-  --lt-primary-hover: var(--primary-hover, oklch(0.43 0.092 182));
-  --lt-primary-active: var(--primary-active, oklch(0.39 0.092 182));
-  --lt-danger-hover: var(--destructive-hover, oklch(0.53 0.21 27.3));
-  --lt-danger-active: var(--destructive-active, oklch(0.48 0.21 27.3));
-  --lt-success-hover: var(--success-hover, oklch(0.57 0.125 160));
-  --lt-success-active: var(--success-active, oklch(0.52 0.125 160));
-  --lt-info-hover: var(--info-hover, oklch(0.57 0.14 240));
-  --lt-info-active: var(--info-active, oklch(0.52 0.14 240));
-  --lt-secondary-hover: var(--secondary-hover, oklch(0.93 0 0));
-  --lt-secondary-active: var(--secondary-active, oklch(0.9 0 0));
-  --lt-disabled: var(--disabled, oklch(0.95 0 0));
-  --lt-disabled-fg: var(--disabled-foreground, oklch(0.7 0 0));
+/*
+ * Token defaults live in a cascade layer so any unlayered override wins
+ * regardless of stylesheet order — the @latticeTheme style tag and plain
+ * `:root { --lt-primary: … }` rules in an app's CSS both take precedence.
+ */
+@layer lattice {
+  :root,
+  [data-theme="light"] {
+  --lt-bg: oklch(0.976 0.003 210);
+  --lt-fg: oklch(0.18 0.01 220);
+  --lt-surface: oklch(1 0 0);
+  --lt-surface-fg: oklch(0.18 0.01 220);
+  --lt-popover: oklch(1 0 0);
+  --lt-popover-fg: oklch(0.18 0.01 220);
+  --lt-primary: oklch(0.51 0.12 195);
+  --lt-primary-fg: oklch(0.985 0 0);
+  --lt-secondary: oklch(0.955 0.005 210);
+  --lt-secondary-fg: oklch(0.25 0.012 220);
+  --lt-muted: oklch(0.955 0.004 210);
+  --lt-muted-fg: oklch(0.52 0.015 220);
+  /* Accent tint and focus ring take their hue from the primary, so a themed
+     primary keeps them coherent; an explicit override still wins. */
+  --lt-accent: oklch(from var(--lt-primary) 0.95 0.024 h);
+  --lt-accent-fg: oklch(from var(--lt-primary) 0.36 0.085 h);
+  --lt-danger: oklch(0.55 0.2 26);
+  --lt-danger-fg: oklch(0.985 0 0);
+  --lt-border: oklch(0.915 0.005 210);
+  --lt-input: oklch(0.88 0.007 210);
+  --lt-ring: oklch(from var(--lt-primary) 0.7 0.1 h);
+  --lt-overlay: oklch(0.15 0.02 225 / 0.5);
+  --lt-warning: oklch(0.83 0.15 85);
+  --lt-warning-fg: oklch(0.28 0.06 70);
+  --lt-success: oklch(0.56 0.13 158);
+  --lt-success-fg: oklch(0.985 0 0);
+  --lt-info: oklch(0.55 0.13 245);
+  --lt-info-fg: oklch(0.985 0 0);
+  /* Hover/active derive from the base colour so a themed base recolours its
+     whole state family; setting the state token directly still wins. Light
+     surfaces darken on interaction, the near-white secondary by less. */
+  --lt-primary-hover: oklch(from var(--lt-primary) calc(l - 0.05) c h);
+  --lt-primary-active: oklch(from var(--lt-primary) calc(l - 0.1) c h);
+  --lt-danger-hover: oklch(from var(--lt-danger) calc(l - 0.05) c h);
+  --lt-danger-active: oklch(from var(--lt-danger) calc(l - 0.1) c h);
+  --lt-success-hover: oklch(from var(--lt-success) calc(l - 0.05) c h);
+  --lt-success-active: oklch(from var(--lt-success) calc(l - 0.1) c h);
+  --lt-info-hover: oklch(from var(--lt-info) calc(l - 0.05) c h);
+  --lt-info-active: oklch(from var(--lt-info) calc(l - 0.1) c h);
+  --lt-warning-hover: oklch(from var(--lt-warning) calc(l - 0.05) c h);
+  --lt-warning-active: oklch(from var(--lt-warning) calc(l - 0.1) c h);
+  --lt-secondary-hover: oklch(from var(--lt-secondary) calc(l - 0.03) c h);
+  --lt-secondary-active: oklch(from var(--lt-secondary) calc(l - 0.06) c h);
+  --lt-disabled: oklch(0.945 0.003 210);
+  --lt-disabled-fg: oklch(0.68 0.008 220);
 
   /* Radius: base = cards, -sm = controls, -xs = chips */
-  --lt-radius: var(--radius, 0.5rem);
+  --lt-radius: 0.5rem;
   --lt-radius-sm: calc(var(--lt-radius) - 0.125rem);
   --lt-radius-xs: calc(var(--lt-radius) - 0.25rem);
+  --lt-radius-lg: calc(var(--lt-radius) + 0.25rem);
+  --lt-radius-xl: calc(var(--lt-radius) + 0.5rem);
+  --lt-radius-full: 9999px;
+
+  --lt-ring-width: 3px;
+  --lt-ring-offset: 0px;
+
+  --lt-font-sans:
+    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --lt-font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  --lt-font-display: var(--lt-font-sans);
+
+  --lt-shadow-inner: inset 0 1px 2px 0 oklch(0.2 0.02 225 / 0.06);
+
+  --lt-chart-1: oklch(0.55 0.12 195);
+  --lt-chart-2: oklch(0.58 0.14 250);
+  --lt-chart-3: oklch(0.68 0.14 60);
+  --lt-chart-4: oklch(0.58 0.19 305);
+  --lt-chart-5: oklch(0.6 0.16 20);
+  --lt-chart-6: oklch(0.62 0.13 150);
+  --lt-chart-7: oklch(0.6 0.13 100);
+  --lt-chart-8: oklch(0.55 0.05 280);
 
   --lt-icon-xs: 0.75rem;
   --lt-icon-sm: 0.875rem;
@@ -53,7 +91,6 @@
   --lt-icon-2xl: 2rem;
   --lt-icon-3xl: 2.5rem;
   --lt-icon-4xl: 3rem;
-  --lt-icon-stroke: 1.5;
 
   /* Control heights — density lever */
   --lt-control-h-sm: 2rem;
@@ -69,12 +106,12 @@
   --lt-font-weight-semibold: 600;
   --lt-font-weight-bold: 700;
 
-  --lt-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.04);
-  --lt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --lt-shadow-xs: 0 1px 1px 0 oklch(0.2 0.02 225 / 0.05);
+  --lt-shadow-sm: 0 1px 2px 0 oklch(0.2 0.02 225 / 0.06);
   --lt-shadow-md:
-    0 2px 4px -1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.06);
+    0 2px 4px -1px oklch(0.2 0.02 225 / 0.09), 0 1px 2px -1px oklch(0.2 0.02 225 / 0.06);
   --lt-shadow-lg:
-    0 8px 16px -4px oklch(0 0 0 / 0.12), 0 2px 4px -2px oklch(0 0 0 / 0.08);
+    0 8px 16px -4px oklch(0.2 0.02 225 / 0.13), 0 2px 4px -2px oklch(0.2 0.02 225 / 0.08);
 
   --lt-z-dropdown: 1000;
   --lt-z-sticky: 1100;
@@ -95,6 +132,7 @@
   --lt-gutter: calc(var(--spacing) * 6);
 
   color-scheme: light;
+  }
 }
 
 /*
@@ -111,51 +149,68 @@
   }
 }
 
-[data-theme="dark"],
-.dark {
-  --lt-bg: var(--background, oklch(0.145 0 0));
-  --lt-fg: var(--foreground, oklch(0.985 0 0));
-  --lt-surface: var(--card, oklch(0.145 0 0));
-  --lt-surface-fg: var(--card-foreground, oklch(0.985 0 0));
-  --lt-popover: var(--popover, oklch(0.145 0 0));
-  --lt-popover-fg: var(--popover-foreground, oklch(0.985 0 0));
-  --lt-primary: var(--primary, oklch(0.74 0.105 182));
-  --lt-primary-fg: var(--primary-foreground, oklch(0.2 0.025 182));
-  --lt-secondary: var(--secondary, oklch(0.269 0 0));
-  --lt-secondary-fg: var(--secondary-foreground, oklch(0.985 0 0));
-  --lt-muted: var(--muted, oklch(0.269 0 0));
-  --lt-muted-fg: var(--muted-foreground, oklch(0.708 0 0));
-  --lt-accent: var(--accent, oklch(0.278 0.018 182));
-  --lt-accent-fg: var(--accent-foreground, oklch(0.985 0 0));
-  --lt-danger: var(--destructive, oklch(0.42 0.13 26));
-  --lt-danger-fg: var(--destructive-foreground, oklch(0.985 0 0));
-  --lt-border: var(--border, oklch(0.269 0 0));
-  --lt-input: var(--input, oklch(0.269 0 0));
-  --lt-ring: var(--ring, oklch(0.55 0.08 182));
-  --lt-overlay: var(--overlay, oklch(0 0 0 / 0.6));
-  --lt-warning: var(--warning, oklch(0.7 0.13 78));
-  --lt-success: var(--success, oklch(0.7 0.15 162));
-  --lt-success-fg: var(--success-foreground, oklch(0.205 0 0));
-  --lt-info: var(--info, oklch(0.7 0.14 240));
-  --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
-
-  --lt-primary-hover: var(--primary-hover, oklch(0.79 0.105 182));
-  --lt-primary-active: var(--primary-active, oklch(0.84 0.105 182));
-  --lt-danger-hover: var(--destructive-hover, oklch(0.47 0.13 26));
-  --lt-danger-active: var(--destructive-active, oklch(0.52 0.13 26));
-  --lt-success-hover: var(--success-hover, oklch(0.75 0.15 162));
-  --lt-success-active: var(--success-active, oklch(0.8 0.15 162));
-  --lt-info-hover: var(--info-hover, oklch(0.75 0.14 240));
-  --lt-info-active: var(--info-active, oklch(0.8 0.14 240));
-  --lt-secondary-hover: var(--secondary-hover, oklch(0.32 0 0));
-  --lt-secondary-active: var(--secondary-active, oklch(0.36 0 0));
-  --lt-disabled: var(--disabled, oklch(0.32 0 0));
-  --lt-disabled-fg: var(--disabled-foreground, oklch(0.55 0 0));
+@layer lattice {
+  [data-theme="dark"],
+  .dark {
+  --lt-bg: oklch(0.155 0.008 225);
+  --lt-fg: oklch(0.955 0.005 210);
+  --lt-surface: oklch(0.195 0.01 225);
+  --lt-surface-fg: oklch(0.955 0.005 210);
+  --lt-popover: oklch(0.225 0.012 225);
+  --lt-popover-fg: oklch(0.955 0.005 210);
+  --lt-primary: oklch(0.75 0.115 190);
+  --lt-primary-fg: oklch(0.17 0.03 195);
+  --lt-secondary: oklch(0.27 0.012 225);
+  --lt-secondary-fg: oklch(0.955 0.005 210);
+  --lt-muted: oklch(0.26 0.01 225);
+  --lt-muted-fg: oklch(0.72 0.012 220);
+  --lt-accent: oklch(from var(--lt-primary) 0.29 0.03 h);
+  --lt-accent-fg: oklch(from var(--lt-primary) 0.97 0.005 h);
+  --lt-danger: oklch(0.55 0.18 25);
+  --lt-danger-fg: oklch(0.985 0 0);
+  --lt-border: oklch(0.285 0.012 225);
+  --lt-input: oklch(0.33 0.014 225);
+  --lt-ring: oklch(from var(--lt-primary) 0.6 0.1 h);
+  --lt-overlay: oklch(0.08 0.01 225 / 0.65);
+  --lt-warning: oklch(0.75 0.14 82);
+  --lt-warning-fg: oklch(0.28 0.06 70);
+  --lt-success: oklch(0.72 0.14 160);
+  --lt-success-fg: oklch(0.2 0.04 160);
+  --lt-info: oklch(0.72 0.13 242);
+  --lt-info-fg: oklch(0.2 0.04 242);
+
+  /* Dark surfaces lighten on interaction. */
+  --lt-primary-hover: oklch(from var(--lt-primary) calc(l + 0.04) c h);
+  --lt-primary-active: oklch(from var(--lt-primary) calc(l + 0.08) c h);
+  --lt-danger-hover: oklch(from var(--lt-danger) calc(l + 0.04) c h);
+  --lt-danger-active: oklch(from var(--lt-danger) calc(l + 0.08) c h);
+  --lt-success-hover: oklch(from var(--lt-success) calc(l + 0.04) c h);
+  --lt-success-active: oklch(from var(--lt-success) calc(l + 0.08) c h);
+  --lt-info-hover: oklch(from var(--lt-info) calc(l + 0.04) c h);
+  --lt-info-active: oklch(from var(--lt-info) calc(l + 0.08) c h);
+  --lt-warning-hover: oklch(from var(--lt-warning) calc(l + 0.04) c h);
+  --lt-warning-active: oklch(from var(--lt-warning) calc(l + 0.08) c h);
+  --lt-secondary-hover: oklch(from var(--lt-secondary) calc(l + 0.04) c h);
+  --lt-secondary-active: oklch(from var(--lt-secondary) calc(l + 0.08) c h);
+  --lt-disabled: oklch(0.28 0.01 225);
+  --lt-disabled-fg: oklch(0.56 0.012 225);
+
+  --lt-chart-1: oklch(0.72 0.12 190);
+  --lt-chart-2: oklch(0.7 0.12 250);
+  --lt-chart-3: oklch(0.76 0.14 60);
+  --lt-chart-4: oklch(0.7 0.16 305);
+  --lt-chart-5: oklch(0.7 0.16 20);
+  --lt-chart-6: oklch(0.74 0.12 150);
+  --lt-chart-7: oklch(0.72 0.12 100);
+  --lt-chart-8: oklch(0.68 0.05 280);
 
   color-scheme: dark;
+  }
 }
 
 @theme inline {
+  --font-sans: var(--lt-font-sans);
+  --font-mono: var(--lt-font-mono);
   --color-lt-bg: var(--lt-bg);
   --color-lt-fg: var(--lt-fg);
   --color-lt-surface: var(--lt-surface);
@@ -189,6 +244,8 @@
   --color-lt-success-active: var(--lt-success-active);
   --color-lt-info-hover: var(--lt-info-hover);
   --color-lt-info-active: var(--lt-info-active);
+  --color-lt-warning-hover: var(--lt-warning-hover);
+  --color-lt-warning-active: var(--lt-warning-active);
   --color-lt-secondary-hover: var(--lt-secondary-hover);
   --color-lt-secondary-active: var(--lt-secondary-active);
   --color-lt-disabled: var(--lt-disabled);
@@ -200,6 +257,24 @@
   --shadow-lt-sm: var(--lt-shadow-sm);
   --shadow-lt-md: var(--lt-shadow-md);
   --shadow-lt-lg: var(--lt-shadow-lg);
+  --shadow-lt-inner: var(--lt-shadow-inner);
+  --radius-lt-lg: var(--lt-radius-lg);
+  --radius-lt-xl: var(--lt-radius-xl);
+  --radius-lt-full: var(--lt-radius-full);
+  --color-lt-warning-fg: var(--lt-warning-fg);
+  --color-lt-chart-1: var(--lt-chart-1);
+  --color-lt-chart-2: var(--lt-chart-2);
+  --color-lt-chart-3: var(--lt-chart-3);
+  --color-lt-chart-4: var(--lt-chart-4);
+  --color-lt-chart-5: var(--lt-chart-5);
+  --color-lt-chart-6: var(--lt-chart-6);
+  --color-lt-chart-7: var(--lt-chart-7);
+  --color-lt-chart-8: var(--lt-chart-8);
+  --font-lt-mono: var(--lt-font-mono);
+  --font-lt-display: var(--lt-font-display);
+  --spacing-lt-sidebar: var(--lt-sidebar-w);
+  --spacing-lt-sidebar-collapsed: var(--lt-sidebar-w-collapsed);
+  --spacing-lt-container: var(--lt-container-max);
   --spacing-lt-icon-xs: var(--lt-icon-xs);
   --spacing-lt-icon-sm: var(--lt-icon-sm);
   --spacing-lt-icon-md: var(--lt-icon-md);
@@ -231,34 +306,30 @@
 }
 
 @theme {
-  --font-sans:
-    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
 
   --spacing: 0.25rem;
 
-  --text-xs: 0.625rem;
-  --text-xs--line-height: 1.6;
-  --text-sm: 0.6875rem;
-  --text-sm--line-height: 1.82;
-  --text-base: 0.75rem;
-  --text-base--line-height: 1.5;
-  --text-lg: 0.875rem;
-  --text-lg--line-height: 1.4286;
-  --text-xl: 1rem;
-  --text-xl--line-height: 1.5;
-  --text-2xl: 1.125rem;
-  --text-2xl--line-height: 1.2;
-  --text-3xl: 1.25rem;
-  --text-3xl--line-height: 1.2;
-  --text-4xl: 1.5rem;
-  --text-4xl--line-height: 1.2;
-  --text-5xl: 1.875rem;
-  --text-5xl--line-height: 1;
-  --text-6xl: 2.25rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.5;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.5385;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.5714;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5;
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.5556;
+  --text-2xl: 1.375rem;
+  --text-2xl--line-height: 1.2727;
+  --text-3xl: 1.625rem;
+  --text-3xl--line-height: 1.2308;
+  --text-4xl: 2rem;
+  --text-4xl--line-height: 1.25;
+  --text-5xl: 2.5rem;
+  --text-5xl--line-height: 1.1;
+  --text-6xl: 3rem;
   --text-6xl--line-height: 1;
-  --text-7xl: 3rem;
+  --text-7xl: 3.75rem;
   --text-7xl--line-height: 1;
 }
 
@@ -399,7 +470,8 @@
  * theme and can be overridden, and so a colour can be picked by name at
  * runtime without Tailwind needing to see every class.
  */
-:root {
+@layer lattice {
+  :root {
   --lt-color-default: var(--lt-fg);
   --lt-color-muted: var(--lt-muted-fg);
   --lt-color-primary: var(--lt-primary);
@@ -414,19 +486,20 @@
   --lt-color-green: oklch(0.52 0.13 152);
   --lt-color-blue: oklch(0.54 0.17 252);
   --lt-color-purple: oklch(0.53 0.19 305);
-}
+  }
 
-[data-theme="dark"],
-.dark {
+  [data-theme="dark"],
+  .dark {
   --lt-color-red: oklch(0.83 0.11 27);
   --lt-color-orange: oklch(0.84 0.1 65);
   --lt-color-yellow: oklch(0.87 0.11 100);
   --lt-color-green: oklch(0.85 0.13 155);
   --lt-color-blue: oklch(0.84 0.11 250);
   --lt-color-purple: oklch(0.85 0.11 305);
+  }
 }
 
-.lt-cell-badge {
+.lt-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -631,7 +704,7 @@
   background: var(--lt-muted);
   border-radius: var(--lt-radius-sm);
   padding: calc(var(--spacing) * 0.5) var(--spacing);
-  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  font-family: var(--lt-font-mono);
   font-size: 0.875em;
 }
 
@@ -641,7 +714,7 @@
   padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
   margin: calc(var(--spacing) * 3) 0;
   overflow-x: auto;
-  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
+  font-family: var(--lt-font-mono);
   font-size: var(--text-lg);
 }
 

package/dist/notifications/components/notification-item.js

@@ -7,10 +7,12 @@ import { Link } from "@inertiajs/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/notifications/components/notification-item.tsx
 var variantIconClass = {
+	primary: "text-lt-primary",
+	secondary: "text-lt-muted-fg",
 	success: "text-lt-success",
 	info: "text-lt-info",
 	warning: "text-lt-warning",
-	error: "text-lt-danger"
+	danger: "text-lt-danger"
 };
 function NotificationItemRow({ notification, onMarkRead, onDismiss }) {
 	const { t } = useT("lattice");

package/dist/notifications/components/notification-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-item.js","names":[],"sources":["../../../resources/js/notifications/components/notification-item.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { resolveText } from \"@lattice-php/lattice/i18n/translatable\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\n\nconst variantIconClass: Record<NonNullable<NotificationItem[\"variant\"]>, string> = {\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  error: \"text-lt-danger\",\n};\n\nexport function NotificationItemRow({\n  notification,\n  onMarkRead,\n  onDismiss,\n}: {\n  notification: NotificationItem;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  const title = resolveText(notification.title, t);\n  const body = resolveText(notification.body, t);\n\n  const content = (\n    <>\n      {title ? <p className=\"truncate text-sm font-medium text-lt-fg\">{title}</p> : null}\n      {body ? <p className=\"text-sm text-lt-muted-fg\">{body}</p> : null}\n    </>\n  );\n\n  return (\n    <li\n      className={cn(\"flex gap-3 px-3 py-3\", !notification.isRead && \"bg-lt-muted/40\")}\n      data-test=\"notification\"\n    >\n      {notification.icon ? (\n        <IconRenderer\n          icon={notification.icon}\n          className={cn(\n            \"mt-0.5 size-lt-icon-md\",\n            notification.variant ? variantIconClass[notification.variant] : undefined,\n          )}\n        />\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {notification.href ? (\n          <Link\n            href={notification.href}\n            className=\"block\"\n            data-test=\"notification-link\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {content}\n          </Link>\n        ) : (\n          content\n        )}\n        {notification.actions.length > 0 ? (\n          <div className=\"mt-2 flex flex-wrap gap-2\">\n            {notification.actions.map((node, index) => (\n              <RenderNode key={node.key ?? node.id ?? `action-${index}`} node={node} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex shrink-0 flex-col gap-1\">\n        {!notification.isRead ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {t(\"notifications.mark-read\", \"Mark read\")}\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          aria-label={t(\"notifications.dismiss\", \"Dismiss\")}\n          className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n          onClick={() => onDismiss(notification.id)}\n        >\n          {t(\"notifications.dismiss\", \"Dismiss\")}\n        </button>\n      </div>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAA6E;CACjF,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT;AAEA,SAAgB,oBAAoB,EAClC,cACA,YACA,aAKC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,QAAQ,YAAY,aAAa,OAAO,CAAC;CAC/C,MAAM,OAAO,YAAY,aAAa,MAAM,CAAC;CAE7C,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,KAAD;EAAG,WAAU;YAA2C;CAAS,CAAA,IAAI,MAC7E,OAAO,oBAAC,KAAD;EAAG,WAAU;YAA4B;CAAQ,CAAA,IAAI,IAC7D,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,wBAAwB,CAAC,aAAa,UAAU,gBAAgB;EAC9E,aAAU;YAFZ;GAIG,aAAa,OACZ,oBAAC,cAAD;IACE,MAAM,aAAa;IACnB,WAAW,GACT,0BACA,aAAa,UAAU,iBAAiB,aAAa,WAAW,KAAA,CAClE;GACD,CAAA,IACC;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,aAAa,OACZ,oBAAC,MAAD;KACE,MAAM,aAAa;KACnB,WAAU;KACV,aAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC;IACG,CAAA,IAEN,SAED,aAAa,QAAQ,SAAS,IAC7B,oBAAC,OAAD;KAAK,WAAU;eACZ,aAAa,QAAQ,KAAK,MAAM,UAC/B,oBAAC,YAAD,EAAiE,KAAO,GAAvD,KAAK,OAAO,KAAK,MAAM,UAAU,OAAsB,CACzE;IACE,CAAA,IACH,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,aAAa,SACb,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC,EAAE,2BAA2B,WAAW;IACnC,CAAA,IACN,MACJ,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,yBAAyB,SAAS;KAChD,WAAU;KACV,eAAe,UAAU,aAAa,EAAE;eAEvC,EAAE,yBAAyB,SAAS;IAC/B,CAAA,CACL;;EACH;;AAER"}
+{"version":3,"file":"notification-item.js","names":[],"sources":["../../../resources/js/notifications/components/notification-item.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { resolveText } from \"@lattice-php/lattice/i18n/translatable\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\n\nconst variantIconClass: Record<NonNullable<NotificationItem[\"variant\"]>, string> = {\n  primary: \"text-lt-primary\",\n  secondary: \"text-lt-muted-fg\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nexport function NotificationItemRow({\n  notification,\n  onMarkRead,\n  onDismiss,\n}: {\n  notification: NotificationItem;\n  onMarkRead: (id: string) => void;\n  onDismiss: (id: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  const title = resolveText(notification.title, t);\n  const body = resolveText(notification.body, t);\n\n  const content = (\n    <>\n      {title ? <p className=\"truncate text-sm font-medium text-lt-fg\">{title}</p> : null}\n      {body ? <p className=\"text-sm text-lt-muted-fg\">{body}</p> : null}\n    </>\n  );\n\n  return (\n    <li\n      className={cn(\"flex gap-3 px-3 py-3\", !notification.isRead && \"bg-lt-muted/40\")}\n      data-test=\"notification\"\n    >\n      {notification.icon ? (\n        <IconRenderer\n          icon={notification.icon}\n          className={cn(\n            \"mt-0.5 size-lt-icon-md\",\n            notification.variant ? variantIconClass[notification.variant] : undefined,\n          )}\n        />\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {notification.href ? (\n          <Link\n            href={notification.href}\n            className=\"block\"\n            data-test=\"notification-link\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {content}\n          </Link>\n        ) : (\n          content\n        )}\n        {notification.actions.length > 0 ? (\n          <div className=\"mt-2 flex flex-wrap gap-2\">\n            {notification.actions.map((node, index) => (\n              <RenderNode key={node.key ?? node.id ?? `action-${index}`} node={node} />\n            ))}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex shrink-0 flex-col gap-1\">\n        {!notification.isRead ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={() => onMarkRead(notification.id)}\n          >\n            {t(\"notifications.mark-read\", \"Mark read\")}\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          aria-label={t(\"notifications.dismiss\", \"Dismiss\")}\n          className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n          onClick={() => onDismiss(notification.id)}\n        >\n          {t(\"notifications.dismiss\", \"Dismiss\")}\n        </button>\n      </div>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,mBAA6E;CACjF,SAAS;CACT,WAAW;CACX,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,SAAgB,oBAAoB,EAClC,cACA,YACA,aAKC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,QAAQ,YAAY,aAAa,OAAO,CAAC;CAC/C,MAAM,OAAO,YAAY,aAAa,MAAM,CAAC;CAE7C,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,KAAD;EAAG,WAAU;YAA2C;CAAS,CAAA,IAAI,MAC7E,OAAO,oBAAC,KAAD;EAAG,WAAU;YAA4B;CAAQ,CAAA,IAAI,IAC7D,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,wBAAwB,CAAC,aAAa,UAAU,gBAAgB;EAC9E,aAAU;YAFZ;GAIG,aAAa,OACZ,oBAAC,cAAD;IACE,MAAM,aAAa;IACnB,WAAW,GACT,0BACA,aAAa,UAAU,iBAAiB,aAAa,WAAW,KAAA,CAClE;GACD,CAAA,IACC;GACJ,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,aAAa,OACZ,oBAAC,MAAD;KACE,MAAM,aAAa;KACnB,WAAU;KACV,aAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC;IACG,CAAA,IAEN,SAED,aAAa,QAAQ,SAAS,IAC7B,oBAAC,OAAD;KAAK,WAAU;eACZ,aAAa,QAAQ,KAAK,MAAM,UAC/B,oBAAC,YAAD,EAAiE,KAAO,GAAvD,KAAK,OAAO,KAAK,MAAM,UAAU,OAAsB,CACzE;IACE,CAAA,IACH,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,aAAa,SACb,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,WAAW,aAAa,EAAE;eAExC,EAAE,2BAA2B,WAAW;IACnC,CAAA,IACN,MACJ,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,yBAAyB,SAAS;KAChD,WAAU;KACV,eAAe,UAAU,aAAa,EAAE;eAEvC,EAAE,yBAAyB,SAAS;IAC/B,CAAA,CACL;;EACH;;AAER"}

package/dist/notifications/components/notifications.js

@@ -2,7 +2,6 @@ import { useT } from "../../i18n/instance.js";
 import { Icon } from "../../icons/sprite.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
 import { Dialog, DialogContent, DialogTitle } from "../../ui/dialog.js";
-import { Badge } from "../../ui/badge.js";
 import { useNotifications } from "../store.js";
 import { NotificationList } from "./notification-list.js";
 import { Component, Suspense, lazy } from "react";
@@ -33,10 +32,9 @@ var NotificationsComponent = ({ node }) => {
 		children: [/* @__PURE__ */ jsx(Icon, {
 			name: "bell",
 			className: "size-lt-icon-md"
-		}), store.unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, {
-			variant: "destructive",
+		}), store.unreadCount > 0 ? /* @__PURE__ */ jsx("span", {
 			"data-test": "notifications-badge",
-			className: "absolute -right-0.5 -top-0.5 min-w-4 px-1 py-0 text-[10px]",
+			className: "absolute -right-0.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-lt-full bg-lt-danger px-1 py-0 text-[10px] font-medium text-lt-danger-fg",
 			children: store.unreadCount
 		}) : null]
 	});

package/dist/notifications/components/notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import { Component, lazy, Suspense, type ReactNode } from \"react\";\nimport { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport { Dialog, DialogContent, DialogTitle } from \"@lattice-php/lattice/ui/dialog\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useNotifications } from \"@lattice-php/lattice/notifications/store\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport { NotificationList } from \"./notification-list\";\n\nconst NotificationsEcho = lazy(() =>\n  import(\"./notifications-echo\").then((m) => ({ default: m.NotificationsEcho })),\n);\n\nclass EchoBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {\n  state = { failed: false };\n\n  static getDerivedStateFromError(): { failed: boolean } {\n    return { failed: true };\n  }\n\n  componentDidCatch(): void {\n    console.warn(\n      \"[lattice] The notifications bell declares a realtime channel but Echo is unavailable. Install @laravel/echo-react and call configureEcho().\",\n    );\n  }\n\n  render(): ReactNode {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n\nconst NotificationsComponent: RendererComponent<\"notifications\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const store = useNotifications({\n    endpoint: node.props.endpoint,\n    pollingInterval: node.props.pollingInterval,\n  });\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const trigger = (\n    <span className=\"relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted\">\n      <Icon name=\"bell\" className=\"size-lt-icon-md\" />\n      {store.unreadCount > 0 ? (\n        <Badge\n          variant=\"destructive\"\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 min-w-4 px-1 py-0 text-[10px]\"\n        >\n          {store.unreadCount}\n        </Badge>\n      ) : null}\n    </span>\n  );\n\n  const panel = (\n    <div className=\"w-80\" data-test=\"notifications-panel\">\n      <div className=\"flex items-center justify-between border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium\">{t(\"notifications.heading\", \"Notifications\")}</span>\n        {store.unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={store.markAllRead}\n          >\n            {t(\"notifications.mark-all-read\", \"Mark all read\")}\n          </button>\n        ) : null}\n      </div>\n      <NotificationList\n        notifications={store.notifications}\n        status={store.status}\n        hasMore={store.hasMore}\n        onMarkRead={store.markRead}\n        onDismiss={store.dismiss}\n        onLoadMore={store.loadMore}\n      />\n    </div>\n  );\n\n  return (\n    <>\n      {node.props.channel ? (\n        <EchoBoundary>\n          <Suspense fallback={null}>\n            <NotificationsEcho\n              channel={node.props.channel}\n              onReceive={(item: NotificationItem) => store.receive(item)}\n            />\n          </Suspense>\n        </EchoBoundary>\n      ) : null}\n\n      {node.props.slideOut ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label={label}\n            data-test=\"notifications-trigger\"\n            onClick={() => store.setOpen(true)}\n          >\n            {trigger}\n          </button>\n          <Dialog open={store.open} onOpenChange={store.setOpen}>\n            <DialogContent aria-describedby={undefined} className=\"p-0\" placement=\"end\" width=\"sm\">\n              <DialogTitle className=\"sr-only\">{label}</DialogTitle>\n              {panel}\n            </DialogContent>\n          </Dialog>\n        </>\n      ) : (\n        <PopoverRoot open={store.open} onOpenChange={store.setOpen}>\n          <PopoverTrigger asChild>\n            <button type=\"button\" aria-label={label} data-test=\"notifications-trigger\">\n              {trigger}\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"p-0\">\n            {panel}\n          </PopoverContent>\n        </PopoverRoot>\n      )}\n    </>\n  );\n};\n\nexport default NotificationsComponent;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,oBAAoB,WACxB,OAAO,2BAAwB,MAAM,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAC/E;AAEA,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,6IACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;AAEA,IAAM,0BAA8D,EAAE,WAAW;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,iBAAiB;EAC7B,UAAU,KAAK,MAAM;EACrB,iBAAiB,KAAK,MAAM;CAC9B,CAAC;CAED,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,OAAD;GACE,SAAQ;GACR,aAAU;GACV,WAAU;aAET,MAAM;EACF,CAAA,IACL,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;YAAhC,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuB,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;cAEd,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;MACL,oBAAC,kBAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;EACnB,CAAA,CACE;;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,MAAM,UACV,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,eAAe,MAAM,QAAQ,IAAI;YAEhC;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;YAC5C,qBAAC,eAAD;GAAe,oBAAkB,KAAA;GAAW,WAAU;GAAM,WAAU;GAAM,OAAM;aAAlF,CACE,oBAAC,aAAD;IAAa,WAAU;cAAW;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;YAAnD,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;cAChD;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;aACnC;EACa,CAAA,CACL;GAEf,EAAA,CAAA;AAEN"}
+{"version":3,"file":"notifications.js","names":[],"sources":["../../../resources/js/notifications/components/notifications.tsx"],"sourcesContent":["import { Component, lazy, Suspense, type ReactNode } from \"react\";\nimport { Dialog, DialogContent, DialogTitle } from \"@lattice-php/lattice/ui/dialog\";\nimport {\n  Popover as PopoverRoot,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useNotifications } from \"@lattice-php/lattice/notifications/store\";\nimport type { NotificationItem } from \"@lattice-php/lattice/notifications/types\";\nimport { NotificationList } from \"./notification-list\";\n\nconst NotificationsEcho = lazy(() =>\n  import(\"./notifications-echo\").then((m) => ({ default: m.NotificationsEcho })),\n);\n\nclass EchoBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {\n  state = { failed: false };\n\n  static getDerivedStateFromError(): { failed: boolean } {\n    return { failed: true };\n  }\n\n  componentDidCatch(): void {\n    console.warn(\n      \"[lattice] The notifications bell declares a realtime channel but Echo is unavailable. Install @laravel/echo-react and call configureEcho().\",\n    );\n  }\n\n  render(): ReactNode {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n\nconst NotificationsComponent: RendererComponent<\"notifications\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const store = useNotifications({\n    endpoint: node.props.endpoint,\n    pollingInterval: node.props.pollingInterval,\n  });\n\n  const label = t(\"notifications.label\", \"Notifications\");\n\n  const trigger = (\n    <span className=\"relative inline-flex items-center justify-center rounded-lt-sm p-2 hover:bg-lt-muted\">\n      <Icon name=\"bell\" className=\"size-lt-icon-md\" />\n      {store.unreadCount > 0 ? (\n        <span\n          data-test=\"notifications-badge\"\n          className=\"absolute -right-0.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-lt-full bg-lt-danger px-1 py-0 text-[10px] font-medium text-lt-danger-fg\"\n        >\n          {store.unreadCount}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  const panel = (\n    <div className=\"w-80\" data-test=\"notifications-panel\">\n      <div className=\"flex items-center justify-between border-b border-lt-border px-3 py-2\">\n        <span className=\"text-sm font-medium\">{t(\"notifications.heading\", \"Notifications\")}</span>\n        {store.unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"text-xs text-lt-muted-fg hover:text-lt-fg\"\n            onClick={store.markAllRead}\n          >\n            {t(\"notifications.mark-all-read\", \"Mark all read\")}\n          </button>\n        ) : null}\n      </div>\n      <NotificationList\n        notifications={store.notifications}\n        status={store.status}\n        hasMore={store.hasMore}\n        onMarkRead={store.markRead}\n        onDismiss={store.dismiss}\n        onLoadMore={store.loadMore}\n      />\n    </div>\n  );\n\n  return (\n    <>\n      {node.props.channel ? (\n        <EchoBoundary>\n          <Suspense fallback={null}>\n            <NotificationsEcho\n              channel={node.props.channel}\n              onReceive={(item: NotificationItem) => store.receive(item)}\n            />\n          </Suspense>\n        </EchoBoundary>\n      ) : null}\n\n      {node.props.slideOut ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label={label}\n            data-test=\"notifications-trigger\"\n            onClick={() => store.setOpen(true)}\n          >\n            {trigger}\n          </button>\n          <Dialog open={store.open} onOpenChange={store.setOpen}>\n            <DialogContent aria-describedby={undefined} className=\"p-0\" placement=\"end\" width=\"sm\">\n              <DialogTitle className=\"sr-only\">{label}</DialogTitle>\n              {panel}\n            </DialogContent>\n          </Dialog>\n        </>\n      ) : (\n        <PopoverRoot open={store.open} onOpenChange={store.setOpen}>\n          <PopoverTrigger asChild>\n            <button type=\"button\" aria-label={label} data-test=\"notifications-trigger\">\n              {trigger}\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"p-0\">\n            {panel}\n          </PopoverContent>\n        </PopoverRoot>\n      )}\n    </>\n  );\n};\n\nexport default NotificationsComponent;\n"],"mappings":";;;;;;;;;AAcA,IAAM,oBAAoB,WACxB,OAAO,2BAAwB,MAAM,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAC/E;AAEA,IAAM,eAAN,cAA2B,UAAwD;CACjF,QAAQ,EAAE,QAAQ,MAAM;CAExB,OAAO,2BAAgD;EACrD,OAAO,EAAE,QAAQ,KAAK;CACxB;CAEA,oBAA0B;EACxB,QAAQ,KACN,6IACF;CACF;CAEA,SAAoB;EAClB,OAAO,KAAK,MAAM,SAAS,OAAO,KAAK,MAAM;CAC/C;AACF;AAEA,IAAM,0BAA8D,EAAE,WAAW;CAC/E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAQ,iBAAiB;EAC7B,UAAU,KAAK,MAAM;EACrB,iBAAiB,KAAK,MAAM;CAC9B,CAAC;CAED,MAAM,QAAQ,EAAE,uBAAuB,eAAe;CAEtD,MAAM,UACJ,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA,GAC9C,MAAM,cAAc,IACnB,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAET,MAAM;EACH,CAAA,IACJ,IACA;;CAGR,MAAM,QACJ,qBAAC,OAAD;EAAK,WAAU;EAAO,aAAU;YAAhC,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuB,EAAE,yBAAyB,eAAe;GAAQ,CAAA,GACxF,MAAM,cAAc,IACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS,MAAM;cAEd,EAAE,+BAA+B,eAAe;GAC3C,CAAA,IACN,IACD;MACL,oBAAC,kBAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;EACnB,CAAA,CACE;;CAGP,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,MAAM,UACV,oBAAC,cAAD,EAAA,UACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD;GACE,SAAS,KAAK,MAAM;GACpB,YAAY,SAA2B,MAAM,QAAQ,IAAI;EAC1D,CAAA;CACO,CAAA,EACE,CAAA,IACZ,MAEH,KAAK,MAAM,WACV,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAU;EACV,eAAe,MAAM,QAAQ,IAAI;YAEhC;CACK,CAAA,GACR,oBAAC,QAAD;EAAQ,MAAM,MAAM;EAAM,cAAc,MAAM;YAC5C,qBAAC,eAAD;GAAe,oBAAkB,KAAA;GAAW,WAAU;GAAM,WAAU;GAAM,OAAM;aAAlF,CACE,oBAAC,aAAD;IAAa,WAAU;cAAW;GAAmB,CAAA,GACpD,KACY;;CACT,CAAA,CACR,EAAA,CAAA,IAEF,qBAAC,SAAD;EAAa,MAAM,MAAM;EAAM,cAAc,MAAM;YAAnD,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY;IAAO,aAAU;cAChD;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;aACnC;EACa,CAAA,CACL;GAEf,EAAA,CAAA;AAEN"}

package/dist/remote/components/data-list.js

@@ -1,7 +1,7 @@
-import { useT } from "../../i18n/instance.js";
+import { remoteJson } from "../../core/api.js";
 import { materializeSchema } from "../../core/materialize.js";
+import { useT } from "../../i18n/instance.js";
 import { Renderer } from "../../core/renderer.js";
-import { remoteJson } from "../../core/api.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/remote/components/data-list.tsx