@lattice-php/lattice 0.17.0 → 0.17.2

package/dist/form/components/fields/rich-editor.js

@@ -1,339 +1,14 @@
-import { cn } from "../../../lib/utils.js";
-import { Icon } from "../../../icons/sprite.js";
-import { useT } from "../../../i18n/instance.js";
-import { useFormContext } from "../context.js";
-import { useFieldScope } from "../field-scope.js";
-import { useFormValue } from "../values.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useDependentField } from "../use-dependent-field.js";
-import { useFieldCommit } from "../use-field-commit.js";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
-import { Highlight } from "@tiptap/extension-highlight";
-import { Link } from "@tiptap/extension-link";
-import { TableKit } from "@tiptap/extension-table";
-import { TextAlign } from "@tiptap/extension-text-align";
-import { EditorContent, useEditor } from "@tiptap/react";
-import { StarterKit } from "@tiptap/starter-kit";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/rich-editor.tsx
-var toolbar = [
-	{
-		icon: "bold",
-		key: "bold",
-		label: "Bold",
-		isActive: (e) => e.isActive("bold"),
-		run: (e) => e.chain().focus().toggleBold().run()
-	},
-	{
-		icon: "italic",
-		key: "italic",
-		label: "Italic",
-		isActive: (e) => e.isActive("italic"),
-		run: (e) => e.chain().focus().toggleItalic().run()
-	},
-	{
-		icon: "strikethrough",
-		key: "strikethrough",
-		label: "Strikethrough",
-		isActive: (e) => e.isActive("strike"),
-		run: (e) => e.chain().focus().toggleStrike().run()
-	},
-	{
-		icon: "underline",
-		key: "underline",
-		label: "Underline",
-		isActive: (e) => e.isActive("underline"),
-		run: (e) => e.chain().focus().toggleUnderline().run()
-	},
-	{
-		icon: "highlighter",
-		key: "highlight",
-		label: "Highlight",
-		isActive: (e) => e.isActive("highlight"),
-		run: (e) => e.chain().focus().toggleHighlight().run()
-	},
-	"separator",
-	{
-		icon: "heading-1",
-		key: "heading-1",
-		label: "Heading 1",
-		isActive: (e) => e.isActive("heading", { level: 1 }),
-		run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run()
-	},
-	{
-		icon: "heading-2",
-		key: "heading-2",
-		label: "Heading 2",
-		isActive: (e) => e.isActive("heading", { level: 2 }),
-		run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
-	},
-	{
-		icon: "heading-3",
-		key: "heading-3",
-		label: "Heading 3",
-		isActive: (e) => e.isActive("heading", { level: 3 }),
-		run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
-	},
-	"separator",
-	{
-		icon: "list",
-		key: "bullet-list",
-		label: "Bullet list",
-		isActive: (e) => e.isActive("bulletList"),
-		run: (e) => e.chain().focus().toggleBulletList().run()
-	},
-	{
-		icon: "list-ordered",
-		key: "ordered-list",
-		label: "Ordered list",
-		isActive: (e) => e.isActive("orderedList"),
-		run: (e) => e.chain().focus().toggleOrderedList().run()
-	},
-	{
-		icon: "quote",
-		key: "blockquote",
-		label: "Blockquote",
-		isActive: (e) => e.isActive("blockquote"),
-		run: (e) => e.chain().focus().toggleBlockquote().run()
-	},
-	{
-		icon: "code",
-		key: "code-block",
-		label: "Code block",
-		isActive: (e) => e.isActive("codeBlock"),
-		run: (e) => e.chain().focus().toggleCodeBlock().run()
-	},
-	{
-		icon: "minus",
-		key: "horizontal-rule",
-		label: "Horizontal rule",
-		isActive: () => false,
-		run: (e) => e.chain().focus().setHorizontalRule().run()
-	},
-	"separator",
-	{
-		icon: "align-left",
-		key: "align-left",
-		label: "Align left",
-		isActive: (e) => e.isActive({ textAlign: "left" }),
-		run: (e) => e.chain().focus().setTextAlign("left").run()
-	},
-	{
-		icon: "align-center",
-		key: "align-center",
-		label: "Align center",
-		isActive: (e) => e.isActive({ textAlign: "center" }),
-		run: (e) => e.chain().focus().setTextAlign("center").run()
-	},
-	{
-		icon: "align-right",
-		key: "align-right",
-		label: "Align right",
-		isActive: (e) => e.isActive({ textAlign: "right" }),
-		run: (e) => e.chain().focus().setTextAlign("right").run()
-	},
-	{
-		icon: "align-justify",
-		key: "justify",
-		label: "Justify",
-		isActive: (e) => e.isActive({ textAlign: "justify" }),
-		run: (e) => e.chain().focus().setTextAlign("justify").run()
-	},
-	"separator",
-	{
-		icon: "link",
-		key: "link",
-		label: "Link",
-		isActive: (e) => e.isActive("link"),
-		run: (e) => {
-			if (e.isActive("link")) {
-				e.chain().focus().unsetLink().run();
-				return;
-			}
-			const url = window.prompt("Link URL");
-			if (url) e.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-		}
-	},
-	"separator",
-	{
-		icon: "table",
-		key: "insert-table",
-		label: "Insert table",
-		isActive: (e) => e.isActive("table"),
-		run: (e) => e.chain().focus().insertTable({
-			rows: 3,
-			cols: 3,
-			withHeaderRow: true
-		}).run()
-	},
-	{
-		icon: "columns-3",
-		key: "add-column",
-		label: "Add column",
-		isActive: () => false,
-		isDisabled: (e) => !e.can().addColumnAfter(),
-		run: (e) => e.chain().focus().addColumnAfter().run()
-	},
-	{
-		icon: "rows-3",
-		key: "add-row",
-		label: "Add row",
-		isActive: () => false,
-		isDisabled: (e) => !e.can().addRowAfter(),
-		run: (e) => e.chain().focus().addRowAfter().run()
-	},
-	{
-		icon: "trash-2",
-		key: "delete-table",
-		label: "Delete table",
-		isActive: () => false,
-		isDisabled: (e) => !e.can().deleteTable(),
-		run: (e) => e.chain().focus().deleteTable().run()
-	},
-	{
-		icon: "chevron-right",
-		key: "details",
-		label: "Details",
-		isActive: (e) => e.isActive("details"),
-		run: (e) => {
-			if (e.isActive("details")) {
-				e.chain().focus().unsetDetails().run();
-				return;
-			}
-			e.chain().focus().setDetails().run();
-		}
-	}
-];
-var emojis = [
-	"😀",
-	"😅",
-	"😂",
-	"🥳",
-	"😎",
-	"🤔",
-	"👍",
-	"🙏",
-	"🔥",
-	"🎉",
-	"🚀",
-	"💡",
-	"✅",
-	"❌",
-	"⭐",
-	"❤️"
-];
-function EmojiPicker({ editor }) {
-	const { t } = useT("lattice");
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ jsx("button", {
-			"aria-label": t("form.editor.insert-emoji", "Insert emoji"),
-			"data-test": "editor-emoji",
-			className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md",
-			onClick: () => setOpen((value) => !value),
-			onMouseDown: (event) => event.preventDefault(),
-			title: t("form.editor.insert-emoji", "Insert emoji"),
-			type: "button",
-			children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: "absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md",
-			children: emojis.map((emoji) => /* @__PURE__ */ jsx("button", {
-				className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent",
-				onClick: () => {
-					editor.chain().focus().insertContent(emoji).run();
-					setOpen(false);
-				},
-				onMouseDown: (event) => event.preventDefault(),
-				type: "button",
-				children: emoji
-			}, emoji))
-		})]
-	});
-}
-function Toolbar({ editor }) {
-	const { t } = useT("lattice");
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1",
-		children: [
-			toolbar.map((item, index) => {
-				if (item === "separator") return /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`);
-				const label = t(`form.editor.${item.key}`, item.label);
-				return /* @__PURE__ */ jsx("button", {
-					"aria-label": label,
-					"aria-pressed": item.isActive(editor),
-					"data-test": `editor-${item.key}`,
-					className: cn("inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md", item.isActive(editor) && "bg-lt-accent text-lt-accent-fg"),
-					disabled: item.isDisabled?.(editor) ?? false,
-					onClick: () => item.run(editor),
-					onMouseDown: (event) => event.preventDefault(),
-					title: label,
-					type: "button",
-					children: /* @__PURE__ */ jsx(Icon, { name: item.icon })
-				}, item.key);
-			}),
-			/* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }),
-			/* @__PURE__ */ jsx(EmojiPicker, { editor })
-		]
-	});
-}
-var RichEditorComponent = ({ node }) => {
-	const { errors } = useFormContext();
-	const { hidden, required, readOnly, disabled } = useDependentField(node);
-	const { change, blur } = useFieldCommit();
-	const name = node.props.name;
-	const scope = useFieldScope();
-	const globalValue = useFormValue(name);
-	const storedValue = scope ? scope.getValue(name) : globalValue;
-	const domName = scope ? scope.scopedName(name) : name;
-	const errorKey = scope ? scope.errorKey(name) : name;
-	const locked = readOnly || disabled;
-	const initialContent = typeof storedValue === "object" && storedValue !== null ? storedValue : node.props.value ?? "";
-	const editor = useEditor({
-		extensions: [
-			StarterKit,
-			Highlight,
-			TextAlign.configure({ types: ["heading", "paragraph"] }),
-			Link.configure({ openOnClick: false }),
-			TableKit.configure({ table: { resizable: false } }),
-			Details,
-			DetailsSummary,
-			DetailsContent
-		],
-		content: initialContent,
-		editable: !locked,
-		immediatelyRender: false,
-		editorProps: { attributes: { class: "lattice-prose min-h-32 px-3 py-2 outline-none" } },
-		onUpdate: ({ editor: instance }) => {
-			change(name, instance.isEmpty ? null : instance.getJSON());
-		},
-		onBlur: () => {
-			blur(name);
-		}
-	});
-	useEffect(() => {
-		editor?.setEditable(!locked);
-	}, [editor, locked]);
-	if (hidden) return null;
-	const submittedValue = storedValue ? JSON.stringify(storedValue) : "";
-	return /* @__PURE__ */ jsxs(FormFieldFrame, {
-		error: errors[errorKey],
-		helperText: node.props.helperText ?? void 0,
-		tooltip: node.props.tooltip ?? void 0,
-		label: node.props.label ?? "",
-		name: domName,
-		required,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50", locked && "opacity-60"),
-			children: [editor && !locked && /* @__PURE__ */ jsx(Toolbar, { editor }), /* @__PURE__ */ jsx(EditorContent, { editor })]
-		}), /* @__PURE__ */ jsx("input", {
-			name: domName,
-			type: "hidden",
-			value: submittedValue
-		})]
-	});
-};
+var RichEditorField = lazy(() => import("./rich-editor-field.js"));
+var RichEditorComponent = ({ children, node }) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: null,
+	children: /* @__PURE__ */ jsx(RichEditorField, {
+		node,
+		children
+	})
+});
 //#endregion
 export { RichEditorComponent };
 

package/dist/form/components/fields/rich-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\n\nconst RichEditorField = lazy(\n  () => import(\"./rich-editor-field\") as unknown as Promise<RendererComponentModule>,\n);\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ children, node }) => (\n  <Suspense fallback={null}>\n    <RichEditorField node={node}>{children}</RichEditorField>\n  </Suspense>\n);\n"],"mappings":";;;AAGA,IAAM,kBAAkB,WAChB,OAAO,yBACf;AAEA,IAAa,uBAA+D,EAAE,UAAU,WACtF,oBAAC,UAAD;CAAU,UAAU;WAClB,oBAAC,iBAAD;EAAuB;EAAO;CAA0B,CAAA;AAChD,CAAA"}

package/dist/form/components/fields/table-rows.js

@@ -2,12 +2,12 @@ import { Icon } from "../../../icons/sprite.js";
 import { RenderNode } from "../../../core/renderer.js";
 import { useT } from "../../../i18n/instance.js";
 import { FieldScopeProvider } from "../field-scope.js";
-import "../../../core/column-sizing.js";
-import { useColumnResizing } from "../../../core/use-column-resizing.js";
 import { TableCellProvider } from "../row-layout-context.js";
 import { buildRowActions } from "./row-action-menu.js";
 import { RowActions } from "./row-actions.js";
 import { RowButton, RowItem } from "./row-item.js";
+import "../../../core/column-sizing.js";
+import { useColumnResizing } from "../../../core/use-column-resizing.js";
 import { memo, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/table-rows.tsx

package/dist/form/index.js

@@ -1,35 +1,43 @@
-import { createPlugin, lazyComponent } from "../core/registry.js";
-import { FormSkeletonComponent } from "./skeleton.js";
+import { createPlugin, eagerComponent } from "../core/registry.js";
+import { BuilderComponent } from "./components/fields/builder.js";
+import { CheckboxComponent } from "./components/fields/checkbox.js";
+import { ChoiceComponent } from "./components/fields/choice.js";
+import { DateInputComponent } from "./components/fields/date-input.js";
+import { DateTimeInputComponent } from "./components/fields/date-time-input.js";
+import { FileUploadComponent } from "./components/fields/file-upload.js";
+import { FormComponent } from "./components/form.js";
+import { HiddenInputComponent } from "./components/fields/hidden-input.js";
+import { NumberInputComponent } from "./components/fields/number-input.js";
+import { OtpInputComponent } from "./components/fields/otp-input.js";
+import { PasswordInputComponent } from "./components/fields/password-input.js";
+import { RepeaterComponent } from "./components/fields/repeater.js";
+import { SelectComponent } from "./components/fields/select.js";
+import { TextareaComponent } from "./components/fields/textarea.js";
+import { TextInputComponent } from "./components/fields/text-input.js";
+import { TimeInputComponent } from "./components/fields/time-input.js";
+import { ToggleComponent } from "./components/fields/toggle.js";
+import { RichEditorComponent } from "./components/fields/rich-editor.js";
 //#region resources/js/form/index.ts
-var loadFormComponents = () => import("./components/index.js");
-function loadFormComponent(name) {
-	return async () => {
-		return { default: (await loadFormComponents())[name] };
-	};
-}
 var formComponents = createPlugin({
 	components: {
-		form: lazyComponent(loadFormComponent("FormComponent"), { fallback: FormSkeletonComponent }),
-		"field.builder": lazyComponent(loadFormComponent("BuilderComponent")),
-		"field.checkbox": lazyComponent(loadFormComponent("CheckboxComponent")),
-		"field.choice": lazyComponent(loadFormComponent("ChoiceComponent")),
-		"field.date-input": lazyComponent(loadFormComponent("DateInputComponent")),
-		"field.date-time-input": lazyComponent(loadFormComponent("DateTimeInputComponent")),
-		"field.file-upload": lazyComponent(loadFormComponent("FileUploadComponent")),
-		"field.hidden-input": lazyComponent(loadFormComponent("HiddenInputComponent")),
-		"field.number-input": lazyComponent(loadFormComponent("NumberInputComponent")),
-		"field.otp": lazyComponent(loadFormComponent("OtpInputComponent")),
-		"field.password-input": lazyComponent(loadFormComponent("PasswordInputComponent")),
-		"field.repeater": lazyComponent(loadFormComponent("RepeaterComponent")),
-		"field.rich-editor": lazyComponent(async () => {
-			const { RichEditorComponent } = await import("./components/fields/rich-editor.js");
-			return { default: RichEditorComponent };
-		}),
-		"field.select": lazyComponent(loadFormComponent("SelectComponent")),
-		"field.textarea": lazyComponent(loadFormComponent("TextareaComponent")),
-		"field.text-input": lazyComponent(loadFormComponent("TextInputComponent")),
-		"field.time-input": lazyComponent(loadFormComponent("TimeInputComponent")),
-		"field.toggle": lazyComponent(loadFormComponent("ToggleComponent"))
+		form: eagerComponent(FormComponent),
+		"field.builder": eagerComponent(BuilderComponent),
+		"field.checkbox": eagerComponent(CheckboxComponent),
+		"field.choice": eagerComponent(ChoiceComponent),
+		"field.date-input": eagerComponent(DateInputComponent),
+		"field.date-time-input": eagerComponent(DateTimeInputComponent),
+		"field.file-upload": eagerComponent(FileUploadComponent),
+		"field.hidden-input": eagerComponent(HiddenInputComponent),
+		"field.number-input": eagerComponent(NumberInputComponent),
+		"field.otp": eagerComponent(OtpInputComponent),
+		"field.password-input": eagerComponent(PasswordInputComponent),
+		"field.repeater": eagerComponent(RepeaterComponent),
+		"field.rich-editor": eagerComponent(RichEditorComponent),
+		"field.select": eagerComponent(SelectComponent),
+		"field.textarea": eagerComponent(TextareaComponent),
+		"field.text-input": eagerComponent(TextInputComponent),
+		"field.time-input": eagerComponent(TimeInputComponent),
+		"field.toggle": eagerComponent(ToggleComponent)
 	},
 	name: "lattice/form"
 });

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"BuilderComponent\"\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"DateTimeInputComponent\"\n  | \"FileUploadComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"OtpInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"RepeaterComponent\"\n  | \"SelectComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\"\n  | \"TimeInputComponent\"\n  | \"ToggleComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as unknown as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"field.builder\": lazyComponent(loadFormComponent(\"BuilderComponent\")),\n    \"field.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"field.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"field.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"field.date-time-input\": lazyComponent(loadFormComponent(\"DateTimeInputComponent\")),\n    \"field.file-upload\": lazyComponent(loadFormComponent(\"FileUploadComponent\")),\n    \"field.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"field.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"field.otp\": lazyComponent(loadFormComponent(\"OtpInputComponent\")),\n    \"field.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    \"field.repeater\": lazyComponent(loadFormComponent(\"RepeaterComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"field.rich-editor\": lazyComponent<\"field.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"field.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"field.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"field.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n    \"field.time-input\": lazyComponent(loadFormComponent(\"TimeInputComponent\")),\n    \"field.toggle\": lazyComponent(loadFormComponent(\"ToggleComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAuBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,kBAAkB,CAAC;EACpE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,yBAAyB,cAAc,kBAAkB,wBAAwB,CAAC;EAClF,qBAAqB,cAAc,kBAAkB,qBAAqB,CAAC;EAC3E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,aAAa,cAAc,kBAAkB,mBAAmB,CAAC;EACjE,wBAAwB,cAAc,kBAAkB,wBAAwB,CAAC;EACjF,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EAGtE,qBAAqB,cAAmC,YAAY;GAClE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;CACpE;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport {\n  BuilderComponent,\n  CheckboxComponent,\n  ChoiceComponent,\n  DateInputComponent,\n  DateTimeInputComponent,\n  FileUploadComponent,\n  FormComponent,\n  HiddenInputComponent,\n  NumberInputComponent,\n  OtpInputComponent,\n  PasswordInputComponent,\n  RepeaterComponent,\n  SelectComponent,\n  TextareaComponent,\n  TextInputComponent,\n  TimeInputComponent,\n  ToggleComponent,\n} from \"./components\";\nimport { RichEditorComponent } from \"./components/fields/rich-editor\";\n\nexport const formComponents = createPlugin({\n  components: {\n    form: eagerComponent(FormComponent),\n    \"field.builder\": eagerComponent(BuilderComponent),\n    \"field.checkbox\": eagerComponent(CheckboxComponent),\n    \"field.choice\": eagerComponent(ChoiceComponent),\n    \"field.date-input\": eagerComponent(DateInputComponent),\n    \"field.date-time-input\": eagerComponent(DateTimeInputComponent),\n    \"field.file-upload\": eagerComponent(FileUploadComponent),\n    \"field.hidden-input\": eagerComponent(HiddenInputComponent),\n    \"field.number-input\": eagerComponent(NumberInputComponent),\n    \"field.otp\": eagerComponent(OtpInputComponent),\n    \"field.password-input\": eagerComponent(PasswordInputComponent),\n    \"field.repeater\": eagerComponent(RepeaterComponent),\n    \"field.rich-editor\": eagerComponent(RichEditorComponent),\n    \"field.select\": eagerComponent(SelectComponent),\n    \"field.textarea\": eagerComponent(TextareaComponent),\n    \"field.text-input\": eagerComponent(TextInputComponent),\n    \"field.time-input\": eagerComponent(TimeInputComponent),\n    \"field.toggle\": eagerComponent(ToggleComponent),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,eAAe,aAAa;EAClC,iBAAiB,eAAe,gBAAgB;EAChD,kBAAkB,eAAe,iBAAiB;EAClD,gBAAgB,eAAe,eAAe;EAC9C,oBAAoB,eAAe,kBAAkB;EACrD,yBAAyB,eAAe,sBAAsB;EAC9D,qBAAqB,eAAe,mBAAmB;EACvD,sBAAsB,eAAe,oBAAoB;EACzD,sBAAsB,eAAe,oBAAoB;EACzD,aAAa,eAAe,iBAAiB;EAC7C,wBAAwB,eAAe,sBAAsB;EAC7D,kBAAkB,eAAe,iBAAiB;EAClD,qBAAqB,eAAe,mBAAmB;EACvD,gBAAgB,eAAe,eAAe;EAC9C,kBAAkB,eAAe,iBAAiB;EAClD,oBAAoB,eAAe,kBAAkB;EACrD,oBAAoB,eAAe,kBAAkB;EACrD,gBAAgB,eAAe,eAAe;CAChD;CACA,MAAM;AACR,CAAC"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { lazyRegistry, registry } from './registry';
+export { registry } from './registry';
 export { useChat } from './chat/use-chat';
-export { chatPlugin } from './chat';
+export { chatComponents } from './chat';
 export { getActionEffects, isActionEffect, dispatchEffects, dispatchActionError, } from './effects/dispatch';
 export { useEffectDispatcher } from './effects/use-effect-dispatcher';
 export { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from './effects/registry';

package/dist/index.js

@@ -22,10 +22,10 @@ import { RealtimeListeners } from "./realtime/listeners.js";
 import { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders } from "./inertia.js";
 import { Toaster } from "./toast/toaster.js";
 import { useChat } from "./chat/use-chat.js";
-import { chatPlugin } from "./chat/index.js";
+import { chatComponents } from "./chat/index.js";
 import { copyToClipboard, useClipboard } from "./clipboard/index.js";
-import { lazyRegistry } from "./registry/lazy.js";
+import { columnCell } from "./table/registry.js";
+import { registry } from "./registry.js";
 import { createLatticeApp } from "./create-app.js";
 import { Provider } from "./provider.js";
-import { columnCell } from "./table/registry.js";
-export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, lazyRegistry, mergeEffectHandlers, onCallout, onToast, pageComponentName, lazyRegistry as registry, showToast, updateAppearance, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
+export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatComponents, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, updateAppearance, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };

package/dist/notifications/index.d.ts

@@ -1 +1 @@
-export declare const notificationsPlugin: import('../core/registry').Plugin;
+export declare const notificationsComponents: import('../core/registry').Plugin;

package/dist/notifications/index.js

@@ -1,11 +1,11 @@
 import { createPlugin, eagerComponent } from "../core/registry.js";
 import NotificationsComponent from "./components/notifications.js";
 //#region resources/js/notifications/index.ts
-var notificationsPlugin = createPlugin({
+var notificationsComponents = createPlugin({
 	name: "lattice/notifications",
 	components: { notifications: eagerComponent(NotificationsComponent) }
 });
 //#endregion
-export { notificationsPlugin };
+export { notificationsComponents };
 
 //# sourceMappingURL=index.js.map

package/dist/notifications/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/notifications/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport NotificationsComponent from \"./components/notifications\";\n\nexport const notificationsPlugin = createPlugin({\n  name: \"lattice/notifications\",\n  components: {\n    notifications: eagerComponent(NotificationsComponent),\n  },\n});\n"],"mappings":";;;AAGA,IAAa,sBAAsB,aAAa;CAC9C,MAAM;CACN,YAAY,EACV,eAAe,eAAe,sBAAsB,EACtD;AACF,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/notifications/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice-php/lattice/core/registry\";\nimport NotificationsComponent from \"./components/notifications\";\n\nexport const notificationsComponents = createPlugin({\n  name: \"lattice/notifications\",\n  components: {\n    notifications: eagerComponent(NotificationsComponent),\n  },\n});\n"],"mappings":";;;AAGA,IAAa,0BAA0B,aAAa;CAClD,MAAM;CACN,YAAY,EACV,eAAe,eAAe,sBAAsB,EACtD;AACF,CAAC"}

package/dist/provider.js

@@ -1,13 +1,13 @@
 import { setDefaultRegistry, useColumnRegistry, useComponentRegistry, useEffectHandlerRegistry } from "./core/registry-context.js";
 import { ProviderBase } from "./provider-base.js";
-import { lazyRegistry } from "./registry/lazy.js";
+import { registry } from "./registry.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/provider.tsx
-setDefaultRegistry(lazyRegistry);
-function Provider({ registry = lazyRegistry, ...props }) {
+setDefaultRegistry(registry);
+function Provider({ registry: registry$1 = registry, ...props }) {
 	return /* @__PURE__ */ jsx(ProviderBase, {
 		...props,
-		registry
+		registry: registry$1
 	});
 }
 //#endregion

package/dist/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { setDefaultRegistry } from \"./core/registry-context\";\nimport { ProviderBase, type ProviderBaseProps } from \"./provider-base\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\ntype ProviderProps = Omit<ProviderBaseProps, \"registry\"> & {\n  registry?: Registry;\n};\n\nexport function Provider({ registry = defaultRegistry, ...props }: ProviderProps) {\n  return <ProviderBase {...props} registry={registry} />;\n}\n\nexport {\n  useComponentRegistry,\n  useColumnRegistry,\n  useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":";;;;;AAQA,mBAAmB,YAAe;AAMlC,SAAgB,SAAS,EAAE,WAAW,cAAiB,GAAG,SAAwB;CAChF,OAAO,oBAAC,cAAD;EAAc,GAAI;EAAiB;CAAW,CAAA;AACvD"}
+{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import { registry as defaultRegistry } from \"./registry\";\nimport type { Registry } from \"./core/registry\";\nimport { setDefaultRegistry } from \"./core/registry-context\";\nimport { ProviderBase, type ProviderBaseProps } from \"./provider-base\";\n\n// Register the default registry so selectors work outside <Provider>.\n// This module is always loaded after registry.ts finishes, so defaultRegistry\n// is guaranteed to be defined here.\nsetDefaultRegistry(defaultRegistry);\n\ntype ProviderProps = Omit<ProviderBaseProps, \"registry\"> & {\n  registry?: Registry;\n};\n\nexport function Provider({ registry = defaultRegistry, ...props }: ProviderProps) {\n  return <ProviderBase {...props} registry={registry} />;\n}\n\nexport {\n  useComponentRegistry,\n  useColumnRegistry,\n  useEffectHandlerRegistry,\n} from \"./core/registry-context\";\n"],"mappings":";;;;;AAQA,mBAAmB,QAAe;AAMlC,SAAgB,SAAS,EAAE,UAAA,aAAW,UAAiB,GAAG,SAAwB;CAChF,OAAO,oBAAC,cAAD;EAAc,GAAI;EAAiB,UAAA;CAAW,CAAA;AACvD"}

package/dist/registry.d.ts

@@ -1 +1 @@
-export { lazyRegistry, lazyRegistry as registry } from './registry/lazy';
+export declare const registry: import('./core/registry').Registry;

package/dist/registry.js

@@ -1,2 +1,15 @@
-import { lazyRegistry } from "./registry/lazy.js";
-export { lazyRegistry, lazyRegistry as registry };
+import { createRegistry } from "./core/registry.js";
+import { layoutComponents } from "./layout/components.js";
+import { actionComponents } from "./action/index.js";
+import { chatComponents } from "./chat/index.js";
+import { coreComponents } from "./core/components/index.js";
+import { formComponents } from "./form/index.js";
+import { notificationsComponents } from "./notifications/index.js";
+import { remoteComponents } from "./remote/index.js";
+import { tableComponents } from "./table/index.js";
+//#region resources/js/registry.ts
+var registry = createRegistry(coreComponents, actionComponents, formComponents, layoutComponents, tableComponents, chatComponents, notificationsComponents, remoteComponents);
+//#endregion
+export { registry };
+
+//# sourceMappingURL=registry.js.map

package/dist/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice-php/lattice/core/registry\";\nimport { actionComponents } from \"./action\";\nimport { chatComponents } from \"./chat\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { layoutComponents } from \"./layout\";\nimport { notificationsComponents } from \"./notifications\";\nimport { remoteComponents } from \"./remote\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  layoutComponents,\n  tableComponents,\n  chatComponents,\n  notificationsComponents,\n  remoteComponents,\n);\n"],"mappings":";;;;;;;;;;AAUA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,kBACA,iBACA,gBACA,yBACA,gBACF"}

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

@@ -1,7 +1,7 @@
 import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../format.js";
 import { numericValue } from "../../../format/numeric.js";
 import { formatNumber } from "../../../format/number.js";
-import { formatCell } from "../../format.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/money-cell.tsx
 var MoneyCell = ({ column, props, row, value }) => {