@lattice-php/lattice 0.1.0 → 0.2.0

package/dist/i18n/index.js

@@ -0,0 +1,3 @@
+import { i18n, translate, useT } from "./instance.js";
+import { configureI18n, enableBackend } from "./backend.js";
+export { configureI18n, enableBackend, i18n, translate, useT };

package/dist/i18n/instance.js

@@ -0,0 +1,48 @@
+import { instance } from "../node_modules/i18next/dist/esm/i18next.js";
+import { initReactI18next } from "../node_modules/react-i18next/dist/es/initReactI18next.js";
+import { useTranslation } from "../node_modules/react-i18next/dist/es/useTranslation.js";
+//#region resources/js/i18n/instance.ts
+var NAMESPACE = "lattice";
+function detectLanguage() {
+	if (typeof document !== "undefined" && document.documentElement.lang) return document.documentElement.lang;
+	return "en";
+}
+/** Lattice's own i18next instance, isolated from the host app's. */
+var i18n = instance.createInstance().use(initReactI18next);
+var initialization;
+/**
+* Initialize the instance exactly once. The first caller wins — a rendered
+* component (inline English, zero config) or `enableBackend()`, which registers
+* its backend first because i18next can only wire a backend during `init`.
+*/
+function ensureI18n(extend) {
+	if (!initialization) {
+		const base = {
+			lng: detectLanguage(),
+			fallbackLng: "en",
+			ns: [NAMESPACE],
+			defaultNS: NAMESPACE,
+			interpolation: { escapeValue: false },
+			react: { useSuspense: false }
+		};
+		initialization = i18n.init(extend ? extend(base) : base);
+	}
+	return initialization;
+}
+/** Translation hook bound to Lattice's instance. The chrome passes `"lattice"`; consumers pass their own namespace. */
+function useT(namespace) {
+	ensureI18n();
+	return useTranslation(namespace, { i18n });
+}
+/** Translate a key in the given namespace with an inline fallback, outside of a component. */
+function translate(namespace, key, defaultValue, options) {
+	ensureI18n();
+	return i18n.t(key, defaultValue, {
+		ns: namespace,
+		...options
+	});
+}
+//#endregion
+export { ensureI18n, i18n, translate, useT };
+
+//# sourceMappingURL=instance.js.map

package/dist/i18n/instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instance.js","names":[],"sources":["../../resources/js/i18n/instance.ts"],"sourcesContent":["import i18next, { type InitOptions } from \"i18next\";\nimport { initReactI18next, useTranslation } from \"react-i18next\";\n\nconst NAMESPACE = \"lattice\";\n\nfunction detectLanguage(): string {\n  if (typeof document !== \"undefined\" && document.documentElement.lang) {\n    return document.documentElement.lang;\n  }\n\n  return \"en\";\n}\n\n/** Lattice's own i18next instance, isolated from the host app's. */\nexport const i18n = i18next.createInstance().use(initReactI18next);\n\nlet initialization: Promise<unknown> | undefined;\n\n/**\n * Initialize the instance exactly once. The first caller wins — a rendered\n * component (inline English, zero config) or `enableBackend()`, which registers\n * its backend first because i18next can only wire a backend during `init`.\n */\nexport function ensureI18n(extend?: (base: InitOptions) => InitOptions): Promise<unknown> {\n  if (!initialization) {\n    const base: InitOptions = {\n      lng: detectLanguage(),\n      fallbackLng: \"en\",\n      ns: [NAMESPACE],\n      defaultNS: NAMESPACE,\n      interpolation: { escapeValue: false },\n      react: { useSuspense: false },\n    };\n\n    initialization = i18n.init(extend ? extend(base) : base);\n  }\n\n  return initialization;\n}\n\n/** Translation hook bound to Lattice's instance. The chrome passes `\"lattice\"`; consumers pass their own namespace. */\nexport function useT(namespace: string) {\n  ensureI18n();\n\n  return useTranslation(namespace, { i18n });\n}\n\n/** Translate a key in the given namespace with an inline fallback, outside of a component. */\nexport function translate(\n  namespace: string,\n  key: string,\n  defaultValue: string,\n  options?: Record<string, unknown>,\n): string {\n  ensureI18n();\n\n  return i18n.t(key, defaultValue, { ns: namespace, ...options });\n}\n"],"mappings":";;;;AAGA,IAAM,YAAY;AAElB,SAAS,iBAAyB;CAChC,IAAI,OAAO,aAAa,eAAe,SAAS,gBAAgB,MAC9D,OAAO,SAAS,gBAAgB;CAGlC,OAAO;AACT;;AAGA,IAAa,OAAO,SAAQ,eAAe,EAAE,IAAI,gBAAgB;AAEjE,IAAI;;;;;;AAOJ,SAAgB,WAAW,QAA+D;CACxF,IAAI,CAAC,gBAAgB;EACnB,MAAM,OAAoB;GACxB,KAAK,eAAe;GACpB,aAAa;GACb,IAAI,CAAC,SAAS;GACd,WAAW;GACX,eAAe,EAAE,aAAa,MAAM;GACpC,OAAO,EAAE,aAAa,MAAM;EAC9B;EAEA,iBAAiB,KAAK,KAAK,SAAS,OAAO,IAAI,IAAI,IAAI;CACzD;CAEA,OAAO;AACT;;AAGA,SAAgB,KAAK,WAAmB;CACtC,WAAW;CAEX,OAAO,eAAe,WAAW,EAAE,KAAK,CAAC;AAC3C;;AAGA,SAAgB,UACd,WACA,KACA,cACA,SACQ;CACR,WAAW;CAEX,OAAO,KAAK,EAAE,KAAK,cAAc;EAAE,IAAI;EAAW,GAAG;CAAQ,CAAC;AAChE"}

package/dist/icons/icon-renderer.js

@@ -1,8 +1,9 @@
-import { renderBundledIcon, renderMissingIcon } from "./default-icons.js";
+import { cn } from "../lib/utils.js";
+import { Icon, useSprite } from "./sprite.js";
 import { createContext, useContext, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/icons/icon-renderer.tsx
-var IconRenderersContext = createContext([renderBundledIcon]);
+var IconRenderersContext = createContext([]);
 function IconRendererProvider({ children, mode = "stack", renderer }) {
 	const parentRenderers = useContext(IconRenderersContext);
 	const renderers = useMemo(() => mode === "replace" ? [renderer] : [renderer, ...parentRenderers], [
@@ -17,6 +18,7 @@ function IconRendererProvider({ children, mode = "stack", renderer }) {
 }
 function IconRenderer({ className, icon }) {
 	const renderers = useContext(IconRenderersContext);
+	const { ids } = useSprite();
 	for (const renderer of renderers) {
 		const rendered = renderer({
 			className,
@@ -24,9 +26,32 @@ function IconRenderer({ className, icon }) {
 		});
 		if (rendered !== null && rendered !== void 0 && rendered !== false) return rendered;
 	}
-	return renderMissingIcon({
+	if (ids && !ids.includes(icon)) return /* @__PURE__ */ jsx(MissingIcon, { className });
+	return /* @__PURE__ */ jsx(Icon, {
 		className,
-		icon
+		name: icon
+	});
+}
+function MissingIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: cn("size-lt-icon-md text-lt-muted-fg", className),
+		"data-lattice-missing-icon": "",
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
 	});
 }
 //#endregion

package/dist/icons/icon-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-renderer.js","names":[],"sources":["../../resources/js/icons/icon-renderer.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { renderBundledIcon, renderMissingIcon } from \"./default-icons\";\n\nexport type IconRendererProps = {\n  className?: string;\n  icon: string;\n};\n\nexport type IconRendererFunction = (props: IconRendererProps) => ReactNode;\n\ntype IconRendererProviderProps = {\n  children: ReactNode;\n  mode?: \"replace\" | \"stack\";\n  renderer: IconRendererFunction;\n};\n\nconst IconRenderersContext = createContext<IconRendererFunction[]>([renderBundledIcon]);\nconst loggedMissingIcons = new Set<string>();\n\nexport function IconRendererProvider({\n  children,\n  mode = \"stack\",\n  renderer,\n}: IconRendererProviderProps) {\n  const parentRenderers = useContext(IconRenderersContext);\n  const renderers = useMemo(\n    () => (mode === \"replace\" ? [renderer] : [renderer, ...parentRenderers]),\n    [mode, parentRenderers, renderer],\n  );\n\n  return (\n    <IconRenderersContext.Provider value={renderers}>{children}</IconRenderersContext.Provider>\n  );\n}\n\nexport function IconRenderer({ className, icon }: IconRendererProps) {\n  const renderers = useContext(IconRenderersContext);\n\n  for (const renderer of renderers) {\n    const rendered = renderer({ className, icon });\n\n    if (rendered !== null && rendered !== undefined && rendered !== false) {\n      return rendered;\n    }\n  }\n\n  logMissingIcon(icon);\n\n  return renderMissingIcon({ className, icon });\n}\n\nfunction logMissingIcon(icon: string): void {\n  if (!import.meta.env.DEV || loggedMissingIcons.has(icon)) {\n    return;\n  }\n\n  loggedMissingIcons.add(icon);\n  console.log(`[Lattice] Missing icon renderer for \"${icon}\".`);\n}\n"],"mappings":";;;;AAiBA,IAAM,uBAAuB,cAAsC,CAAC,iBAAiB,CAAC;AAGtF,SAAgB,qBAAqB,EACnC,UACA,OAAO,SACP,YAC4B;CAC5B,MAAM,kBAAkB,WAAW,oBAAoB;CACvD,MAAM,YAAY,cACT,SAAS,YAAY,CAAC,QAAQ,IAAI,CAAC,UAAU,GAAG,eAAe,GACtE;EAAC;EAAM;EAAiB;CAAQ,CAClC;CAEA,OACE,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAY;CAAwC,CAAA;AAE9F;AAEA,SAAgB,aAAa,EAAE,WAAW,QAA2B;CACnE,MAAM,YAAY,WAAW,oBAAoB;CAEjD,KAAK,MAAM,YAAY,WAAW;EAChC,MAAM,WAAW,SAAS;GAAE;GAAW;EAAK,CAAC;EAE7C,IAAI,aAAa,QAAQ,aAAa,KAAA,KAAa,aAAa,OAC9D,OAAO;CAEX;CAIA,OAAO,kBAAkB;EAAE;EAAW;CAAK,CAAC;AAC9C"}
+{"version":3,"file":"icon-renderer.js","names":[],"sources":["../../resources/js/icons/icon-renderer.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, useSprite } from \"./sprite\";\n\nexport type IconRendererProps = {\n  className?: string;\n  icon: string;\n};\n\nexport type IconRendererFunction = (props: IconRendererProps) => ReactNode;\n\ntype IconRendererProviderProps = {\n  children: ReactNode;\n  mode?: \"replace\" | \"stack\";\n  renderer: IconRendererFunction;\n};\n\nconst IconRenderersContext = createContext<IconRendererFunction[]>([]);\nconst loggedMissingIcons = new Set<string>();\n\nexport function IconRendererProvider({\n  children,\n  mode = \"stack\",\n  renderer,\n}: IconRendererProviderProps) {\n  const parentRenderers = useContext(IconRenderersContext);\n  const renderers = useMemo(\n    () => (mode === \"replace\" ? [renderer] : [renderer, ...parentRenderers]),\n    [mode, parentRenderers, renderer],\n  );\n\n  return (\n    <IconRenderersContext.Provider value={renderers}>{children}</IconRenderersContext.Provider>\n  );\n}\n\nexport function IconRenderer({ className, icon }: IconRendererProps) {\n  const renderers = useContext(IconRenderersContext);\n  const { ids } = useSprite();\n\n  // Custom renderers (the override stack) take precedence over the sprite.\n  for (const renderer of renderers) {\n    const rendered = renderer({ className, icon });\n\n    if (rendered !== null && rendered !== undefined && rendered !== false) {\n      return rendered;\n    }\n  }\n\n  // When the sprite is wired and the icon is genuinely absent, show a visible\n  // marker. When `ids` is unknown (not yet wired), optimistically emit the\n  // sprite reference rather than crying wolf.\n  if (ids && !ids.includes(icon)) {\n    logMissingIcon(icon);\n    return <MissingIcon className={className} />;\n  }\n\n  return <Icon className={className} name={icon} />;\n}\n\nfunction MissingIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\"size-lt-icon-md text-lt-muted-fg\", className)}\n      data-lattice-missing-icon=\"\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n      <path d=\"M12 17h.01\" />\n    </svg>\n  );\n}\n\nfunction logMissingIcon(icon: string): void {\n  if (!import.meta.env.DEV || loggedMissingIcons.has(icon)) {\n    return;\n  }\n\n  loggedMissingIcons.add(icon);\n  console.log(`[Lattice] Missing icon renderer for \"${icon}\".`);\n}\n"],"mappings":";;;;;AAkBA,IAAM,uBAAuB,cAAsC,CAAC,CAAC;AAGrE,SAAgB,qBAAqB,EACnC,UACA,OAAO,SACP,YAC4B;CAC5B,MAAM,kBAAkB,WAAW,oBAAoB;CACvD,MAAM,YAAY,cACT,SAAS,YAAY,CAAC,QAAQ,IAAI,CAAC,UAAU,GAAG,eAAe,GACtE;EAAC;EAAM;EAAiB;CAAQ,CAClC;CAEA,OACE,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAY;CAAwC,CAAA;AAE9F;AAEA,SAAgB,aAAa,EAAE,WAAW,QAA2B;CACnE,MAAM,YAAY,WAAW,oBAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU;CAG1B,KAAK,MAAM,YAAY,WAAW;EAChC,MAAM,WAAW,SAAS;GAAE;GAAW;EAAK,CAAC;EAE7C,IAAI,aAAa,QAAQ,aAAa,KAAA,KAAa,aAAa,OAC9D,OAAO;CAEX;CAKA,IAAI,OAAO,CAAC,IAAI,SAAS,IAAI,GAE3B,OAAO,oBAAC,aAAD,EAAwB,UAAY,CAAA;CAG7C,OAAO,oBAAC,MAAD;EAAiB;EAAW,MAAM;CAAO,CAAA;AAClD;AAEA,SAAS,YAAY,EAAE,aAAqC;CAC1D,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAW,GAAG,oCAAoC,SAAS;EAC3D,6BAA0B;EAC1B,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAY;EACZ,SAAQ;YATV;GAWE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAM,CAAA;GAChC,oBAAC,QAAD,EAAM,GAAE,uCAAwC,CAAA;GAChD,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET"}

package/dist/icons/index.d.ts

@@ -1,2 +1,4 @@
+export { Icon, SpriteProvider, useSprite } from './sprite';
+export type { IconName, KnownIcons, SpriteValue } from './sprite';
 export { IconRenderer, IconRendererProvider } from './icon-renderer';
 export type { IconRendererFunction, IconRendererProps } from './icon-renderer';

package/dist/icons/index.js

@@ -1,2 +1,3 @@
+import { Icon, SpriteProvider, useSprite } from "./sprite.js";
 import { IconRenderer, IconRendererProvider } from "./icon-renderer.js";
-export { IconRenderer, IconRendererProvider };
+export { Icon, IconRenderer, IconRendererProvider, SpriteProvider, useSprite };

package/dist/icons/sprite.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface KnownIcons {
+}
+export type IconName = keyof KnownIcons | (string & {});
+export type SpriteValue = {
+    /** The sprite URL. Empty when the sprite is inlined into the document (dev). */
+    href: string;
+    /** Every symbol id in the sprite, or undefined when not yet wired/known. */
+    ids?: readonly string[];
+    /** Inline sprite markup to inject once (dev); empty/omitted in builds. */
+    source?: string;
+};
+/**
+ * Seeds the icon sprite for everything below it. When `sprite.source` is set
+ * (dev), it's injected once so same-document `<use href="#id">` references
+ * resolve; in builds `href` points at the emitted sprite asset instead.
+ */
+export declare function SpriteProvider({ children, sprite }: {
+    children: ReactNode;
+    sprite: SpriteValue;
+}): import("react").JSX.Element;
+export declare function useSprite(): SpriteValue;
+/**
+ * Renders a single sprite symbol by name. Used for Lattice's own UI chrome and
+ * as the resolved default for server-driven icons. Extra `<svg>` props are
+ * forwarded, so callers can override `aria-hidden`, set a `role`, etc.
+ */
+export declare function Icon({ className, name, ...props }: {
+    name: IconName;
+} & React.ComponentProps<"svg">): import("react").JSX.Element;

package/dist/icons/sprite.js

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/icons/sprite.tsx
+var SpriteContext = createContext({ href: "" });
+/**
+* Seeds the icon sprite for everything below it. When `sprite.source` is set
+* (dev), it's injected once so same-document `<use href="#id">` references
+* resolve; in builds `href` points at the emitted sprite asset instead.
+*/
+function SpriteProvider({ children, sprite }) {
+	return /* @__PURE__ */ jsxs(SpriteContext.Provider, {
+		value: sprite,
+		children: [sprite.source ? /* @__PURE__ */ jsx("div", {
+			hidden: true,
+			dangerouslySetInnerHTML: { __html: sprite.source }
+		}) : null, children]
+	});
+}
+function useSprite() {
+	return useContext(SpriteContext);
+}
+/**
+* Renders a single sprite symbol by name. Used for Lattice's own UI chrome and
+* as the resolved default for server-driven icons. Extra `<svg>` props are
+* forwarded, so callers can override `aria-hidden`, set a `role`, etc.
+*/
+function Icon({ className, name, ...props }) {
+	const { href, ids } = useSprite();
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		...props,
+		className: cn("size-lt-icon-md", className),
+		children: /* @__PURE__ */ jsx("use", { href: `${href}#${name}` })
+	});
+}
+//#endregion
+export { Icon, SpriteProvider, useSprite };
+
+//# sourceMappingURL=sprite.js.map

package/dist/icons/sprite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sprite.js","names":[],"sources":["../../resources/js/icons/sprite.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n// Augmentable registry of icon names. The sprite plugin can generate a\n// `declare module \"@lattice-php/lattice\" { interface KnownIcons { … } }` block\n// from the built sprite, which turns `IconName` into the real set for\n// autocomplete. Unaugmented it falls back to `string`, so any name still works.\nexport interface KnownIcons {}\nexport type IconName = keyof KnownIcons | (string & {});\n\nexport type SpriteValue = {\n  /** The sprite URL. Empty when the sprite is inlined into the document (dev). */\n  href: string;\n  /** Every symbol id in the sprite, or undefined when not yet wired/known. */\n  ids?: readonly string[];\n  /** Inline sprite markup to inject once (dev); empty/omitted in builds. */\n  source?: string;\n};\n\nconst SpriteContext = createContext<SpriteValue>({ href: \"\" });\n\n/**\n * Seeds the icon sprite for everything below it. When `sprite.source` is set\n * (dev), it's injected once so same-document `<use href=\"#id\">` references\n * resolve; in builds `href` points at the emitted sprite asset instead.\n */\nexport function SpriteProvider({ children, sprite }: { children: ReactNode; sprite: SpriteValue }) {\n  return (\n    <SpriteContext.Provider value={sprite}>\n      {sprite.source ? <div hidden dangerouslySetInnerHTML={{ __html: sprite.source }} /> : null}\n      {children}\n    </SpriteContext.Provider>\n  );\n}\n\nexport function useSprite(): SpriteValue {\n  return useContext(SpriteContext);\n}\n\nconst warnedIcons = new Set<string>();\n\n/**\n * Renders a single sprite symbol by name. Used for Lattice's own UI chrome and\n * as the resolved default for server-driven icons. Extra `<svg>` props are\n * forwarded, so callers can override `aria-hidden`, set a `role`, etc.\n */\nexport function Icon({\n  className,\n  name,\n  ...props\n}: { name: IconName } & React.ComponentProps<\"svg\">) {\n  const { href, ids } = useSprite();\n\n  if (import.meta.env.DEV && ids && !ids.includes(name) && !warnedIcons.has(name)) {\n    warnedIcons.add(name);\n    console.warn(`[Lattice] Icon \"${name}\" is not in the sprite.`);\n  }\n\n  return (\n    <svg aria-hidden=\"true\" {...props} className={cn(\"size-lt-icon-md\", className)}>\n      <use href={`${href}#${name}`} />\n    </svg>\n  );\n}\n"],"mappings":";;;;AAoBA,IAAM,gBAAgB,cAA2B,EAAE,MAAM,GAAG,CAAC;;;;;;AAO7D,SAAgB,eAAe,EAAE,UAAU,UAAwD;CACjG,OACE,qBAAC,cAAc,UAAf;EAAwB,OAAO;YAA/B,CACG,OAAO,SAAS,oBAAC,OAAD;GAAK,QAAA;GAAO,yBAAyB,EAAE,QAAQ,OAAO,OAAO;EAAI,CAAA,IAAI,MACrF,QACqB;;AAE5B;AAEA,SAAgB,YAAyB;CACvC,OAAO,WAAW,aAAa;AACjC;;;;;;AASA,SAAgB,KAAK,EACnB,WACA,MACA,GAAG,SACgD;CACnD,MAAM,EAAE,MAAM,QAAQ,UAAU;CAOhC,OACE,oBAAC,OAAD;EAAK,eAAY;EAAO,GAAI;EAAO,WAAW,GAAG,mBAAmB,SAAS;YAC3E,oBAAC,OAAD,EAAK,MAAM,GAAG,KAAK,GAAG,OAAS,CAAA;CAC5B,CAAA;AAET"}

package/dist/index.d.ts

@@ -3,20 +3,24 @@ export { dispatchActionEffects, dispatchActionError, getActionEffects, isActionE
 export { initializeTheme, useAppearance } from './appearance';
 export { copyToClipboard, useClipboard } from './clipboard';
 export { EventBridge } from './events/event-bridge';
-export { IconRenderer, IconRendererProvider } from './icons';
+export { Icon, IconRenderer, IconRendererProvider, SpriteProvider } from './icons';
 export { createLayoutResolver, createPageResolver, pageComponentName } from './inertia';
-export { useMenu } from './menu';
-export { Provider, useRegistry } from './provider';
+export { layoutComponents, OutletContext, SchemaLayout } from './layout';
+export { Provider, useColumnRegistry, useRegistry } from './provider';
+export { Toaster } from './toast';
 export { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent, } from './core/registry';
+export type { Plugin, Registry } from './core/registry';
 export { Renderer } from './core/renderer';
 export { LATTICE_REF_HEADER, withRefHeader } from './core/component-ref';
 export { LATTICE_EVENT } from './events/event-names';
 export type { ButtonVariant } from './core/components/button';
 export type { ReloadComponentEvent } from './events/event-names';
-export type { ComponentProps, ComponentType, KnownPageContainer, MenuGroup, MenuItem, MenuPayload, Node, NodeProps, PageContainer, PageBreadcrumb, PagePayload, RendererComponent, RendererComponentModule, RendererComponentProps, UnknownComponent, } from './core/types';
+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 type { ColumnProps, ColumnPropsOf } from './table/types';
 export type { Method } from '@inertiajs/core';
 export type { ActionEffect } from './action/effects';
 export type { ResolvedAppearance, UseAppearanceReturn } from './appearance';
 export type { CopiedValue, CopyFn, UseClipboardReturn } from './clipboard';
 export type { Appearance, ToastMessage, ToastVariant } from './events/event-bridge';
-export type { IconRendererFunction, IconRendererProps } from './icons';
+export type { IconName, IconRendererFunction, IconRendererProps, KnownIcons, SpriteValue, } from './icons';

package/dist/index.js

@@ -1,14 +1,18 @@
 import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
 import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.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 { Renderer } from "./core/renderer.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 { Provider, useRegistry } from "./provider.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";
-import { useMenu } from "./menu/use-menu.js";
-export { EventBridge, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, Provider, Renderer, copyToClipboard, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionEffects, dispatchActionError, eagerComponent, extendRegistry, getActionEffects, initializeTheme, isActionEffect, lazyComponent, pageComponentName, registry, useAppearance, useClipboard, useMenu, useRegistry, withRefHeader };
+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 };

package/dist/inertia.d.ts

@@ -5,13 +5,8 @@ export type ResolvedPage = ResolvedComponent | Promise<ResolvedComponent> | {
     default: ResolvedComponent;
 };
 export type PageModules = Record<string, () => Promise<ResolvedComponent>>;
-export type Layouts = {
-    app: unknown;
-    auth: unknown;
-};
 export type CreateLayoutResolverOptions = {
     defaultLayout?: (name: string, page: InertiaPage) => unknown;
-    layouts: Layouts;
 };
 export declare function createPageResolver(pages: PageModules): (name: string) => ResolvedPage;
-export declare function createLayoutResolver({ defaultLayout, layouts }: CreateLayoutResolverOptions): (name: string, page: InertiaPage) => unknown;
+export declare function createLayoutResolver({ defaultLayout }?: CreateLayoutResolverOptions): (name: string, page: InertiaPage) => unknown;

package/dist/inertia.js

@@ -1,3 +1,4 @@
+import SchemaLayout from "./layout/schema-layout.js";
 import Page from "./page.js";
 //#region resources/js/inertia.ts
 var pageComponentName = "lattice/page";
@@ -9,15 +10,10 @@ function createPageResolver(pages) {
 		throw new Error(`Page not found: ${name}`);
 	};
 }
-function createLayoutResolver({ defaultLayout, layouts }) {
+function createLayoutResolver({ defaultLayout } = {}) {
 	return (name, page) => {
-		if (name === "lattice/page") {
-			const lattice = page.props.lattice;
-			if (lattice?.layout === "app") return [layouts.app, { breadcrumbs: lattice.breadcrumbs }];
-			if (lattice?.layout === "auth") return layouts.auth;
-			return null;
-		}
-		return defaultLayout?.(name, page) ?? layouts.app;
+		if (name === "lattice/page") return page.props.lattice?.layout ? SchemaLayout : null;
+		return defaultLayout?.(name, page) ?? null;
 	};
 }
 //#endregion

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 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 Layouts = {\n  app: unknown;\n  auth: unknown;\n};\n\nexport type CreateLayoutResolverOptions = {\n  defaultLayout?: (name: string, page: InertiaPage) => unknown;\n  layouts: Layouts;\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, layouts }: CreateLayoutResolverOptions) {\n  return (name: string, page: InertiaPage): unknown => {\n    if (name === pageComponentName) {\n      const lattice = page.props.lattice as PagePayload | undefined;\n\n      if (lattice?.layout === \"app\") {\n        return [layouts.app, { breadcrumbs: lattice.breadcrumbs }];\n      }\n\n      if (lattice?.layout === \"auth\") {\n        return layouts.auth;\n      }\n\n      return null;\n    }\n\n    return defaultLayout?.(name, page) ?? layouts.app;\n  };\n}\n"],"mappings":";;AAKA,IAAa,oBAAoB;AAkBjC,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,eAAe,WAAwC;CAC5F,QAAQ,MAAc,SAA+B;EACnD,IAAI,SAAA,gBAA4B;GAC9B,MAAM,UAAU,KAAK,MAAM;GAE3B,IAAI,SAAS,WAAW,OACtB,OAAO,CAAC,QAAQ,KAAK,EAAE,aAAa,QAAQ,YAAY,CAAC;GAG3D,IAAI,SAAS,WAAW,QACtB,OAAO,QAAQ;GAGjB,OAAO;EACT;EAEA,OAAO,gBAAgB,MAAM,IAAI,KAAK,QAAQ;CAChD;AACF"}
+{"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"}

package/dist/lattice.css

@@ -1,8 +1,3 @@
-/*
- * Register Lattice's component sources with Tailwind. Consumers import this
- * stylesheet from the Composer-installed package, so the path resolves into
- * vendor and Tailwind generates the utilities the components use.
- */
 @source "./**/*.js";
 
 :root,
@@ -26,10 +21,21 @@
   --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-success-fg: var(--success-foreground, oklch(0.985 0 0));
+  --lt-info: var(--info, oklch(0.588 0.158 241));
+  --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);
 
+  --lt-icon-xs: 0.75rem;
+  --lt-icon-sm: 0.875rem;
+  --lt-icon-md: 1rem;
+  --lt-icon-lg: 1.25rem;
+  --lt-icon-xl: 1.5rem;
+
   color-scheme: light;
 }
 
@@ -54,6 +60,11 @@
   --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-success-fg: var(--success-foreground, oklch(0.205 0 0));
+  --lt-info: var(--info, oklch(0.685 0.15 238));
+  --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
 
   color-scheme: dark;
 }
@@ -78,9 +89,122 @@
   --color-lt-border: var(--lt-border);
   --color-lt-input: var(--lt-input);
   --color-lt-ring: var(--lt-ring);
+  --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);
   --radius-lt: var(--lt-radius);
   --radius-lt-sm: var(--lt-radius-sm);
   --radius-lt-xs: var(--lt-radius-xs);
+  --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;
+}
+
+@keyframes lt-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes lt-toast-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+}
+
+/*
+ * Status colours for Badge and Icon table cells. Each tone sets a soft
+ * background and a readable foreground in oklch; the `.dark` block swaps them.
+ * Defined here (not as utility strings in the renderer) so the palette lives
+ * with the theme and can be overridden, and so the cells can pick a tone by
+ * name without Tailwind needing to see every class. Gray follows the muted token.
+ */
+.lt-cell-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--lt-radius-sm);
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  background-color: var(--lt-cell-bg, var(--lt-muted));
+  color: var(--lt-cell-fg, var(--lt-muted-fg));
+}
+
+.lt-cell-icon {
+  display: inline-flex;
+  color: var(--lt-cell-fg, var(--lt-fg));
+}
+
+.lt-cell-tone-gray {
+  --lt-cell-bg: var(--lt-muted);
+  --lt-cell-fg: var(--lt-muted-fg);
+}
+.lt-cell-tone-red {
+  --lt-cell-bg: oklch(0.94 0.03 25);
+  --lt-cell-fg: oklch(0.51 0.19 27);
+}
+.lt-cell-tone-orange {
+  --lt-cell-bg: oklch(0.95 0.04 65);
+  --lt-cell-fg: oklch(0.55 0.14 55);
+}
+.lt-cell-tone-yellow {
+  --lt-cell-bg: oklch(0.96 0.05 100);
+  --lt-cell-fg: oklch(0.52 0.1 85);
+}
+.lt-cell-tone-green {
+  --lt-cell-bg: oklch(0.95 0.05 155);
+  --lt-cell-fg: oklch(0.52 0.13 152);
+}
+.lt-cell-tone-blue {
+  --lt-cell-bg: oklch(0.95 0.03 245);
+  --lt-cell-fg: oklch(0.54 0.17 252);
+}
+.lt-cell-tone-purple {
+  --lt-cell-bg: oklch(0.95 0.03 305);
+  --lt-cell-fg: oklch(0.53 0.19 305);
+}
+
+.dark .lt-cell-tone-red {
+  --lt-cell-bg: oklch(0.29 0.08 27);
+  --lt-cell-fg: oklch(0.83 0.11 27);
+}
+.dark .lt-cell-tone-orange {
+  --lt-cell-bg: oklch(0.3 0.07 65);
+  --lt-cell-fg: oklch(0.84 0.1 65);
+}
+.dark .lt-cell-tone-yellow {
+  --lt-cell-bg: oklch(0.31 0.06 100);
+  --lt-cell-fg: oklch(0.87 0.11 100);
+}
+.dark .lt-cell-tone-green {
+  --lt-cell-bg: oklch(0.3 0.07 155);
+  --lt-cell-fg: oklch(0.85 0.13 155);
+}
+.dark .lt-cell-tone-blue {
+  --lt-cell-bg: oklch(0.3 0.07 245);
+  --lt-cell-fg: oklch(0.84 0.11 250);
+}
+.dark .lt-cell-tone-purple {
+  --lt-cell-bg: oklch(0.3 0.07 305);
+  --lt-cell-fg: oklch(0.85 0.11 305);
 }
 
 /*

package/dist/layout/components.d.ts

@@ -0,0 +1 @@
+export declare const layoutComponents: import('../core/registry').Plugin;

package/dist/layout/components.js

@@ -0,0 +1,19 @@
+import { createPlugin, eagerComponent } from "../core/registry.js";
+import MenuComponent from "./menu.js";
+import MenuItemComponent from "./menu-item.js";
+import OutletComponent from "./outlet.js";
+import SidebarComponent from "./sidebar.js";
+//#region resources/js/layout/components.ts
+var layoutComponents = createPlugin({
+	components: {
+		menu: eagerComponent(MenuComponent),
+		"menu-item": eagerComponent(MenuItemComponent),
+		outlet: eagerComponent(OutletComponent),
+		sidebar: eagerComponent(SidebarComponent)
+	},
+	name: "lattice/layout"
+});
+//#endregion
+export { layoutComponents };
+
+//# sourceMappingURL=components.js.map

package/dist/layout/components.js.map

@@ -0,0 +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"}

package/dist/layout/context.d.ts

@@ -0,0 +1,12 @@
+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.
+ */
+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;

package/dist/layout/context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } 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 };
+
+//# sourceMappingURL=context.js.map

package/dist/layout/context.js.map

@@ -0,0 +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"}

package/dist/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { layoutComponents } from './components';
+export { OutletContext } from './context';
+export { default as SchemaLayout } from './schema-layout';

package/dist/layout/index.js

@@ -0,0 +1,4 @@
+import { OutletContext } from "./context.js";
+import { layoutComponents } from "./components.js";
+import SchemaLayout from "./schema-layout.js";
+export { OutletContext, SchemaLayout, layoutComponents };

package/dist/layout/menu-item.d.ts

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