@lattice-php/lattice 0.4.0 → 0.6.0

package/dist/layout/sidebar.js

@@ -1,45 +1,85 @@
+import { LATTICE_EVENT } from "../events/event-names.js";
 import { cn } from "../lib/utils.js";
-import { Icon } from "../icons/sprite.js";
 import { CollapsedContext } from "../core/collapsed-context.js";
-import { useState } from "react";
+import { nodeIdentity } from "../core/test-id.js";
+import { router } from "@inertiajs/react";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/sidebar.tsx
+var DESKTOP_QUERY = "(min-width: 768px)";
 function readStored(key, remember) {
 	if (!remember || typeof window === "undefined") return false;
 	return window.localStorage.getItem(key) === "true";
 }
+function matchesTarget(event, identity) {
+	const target = event.detail?.target;
+	return target == null || target === identity;
+}
+function useIsDesktop() {
+	const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+	const [isDesktop, setIsDesktop] = useState(() => supported() ? window.matchMedia(DESKTOP_QUERY).matches : true);
+	useEffect(() => {
+		if (!supported()) return;
+		const query = window.matchMedia(DESKTOP_QUERY);
+		const update = () => setIsDesktop(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+	return isDesktop;
+}
 var SidebarComponent = ({ children, node }) => {
 	const collapsible = node.props.collapsible;
 	const rememberState = node.props.rememberState;
-	const storageKey = `lattice:sidebar:${node.id ?? "default"}`;
+	const identity = nodeIdentity(node);
+	const storageKey = `lattice:sidebar:${identity ?? "default"}`;
+	const isDesktop = useIsDesktop();
 	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState));
-	function toggle() {
-		setCollapsed((value) => {
-			const next = !value;
-			if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
-			return next;
-		});
-	}
-	const isCollapsed = collapsible && collapsed;
-	return /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+	const [mobileOpen, setMobileOpen] = useState(false);
+	useEffect(() => {
+		function toggle(event) {
+			if (!matchesTarget(event, identity)) return;
+			if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {
+				if (!collapsible) return;
+				setCollapsed((value) => {
+					const next = !value;
+					if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
+					return next;
+				});
+			} else setMobileOpen((open) => !open);
+		}
+		window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);
+		return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);
+	}, [
+		identity,
+		collapsible,
+		rememberState,
+		storageKey
+	]);
+	useEffect(() => router.on("navigate", () => setMobileOpen(false)), []);
+	useEffect(() => {
+		if (!mobileOpen) return;
+		function close(event) {
+			if (event.key === "Escape") setMobileOpen(false);
+		}
+		window.addEventListener("keydown", close);
+		return () => window.removeEventListener("keydown", close);
+	}, [mobileOpen]);
+	const isCollapsed = collapsible && collapsed && isDesktop;
+	return /* @__PURE__ */ jsxs(CollapsedContext.Provider, {
 		value: isCollapsed,
-		children: /* @__PURE__ */ jsxs("aside", {
-			className: cn("sticky top-0 flex h-svh shrink-0 flex-col gap-4 border-r border-lt-border p-4 transition-[width]", isCollapsed ? "w-16 overflow-visible" : "w-64 overflow-x-hidden overflow-y-auto"),
-			"data-lattice-component": node.id,
-			children: [collapsible ? /* @__PURE__ */ jsx("button", {
-				"aria-expanded": !isCollapsed,
-				"aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-				"data-test": "sidebar-toggle",
-				className: cn("inline-flex items-center rounded-lt-sm p-2 text-lt-fg transition-colors hover:bg-lt-muted", isCollapsed ? "self-center" : "self-end"),
-				onClick: toggle,
-				type: "button",
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: "panel-left",
-					"aria-hidden": "true",
-					className: "size-lt-icon-md shrink-0"
-				})
-			}) : null, children]
-		})
+		children: [mobileOpen ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "fixed inset-0 z-30 bg-black/50 md:hidden",
+			"data-test": "sidebar-backdrop",
+			onClick: () => setMobileOpen(false)
+		}) : null, /* @__PURE__ */ jsx("aside", {
+			className: cn("fixed inset-y-0 left-0 z-40 flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform", "md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]", mobileOpen ? "translate-x-0" : "-translate-x-full", isCollapsed ? "md:w-16 md:overflow-visible" : "md:w-64 md:overflow-x-hidden md:overflow-y-auto"),
+			"data-collapsed": isCollapsed ? "true" : "false",
+			"data-lattice-component": identity,
+			"data-test": "sidebar",
+			children
+		})]
 	});
 };
 //#endregion

package/dist/layout/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const storageKey = `lattice:sidebar:${node.id ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      <aside\n        className={cn(\n          \"sticky top-0 flex h-svh shrink-0 flex-col gap-4 border-r border-lt-border p-4 transition-[width]\",\n          isCollapsed ? \"w-16 overflow-visible\" : \"w-64 overflow-x-hidden overflow-y-auto\",\n        )}\n        data-lattice-component={node.id}\n      >\n        {collapsible ? (\n          <button\n            aria-expanded={!isCollapsed}\n            aria-label={isCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n            data-test=\"sidebar-toggle\"\n            className={cn(\n              \"inline-flex items-center rounded-lt-sm p-2 text-lt-fg transition-colors hover:bg-lt-muted\",\n              isCollapsed ? \"self-center\" : \"self-end\",\n            )}\n            onClick={toggle}\n            type=\"button\"\n          >\n            <Icon name=\"panel-left\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n          </button>\n        ) : null}\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,aAAa,mBAAmB,KAAK,MAAM;CAEjD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAEnC,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,qBAAC,SAAD;GACE,WAAW,GACT,oGACA,cAAc,0BAA0B,wCAC1C;GACA,0BAAwB,KAAK;aAL/B,CAOG,cACC,oBAAC,UAAD;IACE,iBAAe,CAAC;IAChB,cAAY,cAAc,mBAAmB;IAC7C,aAAU;IACV,WAAW,GACT,6FACA,cAAc,gBAAgB,UAChC;IACA,SAAS;IACT,MAAK;cAEL,oBAAC,MAAD;KAAM,MAAK;KAAa,eAAY;KAAO,WAAU;IAA4B,CAAA;GAC3E,CAAA,IACN,MACH,QACI;;CACkB,CAAA;AAE/B"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"../core/collapsed-context\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst DESKTOP_QUERY = \"(min-width: 768px)\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nfunction matchesTarget(event: Event, identity: string | undefined): boolean {\n  const target = (event as CustomEvent<{ target?: string }>).detail?.target;\n\n  return target == null || target === identity;\n}\n\nfunction useIsDesktop(): boolean {\n  const supported = () => typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n  const [isDesktop, setIsDesktop] = useState(() =>\n    supported() ? window.matchMedia(DESKTOP_QUERY).matches : true,\n  );\n\n  useEffect(() => {\n    if (!supported()) {\n      return;\n    }\n\n    const query = window.matchMedia(DESKTOP_QUERY);\n    const update = (): void => setIsDesktop(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return isDesktop;\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:sidebar:${identity ?? \"default\"}`;\n  const isDesktop = useIsDesktop();\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  useEffect(() => {\n    function toggle(event: Event): void {\n      if (!matchesTarget(event, identity)) {\n        return;\n      }\n\n      if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {\n        if (!collapsible) {\n          return;\n        }\n\n        setCollapsed((value) => {\n          const next = !value;\n\n          if (rememberState && typeof window !== \"undefined\") {\n            window.localStorage.setItem(storageKey, String(next));\n          }\n\n          return next;\n        });\n      } else {\n        setMobileOpen((open) => !open);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n\n    return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n  }, [identity, collapsible, rememberState, storageKey]);\n\n  useEffect(() => router.on(\"navigate\", () => setMobileOpen(false)), []);\n\n  useEffect(() => {\n    if (!mobileOpen) {\n      return;\n    }\n\n    function close(event: KeyboardEvent): void {\n      if (event.key === \"Escape\") {\n        setMobileOpen(false);\n      }\n    }\n\n    window.addEventListener(\"keydown\", close);\n\n    return () => window.removeEventListener(\"keydown\", close);\n  }, [mobileOpen]);\n\n  const isCollapsed = collapsible && collapsed && isDesktop;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      {mobileOpen ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"fixed inset-0 z-30 bg-black/50 md:hidden\"\n          data-test=\"sidebar-backdrop\"\n          onClick={() => setMobileOpen(false)}\n        />\n      ) : null}\n      <aside\n        className={cn(\n          \"fixed inset-y-0 left-0 z-40 flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform\",\n          \"md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]\",\n          mobileOpen ? \"translate-x-0\" : \"-translate-x-full\",\n          isCollapsed\n            ? \"md:w-16 md:overflow-visible\"\n            : \"md:w-64 md:overflow-x-hidden md:overflow-y-auto\",\n        )}\n        data-collapsed={isCollapsed ? \"true\" : \"false\"}\n        data-lattice-component={identity}\n        data-test=\"sidebar\"\n      >\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;;;AAQA,IAAM,gBAAgB;AAEtB,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,SAAS,cAAc,OAAc,UAAuC;CAC1E,MAAM,SAAU,MAA2C,QAAQ;CAEnE,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,SAAS,eAAwB;CAC/B,MAAM,kBAAkB,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe;CACtF,MAAM,CAAC,WAAW,gBAAgB,eAChC,UAAU,IAAI,OAAO,WAAW,aAAa,EAAE,UAAU,IAC3D;CAEA,gBAAgB;EACd,IAAI,CAAC,UAAU,GACb;EAGF,MAAM,QAAQ,OAAO,WAAW,aAAa;EAC7C,MAAM,eAAqB,aAAa,MAAM,OAAO;EAErD,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EAEvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAClD,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAClC,IAAI,CAAC,cAAc,OAAO,QAAQ,GAChC;GAGF,IAAI,OAAO,aAAa,aAAa,EAAE,WAAW,MAAM;IACtD,IAAI,CAAC,aACH;IAGF,cAAc,UAAU;KACtB,MAAM,OAAO,CAAC;KAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;KAGtD,OAAO;IACT,CAAC;GACH,OACE,eAAe,SAAS,CAAC,IAAI;EAEjC;EAEA,OAAO,iBAAiB,cAAc,eAAe,MAAM;EAE3D,aAAa,OAAO,oBAAoB,cAAc,eAAe,MAAM;CAC7E,GAAG;EAAC;EAAU;EAAa;EAAe;CAAU,CAAC;CAErD,gBAAgB,OAAO,GAAG,kBAAkB,cAAc,KAAK,CAAC,GAAG,CAAC,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,SAAS,MAAM,OAA4B;GACzC,IAAI,MAAM,QAAQ,UAChB,cAAc,KAAK;EAEvB;EAEA,OAAO,iBAAiB,WAAW,KAAK;EAExC,aAAa,OAAO,oBAAoB,WAAW,KAAK;CAC1D,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,cAAc,eAAe,aAAa;CAEhD,OACE,qBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAAlC,CACG,aACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,aAAU;GACV,eAAe,cAAc,KAAK;EACnC,CAAA,IACC,MACJ,oBAAC,SAAD;GACE,WAAW,GACT,gJACA,qFACA,aAAa,kBAAkB,qBAC/B,cACI,gCACA,iDACN;GACA,kBAAgB,cAAc,SAAS;GACvC,0BAAwB;GACxB,aAAU;GAET;EACI,CAAA,CACkB;;AAE/B"}

package/dist/layout/topbar.js

@@ -1,10 +1,11 @@
 import { cn } from "../lib/utils.js";
+import { nodeIdentity } from "../core/test-id.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/layout/topbar.tsx
 var TopbarComponent = ({ children, node }) => {
 	const sticky = node.props.sticky;
 	return /* @__PURE__ */ jsx("header", {
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		className: cn("flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg", sticky && "sticky top-0 z-30"),
 		children
 	});

package/dist/layout/topbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"topbar.js","names":[],"sources":["../../resources/js/layout/topbar.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst TopbarComponent: RendererComponent<\"topbar\"> = ({ children, node }) => {\n  const sticky = node.props.sticky;\n\n  return (\n    <header\n      data-lattice-component={node.id}\n      className={cn(\n        \"flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg\",\n        sticky && \"sticky top-0 z-30\",\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default TopbarComponent;\n"],"mappings":";;;AAGA,IAAM,mBAAgD,EAAE,UAAU,WAAW;CAC3E,MAAM,SAAS,KAAK,MAAM;CAE1B,OACE,oBAAC,UAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,0FACA,UAAU,mBACZ;EAEC;CACK,CAAA;AAEZ"}
+{"version":3,"file":"topbar.js","names":[],"sources":["../../resources/js/layout/topbar.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst TopbarComponent: RendererComponent<\"topbar\"> = ({ children, node }) => {\n  const sticky = node.props.sticky;\n\n  return (\n    <header\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        \"flex h-14 w-full items-center gap-2 border-b border-lt-border bg-lt-bg px-4 text-lt-fg\",\n        sticky && \"sticky top-0 z-30\",\n      )}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default TopbarComponent;\n"],"mappings":";;;;AAIA,IAAM,mBAAgD,EAAE,UAAU,WAAW;CAC3E,MAAM,SAAS,KAAK,MAAM;CAE1B,OACE,oBAAC,UAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,0FACA,UAAU,mBACZ;EAEC;CACK,CAAA;AAEZ"}

package/dist/registry.js

@@ -1,10 +1,10 @@
 import { createRegistry } from "./core/registry.js";
+import { layoutComponents } from "./layout/components.js";
 import { actionComponents } from "./action/index.js";
 import { chatPlugin } from "./chat/index.js";
 import { coreComponents } from "./core/components/index.js";
 import { formComponents } from "./form/index.js";
 import { remoteComponents } from "./remote/index.js";
-import { layoutComponents } from "./layout/components.js";
 import { tableComponents } from "./table/index.js";
 //#region resources/js/registry.ts
 var registry = createRegistry(coreComponents, actionComponents, formComponents, layoutComponents, tableComponents, chatPlugin, remoteComponents);

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

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

package/dist/remote/index.js

@@ -1,12 +1,8 @@
 import { createPlugin, eagerComponent } from "../core/registry.js";
 import { DataList } from "./components/data-list.js";
-import { RemoteChatBox } from "./components/chat-box.js";
 //#region resources/js/remote/index.ts
 var remoteComponents = createPlugin({
-	components: {
-		"remote.data-list": eagerComponent(DataList),
-		"remote.chat-box": eagerComponent(RemoteChatBox)
-	},
+	components: { "remote.data-list": eagerComponent(DataList) },
 	name: "lattice/remote"
 });
 //#endregion

package/dist/remote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/remote/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport DataListComponent from \"./components/data-list\";\nimport RemoteChatBoxComponent from \"./components/chat-box\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n    \"remote.chat-box\": eagerComponent(RemoteChatBoxComponent),\n  },\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;;AAIA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,oBAAoB,eAAe,QAAiB;EACpD,mBAAmB,eAAe,aAAsB;CAC1D;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/remote/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport DataListComponent from \"./components/data-list\";\n\nexport const remoteComponents = createPlugin({\n  components: {\n    \"remote.data-list\": eagerComponent(DataListComponent),\n  },\n  name: \"lattice/remote\",\n});\n"],"mappings":";;;AAGA,IAAa,mBAAmB,aAAa;CAC3C,YAAY,EACV,oBAAoB,eAAe,QAAiB,EACtD;CACA,MAAM;AACR,CAAC"}

package/dist/table/components/bulk-bar.js

@@ -1,14 +1,15 @@
 import { withHeaders } from "../../core/headers.js";
+import { useT } from "../../i18n/instance.js";
 import { prefixedTestId } from "../../core/test-id.js";
+import { getActionEffects } from "../../effects/dispatch.js";
+import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
 import { Button } from "../../core/components/button.js";
-import { useT } from "../../i18n/instance.js";
 import { Spinner } from "../../core/components/spinner.js";
 import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
-import { dispatchActionError, getActionEffects } from "../../effects/dispatch.js";
-import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
+import { runAction } from "../../action/run-action.js";
 import { ActionForm } from "../../action/components/action-form.js";
-import { useState } from "react";
 import { useHttp } from "@inertiajs/react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/bulk-bar.tsx
 function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
@@ -22,19 +23,13 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		...query
 	} : { selected: selectedKeys };
 	async function submit(action) {
-		try {
-			http.transform((data) => ({
-				...data,
-				...allMatching ? {
-					allMatching: true,
-					...query
-				} : { selected: selectedKeys }
-			}));
-			dispatch(getActionEffects((await http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") })).effects));
+		http.transform((data) => ({
+			...data,
+			...selectionPayload()
+		}));
+		if (await runAction(() => http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") }), dispatch)) {
 			setConfirming(null);
 			onCompleted();
-		} catch (error) {
-			dispatchActionError(error);
 		}
 	}
 	function run(action) {

package/dist/table/components/bulk-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport { ActionForm } from \"@lattice-php/lattice/action/components/action-form\";\nimport { dispatchActionError, getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const http = useHttp<BulkData, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    try {\n      http.transform((data) => ({\n        ...data,\n        ...(allMatching ? { allMatching: true, ...query } : { selected: selectedKeys }),\n      }));\n\n      const response = await http[action.method](action.endpoint, {\n        headers: withHeaders(action.ref ?? \"\"),\n      });\n\n      dispatch(getActionEffects(response.effects));\n      setConfirming(null);\n      onCompleted();\n    } catch (error) {\n      dispatchActionError(error);\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"bulk.allSelected\", \"All {{count}} selected\", { count })\n          : t(\"bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"bulk.selectAllMatching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? \"Cancel\"}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setFilling(null);\n            onCompleted();\n          }}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,OAAO,QAAkC,CAAC,CAAC;CACjD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,IAAI;GACF,KAAK,WAAW,UAAU;IACxB,GAAG;IACH,GAAI,cAAc;KAAE,aAAa;KAAM,GAAG;IAAM,IAAI,EAAE,UAAU,aAAa;GAC/E,EAAE;GAMF,SAAS,kBAAiB,MAJH,KAAK,OAAO,QAAQ,OAAO,UAAU,EAC1D,SAAS,YAAY,OAAO,OAAO,EAAE,EACvC,CAAC,GAEkC,OAAO,CAAC;GAC3C,cAAc,IAAI;GAClB,YAAY;EACd,SAAS,OAAO;GACd,oBAAoB,KAAK;EAC3B;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,oBAAoB,0BAA0B,EAAE,MAAM,CAAC,IACzD,EAAE,iBAAiB,sBAAsB,EAAE,MAAM,CAAC;GAClD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,0BAA0B,iCAAiC,EAAE,MAAM,CAAC;GACjE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAN3B,CAQG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe;IAClD,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,YAAY,aAAa;KACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;KAC3C,WAAW,IAAI;KACf,YAAY;IACd;IACA,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;GAC/C,CAAA;EAEA;;AAET"}
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport { ActionForm } from \"@lattice-php/lattice/action/components/action-form\";\nimport { runAction } from \"@lattice-php/lattice/action/run-action\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const http = useHttp<BulkData, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    http.transform((data) => ({ ...data, ...selectionPayload() }));\n\n    const ok = await runAction(\n      () => http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? \"\") }),\n      dispatch,\n    );\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"bulk.allSelected\", \"All {{count}} selected\", { count })\n          : t(\"bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"bulk.selectAllMatching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? \"Cancel\"}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setFilling(null);\n            onCompleted();\n          }}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAoBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,OAAO,QAAkC,CAAC,CAAC;CACjD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,KAAK,WAAW,UAAU;GAAE,GAAG;GAAM,GAAG,iBAAiB;EAAE,EAAE;EAO7D,IAAI,MALa,gBACT,KAAK,OAAO,QAAQ,OAAO,UAAU,EAAE,SAAS,YAAY,OAAO,OAAO,EAAE,EAAE,CAAC,GACrF,QACF,GAEQ;GACN,cAAc,IAAI;GAClB,YAAY;EACd;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,oBAAoB,0BAA0B,EAAE,MAAM,CAAC,IACzD,EAAE,iBAAiB,sBAAsB,EAAE,MAAM,CAAC;GAClD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,0BAA0B,iCAAiC,EAAE,MAAM,CAAC;GACjE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAN3B,CAQG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe;IAClD,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,YAAY,aAAa;KACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;KAC3C,WAAW,IAAI;KACf,YAAY;IACd;IACA,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;GAC/C,CAAA;EAEA;;AAET"}

package/dist/table/components/cells/text-cell.js

@@ -1,13 +1,50 @@
+import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
-import { copyToClipboard } from "../../../clipboard/index.js";
 import { formatCell, resolveLink } from "../../format.js";
+import { DateTime } from "../../../i18n/date-time.js";
+import { copyToClipboard } from "../../../clipboard/index.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/text-cell.tsx
-var TextCell = ({ column, props, row, value }) => {
+var TextCell = (args) => {
+	if (args.props.multiple) return /* @__PURE__ */ jsx(MultipleCell, { ...args });
+	if (args.props.badge) return /* @__PURE__ */ jsx(SingleBadgeCell, { ...args });
+	return /* @__PURE__ */ jsx(PlainTextCell, { ...args });
+};
+function Badge({ label, color }) {
+	if (label === "") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("lt-cell-badge", `lt-cell-tone-${color || "gray"}`),
+		children: label
+	});
+}
+function MultipleCell({ column, props, value }) {
+	const items = Array.isArray(value) ? value : [];
+	if (items.length === 0) return null;
+	if (!props.badge) return /* @__PURE__ */ jsx("span", { children: items.map((item) => formatCell(item, column)).join(", ") });
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-1",
+		children: items.map((item, index) => {
+			const chip = item;
+			return /* @__PURE__ */ jsx(Badge, {
+				label: formatCell(chip.value, column),
+				color: chip.color
+			}, index);
+		})
+	});
+}
+function SingleBadgeCell({ column, props, row, value }) {
+	const colorKey = props.badge.colorKey;
+	return /* @__PURE__ */ jsx(Badge, {
+		label: formatCell(value, column),
+		color: String(row[colorKey] ?? "")
+	});
+}
+function PlainTextCell({ column, props, row, value }) {
+	const dateProps = column.props?.date;
+	const href = resolveLink(column, row, value);
 	const text = formatCell(value, column);
 	const [copied, setCopied] = useState(false);
-	const href = resolveLink(column, row, value);
 	const content = href ? /* @__PURE__ */ jsx("a", {
 		className: "underline underline-offset-2",
 		href,
@@ -24,6 +61,11 @@ var TextCell = ({ column, props, row, value }) => {
 		copyToClipboard(text);
 		setCopied(true);
 	}
+	if (dateProps && !href && !props.copyable && value !== null && value !== void 0) return /* @__PURE__ */ jsx(DateTime, {
+		value,
+		dateStyle: dateProps.dateStyle,
+		timeStyle: dateProps.timeStyle
+	});
 	if (!props.copyable) return content;
 	return /* @__PURE__ */ jsxs("span", {
 		className: "inline-flex items-center gap-2",
@@ -42,7 +84,7 @@ var TextCell = ({ column, props, row, value }) => {
 			}), copied ? "Copied" : "Copy"]
 		})]
 	});
-};
+}
 //#endregion
 export { TextCell };
 

package/dist/table/components/cells/text-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice-php/lattice/clipboard\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = ({ column, props, row, value }) => {\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        data-test={`copy-${column.key}`}\n        className=\"inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Icon name=\"check\" className=\"size-lt-icon-xs\" />\n        ) : (\n          <Icon name=\"copy\" className=\"size-lt-icon-xs\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,YAAgD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC7F,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;CACA,CAAA,IAEH;CAGF,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,aAAW,QAAQ,OAAO;GAC1B,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aALX,CAOG,SACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA,IAEhD,oBAAC,MAAD;IAAM,MAAK;IAAO,WAAU;GAAmB,CAAA,GAEhD,SAAS,WAAW,MACf;IACJ;;AAEV"}
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice-php/lattice/clipboard\";\nimport { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"../../registry\";\nimport type { ColumnPropsOf } from \"../../types\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction Badge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  return <span className={cn(\"lt-cell-badge\", `lt-cell-tone-${color || \"gray\"}`)}>{label}</span>;\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <Badge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <Badge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\"> | null)?.date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        data-test={`copy-${column.key}`}\n        className=\"inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Icon name=\"check\" className=\"size-lt-icon-xs\" />\n        ) : (\n          <Icon name=\"copy\" className=\"size-lt-icon-xs\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,MAAM,EAAE,OAAO,SAA8D;CACpF,IAAI,UAAU,IACZ,OAAO;CAGT,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,gBAAgB,SAAS,QAAQ;YAAI;CAAY,CAAA;AAC/F;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,OAAD;IAAmB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EACvF,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,OAAD;EAAO,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AACvF;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,OAA+C;CACzE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;CACA,CAAA,IAEH;CAGF,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,aAAW,QAAQ,OAAO;GAC1B,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aALX,CAOG,SACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA,IAEhD,oBAAC,MAAD;IAAM,MAAK;IAAO,WAAU;GAAmB,CAAA,GAEhD,SAAS,WAAW,MACf;IACJ;;AAEV"}

package/dist/table/components/table.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/utils.js";
-import { nodeIdentity } from "../../core/test-id.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { nodeIdentity } from "../../core/test-id.js";
 import { useColumnResizing } from "../../core/use-column-resizing.js";
 import { alignJustifyItems, alignText } from "../align.js";
 import { getBulkActions } from "../bulk.js";

package/dist/table/filter-values.d.ts

@@ -1,4 +1,9 @@
 import { FilterData, Option } from '../types/generated';
+/**
+ * Whether a single scalar filter member is absent — the atomic rule the
+ * filter-emptiness and query-serialization logic both build on.
+ */
+export declare function isEmptyMember(value: unknown): value is null | undefined | "";
 /**
  * Whether a table-filter value should clear the filter rather than apply it —
  * an empty string, empty list, or an object whose every member is empty.

package/dist/table/filter-values.js

@@ -1,12 +1,19 @@
 //#region resources/js/table/filter-values.ts
 /**
+* Whether a single scalar filter member is absent — the atomic rule the
+* filter-emptiness and query-serialization logic both build on.
+*/
+function isEmptyMember(value) {
+	return value == null || value === "";
+}
+/**
 * Whether a table-filter value should clear the filter rather than apply it —
 * an empty string, empty list, or an object whose every member is empty.
 */
 function isEmptyFilterValue(value) {
-	if (value == null || value === "") return true;
+	if (isEmptyMember(value)) return true;
 	if (Array.isArray(value)) return value.length === 0;
-	if (typeof value === "object") return Object.values(value).every((member) => member == null || member === "");
+	if (typeof value === "object") return Object.values(value).every(isEmptyMember);
 	return false;
 }
 function isActiveFilterValue(value) {
@@ -25,6 +32,6 @@ function filterOptions(filter) {
 	return Array.isArray(value) ? value : [];
 }
 //#endregion
-export { filterOptions, isActiveFilterValue, isEmptyFilterValue, stringProp };
+export { filterOptions, isActiveFilterValue, isEmptyFilterValue, isEmptyMember, stringProp };
 
 //# sourceMappingURL=filter-values.js.map

package/dist/table/filter-values.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-values.js","names":[],"sources":["../../resources/js/table/filter-values.ts"],"sourcesContent":["import type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\n\n/**\n * Whether a table-filter value should clear the filter rather than apply it —\n * an empty string, empty list, or an object whose every member is empty.\n */\nexport function isEmptyFilterValue(value: unknown): boolean {\n  if (value == null || value === \"\") {\n    return true;\n  }\n\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n\n  if (typeof value === \"object\") {\n    return Object.values(value).every((member) => member == null || member === \"\");\n  }\n\n  return false;\n}\n\nexport function isActiveFilterValue(value: unknown): boolean {\n  return !isEmptyFilterValue(value);\n}\n\n/**\n * Read a string entry from a filter's loose `props` bag, falling back when the\n * key is absent or not a string.\n */\nexport function stringProp(filter: FilterData, key: string, fallback: string): string {\n  const value = filter.props[key];\n\n  return typeof value === \"string\" ? value : fallback;\n}\n\nexport function filterOptions(filter: FilterData): Option[] {\n  const value = filter.props.options;\n\n  return Array.isArray(value) ? (value as Option[]) : [];\n}\n"],"mappings":";;;;;AAMA,SAAgB,mBAAmB,OAAyB;CAC1D,IAAI,SAAS,QAAQ,UAAU,IAC7B,OAAO;CAGT,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,MAAM,WAAW;CAG1B,IAAI,OAAO,UAAU,UACnB,OAAO,OAAO,OAAO,KAAK,EAAE,OAAO,WAAW,UAAU,QAAQ,WAAW,EAAE;CAG/E,OAAO;AACT;AAEA,SAAgB,oBAAoB,OAAyB;CAC3D,OAAO,CAAC,mBAAmB,KAAK;AAClC;;;;;AAMA,SAAgB,WAAW,QAAoB,KAAa,UAA0B;CACpF,MAAM,QAAQ,OAAO,MAAM;CAE3B,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAgB,cAAc,QAA8B;CAC1D,MAAM,QAAQ,OAAO,MAAM;CAE3B,OAAO,MAAM,QAAQ,KAAK,IAAK,QAAqB,CAAC;AACvD"}
+{"version":3,"file":"filter-values.js","names":[],"sources":["../../resources/js/table/filter-values.ts"],"sourcesContent":["import type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\n\n/**\n * Whether a single scalar filter member is absent — the atomic rule the\n * filter-emptiness and query-serialization logic both build on.\n */\nexport function isEmptyMember(value: unknown): value is null | undefined | \"\" {\n  return value == null || value === \"\";\n}\n\n/**\n * Whether a table-filter value should clear the filter rather than apply it —\n * an empty string, empty list, or an object whose every member is empty.\n */\nexport function isEmptyFilterValue(value: unknown): boolean {\n  if (isEmptyMember(value)) {\n    return true;\n  }\n\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n\n  if (typeof value === \"object\") {\n    return Object.values(value).every(isEmptyMember);\n  }\n\n  return false;\n}\n\nexport function isActiveFilterValue(value: unknown): boolean {\n  return !isEmptyFilterValue(value);\n}\n\n/**\n * Read a string entry from a filter's loose `props` bag, falling back when the\n * key is absent or not a string.\n */\nexport function stringProp(filter: FilterData, key: string, fallback: string): string {\n  const value = filter.props[key];\n\n  return typeof value === \"string\" ? value : fallback;\n}\n\nexport function filterOptions(filter: FilterData): Option[] {\n  const value = filter.props.options;\n\n  return Array.isArray(value) ? (value as Option[]) : [];\n}\n"],"mappings":";;;;;AAMA,SAAgB,cAAc,OAAgD;CAC5E,OAAO,SAAS,QAAQ,UAAU;AACpC;;;;;AAMA,SAAgB,mBAAmB,OAAyB;CAC1D,IAAI,cAAc,KAAK,GACrB,OAAO;CAGT,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,MAAM,WAAW;CAG1B,IAAI,OAAO,UAAU,UACnB,OAAO,OAAO,OAAO,KAAK,EAAE,MAAM,aAAa;CAGjD,OAAO;AACT;AAEA,SAAgB,oBAAoB,OAAyB;CAC3D,OAAO,CAAC,mBAAmB,KAAK;AAClC;;;;;AAMA,SAAgB,WAAW,QAAoB,KAAa,UAA0B;CACpF,MAAM,QAAQ,OAAO,MAAM;CAE3B,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAgB,cAAc,QAA8B;CAC1D,MAAM,QAAQ,OAAO,MAAM;CAE3B,OAAO,MAAM,QAAQ,KAAK,IAAK,QAAqB,CAAC;AACvD"}

package/dist/table/format.d.ts

@@ -1,3 +1,13 @@
 import { TableColumn, TableRow } from './types';
-export declare function formatCell(value: unknown, column?: TableColumn): string;
+export type FormatOptions = {
+    locale?: string;
+    timeZone?: string;
+};
+export type DateConfig = {
+    dateStyle: string | null;
+    timeStyle: string | null;
+};
+export declare function formatCell(value: unknown, column?: TableColumn, options?: FormatOptions): string;
+export declare function formatDateValue(value: unknown, date: DateConfig, options?: FormatOptions): string;
+export declare function preciseDateTime(value: unknown, options?: FormatOptions): string;
 export declare function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null;

package/dist/table/format.js

@@ -1,31 +1,33 @@
 //#region resources/js/table/format.ts
-function formatCell(value, column) {
+function formatCell(value, column, options) {
 	if (value === null || value === void 0) return "";
 	const date = (column?.props)?.date;
-	if (date) return formatDate(value, date.format ?? null);
+	if (date) return formatDateValue(value, date, options);
 	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
 	return JSON.stringify(value);
 }
-function formatDate(value, format) {
+function formatDateValue(value, date, options) {
+	const parsed = new Date(String(value));
+	if (Number.isNaN(parsed.getTime())) return String(value ?? "");
+	const intl = { timeZone: options?.timeZone };
+	if (date.dateStyle) intl.dateStyle = date.dateStyle;
+	if (date.timeStyle) intl.timeStyle = date.timeStyle;
+	return new Intl.DateTimeFormat(options?.locale, intl).format(parsed);
+}
+function preciseDateTime(value, options) {
 	const date = new Date(String(value));
-	if (Number.isNaN(date.getTime())) return formatCell(value);
-	if (!format) return new Intl.DateTimeFormat(void 0, {
-		dateStyle: "medium",
-		timeStyle: "short"
+	if (Number.isNaN(date.getTime())) return "";
+	const formatted = new Intl.DateTimeFormat(options?.locale, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		timeZone: options?.timeZone,
+		timeZoneName: "short"
 	}).format(date);
-	const replacements = {
-		Y: String(date.getFullYear()),
-		y: String(date.getFullYear()).slice(-2),
-		m: String(date.getMonth() + 1).padStart(2, "0"),
-		n: String(date.getMonth() + 1),
-		d: String(date.getDate()).padStart(2, "0"),
-		j: String(date.getDate()),
-		H: String(date.getHours()).padStart(2, "0"),
-		G: String(date.getHours()),
-		i: String(date.getMinutes()).padStart(2, "0"),
-		s: String(date.getSeconds()).padStart(2, "0")
-	};
-	return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);
+	return options?.timeZone ? `${formatted} (${options.timeZone})` : formatted;
 }
 function resolveLink(column, row, value) {
 	const link = column.props?.link;
@@ -38,6 +40,6 @@ function resolveLink(column, row, value) {
 	});
 }
 //#endregion
-export { formatCell, resolveLink };
+export { formatCell, formatDateValue, preciseDateTime, resolveLink };
 
 //# sourceMappingURL=format.js.map

package/dist/table/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","names":[],"sources":["../../resources/js/table/format.ts"],"sourcesContent":["import type { ColumnPropsOf, TableColumn, TableRow } from \"./types\";\n\nexport function formatCell(value: unknown, column?: TableColumn): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  const date = (column?.props as ColumnPropsOf<\"column.text\"> | null)?.date;\n\n  if (date) {\n    return formatDate(value, date.format ?? null);\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\") {\n    return String(value);\n  }\n\n  return JSON.stringify(value);\n}\n\nfunction formatDate(value: unknown, format: string | null): string {\n  const date = new Date(String(value));\n\n  if (Number.isNaN(date.getTime())) {\n    return formatCell(value);\n  }\n\n  if (!format) {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: \"medium\",\n      timeStyle: \"short\",\n    }).format(date);\n  }\n\n  const replacements: Record<string, string> = {\n    Y: String(date.getFullYear()),\n    y: String(date.getFullYear()).slice(-2),\n    m: String(date.getMonth() + 1).padStart(2, \"0\"),\n    n: String(date.getMonth() + 1),\n    d: String(date.getDate()).padStart(2, \"0\"),\n    j: String(date.getDate()),\n    H: String(date.getHours()).padStart(2, \"0\"),\n    G: String(date.getHours()),\n    i: String(date.getMinutes()).padStart(2, \"0\"),\n    s: String(date.getSeconds()).padStart(2, \"0\"),\n  };\n\n  return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);\n}\n\nexport function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null {\n  const link = (column.props as ColumnPropsOf<\"column.text\"> | null)?.link;\n\n  if (!link) {\n    return null;\n  }\n\n  const href = link.href ?? String(value ?? \"\");\n\n  if (href === \"\") {\n    return null;\n  }\n\n  return href.replace(/\\{([^}]+)\\}/g, (_, key: string) => {\n    if (key === \"value\") {\n      return encodeURIComponent(String(value ?? \"\"));\n    }\n\n    return encodeURIComponent(String(row[key] ?? \"\"));\n  });\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAAgB,QAA8B;CACvE,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,MAAM,QAAQ,QAAQ,QAA+C;CAErE,IAAI,MACF,OAAO,WAAW,OAAO,KAAK,UAAU,IAAI;CAG9C,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7E,OAAO,OAAO,KAAK;CAGrB,OAAO,KAAK,UAAU,KAAK;AAC7B;AAEA,SAAS,WAAW,OAAgB,QAA+B;CACjE,MAAM,OAAO,IAAI,KAAK,OAAO,KAAK,CAAC;CAEnC,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO,WAAW,KAAK;CAGzB,IAAI,CAAC,QACH,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EACxC,WAAW;EACX,WAAW;CACb,CAAC,EAAE,OAAO,IAAI;CAGhB,MAAM,eAAuC;EAC3C,GAAG,OAAO,KAAK,YAAY,CAAC;EAC5B,GAAG,OAAO,KAAK,YAAY,CAAC,EAAE,MAAM,EAAE;EACtC,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;EAC9C,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC;EAC7B,GAAG,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;EACzC,GAAG,OAAO,KAAK,QAAQ,CAAC;EACxB,GAAG,OAAO,KAAK,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;EAC1C,GAAG,OAAO,KAAK,SAAS,CAAC;EACzB,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;EAC5C,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;CAC9C;CAEA,OAAO,OAAO,QAAQ,kBAAkB,UAAU,aAAa,UAAU,KAAK;AAChF;AAEA,SAAgB,YAAY,QAAqB,KAAe,OAA+B;CAC7F,MAAM,OAAQ,OAAO,OAA+C;CAEpE,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,OAAO,KAAK,QAAQ,OAAO,SAAS,EAAE;CAE5C,IAAI,SAAS,IACX,OAAO;CAGT,OAAO,KAAK,QAAQ,iBAAiB,GAAG,QAAgB;EACtD,IAAI,QAAQ,SACV,OAAO,mBAAmB,OAAO,SAAS,EAAE,CAAC;EAG/C,OAAO,mBAAmB,OAAO,IAAI,QAAQ,EAAE,CAAC;CAClD,CAAC;AACH"}
+{"version":3,"file":"format.js","names":[],"sources":["../../resources/js/table/format.ts"],"sourcesContent":["import type { ColumnPropsOf, TableColumn, TableRow } from \"./types\";\n\nexport type FormatOptions = {\n  locale?: string;\n  timeZone?: string;\n};\n\nexport type DateConfig = { dateStyle: string | null; timeStyle: string | null };\n\nexport function formatCell(value: unknown, column?: TableColumn, options?: FormatOptions): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  const date = (column?.props as ColumnPropsOf<\"column.text\"> | null)?.date;\n\n  if (date) {\n    return formatDateValue(value, date, options);\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\") {\n    return String(value);\n  }\n\n  return JSON.stringify(value);\n}\n\nexport function formatDateValue(value: unknown, date: DateConfig, options?: FormatOptions): string {\n  const parsed = new Date(String(value));\n\n  if (Number.isNaN(parsed.getTime())) {\n    return String(value ?? \"\");\n  }\n\n  const intl: Intl.DateTimeFormatOptions = { timeZone: options?.timeZone };\n\n  if (date.dateStyle) {\n    intl.dateStyle = date.dateStyle as Intl.DateTimeFormatOptions[\"dateStyle\"];\n  }\n\n  if (date.timeStyle) {\n    intl.timeStyle = date.timeStyle as Intl.DateTimeFormatOptions[\"timeStyle\"];\n  }\n\n  return new Intl.DateTimeFormat(options?.locale, intl).format(parsed);\n}\n\nexport function preciseDateTime(value: unknown, options?: FormatOptions): string {\n  const date = new Date(String(value));\n\n  if (Number.isNaN(date.getTime())) {\n    return \"\";\n  }\n\n  const formatted = new Intl.DateTimeFormat(options?.locale, {\n    year: \"numeric\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    second: \"2-digit\",\n    timeZone: options?.timeZone,\n    timeZoneName: \"short\",\n  }).format(date);\n\n  return options?.timeZone ? `${formatted} (${options.timeZone})` : formatted;\n}\n\nexport function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null {\n  const link = (column.props as ColumnPropsOf<\"column.text\"> | null)?.link;\n\n  if (!link) {\n    return null;\n  }\n\n  const href = link.href ?? String(value ?? \"\");\n\n  if (href === \"\") {\n    return null;\n  }\n\n  return href.replace(/\\{([^}]+)\\}/g, (_, key: string) => {\n    if (key === \"value\") {\n      return encodeURIComponent(String(value ?? \"\"));\n    }\n\n    return encodeURIComponent(String(row[key] ?? \"\"));\n  });\n}\n"],"mappings":";AASA,SAAgB,WAAW,OAAgB,QAAsB,SAAiC;CAChG,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,MAAM,QAAQ,QAAQ,QAA+C;CAErE,IAAI,MACF,OAAO,gBAAgB,OAAO,MAAM,OAAO;CAG7C,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7E,OAAO,OAAO,KAAK;CAGrB,OAAO,KAAK,UAAU,KAAK;AAC7B;AAEA,SAAgB,gBAAgB,OAAgB,MAAkB,SAAiC;CACjG,MAAM,SAAS,IAAI,KAAK,OAAO,KAAK,CAAC;CAErC,IAAI,OAAO,MAAM,OAAO,QAAQ,CAAC,GAC/B,OAAO,OAAO,SAAS,EAAE;CAG3B,MAAM,OAAmC,EAAE,UAAU,SAAS,SAAS;CAEvE,IAAI,KAAK,WACP,KAAK,YAAY,KAAK;CAGxB,IAAI,KAAK,WACP,KAAK,YAAY,KAAK;CAGxB,OAAO,IAAI,KAAK,eAAe,SAAS,QAAQ,IAAI,EAAE,OAAO,MAAM;AACrE;AAEA,SAAgB,gBAAgB,OAAgB,SAAiC;CAC/E,MAAM,OAAO,IAAI,KAAK,OAAO,KAAK,CAAC;CAEnC,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO;CAGT,MAAM,YAAY,IAAI,KAAK,eAAe,SAAS,QAAQ;EACzD,MAAM;EACN,OAAO;EACP,KAAK;EACL,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,UAAU,SAAS;EACnB,cAAc;CAChB,CAAC,EAAE,OAAO,IAAI;CAEd,OAAO,SAAS,WAAW,GAAG,UAAU,IAAI,QAAQ,SAAS,KAAK;AACpE;AAEA,SAAgB,YAAY,QAAqB,KAAe,OAA+B;CAC7F,MAAM,OAAQ,OAAO,OAA+C;CAEpE,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,OAAO,KAAK,QAAQ,OAAO,SAAS,EAAE;CAE5C,IAAI,SAAS,IACX,OAAO;CAGT,OAAO,KAAK,QAAQ,iBAAiB,GAAG,QAAgB;EACtD,IAAI,QAAQ,SACV,OAAO,mBAAmB,OAAO,SAAS,EAAE,CAAC;EAG/C,OAAO,mBAAmB,OAAO,IAAI,QAAQ,EAAE,CAAC;CAClD,CAAC;AACH"}

package/dist/table/query.js

@@ -1,5 +1,6 @@
 import { translate } from "../i18n/instance.js";
 import "../core/column-sizing.js";
+import { isEmptyMember } from "./filter-values.js";
 //#region resources/js/table/query.ts
 function getColumnSort(state, column) {
 	return state.sorts.find((currentSort) => currentSort.key === column.key);
@@ -30,7 +31,7 @@ function appendTableFilters(url, tableFilters) {
 			continue;
 		}
 		if (Array.isArray(value)) {
-			for (const item of value) if (item != null && item !== "") url.searchParams.append(`tf[${key}][]`, String(item));
+			for (const item of value) if (!isEmptyMember(item)) url.searchParams.append(`tf[${key}][]`, String(item));
 			continue;
 		}
 		if (typeof value === "object" && value !== null) for (const [subKey, subValue] of Object.entries(value)) url.searchParams.set(`tf[${key}][${subKey}]`, String(subValue));
@@ -45,14 +46,14 @@ function getTableFilterParams(tableFilters) {
 	return params;
 }
 function normalizeTableFilterValue(value) {
-	if (value == null || value === "") return;
+	if (isEmptyMember(value)) return;
 	if (typeof value === "string") return value;
 	if (Array.isArray(value)) {
-		const items = value.filter((item) => item != null && item !== "").map(String);
+		const items = value.filter((item) => !isEmptyMember(item)).map(String);
 		return items.length > 0 ? items : void 0;
 	}
 	if (typeof value === "object") {
-		const entries = Object.entries(value).filter(([, subValue]) => subValue != null && subValue !== "").map(([subKey, subValue]) => [subKey, String(subValue)]);
+		const entries = Object.entries(value).filter(([, subValue]) => !isEmptyMember(subValue)).map(([subKey, subValue]) => [subKey, String(subValue)]);
 		return entries.length > 0 ? Object.fromEntries(entries) : void 0;
 	}
 	return String(value);