@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,26 +1,38 @@
 export { registry } from './registry';
-export { dispatchActionEffects, dispatchActionError, getActionEffects, isActionEffect, } from './action/effects';
+export { useChat } from './chat/use-chat';
+export { chatPlugin } from './chat';
+export { getActionEffects, isActionEffect, dispatchEffects, dispatchActionError, } from './effects/dispatch';
+export { useEffectDispatcher } from './effects/use-effect-dispatcher';
+export { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from './effects/registry';
 export { initializeTheme, useAppearance } from './appearance';
 export { copyToClipboard, useClipboard } from './clipboard';
 export { EventBridge } from './events/event-bridge';
 export { Icon, IconRenderer, IconRendererProvider, SpriteProvider } from './icons';
-export { createLayoutResolver, createPageResolver, pageComponentName } from './inertia';
-export { layoutComponents, OutletContext, SchemaLayout } from './layout';
-export { Provider, useColumnRegistry, useRegistry } from './provider';
-export { Toaster } from './toast';
+export { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders, } from './inertia';
+export { Callouts, layoutComponents, OutletContext, SchemaLayout, SidebarCollapsedContext, useSidebarCollapsed, } from './layout';
+export { Provider, useColumnRegistry, useComponentRegistry } from './provider';
+export { onCallout, onToast, showToast, Toaster } from './toast';
 export { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent, } from './core/registry';
 export type { Plugin, Registry } from './core/registry';
+export type { UseChatOptions } from './chat/use-chat';
+export type { ChatFrame, ChatMessage, ChatRole, ChatStatus, ChatTransport, ChatTransportRequest, UseChatReturn, } from './chat/types';
 export { Renderer } from './core/renderer';
 export { LATTICE_REF_HEADER, withRefHeader } from './core/component-ref';
+export { withHeaders } from './core/headers';
 export { LATTICE_EVENT } from './events/event-names';
 export type { ButtonVariant } from './core/components/button';
 export type { ReloadComponentEvent } from './events/event-names';
 export type { ComponentProps, KnownPageContainer, LayoutPayload, Node, NodeOfType, NodeProps, NodeType, PageContainer, PageBreadcrumb, PagePayload, PropsOf, RendererComponent, RendererComponentModule, RendererComponentProps, Schema, UnknownComponent, WireNode, } from './core/types';
-export type { ColumnCellArgs, ColumnCellComponent, ColumnRegistry } from './table/column-registry';
+export { RealtimeListeners } from './realtime/listeners';
+export type { ChannelVisibility, ListenerPayload } from './types/generated';
+export { columnCell } from './table/registry';
+export type { ColumnCellArgs, ColumnCellComponent, ColumnRegistry } from './table/registry';
 export type { ColumnProps, ColumnPropsOf } from './table/types';
 export type { Method } from '@inertiajs/core';
-export type { ActionEffect } from './action/effects';
+export type { ActionEffect, ActionResponse } from './effects/dispatch';
+export type { EffectHandler, EffectHandlerRegistry, EffectOf, EffectProps, } from './effects/registry';
 export type { ResolvedAppearance, UseAppearanceReturn } from './appearance';
 export type { CopiedValue, CopyFn, UseClipboardReturn } from './clipboard';
-export type { Appearance, ToastMessage, ToastVariant } from './events/event-bridge';
+export type { Appearance } from './events/event-bridge';
+export type { Callout, ToastMessage, Variant } from './toast';
 export type { IconName, IconRendererFunction, IconRendererProps, KnownIcons, SpriteValue, } from './icons';

package/dist/index.js

@@ -1,18 +1,30 @@
 import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
+import { LATTICE_EVENT } from "./events/event-names.js";
 import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
+import { withHeaders } from "./core/headers.js";
 import { Icon, SpriteProvider } from "./icons/sprite.js";
 import { IconRenderer, IconRendererProvider } from "./icons/icon-renderer.js";
-import { LATTICE_EVENT } from "./events/event-names.js";
-import { dispatchActionEffects, dispatchActionError, getActionEffects, isActionEffect } from "./action/effects.js";
+import { onToast, showToast } from "./toast/toast.js";
+import { EventBridge } from "./events/event-bridge.js";
+import { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from "./effects/registry.js";
+import { dispatchActionError, dispatchEffects, getActionEffects, isActionEffect } from "./effects/dispatch.js";
+import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
+import { useEffectDispatcher } from "./effects/use-effect-dispatcher.js";
+import { CollapsedContext, useCollapsed } from "./core/collapsed-context.js";
 import { Renderer } from "./core/renderer.js";
+import { chatPlugin } from "./chat/index.js";
+import { useChat } from "./chat/use-chat.js";
+import { onCallout } from "./toast/callout.js";
+import Callouts from "./layout/callouts.js";
 import { OutletContext } from "./layout/context.js";
 import { layoutComponents } from "./layout/components.js";
 import { registry } from "./registry.js";
 import { initializeTheme, useAppearance } from "./appearance/index.js";
 import { copyToClipboard, useClipboard } from "./clipboard/index.js";
-import { EventBridge } from "./events/event-bridge.js";
-import { Toaster } from "./toast/toaster.js";
-import { Provider, useColumnRegistry, useRegistry } from "./provider.js";
 import SchemaLayout from "./layout/schema-layout.js";
-import { createLayoutResolver, createPageResolver, pageComponentName } from "./inertia.js";
-export { EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, Renderer, SchemaLayout, SpriteProvider, Toaster, copyToClipboard, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionEffects, dispatchActionError, eagerComponent, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, pageComponentName, registry, useAppearance, useClipboard, useColumnRegistry, useRegistry, withRefHeader };
+import { RealtimeListeners } from "./realtime/listeners.js";
+import { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders } from "./inertia.js";
+import { Toaster } from "./toast/toaster.js";
+import { Provider } from "./provider.js";
+import { columnCell } from "./table/registry.js";
+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, 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 };

package/dist/inertia.d.ts

@@ -1,4 +1,4 @@
-import { Page as InertiaPage } from '@inertiajs/core';
+import { Page as InertiaPage, VisitOptions } from '@inertiajs/core';
 import { ResolvedComponent } from '@inertiajs/react';
 export declare const pageComponentName = "lattice/page";
 export type ResolvedPage = ResolvedComponent | Promise<ResolvedComponent> | {
@@ -10,3 +10,4 @@ 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;

package/dist/inertia.js

@@ -1,3 +1,4 @@
+import { withHeaders } from "./core/headers.js";
 import SchemaLayout from "./layout/schema-layout.js";
 import Page from "./page.js";
 //#region resources/js/inertia.ts
@@ -5,7 +6,7 @@ var pageComponentName = "lattice/page";
 function createPageResolver(pages) {
 	return (name) => {
 		if (name === "lattice/page") return { default: Page };
-		const resolvedPage = pages[`./pages/${name}.tsx`];
+		const resolvedPage = pages[`./Pages/${name}.tsx`] ?? pages[`./pages/${name}.tsx`];
 		if (resolvedPage) return resolvedPage();
 		throw new Error(`Page not found: ${name}`);
 	};
@@ -16,7 +17,13 @@ function createLayoutResolver({ defaultLayout } = {}) {
 		return defaultLayout?.(name, page) ?? null;
 	};
 }
+function withVisitHeaders(_href, options) {
+	return {
+		...options,
+		headers: withHeaders("", options.headers)
+	};
+}
 //#endregion
-export { createLayoutResolver, createPageResolver, pageComponentName };
+export { createLayoutResolver, createPageResolver, pageComponentName, 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 } from \"@inertiajs/core\";\nimport type { ResolvedComponent } from \"@inertiajs/react\";\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`];\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"],"mappings":";;;AAMA,IAAa,oBAAoB;AAYjC,SAAgB,mBAAmB,OAAoB;CACrD,QAAQ,SAA+B;EACrC,IAAI,SAAA,gBACF,OAAO,EAAE,SAAS,KAAK;EAGzB,MAAM,eAAe,MAAM,WAAW,KAAK;EAE3C,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"}
+{"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"}

package/dist/lattice.css

@@ -2,39 +2,97 @@
 
 :root,
 [data-theme="light"] {
-  --lt-bg: var(--background, oklch(1 0 0));
+  --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.205 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.97 0 0));
-  --lt-accent-fg: var(--accent-foreground, oklch(0.205 0 0));
-  --lt-danger: var(--destructive, oklch(0.577 0.245 27.325));
+  --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.87 0 0));
-  --lt-warning: var(--warning, oklch(0.852 0.156 91));
-  --lt-success: var(--success, oklch(0.596 0.145 163));
+  --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.588 0.158 241));
+  --lt-info: var(--info, oklch(0.62 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.985 0 0));
-  --lt-radius: var(--radius, 0.625rem);
-  --lt-radius-sm: calc(var(--lt-radius) - 2px);
-  --lt-radius-xs: calc(var(--lt-radius) - 4px);
+  /* Interaction states (hover / active / disabled) */
+  --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));
+
+  /* Radius: base = cards, -sm = controls, -xs = chips */
+  --lt-radius: var(--radius, 0.5rem);
+  --lt-radius-sm: calc(var(--lt-radius) - 0.125rem);
+  --lt-radius-xs: calc(var(--lt-radius) - 0.25rem);
 
   --lt-icon-xs: 0.75rem;
   --lt-icon-sm: 0.875rem;
   --lt-icon-md: 1rem;
   --lt-icon-lg: 1.25rem;
   --lt-icon-xl: 1.5rem;
+  --lt-icon-stroke: 1.5;
+
+  /* Control heights — density lever */
+  --lt-control-h-sm: 2rem;
+  --lt-control-h-md: 2.25rem;
+  --lt-control-h-lg: 2.5rem;
+
+  --lt-font-weight-normal: 400;
+  --lt-font-weight-medium: 500;
+  --lt-font-weight-semibold: 600;
+  --lt-font-weight-bold: 700;
+
+  /* Focus-ring size (colour: --lt-ring) */
+  --lt-ring-width: 0.125rem;
+  --lt-ring-offset: 0.125rem;
+
+  /* Elevation */
+  --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-md:
+    0 2px 4px -1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 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);
+
+  /* Z-index scale */
+  --lt-z-dropdown: 1000;
+  --lt-z-sticky: 1100;
+  --lt-z-overlay: 1200;
+  --lt-z-modal: 1300;
+  --lt-z-popover: 1400;
+  --lt-z-toast: 1500;
+
+  /* Motion */
+  --lt-duration-fast: 120ms;
+  --lt-duration-base: 160ms;
+  --lt-duration-slow: 240ms;
+  --lt-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Layout dimensions */
+  --lt-sidebar-w: 16rem;
+  --lt-sidebar-w-collapsed: 4rem;
+  --lt-container-max: 80rem;
 
   color-scheme: light;
 }
@@ -47,25 +105,40 @@
   --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.985 0 0));
-  --lt-primary-fg: var(--primary-foreground, oklch(0.205 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.269 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.396 0.141 25.723));
+  --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.439 0 0));
-  --lt-warning: var(--warning, oklch(0.68 0.14 75));
-  --lt-success: var(--success, oklch(0.696 0.17 162));
+  --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.685 0.15 238));
+  --lt-info: var(--info, oklch(0.7 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
 
+  /* Interaction states (dark) */
+  --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));
+
   color-scheme: dark;
 }
 
@@ -89,21 +162,74 @@
   --color-lt-border: var(--lt-border);
   --color-lt-input: var(--lt-input);
   --color-lt-ring: var(--lt-ring);
+  --color-lt-overlay: var(--lt-overlay);
   --color-lt-warning: var(--lt-warning);
   --color-lt-success: var(--lt-success);
   --color-lt-success-fg: var(--lt-success-fg);
   --color-lt-info: var(--lt-info);
   --color-lt-info-fg: var(--lt-info-fg);
+  --color-lt-primary-hover: var(--lt-primary-hover);
+  --color-lt-primary-active: var(--lt-primary-active);
+  --color-lt-danger-hover: var(--lt-danger-hover);
+  --color-lt-danger-active: var(--lt-danger-active);
+  --color-lt-success-hover: var(--lt-success-hover);
+  --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-secondary-hover: var(--lt-secondary-hover);
+  --color-lt-secondary-active: var(--lt-secondary-active);
+  --color-lt-disabled: var(--lt-disabled);
+  --color-lt-disabled-fg: var(--lt-disabled-fg);
   --radius-lt: var(--lt-radius);
   --radius-lt-sm: var(--lt-radius-sm);
   --radius-lt-xs: var(--lt-radius-xs);
+  --shadow-lt-xs: var(--lt-shadow-xs);
+  --shadow-lt-sm: var(--lt-shadow-sm);
+  --shadow-lt-md: var(--lt-shadow-md);
+  --shadow-lt-lg: var(--lt-shadow-lg);
   --spacing-lt-icon-xs: var(--lt-icon-xs);
   --spacing-lt-icon-sm: var(--lt-icon-sm);
   --spacing-lt-icon-md: var(--lt-icon-md);
   --spacing-lt-icon-lg: var(--lt-icon-lg);
   --spacing-lt-icon-xl: var(--lt-icon-xl);
-  --animate-lt-toast-in: lt-toast-in 160ms ease-out;
-  --animate-lt-toast-out: lt-toast-out 120ms ease-in;
+  --spacing-lt-control-sm: var(--lt-control-h-sm);
+  --spacing-lt-control-md: var(--lt-control-h-md);
+  --spacing-lt-control-lg: var(--lt-control-h-lg);
+  --animate-lt-toast-in: lt-toast-in var(--lt-duration-base) ease-out;
+  --animate-lt-toast-out: lt-toast-out var(--lt-duration-fast) ease-in;
+}
+
+@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";
+
+  /* Base spacing unit */
+  --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-6xl--line-height: 1;
+  --text-7xl: 3rem;
+  --text-7xl--line-height: 1;
 }
 
 @keyframes lt-toast-in {

package/dist/layout/breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../core/types';
+declare const BreadcrumbsComponent: RendererComponent<"breadcrumbs">;
+export default BreadcrumbsComponent;

package/dist/layout/breadcrumbs.js

@@ -0,0 +1,34 @@
+import { Fragment } from "react";
+import { Link, usePage } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/layout/breadcrumbs.tsx
+var BreadcrumbsComponent = ({ node }) => {
+	const crumbs = usePage().props.lattice?.breadcrumbs ?? [];
+	if (crumbs.length === 0) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-lattice-component": node.id,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "flex items-center gap-2 text-sm text-lt-muted-fg",
+			children: crumbs.map((crumb, index) => {
+				const isLast = index === crumbs.length - 1;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("li", { children: isLast ? /* @__PURE__ */ jsx("span", {
+					"aria-current": "page",
+					className: "text-lt-fg",
+					children: crumb.title
+				}) : /* @__PURE__ */ jsx(Link, {
+					className: "hover:text-lt-fg",
+					href: crumb.href,
+					children: crumb.title
+				}) }), isLast ? null : /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					children: "/"
+				})] }, crumb.href);
+			})
+		})
+	});
+};
+//#endregion
+export { BreadcrumbsComponent as default };
+
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/layout/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../resources/js/layout/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav aria-label=\"Breadcrumb\" data-lattice-component={node.id}>\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;AAIA,IAAM,wBAA0D,EAAE,WAAW;CAE3E,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,0BAAwB,KAAK;YACxD,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/dist/layout/callouts.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../core/types';
+declare const Callouts: RendererComponent<"callouts">;
+export default Callouts;

package/dist/layout/callouts.js

@@ -0,0 +1,67 @@
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import { useT } from "../i18n/instance.js";
+import { RenderNode } from "../core/renderer.js";
+import { onCallout } from "../toast/callout.js";
+import { variantStyles } from "../toast/variant-styles.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/layout/callouts.tsx
+var nextId = 0;
+var Callouts = () => {
+	const { t } = useT("lattice");
+	const [callouts, setCallouts] = useState([]);
+	useEffect(() => onCallout((callout) => {
+		setCallouts((current) => [...current, {
+			...callout,
+			id: nextId++
+		}]);
+	}), []);
+	function dismiss(id) {
+		setCallouts((current) => current.filter((callout) => callout.id !== id));
+	}
+	if (callouts.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full flex-col gap-2",
+		children: callouts.map((callout) => /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"data-test": `callout-${callout.variant}`,
+			className: cn("flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg", variantStyles[callout.variant].accent),
+			children: [
+				variantStyles[callout.variant].icon,
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2",
+					children: [
+						callout.title ? /* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium text-lt-fg",
+							children: callout.title
+						}) : null,
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-lt-fg",
+							children: callout.message
+						}),
+						callout.action ? /* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap gap-2",
+							children: /* @__PURE__ */ jsx(RenderNode, { node: callout.action })
+						}) : null
+					]
+				}),
+				callout.dismissible ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": t("a11y.dismiss", "Dismiss"),
+					"data-test": "callout-dismiss",
+					className: "shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
+					onClick: () => dismiss(callout.id),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						className: "size-lt-icon-md"
+					})
+				}) : null
+			]
+		}, callout.id))
+	});
+};
+//#endregion
+export { Callouts as default };
+
+//# sourceMappingURL=callouts.js.map

package/dist/layout/callouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callouts.js","names":[],"sources":["../../resources/js/layout/callouts.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport type { Callout } from \"@lattice-php/lattice/types/generated\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { onCallout } from \"@lattice-php/lattice/toast/callout\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { variantStyles } from \"@lattice-php/lattice/toast/variant-styles\";\n\ntype CalloutItem = Callout & { id: number };\n\nlet nextId = 0;\n\nconst Callouts: RendererComponent<\"callouts\"> = () => {\n  const { t } = useT(\"lattice\");\n  const [callouts, setCallouts] = useState<CalloutItem[]>([]);\n\n  useEffect(\n    () =>\n      onCallout((callout) => {\n        setCallouts((current) => [...current, { ...callout, id: nextId++ }]);\n      }),\n    [],\n  );\n\n  function dismiss(id: number): void {\n    setCallouts((current) => current.filter((callout) => callout.id !== id));\n  }\n\n  if (callouts.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      {callouts.map((callout) => (\n        <div\n          key={callout.id}\n          role=\"status\"\n          data-test={`callout-${callout.variant}`}\n          className={cn(\n            \"flex items-start gap-3 rounded-lt border border-l-4 border-lt-border bg-lt-popover p-4 text-lt-popover-fg\",\n            variantStyles[callout.variant].accent,\n          )}\n        >\n          {variantStyles[callout.variant].icon}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            {callout.title ? (\n              <p className=\"text-sm font-medium text-lt-fg\">{callout.title}</p>\n            ) : null}\n            <p className=\"text-sm text-lt-fg\">{callout.message}</p>\n            {callout.action ? (\n              <div className=\"flex flex-wrap gap-2\">\n                <RenderNode node={callout.action} />\n              </div>\n            ) : null}\n          </div>\n          {callout.dismissible ? (\n            <button\n              type=\"button\"\n              aria-label={t(\"a11y.dismiss\", \"Dismiss\")}\n              data-test=\"callout-dismiss\"\n              className=\"shrink-0 rounded-lt-sm p-1 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n              onClick={() => dismiss(callout.id)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-md\" />\n            </button>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Callouts;\n"],"mappings":";;;;;;;;;AAYA,IAAI,SAAS;AAEb,IAAM,iBAAgD;CACpD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAwB,CAAC,CAAC;CAE1D,gBAEI,WAAW,YAAY;EACrB,aAAa,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAS,IAAI;EAAS,CAAC,CAAC;CACrE,CAAC,GACH,CAAC,CACH;CAEA,SAAS,QAAQ,IAAkB;EACjC,aAAa,YAAY,QAAQ,QAAQ,YAAY,QAAQ,OAAO,EAAE,CAAC;CACzE;CAEA,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,SAAS,KAAK,YACb,qBAAC,OAAD;GAEE,MAAK;GACL,aAAW,WAAW,QAAQ;GAC9B,WAAW,GACT,6GACA,cAAc,QAAQ,SAAS,MACjC;aAPF;IASG,cAAc,QAAQ,SAAS;IAChC,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,QACP,oBAAC,KAAD;OAAG,WAAU;iBAAkC,QAAQ;MAAS,CAAA,IAC9D;MACJ,oBAAC,KAAD;OAAG,WAAU;iBAAsB,QAAQ;MAAW,CAAA;MACrD,QAAQ,SACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,YAAD,EAAY,MAAM,QAAQ,OAAS,CAAA;MAChC,CAAA,IACH;KACD;;IACJ,QAAQ,cACP,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,gBAAgB,SAAS;KACvC,aAAU;KACV,WAAU;KACV,eAAe,QAAQ,QAAQ,EAAE;eAEjC,oBAAC,MAAD;MAAM,MAAK;MAAI,WAAU;KAAmB,CAAA;IACtC,CAAA,IACN;GACD;KA/BE,QAAQ,EA+BV,CACN;CACE,CAAA;AAET"}

package/dist/layout/components.js

@@ -1,15 +1,23 @@
 import { createPlugin, eagerComponent } from "../core/registry.js";
+import BreadcrumbsComponent from "./breadcrumbs.js";
+import Callouts from "./callouts.js";
+import DropdownComponent from "./dropdown.js";
 import MenuComponent from "./menu.js";
 import MenuItemComponent from "./menu-item.js";
 import OutletComponent from "./outlet.js";
 import SidebarComponent from "./sidebar.js";
+import TopbarComponent from "./topbar.js";
 //#region resources/js/layout/components.ts
 var layoutComponents = createPlugin({
 	components: {
+		breadcrumbs: eagerComponent(BreadcrumbsComponent),
+		callouts: eagerComponent(Callouts),
+		dropdown: eagerComponent(DropdownComponent),
 		menu: eagerComponent(MenuComponent),
 		"menu-item": eagerComponent(MenuItemComponent),
 		outlet: eagerComponent(OutletComponent),
-		sidebar: eagerComponent(SidebarComponent)
+		sidebar: eagerComponent(SidebarComponent),
+		topbar: eagerComponent(TopbarComponent)
 	},
 	name: "lattice/layout"
 });

package/dist/layout/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","names":[],"sources":["../../resources/js/layout/components.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice/lattice/core/registry\";\nimport MenuComponent from \"./menu\";\nimport MenuItemComponent from \"./menu-item\";\nimport OutletComponent from \"./outlet\";\nimport SidebarComponent from \"./sidebar\";\n\nexport const layoutComponents = createPlugin({\n  components: {\n    menu: eagerComponent(MenuComponent),\n    \"menu-item\": eagerComponent(MenuItemComponent),\n    outlet: eagerComponent(OutletComponent),\n    sidebar: eagerComponent(SidebarComponent),\n  },\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;AAMA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,MAAM,eAAe,aAAa;EAClC,aAAa,eAAe,iBAAiB;EAC7C,QAAQ,eAAe,eAAe;EACtC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"components.js","names":[],"sources":["../../resources/js/layout/components.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport BreadcrumbsComponent from \"./breadcrumbs\";\nimport CalloutsComponent from \"./callouts\";\nimport DropdownComponent from \"./dropdown\";\nimport MenuComponent from \"./menu\";\nimport MenuItemComponent from \"./menu-item\";\nimport OutletComponent from \"./outlet\";\nimport SidebarComponent from \"./sidebar\";\nimport TopbarComponent from \"./topbar\";\n\nexport const layoutComponents = createPlugin({\n  components: {\n    breadcrumbs: eagerComponent(BreadcrumbsComponent),\n    callouts: eagerComponent(CalloutsComponent),\n    dropdown: eagerComponent(DropdownComponent),\n    menu: eagerComponent(MenuComponent),\n    \"menu-item\": eagerComponent(MenuItemComponent),\n    outlet: eagerComponent(OutletComponent),\n    sidebar: eagerComponent(SidebarComponent),\n    topbar: eagerComponent(TopbarComponent),\n  },\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,aAAa,eAAe,oBAAoB;EAChD,UAAU,eAAe,QAAiB;EAC1C,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,aAAa,eAAe,iBAAiB;EAC7C,QAAQ,eAAe,eAAe;EACtC,SAAS,eAAe,gBAAgB;EACxC,QAAQ,eAAe,eAAe;CACxC;CACA,MAAM;AACR,CAAC"}

package/dist/layout/context.d.ts

@@ -1,12 +1,4 @@
 import { ReactNode } from 'react';
-/**
- * Carries the active page element down through a server-composed layout schema
- * so the Outlet component can render it wherever the layout places it.
- */
+import { CollapsedContext as SidebarCollapsedContext, useCollapsed as useSidebarCollapsed } from '../core/collapsed-context';
 export declare const OutletContext: import('react').Context<ReactNode>;
-/**
- * Whether the enclosing Sidebar is collapsed to its icon rail. Menu items read
- * this to render icon-only and surface their submenu as a flyout instead.
- */
-export declare const SidebarCollapsedContext: import('react').Context<boolean>;
-export declare function useSidebarCollapsed(): boolean;
+export { SidebarCollapsedContext, useSidebarCollapsed };

package/dist/layout/context.js

@@ -1,19 +1,8 @@
-import { createContext, useContext } from "react";
+import { CollapsedContext, useCollapsed } from "../core/collapsed-context.js";
+import { createContext } from "react";
 //#region resources/js/layout/context.ts
-/**
-* Carries the active page element down through a server-composed layout schema
-* so the Outlet component can render it wherever the layout places it.
-*/
 var OutletContext = createContext(null);
-/**
-* Whether the enclosing Sidebar is collapsed to its icon rail. Menu items read
-* this to render icon-only and surface their submenu as a flyout instead.
-*/
-var SidebarCollapsedContext = createContext(false);
-function useSidebarCollapsed() {
-	return useContext(SidebarCollapsedContext);
-}
 //#endregion
-export { OutletContext, SidebarCollapsedContext, useSidebarCollapsed };
+export { OutletContext, CollapsedContext as SidebarCollapsedContext, useCollapsed as useSidebarCollapsed };
 
 //# sourceMappingURL=context.js.map

package/dist/layout/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../resources/js/layout/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ReactNode } from \"react\";\n\n/**\n * Carries the active page element down through a server-composed layout schema\n * so the Outlet component can render it wherever the layout places it.\n */\nexport const OutletContext = createContext<ReactNode>(null);\n\n/**\n * Whether the enclosing Sidebar is collapsed to its icon rail. Menu items read\n * this to render icon-only and surface their submenu as a flyout instead.\n */\nexport const SidebarCollapsedContext = createContext(false);\n\nexport function useSidebarCollapsed(): boolean {\n  return useContext(SidebarCollapsedContext);\n}\n"],"mappings":";;;;;;AAOA,IAAa,gBAAgB,cAAyB,IAAI;;;;;AAM1D,IAAa,0BAA0B,cAAc,KAAK;AAE1D,SAAgB,sBAA+B;CAC7C,OAAO,WAAW,uBAAuB;AAC3C"}
+{"version":3,"file":"context.js","names":[],"sources":["../../resources/js/layout/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  CollapsedContext as SidebarCollapsedContext,\n  useCollapsed as useSidebarCollapsed,\n} from \"../core/collapsed-context\";\n\nexport const OutletContext = createContext<ReactNode>(null);\n\nexport { SidebarCollapsedContext, useSidebarCollapsed };\n"],"mappings":";;;AAOA,IAAa,gBAAgB,cAAyB,IAAI"}

package/dist/layout/dropdown.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../core/types';
+declare const DropdownComponent: RendererComponent<"dropdown">;
+export default DropdownComponent;

package/dist/layout/dropdown.js

@@ -0,0 +1,24 @@
+import { RenderNode } from "../core/renderer.js";
+import { Popover } from "./popover.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/layout/dropdown.tsx
+var DropdownComponent = ({ children, node }) => {
+	const testId = node.key ?? "dropdown";
+	return /* @__PURE__ */ jsx(Popover, {
+		placement: node.props.placement,
+		testId,
+		triggerClassName: "w-auto",
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 items-center rounded-lt-sm px-2 py-1.5 text-sm hover:bg-lt-muted",
+			children: node.props.trigger.map((triggerNode, index) => /* @__PURE__ */ jsx(RenderNode, { node: triggerNode }, triggerNode.key ?? `${triggerNode.type}-${index}`))
+		}),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-1",
+			children
+		})
+	});
+};
+//#endregion
+export { DropdownComponent as default };
+
+//# sourceMappingURL=dropdown.js.map

package/dist/layout/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../resources/js/layout/dropdown.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { Popover } from \"./popover\";\n\nconst DropdownComponent: RendererComponent<\"dropdown\"> = ({ children, node }) => {\n  const testId = node.key ?? \"dropdown\";\n\n  return (\n    <Popover\n      placement={node.props.placement}\n      testId={testId}\n      triggerClassName=\"w-auto\"\n      trigger={\n        <span className=\"flex min-w-0 items-center rounded-lt-sm px-2 py-1.5 text-sm hover:bg-lt-muted\">\n          {node.props.trigger.map((triggerNode, index) => (\n            <RenderNode\n              key={triggerNode.key ?? `${triggerNode.type}-${index}`}\n              node={triggerNode}\n            />\n          ))}\n        </span>\n      }\n    >\n      <ul className=\"flex flex-col gap-1\">{children}</ul>\n    </Popover>\n  );\n};\n\nexport default DropdownComponent;\n"],"mappings":";;;;AAIA,IAAM,qBAAoD,EAAE,UAAU,WAAW;CAC/E,MAAM,SAAS,KAAK,OAAO;CAE3B,OACE,oBAAC,SAAD;EACE,WAAW,KAAK,MAAM;EACd;EACR,kBAAiB;EACjB,SACE,oBAAC,QAAD;GAAM,WAAU;aACb,KAAK,MAAM,QAAQ,KAAK,aAAa,UACpC,oBAAC,YAAD,EAEE,MAAM,YACP,GAFM,YAAY,OAAO,GAAG,YAAY,KAAK,GAAG,OAEhD,CACF;EACG,CAAA;YAGR,oBAAC,MAAD;GAAI,WAAU;GAAuB;EAAa,CAAA;CAC3C,CAAA;AAEb"}

package/dist/layout/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Callouts } from './callouts';
 export { layoutComponents } from './components';
-export { OutletContext } from './context';
+export { OutletContext, SidebarCollapsedContext, useSidebarCollapsed } from './context';
 export { default as SchemaLayout } from './schema-layout';