@lattice-php/lattice 0.19.0 → 0.21.0

package/dist/form/lib/field-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-props.js","names":[],"sources":["../../../resources/js/form/lib/field-props.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { FieldConditions } from \"./conditions\";\n\n/**\n * The props every form-field node shares (the PHP Field base). Nodes flow through\n * the form framework loosely typed via the generic schema, so this is the typed\n * lens the shared hooks read them through. Everything is optional because the\n * lens is also applied to non-field nodes while walking the schema.\n */\ntype FieldProps = {\n  conditions?: FieldConditions | null;\n  dependsOnAny?: boolean | null;\n  dependsOnKeys?: string[] | null;\n  disabled?: boolean | null;\n  helperText?: string | null;\n  label?: string | null;\n  name?: string;\n  editablePrefill?: boolean | null;\n  prefillRefreshOn?: string[] | null;\n  prefillResetOn?: string[] | null;\n  readOnly?: boolean | null;\n  required?: boolean | null;\n  tooltip?: string | null;\n  value?: unknown;\n};\n\nexport function fieldProps(node: Node): FieldProps {\n  return node.props as FieldProps;\n}\n\nexport function walkFields(\n  nodes: Node[] | undefined,\n  visit: (props: FieldProps, node: Node) => void,\n): void {\n  for (const child of nodes ?? []) {\n    visit(fieldProps(child), child);\n    walkFields(child.schema, visit);\n  }\n}\n"],"mappings":";AA0BA,SAAgB,WAAW,MAAwB;CACjD,OAAO,KAAK;AACd;AAEA,SAAgB,WACd,OACA,OACM;CACN,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,WAAW,KAAK,GAAG,KAAK;EAC9B,WAAW,MAAM,QAAQ,KAAK;CAChC;AACF"}
+{"version":3,"file":"field-props.js","names":[],"sources":["../../../resources/js/form/lib/field-props.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { ComponentPropsMap } from \"@lattice-php/lattice/types/generated\";\n\n/**\n * The props every form-field node shares (the PHP Field base). Nodes flow through\n * the form framework loosely typed via the generic schema, so this is the typed\n * lens the shared hooks read them through. Everything is optional because the\n * lens is also applied to non-field nodes while walking the schema. Derived from\n * a generated field type (every field bakes the base in) rather than hand-written.\n */\ntype FieldProps = Partial<\n  Pick<\n    ComponentPropsMap[\"field.text-input\"],\n    | \"conditions\"\n    | \"dependsOnAny\"\n    | \"dependsOnKeys\"\n    | \"disabled\"\n    | \"editablePrefill\"\n    | \"helperText\"\n    | \"label\"\n    | \"name\"\n    | \"prefillRefreshOn\"\n    | \"prefillResetOn\"\n    | \"readOnly\"\n    | \"required\"\n    | \"tooltip\"\n    | \"value\"\n  >\n>;\n\nexport function fieldProps(node: Node): FieldProps {\n  return node.props as FieldProps;\n}\n\nexport function walkFields(\n  nodes: Node[] | undefined,\n  visit: (props: FieldProps, node: Node) => void,\n): void {\n  for (const child of nodes ?? []) {\n    visit(fieldProps(child), child);\n    walkFields(child.schema, visit);\n  }\n}\n"],"mappings":";AA8BA,SAAgB,WAAW,MAAwB;CACjD,OAAO,KAAK;AACd;AAEA,SAAgB,WACd,OACA,OACM;CACN,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,WAAW,KAAK,GAAG,KAAK;EAC9B,WAAW,MAAM,QAAQ,KAAK;CAChC;AACF"}

package/dist/form/plugin.js

@@ -2,6 +2,7 @@ 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 { ColorPickerFieldComponent } from "./components/fields/color-picker-field.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";
@@ -24,6 +25,7 @@ var formComponents = createPlugin({
 		"field.builder": eagerComponent(BuilderComponent),
 		"field.checkbox": eagerComponent(CheckboxComponent),
 		"field.choice": eagerComponent(ChoiceComponent),
+		"field.color-picker": eagerComponent(ColorPickerFieldComponent),
 		"field.date-input": eagerComponent(DateInputComponent),
 		"field.date-time-input": eagerComponent(DateTimeInputComponent),
 		"field.file-upload": eagerComponent(FileUploadComponent),

package/dist/form/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/form/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { FormNodeType } from \"@lattice-php/lattice/types/generated\";\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  } satisfies ComponentRegistryFor<FormNodeType>,\n  name: \"lattice/form\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,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"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/form/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { FormNodeType } from \"@lattice-php/lattice/types/generated\";\nimport {\n  BuilderComponent,\n  CheckboxComponent,\n  ChoiceComponent,\n  ColorPickerFieldComponent,\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.color-picker\": eagerComponent(ColorPickerFieldComponent),\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  } satisfies ComponentRegistryFor<FormNodeType>,\n  name: \"lattice/form\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,eAAe,aAAa;EAClC,iBAAiB,eAAe,gBAAgB;EAChD,kBAAkB,eAAe,iBAAiB;EAClD,gBAAgB,eAAe,eAAe;EAC9C,sBAAsB,eAAe,yBAAyB;EAC9D,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/form/rich-editor/builtins.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Called by the editor field when its chunk loads. Registration must be an
+ * explicitly invoked export: the package ships side-effect-free modules, so a
+ * bare `import "./builtins.js"` would be tree-shaken out of production builds.
+ */
+export declare function registerBuiltinRichEditorExtensions(): void;

package/dist/form/rich-editor/builtins.js

@@ -0,0 +1,400 @@
+import { cn } from "../../lib/utils.js";
+import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { seedRichEditorExtension } from "./registry.js";
+import { ToolbarIconButton } from "./toolbar-button.js";
+import { 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 { TableKit } from "@tiptap/extension-table";
+import { TextAlign } from "@tiptap/extension-text-align";
+//#region resources/js/form/rich-editor/builtins.tsx
+var ALL_HEADING_LEVELS = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+];
+var ALL_ALIGNMENTS = [
+	"left",
+	"center",
+	"right",
+	"justify"
+];
+var DEFAULT_EMOJIS = [
+	"😀",
+	"😅",
+	"😂",
+	"🥳",
+	"😎",
+	"🤔",
+	"👍",
+	"🙏",
+	"🔥",
+	"🎉",
+	"🚀",
+	"💡",
+	"✅",
+	"❌",
+	"⭐",
+	"❤️"
+];
+function headingLevels(levels) {
+	const valid = (levels ?? ALL_HEADING_LEVELS).filter((level) => level >= 1 && level <= 6);
+	return valid.length > 0 ? valid : ALL_HEADING_LEVELS;
+}
+function HeadingMenu({ editor, levels }) {
+	const { t } = useT("lattice");
+	const label = t("form.editor.heading", "Heading");
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ToolbarIconButton, {
+			active: editor.isActive("heading"),
+			icon: "heading",
+			label,
+			testId: "editor-heading"
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		className: "min-w-32",
+		children: levels.map((level) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			className: cn(editor.isActive("heading", { level }) && "bg-lt-accent text-lt-accent-fg"),
+			"data-test": `editor-heading-${level}`,
+			onClick: () => editor.chain().focus().toggleHeading({ level }).run(),
+			children: t(`form.editor.heading-${level}`, `Heading ${level}`)
+		}, level))
+	})] });
+}
+function LinkControl({ editor }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const apply = () => {
+		if (url) editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		else editor.chain().focus().extendMarkRange("link").unsetLink().run();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: (next) => {
+			if (next) setUrl(editor.getAttributes("link").href ?? "");
+			setOpen(next);
+		},
+		open,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarIconButton, {
+				active: editor.isActive("link"),
+				icon: "link",
+				label: t("form.editor.link", "Link"),
+				testId: "editor-link"
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "flex w-72 items-center gap-1 p-2",
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					"aria-label": t("form.editor.link-url", "Link URL"),
+					className: "h-7 min-w-0 flex-1 rounded-lt-sm border border-lt-input bg-transparent px-2 text-sm outline-none focus:border-lt-ring",
+					"data-test": "editor-link-url",
+					onChange: (event) => setUrl(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter") {
+							event.preventDefault();
+							apply();
+						}
+					},
+					placeholder: "https://",
+					type: "url",
+					value: url
+				}),
+				/* @__PURE__ */ jsx(ToolbarIconButton, {
+					icon: "check",
+					label: t("form.editor.link-apply", "Apply link"),
+					onClick: apply,
+					testId: "editor-link-apply"
+				}),
+				editor.isActive("link") && /* @__PURE__ */ jsx(ToolbarIconButton, {
+					icon: "trash-2",
+					label: t("form.editor.link-remove", "Remove link"),
+					onClick: () => {
+						editor.chain().focus().extendMarkRange("link").unsetLink().run();
+						setOpen(false);
+					},
+					testId: "editor-link-remove"
+				})
+			]
+		})]
+	});
+}
+function EmojiPicker({ editor, emojis }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: setOpen,
+		open,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarIconButton, {
+				icon: "smile",
+				label: t("form.editor.insert-emoji", "Insert emoji"),
+				testId: "editor-emoji"
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "grid grid-cols-8 gap-0.5 p-1",
+			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 markButton(key, icon, label, mark) {
+	return {
+		icon,
+		key,
+		label,
+		isActive: (editor) => editor.isActive(mark),
+		run: (editor) => editor.chain().focus().toggleMark(mark).run()
+	};
+}
+var registered = false;
+/**
+* Called by the editor field when its chunk loads. Registration must be an
+* explicitly invoked export: the package ships side-effect-free modules, so a
+* bare `import "./builtins"` would be tree-shaken out of production builds.
+*/
+function registerBuiltinRichEditorExtensions() {
+	if (registered) return;
+	registered = true;
+	seedRichEditorExtension("bold", {
+		group: "marks",
+		starterKit: () => ({ bold: {} }),
+		toolbar: () => [markButton("bold", "bold", "Bold", "bold")]
+	});
+	seedRichEditorExtension("italic", {
+		group: "marks",
+		starterKit: () => ({ italic: {} }),
+		toolbar: () => [markButton("italic", "italic", "Italic", "italic")]
+	});
+	seedRichEditorExtension("strike", {
+		group: "marks",
+		starterKit: () => ({ strike: {} }),
+		toolbar: () => [markButton("strikethrough", "strikethrough", "Strikethrough", "strike")]
+	});
+	seedRichEditorExtension("underline", {
+		group: "marks",
+		starterKit: () => ({ underline: {} }),
+		toolbar: () => [markButton("underline", "underline", "Underline", "underline")]
+	});
+	seedRichEditorExtension("highlight", {
+		group: "marks",
+		extensions: () => [Highlight],
+		toolbar: () => [markButton("highlight", "highlighter", "Highlight", "highlight")]
+	});
+	seedRichEditorExtension("code", {
+		group: "marks",
+		starterKit: () => ({ code: {} }),
+		toolbar: () => [markButton("code", "code-xml", "Code", "code")]
+	});
+	seedRichEditorExtension("heading", {
+		starterKit: (props) => ({ heading: { levels: headingLevels(props.levels) } }),
+		toolbar: (props) => {
+			const levels = headingLevels(props.levels);
+			return [{
+				key: "heading",
+				component: ({ editor }) => /* @__PURE__ */ jsx(HeadingMenu, {
+					editor,
+					levels
+				})
+			}];
+		}
+	});
+	seedRichEditorExtension("bullet-list", {
+		group: "blocks",
+		starterKit: () => ({
+			bulletList: {},
+			listItem: {}
+		}),
+		toolbar: () => [{
+			icon: "list",
+			key: "bullet-list",
+			label: "Bullet list",
+			isActive: (editor) => editor.isActive("bulletList"),
+			run: (editor) => editor.chain().focus().toggleBulletList().run()
+		}]
+	});
+	seedRichEditorExtension("ordered-list", {
+		group: "blocks",
+		starterKit: () => ({
+			orderedList: {},
+			listItem: {}
+		}),
+		toolbar: () => [{
+			icon: "list-ordered",
+			key: "ordered-list",
+			label: "Ordered list",
+			isActive: (editor) => editor.isActive("orderedList"),
+			run: (editor) => editor.chain().focus().toggleOrderedList().run()
+		}]
+	});
+	seedRichEditorExtension("blockquote", {
+		group: "blocks",
+		starterKit: () => ({ blockquote: {} }),
+		toolbar: () => [{
+			icon: "quote",
+			key: "blockquote",
+			label: "Blockquote",
+			isActive: (editor) => editor.isActive("blockquote"),
+			run: (editor) => editor.chain().focus().toggleBlockquote().run()
+		}]
+	});
+	seedRichEditorExtension("code-block", {
+		group: "blocks",
+		starterKit: () => ({ codeBlock: {} }),
+		toolbar: () => [{
+			icon: "code",
+			key: "code-block",
+			label: "Code block",
+			isActive: (editor) => editor.isActive("codeBlock"),
+			run: (editor) => editor.chain().focus().toggleCodeBlock().run()
+		}]
+	});
+	seedRichEditorExtension("horizontal-rule", {
+		group: "blocks",
+		starterKit: () => ({ horizontalRule: {} }),
+		toolbar: () => [{
+			icon: "minus",
+			key: "horizontal-rule",
+			label: "Horizontal rule",
+			isActive: () => false,
+			run: (editor) => editor.chain().focus().setHorizontalRule().run()
+		}]
+	});
+	const ALIGNMENT_BUTTONS = {
+		left: {
+			icon: "align-left",
+			key: "align-left",
+			label: "Align left"
+		},
+		center: {
+			icon: "align-center",
+			key: "align-center",
+			label: "Align center"
+		},
+		right: {
+			icon: "align-right",
+			key: "align-right",
+			label: "Align right"
+		},
+		justify: {
+			icon: "align-justify",
+			key: "justify",
+			label: "Justify"
+		}
+	};
+	seedRichEditorExtension("text-align", {
+		extensions: (props) => [TextAlign.configure({
+			alignments: props.alignments ?? ALL_ALIGNMENTS,
+			types: ["heading", "paragraph"]
+		})],
+		toolbar: (props) => (props.alignments ?? ALL_ALIGNMENTS).filter((alignment) => alignment in ALIGNMENT_BUTTONS).map((alignment) => ({
+			...ALIGNMENT_BUTTONS[alignment],
+			isActive: (editor) => editor.isActive({ textAlign: alignment }),
+			run: (editor) => editor.chain().focus().setTextAlign(alignment).run()
+		}))
+	});
+	seedRichEditorExtension("link", {
+		starterKit: (props) => ({ link: {
+			openOnClick: props.openOnClick ?? false,
+			...props.protocols ? { protocols: props.protocols } : {}
+		} }),
+		toolbar: () => [{
+			key: "link",
+			component: ({ editor }) => /* @__PURE__ */ jsx(LinkControl, { editor })
+		}]
+	});
+	seedRichEditorExtension("table", {
+		group: "insert",
+		extensions: () => [TableKit.configure({ table: { resizable: false } })],
+		toolbar: (props) => [
+			{
+				icon: "table",
+				key: "insert-table",
+				label: "Insert table",
+				isActive: (editor) => editor.isActive("table"),
+				run: (editor) => editor.chain().focus().insertTable({
+					rows: props.rows ?? 3,
+					cols: props.cols ?? 3,
+					withHeaderRow: props.withHeaderRow ?? true
+				}).run()
+			},
+			{
+				icon: "columns-3",
+				key: "add-column",
+				label: "Add column",
+				isActive: () => false,
+				isDisabled: (editor) => !editor.can().addColumnAfter(),
+				run: (editor) => editor.chain().focus().addColumnAfter().run()
+			},
+			{
+				icon: "rows-3",
+				key: "add-row",
+				label: "Add row",
+				isActive: () => false,
+				isDisabled: (editor) => !editor.can().addRowAfter(),
+				run: (editor) => editor.chain().focus().addRowAfter().run()
+			},
+			{
+				icon: "trash-2",
+				key: "delete-table",
+				label: "Delete table",
+				isActive: () => false,
+				isDisabled: (editor) => !editor.can().deleteTable(),
+				run: (editor) => editor.chain().focus().deleteTable().run()
+			}
+		]
+	});
+	seedRichEditorExtension("details", {
+		group: "insert",
+		extensions: () => [
+			Details,
+			DetailsSummary,
+			DetailsContent
+		],
+		toolbar: () => [{
+			icon: "chevron-right",
+			key: "details",
+			label: "Details",
+			isActive: (editor) => editor.isActive("details"),
+			run: (editor) => {
+				if (editor.isActive("details")) {
+					editor.chain().focus().unsetDetails().run();
+					return;
+				}
+				editor.chain().focus().setDetails().run();
+			}
+		}]
+	});
+	seedRichEditorExtension("emoji", { toolbar: (props) => {
+		const emojis = props.emojis ?? DEFAULT_EMOJIS;
+		return [{
+			key: "insert-emoji",
+			component: ({ editor }) => /* @__PURE__ */ jsx(EmojiPicker, {
+				editor,
+				emojis
+			})
+		}];
+	} });
+}
+//#endregion
+export { registerBuiltinRichEditorExtensions };
+
+//# sourceMappingURL=builtins.js.map

package/dist/form/rich-editor/builtins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtins.js","names":[],"sources":["../../../resources/js/form/rich-editor/builtins.tsx"],"sourcesContent":["import { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport type { Editor } from \"@tiptap/core\";\nimport type { StarterKitOptions } from \"@tiptap/starter-kit\";\nimport { useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@lattice-php/lattice/ui/dropdown-menu\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { seedRichEditorExtension, type ToolbarButton } from \"./registry\";\nimport { ToolbarIconButton } from \"./toolbar-button\";\n\ntype HeadingLevels = NonNullable<Exclude<StarterKitOptions[\"heading\"], false>[\"levels\"]>;\n\nconst ALL_HEADING_LEVELS = [1, 2, 3, 4, 5, 6];\n\nconst ALL_ALIGNMENTS = [\"left\", \"center\", \"right\", \"justify\"];\n\nconst DEFAULT_EMOJIS = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction headingLevels(levels: number[] | undefined): HeadingLevels {\n  const valid = (levels ?? ALL_HEADING_LEVELS).filter((level) => level >= 1 && level <= 6);\n\n  return (valid.length > 0 ? valid : ALL_HEADING_LEVELS) as HeadingLevels;\n}\n\nfunction HeadingMenu({ editor, levels }: { editor: Editor; levels: number[] }) {\n  const { t } = useT(\"lattice\");\n  const label = t(\"form.editor.heading\", \"Heading\");\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <ToolbarIconButton\n          active={editor.isActive(\"heading\")}\n          icon=\"heading\"\n          label={label}\n          testId=\"editor-heading\"\n        />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-32\">\n        {levels.map((level) => (\n          <DropdownMenuItem\n            className={cn(\n              editor.isActive(\"heading\", { level }) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            data-test={`editor-heading-${level}`}\n            key={level}\n            onClick={() =>\n              editor\n                .chain()\n                .focus()\n                .toggleHeading({ level: level as HeadingLevels[number] })\n                .run()\n            }\n          >\n            {t(`form.editor.heading-${level}`, `Heading ${level}`)}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nfunction LinkControl({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n  const [url, setUrl] = useState(\"\");\n\n  const apply = () => {\n    if (url) {\n      editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n    } else {\n      editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n    }\n\n    setOpen(false);\n  };\n\n  return (\n    <Popover\n      onOpenChange={(next) => {\n        if (next) {\n          setUrl((editor.getAttributes(\"link\").href as string | undefined) ?? \"\");\n        }\n\n        setOpen(next);\n      }}\n      open={open}\n    >\n      <PopoverTrigger asChild>\n        <ToolbarIconButton\n          active={editor.isActive(\"link\")}\n          icon=\"link\"\n          label={t(\"form.editor.link\", \"Link\")}\n          testId=\"editor-link\"\n        />\n      </PopoverTrigger>\n      <PopoverContent className=\"flex w-72 items-center gap-1 p-2\">\n        <input\n          aria-label={t(\"form.editor.link-url\", \"Link URL\")}\n          className=\"h-7 min-w-0 flex-1 rounded-lt-sm border border-lt-input bg-transparent px-2 text-sm outline-none focus:border-lt-ring\"\n          data-test=\"editor-link-url\"\n          onChange={(event) => setUrl(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              apply();\n            }\n          }}\n          placeholder=\"https://\"\n          type=\"url\"\n          value={url}\n        />\n        <ToolbarIconButton\n          icon=\"check\"\n          label={t(\"form.editor.link-apply\", \"Apply link\")}\n          onClick={apply}\n          testId=\"editor-link-apply\"\n        />\n        {editor.isActive(\"link\") && (\n          <ToolbarIconButton\n            icon=\"trash-2\"\n            label={t(\"form.editor.link-remove\", \"Remove link\")}\n            onClick={() => {\n              editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n              setOpen(false);\n            }}\n            testId=\"editor-link-remove\"\n          />\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction EmojiPicker({ editor, emojis }: { editor: Editor; emojis: string[] }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover onOpenChange={setOpen} open={open}>\n      <PopoverTrigger asChild>\n        <ToolbarIconButton\n          icon=\"smile\"\n          label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n          testId=\"editor-emoji\"\n        />\n      </PopoverTrigger>\n      <PopoverContent className=\"grid grid-cols-8 gap-0.5 p-1\">\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      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction markButton(key: string, icon: string, label: string, mark: string): ToolbarButton {\n  return {\n    icon,\n    key,\n    label,\n    isActive: (editor) => editor.isActive(mark),\n    run: (editor) => editor.chain().focus().toggleMark(mark).run(),\n  };\n}\n\nlet registered = false;\n\n/**\n * Called by the editor field when its chunk loads. Registration must be an\n * explicitly invoked export: the package ships side-effect-free modules, so a\n * bare `import \"./builtins\"` would be tree-shaken out of production builds.\n */\nexport function registerBuiltinRichEditorExtensions(): void {\n  if (registered) {\n    return;\n  }\n\n  registered = true;\n\n  seedRichEditorExtension(\"bold\", {\n    group: \"marks\",\n    starterKit: () => ({ bold: {} }),\n    toolbar: () => [markButton(\"bold\", \"bold\", \"Bold\", \"bold\")],\n  });\n\n  seedRichEditorExtension(\"italic\", {\n    group: \"marks\",\n    starterKit: () => ({ italic: {} }),\n    toolbar: () => [markButton(\"italic\", \"italic\", \"Italic\", \"italic\")],\n  });\n\n  seedRichEditorExtension(\"strike\", {\n    group: \"marks\",\n    starterKit: () => ({ strike: {} }),\n    toolbar: () => [markButton(\"strikethrough\", \"strikethrough\", \"Strikethrough\", \"strike\")],\n  });\n\n  seedRichEditorExtension(\"underline\", {\n    group: \"marks\",\n    starterKit: () => ({ underline: {} }),\n    toolbar: () => [markButton(\"underline\", \"underline\", \"Underline\", \"underline\")],\n  });\n\n  seedRichEditorExtension(\"highlight\", {\n    group: \"marks\",\n    extensions: () => [Highlight],\n    toolbar: () => [markButton(\"highlight\", \"highlighter\", \"Highlight\", \"highlight\")],\n  });\n\n  seedRichEditorExtension(\"code\", {\n    group: \"marks\",\n    starterKit: () => ({ code: {} }),\n    toolbar: () => [markButton(\"code\", \"code-xml\", \"Code\", \"code\")],\n  });\n\n  seedRichEditorExtension(\"heading\", {\n    starterKit: (props) => ({ heading: { levels: headingLevels(props.levels) } }),\n    toolbar: (props) => {\n      const levels = headingLevels(props.levels);\n\n      return [\n        {\n          key: \"heading\",\n          component: ({ editor }) => <HeadingMenu editor={editor} levels={levels} />,\n        },\n      ];\n    },\n  });\n\n  seedRichEditorExtension(\"bullet-list\", {\n    group: \"blocks\",\n    starterKit: () => ({ bulletList: {}, listItem: {} }),\n    toolbar: () => [\n      {\n        icon: \"list\",\n        key: \"bullet-list\",\n        label: \"Bullet list\",\n        isActive: (editor) => editor.isActive(\"bulletList\"),\n        run: (editor) => editor.chain().focus().toggleBulletList().run(),\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"ordered-list\", {\n    group: \"blocks\",\n    starterKit: () => ({ orderedList: {}, listItem: {} }),\n    toolbar: () => [\n      {\n        icon: \"list-ordered\",\n        key: \"ordered-list\",\n        label: \"Ordered list\",\n        isActive: (editor) => editor.isActive(\"orderedList\"),\n        run: (editor) => editor.chain().focus().toggleOrderedList().run(),\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"blockquote\", {\n    group: \"blocks\",\n    starterKit: () => ({ blockquote: {} }),\n    toolbar: () => [\n      {\n        icon: \"quote\",\n        key: \"blockquote\",\n        label: \"Blockquote\",\n        isActive: (editor) => editor.isActive(\"blockquote\"),\n        run: (editor) => editor.chain().focus().toggleBlockquote().run(),\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"code-block\", {\n    group: \"blocks\",\n    starterKit: () => ({ codeBlock: {} }),\n    toolbar: () => [\n      {\n        icon: \"code\",\n        key: \"code-block\",\n        label: \"Code block\",\n        isActive: (editor) => editor.isActive(\"codeBlock\"),\n        run: (editor) => editor.chain().focus().toggleCodeBlock().run(),\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"horizontal-rule\", {\n    group: \"blocks\",\n    starterKit: () => ({ horizontalRule: {} }),\n    toolbar: () => [\n      {\n        icon: \"minus\",\n        key: \"horizontal-rule\",\n        label: \"Horizontal rule\",\n        isActive: () => false,\n        run: (editor) => editor.chain().focus().setHorizontalRule().run(),\n      },\n    ],\n  });\n\n  const ALIGNMENT_BUTTONS: Record<string, { icon: string; key: string; label: string }> = {\n    left: { icon: \"align-left\", key: \"align-left\", label: \"Align left\" },\n    center: { icon: \"align-center\", key: \"align-center\", label: \"Align center\" },\n    right: { icon: \"align-right\", key: \"align-right\", label: \"Align right\" },\n    justify: { icon: \"align-justify\", key: \"justify\", label: \"Justify\" },\n  };\n\n  seedRichEditorExtension(\"text-align\", {\n    extensions: (props) => [\n      TextAlign.configure({\n        alignments: props.alignments ?? ALL_ALIGNMENTS,\n        types: [\"heading\", \"paragraph\"],\n      }),\n    ],\n    toolbar: (props) =>\n      (props.alignments ?? ALL_ALIGNMENTS)\n        .filter((alignment) => alignment in ALIGNMENT_BUTTONS)\n        .map((alignment) => ({\n          ...ALIGNMENT_BUTTONS[alignment],\n          isActive: (editor: Editor) => editor.isActive({ textAlign: alignment }),\n          run: (editor: Editor) => editor.chain().focus().setTextAlign(alignment).run(),\n        })),\n  });\n\n  seedRichEditorExtension(\"link\", {\n    starterKit: (props) => ({\n      link: {\n        openOnClick: props.openOnClick ?? false,\n        ...(props.protocols ? { protocols: props.protocols } : {}),\n      },\n    }),\n    toolbar: () => [\n      {\n        key: \"link\",\n        component: ({ editor }) => <LinkControl editor={editor} />,\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"table\", {\n    group: \"insert\",\n    extensions: () => [TableKit.configure({ table: { resizable: false } })],\n    toolbar: (props) => [\n      {\n        icon: \"table\",\n        key: \"insert-table\",\n        label: \"Insert table\",\n        isActive: (editor) => editor.isActive(\"table\"),\n        run: (editor) =>\n          editor\n            .chain()\n            .focus()\n            .insertTable({\n              rows: props.rows ?? 3,\n              cols: props.cols ?? 3,\n              withHeaderRow: props.withHeaderRow ?? true,\n            })\n            .run(),\n      },\n      {\n        icon: \"columns-3\",\n        key: \"add-column\",\n        label: \"Add column\",\n        isActive: () => false,\n        isDisabled: (editor) => !editor.can().addColumnAfter(),\n        run: (editor) => editor.chain().focus().addColumnAfter().run(),\n      },\n      {\n        icon: \"rows-3\",\n        key: \"add-row\",\n        label: \"Add row\",\n        isActive: () => false,\n        isDisabled: (editor) => !editor.can().addRowAfter(),\n        run: (editor) => editor.chain().focus().addRowAfter().run(),\n      },\n      {\n        icon: \"trash-2\",\n        key: \"delete-table\",\n        label: \"Delete table\",\n        isActive: () => false,\n        isDisabled: (editor) => !editor.can().deleteTable(),\n        run: (editor) => editor.chain().focus().deleteTable().run(),\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"details\", {\n    group: \"insert\",\n    extensions: () => [Details, DetailsSummary, DetailsContent],\n    toolbar: () => [\n      {\n        icon: \"chevron-right\",\n        key: \"details\",\n        label: \"Details\",\n        isActive: (editor) => editor.isActive(\"details\"),\n        run: (editor) => {\n          if (editor.isActive(\"details\")) {\n            editor.chain().focus().unsetDetails().run();\n\n            return;\n          }\n\n          editor.chain().focus().setDetails().run();\n        },\n      },\n    ],\n  });\n\n  seedRichEditorExtension(\"emoji\", {\n    toolbar: (props) => {\n      const emojis = props.emojis ?? DEFAULT_EMOJIS;\n\n      return [\n        {\n          key: \"insert-emoji\",\n          component: ({ editor }) => <EmojiPicker editor={editor} emojis={emojis} />,\n        },\n      ];\n    },\n  });\n}\n"],"mappings":"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"}

package/dist/form/rich-editor/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Entry point for registering custom rich-editor extensions outside the
+ * package. Modules not re-exported here are internal and may change without
+ * notice.
+ */
+export { registerRichEditorExtension, type EditorExtensionPayloadOf, type EditorExtensionProps, type RichEditorExtensionDefinition, type ToolbarButton, type ToolbarControl, type ToolbarItem, } from './registry.js';
+export { ToolbarIconButton } from './toolbar-button.js';

package/dist/form/rich-editor/index.js

@@ -0,0 +1,3 @@
+import { registerRichEditorExtension } from "./registry.js";
+import { ToolbarIconButton } from "./toolbar-button.js";
+export { ToolbarIconButton, registerRichEditorExtension };

package/dist/form/rich-editor/registry.d.ts

@@ -0,0 +1,67 @@
+import { AnyExtension, Editor } from '@tiptap/core';
+import { StarterKitOptions } from '@tiptap/starter-kit';
+import { ComponentType } from 'react';
+import { ResolveProps } from '../../core/types.js';
+import { EditorExtension, EditorExtensionPropsMap } from '../../types/generated.js';
+/**
+ * Consumer apps augment this via `declare module "@lattice-php/lattice"` to type
+ * their custom extensions' props; built-ins resolve through
+ * `EditorExtensionPropsMap`. The editor counterpart of `EffectProps`.
+ */
+export interface EditorExtensionProps {
+}
+export type EditorExtensionPayloadOf<TType extends string> = ResolveProps<EditorExtensionProps, EditorExtensionPropsMap, TType, Record<string, unknown>>;
+export type ToolbarButton = {
+    icon: string;
+    key: string;
+    label: string;
+    isActive: (editor: Editor) => boolean;
+    isDisabled?: (editor: Editor) => boolean;
+    run: (editor: Editor) => void;
+};
+/**
+ * A toolbar item that renders its own markup (dropdowns, popovers) instead of
+ * the standard icon button.
+ */
+export type ToolbarControl = {
+    key: string;
+    component: ComponentType<{
+        editor: Editor;
+    }>;
+};
+export type ToolbarItem = ToolbarButton | ToolbarControl;
+export type ToolbarEntry = ToolbarItem | "separator";
+export type RichEditorExtensionDefinition<P = Record<string, unknown>> = {
+    extensions?: (props: P) => AnyExtension[];
+    /** Contribution to the single shared StarterKit configuration. */
+    starterKit?: (props: P) => Partial<StarterKitOptions>;
+    toolbar?: (props: P) => ToolbarItem[];
+    /**
+     * Adjacent toolbar contributions from the same group render without a
+     * separator between them; defaults to the extension's own wire type.
+     */
+    group?: string;
+};
+export type ResolvedRichEditorExtension = {
+    type: string;
+    props: Record<string, unknown>;
+    definition: RichEditorExtensionDefinition;
+    group: string;
+};
+/**
+ * Wire props stay `Partial` at the definition boundary — a client-registered
+ * type's props carry no generated shape, so definitions default each field.
+ */
+export declare function registerRichEditorExtension<TType extends string>(type: TType, definition: RichEditorExtensionDefinition<Partial<EditorExtensionPayloadOf<TType>>>): void;
+/**
+ * Registration that yields to an existing entry. The built-ins load with the
+ * lazy editor chunk — after app boot code ran — so seeding (instead of
+ * registering) keeps a consumer's deliberate override of a built-in type.
+ *
+ * @internal
+ */
+export declare function seedRichEditorExtension<TType extends string>(type: TType, definition: RichEditorExtensionDefinition<Partial<EditorExtensionPayloadOf<TType>>>): void;
+export declare function resolveRichEditorExtensions(specs: EditorExtension[]): ResolvedRichEditorExtension[];
+export declare function assembleStarterKitOptions(extensions: ResolvedRichEditorExtension[]): Partial<StarterKitOptions>;
+export declare function assembleTiptapExtensions(extensions: ResolvedRichEditorExtension[]): AnyExtension[];
+export declare function assembleToolbar(extensions: ResolvedRichEditorExtension[]): ToolbarEntry[];

package/dist/form/rich-editor/registry.js

@@ -0,0 +1,79 @@
+//#region resources/js/form/rich-editor/registry.ts
+var registry = /* @__PURE__ */ new Map();
+/**
+* Wire props stay `Partial` at the definition boundary — a client-registered
+* type's props carry no generated shape, so definitions default each field.
+*/
+function registerRichEditorExtension(type, definition) {
+	registry.set(type, definition);
+}
+/**
+* Registration that yields to an existing entry. The built-ins load with the
+* lazy editor chunk — after app boot code ran — so seeding (instead of
+* registering) keeps a consumer's deliberate override of a built-in type.
+*
+* @internal
+*/
+function seedRichEditorExtension(type, definition) {
+	if (!registry.has(type)) registerRichEditorExtension(type, definition);
+}
+function resolveRichEditorExtensions(specs) {
+	const resolved = [];
+	for (const spec of specs) {
+		const definition = registry.get(spec.type);
+		if (!definition) continue;
+		resolved.push({
+			type: spec.type,
+			props: spec.props,
+			definition,
+			group: definition.group ?? spec.type
+		});
+	}
+	return resolved;
+}
+/**
+* One shared StarterKit for the whole editor: the always-on baseline (document,
+* paragraph, text, hard break, undo/redo, cursors and the invisible list/trailing
+* helpers) plus whatever the active extensions re-enable. Everything else is
+* explicitly disabled — StarterKit turns every feature on unless told otherwise.
+*/
+var DISABLED_STARTER_KIT_FEATURES = {
+	blockquote: false,
+	bold: false,
+	bulletList: false,
+	code: false,
+	codeBlock: false,
+	heading: false,
+	horizontalRule: false,
+	italic: false,
+	link: false,
+	listItem: false,
+	orderedList: false,
+	strike: false,
+	underline: false
+};
+function assembleStarterKitOptions(extensions) {
+	return extensions.reduce((options, extension) => ({
+		...options,
+		...extension.definition.starterKit?.(extension.props)
+	}), { ...DISABLED_STARTER_KIT_FEATURES });
+}
+function assembleTiptapExtensions(extensions) {
+	return extensions.flatMap((extension) => extension.definition.extensions?.(extension.props) ?? []);
+}
+function assembleToolbar(extensions) {
+	const entries = [];
+	let previousGroup = null;
+	for (const extension of extensions) {
+		const items = extension.definition.toolbar?.(extension.props) ?? [];
+		if (items.length === 0) continue;
+		if (previousGroup !== null && previousGroup !== extension.group) entries.push("separator");
+		entries.push(...items);
+		previousGroup = extension.group;
+	}
+	return entries;
+}
+//#endregion
+export { assembleStarterKitOptions, assembleTiptapExtensions, assembleToolbar, registerRichEditorExtension, resolveRichEditorExtensions, seedRichEditorExtension };
+
+//# sourceMappingURL=registry.js.map