@namroodinc/liquid-editorial 0.1.6 → 0.1.8

package/dist/chunks/{RichTextEditor-CSpjsL1z.js → RichTextEditor-Dnx4i7bQ.js}

@@ -219,139 +219,150 @@ var k = [
 		label: "Redo",
 		run: (e) => e.chain().focus().redo().run()
 	}]
-], A = a(function(n, r) {
-	let { placeholder: i = "Write something…", size: a = "md", isDisabled: d = !1, isInvalid: _ = !1, label: x = "Rich text editor", className: S, toolbarExtra: T, id: A, isRequired: j, "aria-labelledby": M, "aria-describedby": N, "aria-invalid": P } = n, [F, I] = u(!1), [L, R] = u(null), z = o(() => R(null), []), [B] = u(() => n.defaultValue ?? (n.format === "json" ? C : "")), V = n.value === void 0 ? B : n.value, H = l(() => n.format === "json" ? D(V) : void 0, [n.format, V]), U = c(), W = _ || !!H || P, G = d || !!H;
-	G && L && R(null);
-	let K = o((e, t) => {
-		if (G) return;
+];
+function A({ editor: n, state: r, disabled: i, label: a, toolbarExtra: o, openLink: s }) {
+	return /* @__PURE__ */ p("div", {
+		className: "ds-rte__toolbar",
+		role: "toolbar",
+		"aria-label": `${a} formatting`,
+		children: [
+			k.map((a, o) => /* @__PURE__ */ f(t, {
+				"aria-label": `Formatting ${o + 1}`,
+				children: a.map((t) => /* @__PURE__ */ f(e, {
+					size: "sm",
+					isIconOnly: !0,
+					iconStart: t.icon,
+					"aria-label": t.label,
+					title: t.label,
+					"aria-pressed": t.active ? r?.active[t.id] : void 0,
+					variant: r?.active[t.id] ? "active" : "neutral",
+					isDisabled: i || !n,
+					onClick: () => n && t.run(n)
+				}, t.id))
+			}, o)),
+			/* @__PURE__ */ f(t, {
+				"aria-label": "Link",
+				children: /* @__PURE__ */ f(e, {
+					size: "sm",
+					isIconOnly: !0,
+					iconStart: "link",
+					"aria-label": r?.linkActive ? "Edit link" : "Add link",
+					title: r?.linkActive ? "Edit link" : "Add link",
+					variant: r?.linkActive ? "active" : "neutral",
+					isDisabled: i || !n,
+					onClick: () => n && s(n.state, n.isActive("link") ? n.state.selection.from : void 0)
+				})
+			}),
+			o
+		]
+	});
+}
+var j = a(function(e, t) {
+	let { placeholder: n = "Write something…", size: r = "md", isDisabled: i = !1, isInvalid: a = !1, label: d = "Rich text editor", className: _, toolbarExtra: x, id: S, isRequired: T, "aria-labelledby": j, "aria-describedby": M, "aria-invalid": N } = e, [P, F] = u(!1), [I, L] = u(null), R = o(() => L(null), []), [z] = u(() => e.defaultValue ?? (e.format === "json" ? C : "")), B = e.value === void 0 ? z : e.value, V = l(() => e.format === "json" ? D(B) : void 0, [e.format, B]), H = c(), U = a || !!V || N, W = i || !!V;
+	W && I && L(null);
+	let G = o((e, t) => {
+		if (W) return;
 		let n = t === void 0 ? void 0 : g(e.doc.resolve(t), e.schema.marks.link), r = n && e.doc.nodeAt(n.from)?.marks.find((t) => t.type === e.schema.marks.link);
-		R({
+		L({
 			from: n?.from ?? e.selection.from,
 			to: n?.to ?? e.selection.to,
 			href: r?.attrs.href ?? "",
 			isEditing: !!r,
 			document: e.doc
 		});
-	}, [G]), q = l(() => ({
+	}, [W]), K = l(() => ({
 		role: "textbox",
-		"aria-label": x,
+		"aria-label": d,
 		"aria-multiline": "true",
-		...A ? { id: A } : {},
-		...M ? { "aria-labelledby": M } : {},
-		...N ? { "aria-describedby": N } : {},
-		...W ? { "aria-invalid": String(W) } : {},
-		...j ? { "aria-required": "true" } : {}
+		...S ? { id: S } : {},
+		...j ? { "aria-labelledby": j } : {},
+		...M ? { "aria-describedby": M } : {},
+		...U ? { "aria-invalid": String(U) } : {},
+		...T ? { "aria-required": "true" } : {}
 	}), [
-		x,
-		A,
+		d,
+		S,
+		j,
 		M,
-		N,
-		W,
-		j
-	]), J = l(() => ({
-		attributes: q,
+		U,
+		T
+	]), q = l(() => ({
+		attributes: K,
 		handleDOMEvents: { click: (e, t) => {
 			let n = t.target instanceof Element ? t.target.closest("a") : null;
-			return !n || !e.dom.contains(n) ? !1 : (t.preventDefault(), e.editable && K(e.state, e.posAtDOM(n, 0)), !0);
+			return !n || !e.dom.contains(n) ? !1 : (t.preventDefault(), e.editable && G(e.state, e.posAtDOM(n, 0)), !0);
 		} }
-	}), [q, K]), Y = v({
+	}), [K, G]), J = v({
 		immediatelyRender: !1,
-		editable: !G,
-		content: H ? C : typeof V == "string" ? V : E(V),
-		extensions: [...w(), b.configure({ placeholder: i })],
-		editorProps: J,
-		onFocus: () => I(!0),
-		onBlur: () => I(!1),
-		onUpdate: ({ editor: e }) => {
-			G || (n.format === "json" ? n.onChange?.(e.getJSON()) : n.onChange?.(e.getHTML()));
+		editable: !W,
+		content: V ? C : typeof B == "string" ? B : E(B),
+		extensions: [...w(), b.configure({ placeholder: n })],
+		editorProps: q,
+		onFocus: () => F(!0),
+		onBlur: () => F(!1),
+		onUpdate: ({ editor: t }) => {
+			W || (e.format === "json" ? e.onChange?.(t.getJSON()) : e.onChange?.(t.getHTML()));
 		}
 	});
 	s(() => {
-		Y && (Y.setEditable(!G, !1), Y.setOptions({ editorProps: J }));
+		J && (J.setEditable(!W, !1), J.setOptions({ editorProps: q }));
 	}, [
-		Y,
-		G,
-		J
+		J,
+		W,
+		q
 	]), s(() => {
-		if (!Y || n.value === void 0 || H) return;
-		let e = typeof n.value == "string" ? h(n.value, Y.schema) : Y.schema.nodeFromJSON(E(n.value));
-		e.eq(Y.state.doc) || Y.commands.setContent(e, { emitUpdate: !1 });
+		if (!J || e.value === void 0 || V) return;
+		let t = typeof e.value == "string" ? h(e.value, J.schema) : J.schema.nodeFromJSON(E(e.value));
+		t.eq(J.state.doc) || J.commands.setContent(t, { emitUpdate: !1 });
 	}, [
-		Y,
-		n.value,
-		H
+		J,
+		e.value,
+		V
 	]);
-	let X = y({
-		editor: Y,
+	let Y = y({
+		editor: J,
 		selector: ({ editor: e }) => e ? {
 			active: Object.fromEntries(k.flat().map((t) => [t.id, t.active?.(e) ?? !1])),
 			linkActive: e.isActive("link")
 		} : null
 	});
 	return /* @__PURE__ */ p("div", {
-		ref: r,
-		className: ["ds-rte", S].filter(Boolean).join(" "),
-		"data-focused": F || void 0,
-		"data-disabled": G || void 0,
-		"aria-invalid": W || void 0,
+		ref: t,
+		className: ["ds-rte", _].filter(Boolean).join(" "),
+		"data-focused": P || void 0,
+		"data-disabled": W || void 0,
+		"aria-invalid": U || void 0,
 		children: [
-			H && /* @__PURE__ */ f("p", {
-				id: U,
+			V && /* @__PURE__ */ f("p", {
+				id: H,
 				role: "alert",
 				className: "ds-field__error",
-				children: H
+				children: V
 			}),
 			/* @__PURE__ */ p("div", {
-				hidden: !!H,
-				children: [/* @__PURE__ */ p("div", {
-					className: "ds-rte__toolbar",
-					role: "toolbar",
-					"aria-label": `${x} formatting`,
-					children: [
-						k.map((n, r) => /* @__PURE__ */ f(t, {
-							"aria-label": `Formatting ${r + 1}`,
-							children: n.map((t) => /* @__PURE__ */ f(e, {
-								size: "sm",
-								isIconOnly: !0,
-								iconStart: t.icon,
-								"aria-label": t.label,
-								title: t.label,
-								"aria-pressed": t.active ? X?.active[t.id] : void 0,
-								variant: X?.active[t.id] ? "active" : "neutral",
-								isDisabled: G || !Y,
-								onClick: () => Y && t.run(Y)
-							}, t.id))
-						}, r)),
-						/* @__PURE__ */ f(t, {
-							"aria-label": "Link",
-							children: /* @__PURE__ */ f(e, {
-								size: "sm",
-								isIconOnly: !0,
-								iconStart: "link",
-								"aria-label": X?.linkActive ? "Edit link" : "Add link",
-								title: X?.linkActive ? "Edit link" : "Add link",
-								variant: X?.linkActive ? "active" : "neutral",
-								isDisabled: G || !Y,
-								onClick: () => Y && K(Y.state, Y.isActive("link") ? Y.state.selection.from : void 0)
-							})
-						}),
-						T
-					]
+				hidden: !!V,
+				children: [/* @__PURE__ */ f(A, {
+					editor: J,
+					state: Y,
+					disabled: W,
+					label: d,
+					toolbarExtra: x,
+					openLink: G
 				}), /* @__PURE__ */ f("div", {
 					className: "ds-rte__content",
-					"data-size": a,
-					children: /* @__PURE__ */ f(m, { editor: Y })
+					"data-size": r,
+					children: /* @__PURE__ */ f(m, { editor: J })
 				})]
 			}),
-			Y && L && !G && /* @__PURE__ */ f(O, {
-				editor: Y,
-				selection: L,
-				onClose: z
+			J && I && !W && /* @__PURE__ */ f(O, {
+				editor: J,
+				selection: I,
+				onClose: R
 			})
 		]
 	});
 });
 //#endregion
-export { D as n, C as r, A as t };
+export { D as n, C as r, j as t };
 
-//# sourceMappingURL=RichTextEditor-CSpjsL1z.js.map
+//# sourceMappingURL=RichTextEditor-Dnx4i7bQ.js.map

package/dist/chunks/RichTextEditor-Dnx4i7bQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor-Dnx4i7bQ.js","names":["_Fragment","Fragment$1","emptyDocument","richTextExtensions","StarterKit","Link","schema","getSchema","normalizeDocument","document","documentError","value","check","type","node","key","mark","markType","LinkDialog","href","setHref","useState","selection","error","setError","formId","useId","onTransaction","editor","onClose","canEdit","save","url","chain","Modal","Button","event","Field","TextField","field","GROUPS","EditorToolbar","label","ButtonGroup","i","group","tool","state","disabled","openLink","toolbarExtra","RichTextEditor","forwardRef","labelledBy","describedBy","ariaInvalid","props","isFocused","setIsFocused","linkSelection","setLinkSelection","closeLink","useCallback","initialValue","content","contentError","useMemo","errorId","invalid","isInvalid","isDisabled","range","position","getMarkRange","link","attributes","id","isRequired","editorProps","anchor","view","useEditor","Placeholder","e","useEffect","next","createDocument","useEditorState","className","size","EditorContent"],"sources":["../../src/components/RichTextEditor/document.ts","../../src/components/RichTextEditor/index.tsx"],"sourcesContent":["import { getSchema, type JSONContent } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { Link } from \"@tiptap/extension-link\";\n\nexport type RichTextDocument = JSONContent & { type: \"doc\" };\n\nexport const emptyDocument: RichTextDocument = { type: \"doc\", content: [{ type: \"paragraph\" }] };\n\nexport function richTextExtensions() {\n  return [StarterKit.configure({ link: false }), Link.configure({ openOnClick: false, autolink: true })];\n}\n\nconst schema = getSchema(richTextExtensions());\n\n/** ProseMirror represents an empty writing surface with one empty paragraph. */\nexport function normalizeDocument(document: RichTextDocument): RichTextDocument {\n  return !document.content?.length ? { ...document, content: emptyDocument.content } : document;\n}\n\nexport function documentError(value: unknown): string | undefined {\n  try {\n    if (!value || typeof value !== \"object\" || !(\"type\" in value) || value.type !== \"doc\") throw new Error();\n    const check = (node: JSONContent) => {\n      const type = schema.nodes[node.type ?? \"\"];\n      if (!type || Object.keys(node).some((key) => ![\"type\", \"attrs\", \"content\", \"marks\", \"text\"].includes(key)) ||\n        (node.text !== undefined && node.type !== \"text\") ||\n        (node.attrs && Object.keys(node.attrs).some((key) => !Object.hasOwn(type.spec.attrs ?? {}, key)))) {\n        throw new Error();\n      }\n      for (const mark of node.marks ?? []) {\n        const markType = schema.marks[mark.type];\n        if (!markType || Object.keys(mark).some((key) => ![\"type\", \"attrs\"].includes(key)) ||\n          Object.keys(mark.attrs ?? {}).some((key) => !Object.hasOwn(markType.spec.attrs ?? {}, key))) {\n          throw new Error();\n        }\n      }\n      node.content?.forEach(check);\n    };\n    const document = value as RichTextDocument;\n    check(document);\n    schema.nodeFromJSON(normalizeDocument(document)).check();\n  } catch {\n    return \"Unsupported or invalid rich-text document.\";\n  }\n}\n","import { forwardRef, useCallback, useEffect, useId, useMemo, useState, type AriaAttributes, type ReactNode } from \"react\";\nimport { createDocument, EditorContent, getMarkRange, useEditor, useEditorState, type Editor, type EditorOptions } from \"@tiptap/react\";\nimport { Placeholder } from \"@tiptap/extension-placeholder\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { Field } from \"../Field\";\nimport { Modal } from \"../Modal\";\nimport { TextField } from \"../TextField\";\nimport type { IconName } from \"../Icon/icons\";\nimport { documentError, emptyDocument, normalizeDocument, richTextExtensions, type RichTextDocument } from \"./document\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport type RichTextEditorSize = \"sm\" | \"md\" | \"lg\";\n\nexport type { RichTextDocument } from \"./document\";\n\ninterface RichTextEditorCommonProps {\n  placeholder?: string;\n  size?: RichTextEditorSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Accessible name for the editing surface. */\n  label?: string;\n  className?: string;\n  /** Extra controls appended to the toolbar, e.g. a word count. */\n  toolbarExtra?: ReactNode;\n  /** Applied to the editable surface. */\n  id?: string;\n  isRequired?: boolean;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\nexport type RichTextEditorProps = RichTextEditorCommonProps & (\n  | { format?: \"html\"; value?: string; defaultValue?: string; onChange?: (html: string) => void }\n  | { format: \"json\"; value?: RichTextDocument; defaultValue?: RichTextDocument; onChange?: (document: RichTextDocument) => void }\n);\n\ninterface ToolItem {\n  id: string;\n  icon: IconName;\n  label: string;\n  run: (editor: Editor) => void;\n  active?: (editor: Editor) => boolean;\n}\n\ninterface LinkSelection {\n  from: number;\n  to: number;\n  href: string;\n  isEditing: boolean;\n  document: Editor[\"state\"][\"doc\"];\n}\n\nfunction LinkDialog({ editor, selection, onClose }: {\n  editor: Editor;\n  selection: LinkSelection;\n  onClose: () => void;\n}) {\n  const [href, setHref] = useState(selection.href);\n  const [error, setError] = useState<string>();\n  const formId = useId();\n\n  useEffect(() => {\n    const onTransaction = () => {\n      if (!editor.state.doc.eq(selection.document)) onClose();\n    };\n    editor.on(\"transaction\", onTransaction);\n    return () => { editor.off(\"transaction\", onTransaction); };\n  }, [editor, selection, onClose]);\n\n  const canEdit = () => !editor.isDestroyed && editor.isEditable && editor.state.doc.eq(selection.document);\n  const save = () => {\n    if (!canEdit()) { onClose(); return; }\n    const url = href.trim();\n    if (!url || !editor.can().setLink({ href: url })) {\n      setError(url ? \"Enter a valid link URL.\" : \"Enter a link URL.\");\n      return;\n    }\n    const chain = editor.chain().focus().setTextSelection({ from: selection.from, to: selection.to });\n    if (selection.from === selection.to && !selection.isEditing) {\n      chain.setLink({ href: url }).insertContent({ type: \"text\", text: url, marks: [{ type: \"link\", attrs: { href: url } }] }).run();\n    } else {\n      chain.setLink({ href: url }).run();\n    }\n    onClose();\n  };\n\n  return (\n    <Modal isOpen title={selection.isEditing ? \"Edit link\" : \"Add link\"} size=\"dialog\" onClose={onClose}\n      footer={<>\n        {selection.isEditing && <Button variant=\"danger\" onClick={() => {\n          if (canEdit()) editor.chain().focus().setTextSelection({ from: selection.from, to: selection.to }).unsetLink().run();\n          onClose();\n        }}>Remove link</Button>}\n        <Button onClick={onClose}>Cancel</Button>\n        <Button variant=\"primary\" type=\"submit\" form={formId}>Save</Button>\n      </>}>\n      <form id={formId} noValidate onSubmit={(event) => { event.preventDefault(); event.stopPropagation(); save(); }}>\n        <Field label=\"URL\" isRequired error={error}>\n          {(field) => <TextField {...field} value={href} inputMode=\"url\" autoComplete=\"url\"\n            placeholder=\"https://example.com\" onChange={(event) => { setHref(event.target.value); setError(undefined); }} />}\n        </Field>\n      </form>\n    </Modal>\n  );\n}\n\nconst GROUPS: ToolItem[][] = [\n  [\n    {\n      id: \"bold\",\n      icon: \"bold\",\n      label: \"Bold\",\n      run: (e) => e.chain().focus().toggleBold().run(),\n      active: (e) => e.isActive(\"bold\"),\n    },\n    {\n      id: \"italic\",\n      icon: \"italic\",\n      label: \"Italic\",\n      run: (e) => e.chain().focus().toggleItalic().run(),\n      active: (e) => e.isActive(\"italic\"),\n    },\n    {\n      id: \"strike\",\n      icon: \"strikethrough\",\n      label: \"Strikethrough\",\n      run: (e) => e.chain().focus().toggleStrike().run(),\n      active: (e) => e.isActive(\"strike\"),\n    },\n    {\n      id: \"code\",\n      icon: \"code\",\n      label: \"Inline code\",\n      run: (e) => e.chain().focus().toggleCode().run(),\n      active: (e) => e.isActive(\"code\"),\n    },\n  ],\n  [\n    {\n      id: \"h2\",\n      icon: \"heading-2\",\n      label: \"Heading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 2 }),\n    },\n    {\n      id: \"h3\",\n      icon: \"heading-3\",\n      label: \"Subheading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 3 }),\n    },\n    {\n      id: \"quote\",\n      icon: \"quote\",\n      label: \"Quote\",\n      run: (e) => e.chain().focus().toggleBlockquote().run(),\n      active: (e) => e.isActive(\"blockquote\"),\n    },\n  ],\n  [\n    {\n      id: \"ul\",\n      icon: \"list\",\n      label: \"Bulleted list\",\n      run: (e) => e.chain().focus().toggleBulletList().run(),\n      active: (e) => e.isActive(\"bulletList\"),\n    },\n    {\n      id: \"ol\",\n      icon: \"list-ordered\",\n      label: \"Numbered list\",\n      run: (e) => e.chain().focus().toggleOrderedList().run(),\n      active: (e) => e.isActive(\"orderedList\"),\n    },\n  ],\n  [\n    {\n      id: \"undo\",\n      icon: \"undo\",\n      label: \"Undo\",\n      run: (e) => e.chain().focus().undo().run(),\n    },\n    {\n      id: \"redo\",\n      icon: \"redo\",\n      label: \"Redo\",\n      run: (e) => e.chain().focus().redo().run(),\n    },\n  ],\n];\n\ninterface ToolbarState {\n  active: Record<string, boolean>;\n  linkActive: boolean;\n}\n\nfunction EditorToolbar({ editor, state, disabled, label, toolbarExtra, openLink }: {\n  editor: Editor | null;\n  state: ToolbarState | null;\n  disabled: boolean;\n  label: string;\n  toolbarExtra: ReactNode;\n  openLink: (state: Editor[\"state\"], position?: number) => void;\n}) {\n  return (\n    <div className=\"ds-rte__toolbar\" role=\"toolbar\" aria-label={`${label} formatting`}>\n      {GROUPS.map((group, i) => (\n        <ButtonGroup key={i} aria-label={`Formatting ${i + 1}`}>\n          {group.map((tool) => (\n            <Button\n              key={tool.id}\n              size=\"sm\"\n              isIconOnly\n              iconStart={tool.icon}\n              aria-label={tool.label}\n              title={tool.label}\n              aria-pressed={tool.active ? state?.active[tool.id] : undefined}\n              variant={state?.active[tool.id] ? \"active\" : \"neutral\"}\n              isDisabled={disabled || !editor}\n              onClick={() => editor && tool.run(editor)}\n            />\n          ))}\n        </ButtonGroup>\n      ))}\n      <ButtonGroup aria-label=\"Link\">\n        <Button\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"link\"\n          aria-label={state?.linkActive ? \"Edit link\" : \"Add link\"}\n          title={state?.linkActive ? \"Edit link\" : \"Add link\"}\n          variant={state?.linkActive ? \"active\" : \"neutral\"}\n          isDisabled={disabled || !editor}\n          onClick={() => editor && openLink(editor.state, editor.isActive(\"link\") ? editor.state.selection.from : undefined)}\n        />\n      </ButtonGroup>\n      {toolbarExtra}\n    </div>\n  );\n}\n\n/**\n * The editorial writing surface. Rich text plus links — the same field skin,\n * radius and states as `TextField`, with the toolbar inside the frame.\n */\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  function RichTextEditor(\n    props,\n    ref,\n  ) {\n    const {\n      placeholder = \"Write something…\",\n      size = \"md\",\n      isDisabled = false,\n      isInvalid = false,\n      label = \"Rich text editor\",\n      className,\n      toolbarExtra,\n      id,\n      isRequired,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      \"aria-invalid\": ariaInvalid,\n    } = props;\n    const [isFocused, setIsFocused] = useState(false);\n    const [linkSelection, setLinkSelection] = useState<LinkSelection | null>(null);\n    const closeLink = useCallback(() => setLinkSelection(null), []);\n    const [initialValue] = useState(() => props.defaultValue ?? (props.format === \"json\" ? emptyDocument : \"\"));\n    const content = props.value !== undefined ? props.value : initialValue;\n    const contentError = useMemo(() => props.format === \"json\" ? documentError(content) : undefined, [props.format, content]);\n    const errorId = useId();\n    const invalid = isInvalid || !!contentError || ariaInvalid;\n    const disabled = isDisabled || !!contentError;\n    if (disabled && linkSelection) setLinkSelection(null);\n    const openLink = useCallback((state: Editor[\"state\"], position?: number) => {\n      if (disabled) return;\n      const range = position === undefined ? undefined : getMarkRange(state.doc.resolve(position), state.schema.marks.link);\n      const link = range && state.doc.nodeAt(range.from)?.marks.find((mark) => mark.type === state.schema.marks.link);\n      setLinkSelection({\n        from: range?.from ?? state.selection.from,\n        to: range?.to ?? state.selection.to,\n        href: link?.attrs.href ?? \"\",\n        isEditing: !!link,\n        document: state.doc,\n      });\n    }, [disabled]);\n    const attributes = useMemo(() => ({\n      role: \"textbox\",\n      \"aria-label\": label,\n      \"aria-multiline\": \"true\",\n      ...(id ? { id } : {}),\n      ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n      ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n      ...(invalid ? { \"aria-invalid\": String(invalid) } : {}),\n      ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    }), [label, id, labelledBy, describedBy, invalid, isRequired]);\n    const editorProps = useMemo<EditorOptions[\"editorProps\"]>(() => ({\n      attributes,\n      handleDOMEvents: { click: (view, event) => {\n        const anchor = event.target instanceof Element ? event.target.closest(\"a\") : null;\n        if (!anchor || !view.dom.contains(anchor)) return false;\n        event.preventDefault();\n        if (view.editable) openLink(view.state, view.posAtDOM(anchor, 0));\n        return true;\n      } },\n    }), [attributes, openLink]);\n\n    const editor = useEditor({\n      immediatelyRender: false,\n      editable: !disabled,\n      content: contentError ? emptyDocument : typeof content === \"string\" ? content : normalizeDocument(content),\n      extensions: [\n        ...richTextExtensions(),\n        Placeholder.configure({ placeholder }),\n      ],\n      editorProps,\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false),\n      onUpdate: ({ editor: e }) => {\n        if (disabled) return;\n        if (props.format === \"json\") props.onChange?.(e.getJSON() as RichTextDocument);\n        else props.onChange?.(e.getHTML());\n      },\n    });\n\n    useEffect(() => {\n      if (!editor) return;\n      editor.setEditable(!disabled, false);\n      editor.setOptions({ editorProps });\n    }, [editor, disabled, editorProps]);\n\n    useEffect(() => {\n      if (!editor || props.value === undefined || contentError) return;\n      const next = typeof props.value === \"string\"\n        ? createDocument(props.value, editor.schema)\n        : editor.schema.nodeFromJSON(normalizeDocument(props.value));\n      // Parent echoes should preserve the current selection and undo history.\n      if (!next.eq(editor.state.doc)) {\n        editor.commands.setContent(next, { emitUpdate: false });\n      }\n    }, [editor, props.value, contentError]);\n\n    const state = useEditorState({\n      editor,\n      selector: ({ editor: e }) =>\n        e\n          ? {\n              active: Object.fromEntries(\n                GROUPS.flat().map((t) => [t.id, t.active?.(e) ?? false]),\n              ),\n              linkActive: e.isActive(\"link\"),\n            }\n          : null,\n    });\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-rte\", className].filter(Boolean).join(\" \")}\n        data-focused={isFocused || undefined}\n        data-disabled={disabled || undefined}\n        aria-invalid={invalid || undefined}\n      >\n        {contentError && <p id={errorId} role=\"alert\" className=\"ds-field__error\">{contentError}</p>}\n        <div hidden={!!contentError}>\n          <EditorToolbar editor={editor} state={state} disabled={disabled} label={label}\n            toolbarExtra={toolbarExtra} openLink={openLink} />\n          <div className=\"ds-rte__content\" data-size={size}>\n            <EditorContent editor={editor} />\n          </div>\n        </div>\n        {editor && linkSelection && !disabled && <LinkDialog editor={editor} selection={linkSelection} onClose={closeLink} />}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/chunks/mergeRefs-Bc3qS0Tt.cjs

@@ -0,0 +1,2 @@
+function e(...e){return t=>{for(let n of e)typeof n==`function`?n(t):n&&(n.current=t)}}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});
+//# sourceMappingURL=mergeRefs-Bc3qS0Tt.cjs.map

package/dist/chunks/mergeRefs-Bc3qS0Tt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs-Bc3qS0Tt.cjs","names":["mergeRefs","refs","ref","node"],"sources":["../../src/internal/mergeRefs.ts"],"sourcesContent":["import type { Ref, RefCallback } from \"react\";\n\n/** Send the same node (and unmount notification) to internal and forwarded refs. */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    }\n  };\n}\n"],"mappings":"AAGA,SAAgBA,EAAa,GAAGC,EAA8C,CAC5E,MAAQ,IAAS,CACf,IAAK,IAAMC,KAAOD,EACZ,OAAOC,GAAQ,WAAYA,EAAIC,CAAI,EAC9BD,IAAK,EAAI,QAAUC,EAEhC,CACF,C"}

package/dist/chunks/mergeRefs-DGM402mE.js

@@ -0,0 +1,10 @@
+//#region src/internal/mergeRefs.ts
+function e(...e) {
+	return (t) => {
+		for (let n of e) typeof n == "function" ? n(t) : n && (n.current = t);
+	};
+}
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=mergeRefs-DGM402mE.js.map

package/dist/chunks/mergeRefs-DGM402mE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs-DGM402mE.js","names":["mergeRefs","refs","ref","node"],"sources":["../../src/internal/mergeRefs.ts"],"sourcesContent":["import type { Ref, RefCallback } from \"react\";\n\n/** Send the same node (and unmount notification) to internal and forwarded refs. */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    }\n  };\n}\n"],"mappings":";AAGA,SAAgBA,EAAa,GAAGC,GAA8C;CAC5E,QAAQ,MAAS;EACf,KAAK,IAAMC,KAAOD,GAChB,AAAI,OAAOC,KAAQ,aAAYA,EAAIC,CAAI,IAC9BD,MAAK,EAAI,UAAUC;CAEhC;AACF"}

package/dist/components/AppShell/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../Drawer/index.cjs"),n=require("../SideNav/index.cjs"),r=require("../TopNav/index.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.forwardRef)(function({brand:o,navigation:s,actions:c,navigationLabel:l=`Main`,className:u,children:d,...f},p){let[m,h]=(0,i.useState)(null),[g,_]=(0,i.useState)(!1),v=(0,i.useRef)(null),y=(0,i.useRef)(null),b=(0,i.useRef)(!1),x=(0,i.useId)(),S=(0,i.useCallback)(e=>{h(e),typeof p==`function`?p(e):p&&(p.current=e)},[p]);(0,i.useEffect)(()=>{if(!m)return;let e=e=>{e<768||(m.querySelector(`[data-state='open'] [role='dialog']`)?.contains(document.activeElement)&&(b.current=!0),_(!1))};if(e(m.getBoundingClientRect().width),typeof ResizeObserver>`u`)return;let t=new ResizeObserver(([t])=>{t&&e(t.contentRect.width)});return t.observe(m),()=>{t.disconnect()}},[m]),(0,i.useEffect)(()=>{!g&&b.current&&(b.current=!1,(v.current?.querySelector(`[aria-current='page']`)??v.current?.querySelector(`a[href]`)??y.current)?.focus())},[g]);let C=c?.(`drawer`);return(0,a.jsxs)(`div`,{...f,ref:S,className:[`ds-appshell`,u].filter(Boolean).join(` `),children:[(0,a.jsxs)(`div`,{className:`ds-appshell__frame`,"aria-hidden":g||void 0,ref:e=>{e&&(e.inert=g)},children:[(0,a.jsx)(r.TopNav,{brand:o,actions:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`div`,{className:`ds-appshell__actions`,children:c?.(`topnav`)}),(0,a.jsx)(e.Button,{variant:`simple`,size:`lg`,isIconOnly:!0,iconStart:`menu`,className:`ds-appshell__toggle`,"aria-label":`Open navigation`,"aria-expanded":g,"aria-controls":x,onClick:()=>_(!0)})]})}),(0,a.jsxs)(`div`,{className:`ds-appshell__body`,children:[(0,a.jsx)(n.SideNav,{ref:v,className:`ds-appshell__desktop-nav`,label:l,children:s}),(0,a.jsx)(`main`,{ref:y,className:`ds-appshell__main`,tabIndex:-1,children:d})]})]}),(0,a.jsx)(t.Drawer,{id:x,isOpen:g,onClose:()=>_(!1),variant:`navigation`,portalContainer:m,title:o,"aria-label":`Navigation`,closeLabel:`Close navigation`,footer:C?(0,a.jsx)(n.SideNavFooter,{children:C}):void 0,children:(0,a.jsx)(n.SideNav,{className:`ds-appshell__mobile-nav`,label:l,onClick:e=>{let t=e.target instanceof Element?e.target.closest(`a[href]`):null,n=e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||t?.target===`_blank`;t&&!n&&_(!1)},children:s})})]})});exports.AppShell=o;
+//# sourceMappingURL=index.cjs.map

package/dist/components/AppShell/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useId","useCallback","TopNav","_Fragment","Button","SideNav","Drawer","SideNavFooter","require_components_Button_index","require_components_Drawer_index","require_components_SideNav_index","require_components_TopNav_index","react","react_jsx_runtime","AppShell","rest","shell","setShell","isOpen","setOpen","desktopNavRef","mainRef","restoreDesktopFocus","drawerId","shellRef","node","ref","measure","width","observer","entry","drawerActions","actions","className","navigationLabel","navigation","brand","link","event","opensElsewhere"],"sources":["../../../src/components/AppShell/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Drawer } from \"../Drawer\";\nimport { Button } from \"../Button\";\nimport { SideNav, SideNavFooter } from \"../SideNav\";\nimport { TopNav } from \"../TopNav\";\nimport \"./style.css\";\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Product brand, shared by the top bar and mobile drawer header. */\n  brand: ReactNode;\n  /** SideNavSection/SideNavItem content. The application owns routing and selection. */\n  navigation: ReactNode;\n  /** One slot with a compact top-bar and expanded drawer presentation. */\n  actions?: (location: \"topnav\" | \"drawer\") => ReactNode;\n  navigationLabel?: string;\n  /** Rendered inside the shell's scrolling main landmark. */\n  children?: ReactNode;\n}\n\n/** Full-width product bar above a desktop rail, or a mobile navigation drawer. */\nexport const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  { brand, navigation, actions, navigationLabel = \"Main\", className, children, ...rest },\n  ref,\n) {\n  const [shell, setShell] = useState<HTMLDivElement | null>(null);\n  const [isOpen, setOpen] = useState(false);\n  const desktopNavRef = useRef<HTMLElement | null>(null);\n  const mainRef = useRef<HTMLElement | null>(null);\n  const restoreDesktopFocus = useRef(false);\n  const drawerId = useId();\n  const shellRef = useCallback((node: HTMLDivElement | null) => {\n    setShell(node);\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  }, [ref]);\n\n  useEffect(() => {\n    if (!shell) return;\n    const measure = (width: number) => {\n      if (width < 768) return;\n      const focusInDrawer = shell.querySelector(\"[data-state='open'] [role='dialog']\")?.contains(document.activeElement);\n      if (focusInDrawer) restoreDesktopFocus.current = true;\n      setOpen(false);\n    };\n    measure(shell.getBoundingClientRect().width);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (entry) measure(entry.contentRect.width);\n    });\n    observer.observe(shell);\n    return () => {\n      observer.disconnect();\n    };\n  }, [shell]);\n\n  useEffect(() => {\n    if (isOpen || !restoreDesktopFocus.current) return;\n    restoreDesktopFocus.current = false;\n    const destination = desktopNavRef.current?.querySelector<HTMLElement>(\"[aria-current='page']\")\n      ?? desktopNavRef.current?.querySelector<HTMLElement>(\"a[href]\");\n    (destination ?? mainRef.current)?.focus();\n  }, [isOpen]);\n\n  const drawerActions = actions?.(\"drawer\");\n\n  return (\n    <div {...rest} ref={shellRef} className={[\"ds-appshell\", className].filter(Boolean).join(\" \")}>\n      <div\n        className=\"ds-appshell__frame\"\n        aria-hidden={isOpen || undefined}\n        ref={(node) => { if (node) node.inert = isOpen; }}\n      >\n        <TopNav\n          brand={brand}\n          actions={<>\n            <div className=\"ds-appshell__actions\">{actions?.(\"topnav\")}</div>\n            <Button\n              variant=\"simple\"\n              size=\"lg\"\n              isIconOnly\n              iconStart=\"menu\"\n              className=\"ds-appshell__toggle\"\n              aria-label=\"Open navigation\"\n              aria-expanded={isOpen}\n              aria-controls={drawerId}\n              onClick={() => setOpen(true)}\n            />\n          </>}\n        />\n        <div className=\"ds-appshell__body\">\n          <SideNav ref={desktopNavRef} className=\"ds-appshell__desktop-nav\" label={navigationLabel}>\n            {navigation}\n          </SideNav>\n          <main ref={mainRef} className=\"ds-appshell__main\" tabIndex={-1}>{children}</main>\n        </div>\n      </div>\n      <Drawer\n        id={drawerId}\n        isOpen={isOpen}\n        onClose={() => setOpen(false)}\n        variant=\"navigation\"\n        portalContainer={shell}\n        title={brand}\n        aria-label=\"Navigation\"\n        closeLabel=\"Close navigation\"\n        footer={drawerActions ? <SideNavFooter>{drawerActions}</SideNavFooter> : undefined}\n      >\n        <SideNav\n          className=\"ds-appshell__mobile-nav\"\n          label={navigationLabel}\n          onClick={(event) => {\n            const link = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>(\"a[href]\") : null;\n            // Opening a link elsewhere (modifier keys, another button, a new tab) leaves this page in place.\n            const opensElsewhere = event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey\n              || event.altKey || link?.target === \"_blank\";\n            if (link && !opensElsewhere) setOpen(false);\n          }}\n        >\n          {navigation}\n        </SideNav>\n      </Drawer>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/AppShell/index.d.cts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Product brand, shared by the top bar and mobile drawer header. */
+    brand: ReactNode;
+    /** SideNavSection/SideNavItem content. The application owns routing and selection. */
+    navigation: ReactNode;
+    /** One slot with a compact top-bar and expanded drawer presentation. */
+    actions?: (location: "topnav" | "drawer") => ReactNode;
+    navigationLabel?: string;
+    /** Rendered inside the shell's scrolling main landmark. */
+    children?: ReactNode;
+}
+/** Full-width product bar above a desktop rail, or a mobile navigation drawer. */
+export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/AppShell/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AppShell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,qEAAqE;IACrE,KAAK,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,UAAU,EAAE,SAAS,CAAC;IACtB,wEAAwE;IACxE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,KAAK,SAAS,CAAC;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,kFAAkF;AAClF,eAAO,MAAM,QAAQ,0GAuGnB,CAAC"}

package/dist/components/AppShell/index.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Product brand, shared by the top bar and mobile drawer header. */
+    brand: ReactNode;
+    /** SideNavSection/SideNavItem content. The application owns routing and selection. */
+    navigation: ReactNode;
+    /** One slot with a compact top-bar and expanded drawer presentation. */
+    actions?: (location: "topnav" | "drawer") => ReactNode;
+    navigationLabel?: string;
+    /** Rendered inside the shell's scrolling main landmark. */
+    children?: ReactNode;
+}
+/** Full-width product bar above a desktop rail, or a mobile navigation drawer. */
+export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AppShell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,qEAAqE;IACrE,KAAK,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,UAAU,EAAE,SAAS,CAAC;IACtB,wEAAwE;IACxE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,KAAK,SAAS,CAAC;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,kFAAkF;AAClF,eAAO,MAAM,QAAQ,0GAuGnB,CAAC"}

package/dist/components/AppShell/index.js

@@ -0,0 +1,93 @@
+import { Button as e } from "../Button/index.js";
+import { Drawer as t } from "../Drawer/index.js";
+import { SideNav as n, SideNavFooter as r } from "../SideNav/index.js";
+import { TopNav as i } from "../TopNav/index.js";
+import { forwardRef as a, useCallback as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/AppShell/index.tsx
+var m = a(function({ brand: a, navigation: m, actions: h, navigationLabel: g = "Main", className: _, children: v, ...y }, b) {
+	let [x, S] = u(null), [C, w] = u(!1), T = l(null), E = l(null), D = l(!1), O = c(), k = o((e) => {
+		S(e), typeof b == "function" ? b(e) : b && (b.current = e);
+	}, [b]);
+	s(() => {
+		if (!x) return;
+		let e = (e) => {
+			e < 768 || (x.querySelector("[data-state='open'] [role='dialog']")?.contains(document.activeElement) && (D.current = !0), w(!1));
+		};
+		if (e(x.getBoundingClientRect().width), typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(([t]) => {
+			t && e(t.contentRect.width);
+		});
+		return t.observe(x), () => {
+			t.disconnect();
+		};
+	}, [x]), s(() => {
+		!C && D.current && (D.current = !1, (T.current?.querySelector("[aria-current='page']") ?? T.current?.querySelector("a[href]") ?? E.current)?.focus());
+	}, [C]);
+	let A = h?.("drawer");
+	return /* @__PURE__ */ p("div", {
+		...y,
+		ref: k,
+		className: ["ds-appshell", _].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ p("div", {
+			className: "ds-appshell__frame",
+			"aria-hidden": C || void 0,
+			ref: (e) => {
+				e && (e.inert = C);
+			},
+			children: [/* @__PURE__ */ f(i, {
+				brand: a,
+				actions: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+					className: "ds-appshell__actions",
+					children: h?.("topnav")
+				}), /* @__PURE__ */ f(e, {
+					variant: "simple",
+					size: "lg",
+					isIconOnly: !0,
+					iconStart: "menu",
+					className: "ds-appshell__toggle",
+					"aria-label": "Open navigation",
+					"aria-expanded": C,
+					"aria-controls": O,
+					onClick: () => w(!0)
+				})] })
+			}), /* @__PURE__ */ p("div", {
+				className: "ds-appshell__body",
+				children: [/* @__PURE__ */ f(n, {
+					ref: T,
+					className: "ds-appshell__desktop-nav",
+					label: g,
+					children: m
+				}), /* @__PURE__ */ f("main", {
+					ref: E,
+					className: "ds-appshell__main",
+					tabIndex: -1,
+					children: v
+				})]
+			})]
+		}), /* @__PURE__ */ f(t, {
+			id: O,
+			isOpen: C,
+			onClose: () => w(!1),
+			variant: "navigation",
+			portalContainer: x,
+			title: a,
+			"aria-label": "Navigation",
+			closeLabel: "Close navigation",
+			footer: A ? /* @__PURE__ */ f(r, { children: A }) : void 0,
+			children: /* @__PURE__ */ f(n, {
+				className: "ds-appshell__mobile-nav",
+				label: g,
+				onClick: (e) => {
+					let t = e.target instanceof Element ? e.target.closest("a[href]") : null, n = e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || t?.target === "_blank";
+					t && !n && w(!1);
+				},
+				children: m
+			})
+		})]
+	});
+});
+//#endregion
+export { m as AppShell };
+
+//# sourceMappingURL=index.js.map

package/dist/components/AppShell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","Fragment$1","AppShell","forwardRef","rest","shell","setShell","useState","isOpen","setOpen","desktopNavRef","useRef","mainRef","restoreDesktopFocus","drawerId","useId","shellRef","useCallback","node","ref","useEffect","measure","width","observer","entry","drawerActions","actions","className","TopNav","Button","SideNav","navigationLabel","navigation","Drawer","brand","SideNavFooter","link","event","opensElsewhere"],"sources":["../../../src/components/AppShell/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Drawer } from \"../Drawer\";\nimport { Button } from \"../Button\";\nimport { SideNav, SideNavFooter } from \"../SideNav\";\nimport { TopNav } from \"../TopNav\";\nimport \"./style.css\";\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Product brand, shared by the top bar and mobile drawer header. */\n  brand: ReactNode;\n  /** SideNavSection/SideNavItem content. The application owns routing and selection. */\n  navigation: ReactNode;\n  /** One slot with a compact top-bar and expanded drawer presentation. */\n  actions?: (location: \"topnav\" | \"drawer\") => ReactNode;\n  navigationLabel?: string;\n  /** Rendered inside the shell's scrolling main landmark. */\n  children?: ReactNode;\n}\n\n/** Full-width product bar above a desktop rail, or a mobile navigation drawer. */\nexport const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  { brand, navigation, actions, navigationLabel = \"Main\", className, children, ...rest },\n  ref,\n) {\n  const [shell, setShell] = useState<HTMLDivElement | null>(null);\n  const [isOpen, setOpen] = useState(false);\n  const desktopNavRef = useRef<HTMLElement | null>(null);\n  const mainRef = useRef<HTMLElement | null>(null);\n  const restoreDesktopFocus = useRef(false);\n  const drawerId = useId();\n  const shellRef = useCallback((node: HTMLDivElement | null) => {\n    setShell(node);\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  }, [ref]);\n\n  useEffect(() => {\n    if (!shell) return;\n    const measure = (width: number) => {\n      if (width < 768) return;\n      const focusInDrawer = shell.querySelector(\"[data-state='open'] [role='dialog']\")?.contains(document.activeElement);\n      if (focusInDrawer) restoreDesktopFocus.current = true;\n      setOpen(false);\n    };\n    measure(shell.getBoundingClientRect().width);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (entry) measure(entry.contentRect.width);\n    });\n    observer.observe(shell);\n    return () => {\n      observer.disconnect();\n    };\n  }, [shell]);\n\n  useEffect(() => {\n    if (isOpen || !restoreDesktopFocus.current) return;\n    restoreDesktopFocus.current = false;\n    const destination = desktopNavRef.current?.querySelector<HTMLElement>(\"[aria-current='page']\")\n      ?? desktopNavRef.current?.querySelector<HTMLElement>(\"a[href]\");\n    (destination ?? mainRef.current)?.focus();\n  }, [isOpen]);\n\n  const drawerActions = actions?.(\"drawer\");\n\n  return (\n    <div {...rest} ref={shellRef} className={[\"ds-appshell\", className].filter(Boolean).join(\" \")}>\n      <div\n        className=\"ds-appshell__frame\"\n        aria-hidden={isOpen || undefined}\n        ref={(node) => { if (node) node.inert = isOpen; }}\n      >\n        <TopNav\n          brand={brand}\n          actions={<>\n            <div className=\"ds-appshell__actions\">{actions?.(\"topnav\")}</div>\n            <Button\n              variant=\"simple\"\n              size=\"lg\"\n              isIconOnly\n              iconStart=\"menu\"\n              className=\"ds-appshell__toggle\"\n              aria-label=\"Open navigation\"\n              aria-expanded={isOpen}\n              aria-controls={drawerId}\n              onClick={() => setOpen(true)}\n            />\n          </>}\n        />\n        <div className=\"ds-appshell__body\">\n          <SideNav ref={desktopNavRef} className=\"ds-appshell__desktop-nav\" label={navigationLabel}>\n            {navigation}\n          </SideNav>\n          <main ref={mainRef} className=\"ds-appshell__main\" tabIndex={-1}>{children}</main>\n        </div>\n      </div>\n      <Drawer\n        id={drawerId}\n        isOpen={isOpen}\n        onClose={() => setOpen(false)}\n        variant=\"navigation\"\n        portalContainer={shell}\n        title={brand}\n        aria-label=\"Navigation\"\n        closeLabel=\"Close navigation\"\n        footer={drawerActions ? <SideNavFooter>{drawerActions}</SideNavFooter> : undefined}\n      >\n        <SideNav\n          className=\"ds-appshell__mobile-nav\"\n          label={navigationLabel}\n          onClick={(event) => {\n            const link = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>(\"a[href]\") : null;\n            // Opening a link elsewhere (modifier keys, another button, a new tab) leaves this page in place.\n            const opensElsewhere = event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey\n              || event.altKey || link?.target === \"_blank\";\n            if (link && !opensElsewhere) setOpen(false);\n          }}\n        >\n          {navigation}\n        </SideNav>\n      </Drawer>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/AppShell/style.css

@@ -0,0 +1,79 @@
+@layer components {
+  .ds-appshell {
+    position: relative;
+    container: ds-appshell / inline-size;
+    block-size: 100dvh;
+    inline-size: 100%;
+    overflow: hidden;
+    background: var(--color-canvas);
+    color: var(--color-text);
+    font-family: var(--font-sans);
+  }
+
+  .ds-appshell__frame {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .ds-appshell .ds-topnav {
+    box-sizing: border-box;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 10;
+    flex: none;
+    gap: var(--space-3);
+  }
+
+  .ds-appshell__body {
+    display: flex;
+    flex: 1;
+    min-block-size: 0;
+  }
+
+  .ds-appshell__desktop-nav {
+    box-sizing: border-box;
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+
+  .ds-appshell__main {
+    flex: 1;
+    min-inline-size: 0;
+    overflow-y: auto;
+    padding: var(--space-8);
+  }
+
+  .ds-appshell__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .ds-appshell__toggle.ds-button {
+    display: none;
+    flex: none;
+    margin-inline-start: auto;
+    margin-inline-end: calc(-1 * var(--space-2));
+  }
+
+  .ds-appshell__mobile-nav {
+    inline-size: 100%;
+    min-block-size: 0;
+    border: 0;
+    overflow-y: auto;
+  }
+
+  .ds-appshell__mobile-nav .ds-sidenav__item {
+    min-block-size: calc(var(--space-10) + var(--space-1));
+    font-size: var(--field-font-size-md);
+  }
+
+  @container ds-appshell (width < 768px) {
+    .ds-appshell .ds-topnav { padding-inline: var(--space-4); }
+    .ds-appshell__desktop-nav, .ds-appshell__actions { display: none; }
+    .ds-appshell__toggle.ds-button { display: flex; }
+    .ds-appshell__main { padding: var(--space-6) var(--space-4); }
+  }
+}

package/dist/components/AssetGrid/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Grid/index.cjs"),n=require("../Skeleton/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=(0,r.forwardRef)(function({isLoading:e=!1,loadingCount:n=8,className:r,children:o,...c},l){return(0,i.jsx)(t.Grid,{ref:l,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:a(`ds-asset-grid`,r),"aria-busy":e||void 0,...c,children:e?Array.from({length:n},(e,t)=>(0,i.jsx)(s,{index:t},t)):o})});function s({index:e=0}){let t={animationDelay:`calc(var(--skeleton-stagger) * ${e})`};return(0,i.jsxs)(`div`,{className:`ds-asset-tile`,"data-loading":`true`,"aria-hidden":`true`,children:[(0,i.jsx)(n.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb`,style:t}),(0,i.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,i.jsx)(n.Skeleton,{shape:`text`,width:`80%`,style:t}),(0,i.jsx)(n.Skeleton,{shape:`text`,width:`45%`,style:t})]})]})}var c=(0,r.forwardRef)(function({name:t,src:o,icon:s=`image`,meta:c,isSelected:l=!1,isPending:u=!1,onSelect:d,actions:f,className:p,...m},h){let[g,_]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),b=!!o&&!g;return(0,i.jsxs)(`div`,{ref:h,className:a(`ds-asset-tile`,p),"data-selected":l||void 0,"data-pending":u||void 0,...m,children:[(0,i.jsxs)(`div`,{className:`ds-asset-tile__thumb`,children:[b?(0,i.jsxs)(i.Fragment,{children:[!v&&(0,i.jsx)(n.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb-skeleton`}),(0,i.jsx)(`img`,{src:o,alt:``,loading:`lazy`,"data-loaded":v||void 0,onLoad:()=>y(!0),onError:()=>_(!0)})]}):(0,i.jsx)(`span`,{className:`ds-asset-tile__placeholder`,children:(0,i.jsx)(e.t,{name:g?`alert-triangle`:s,size:24})}),u&&(0,i.jsxs)(`span`,{className:`ds-asset-tile__pending`,role:`status`,children:[(0,i.jsx)(e.t,{name:`spinner`,size:20,className:`ds-asset-tile__spinner`}),(0,i.jsx)(`span`,{className:`ds-asset-tile__pending-label`,children:`Uploading`})]}),f&&(0,i.jsx)(`div`,{className:`ds-asset-tile__actions`,children:f}),d&&(0,i.jsx)(`button`,{type:`button`,className:`ds-asset-tile__hit`,"aria-pressed":l,disabled:u,onClick:d,children:(0,i.jsx)(`span`,{className:`ds-asset-tile__hit-label`,children:t})})]}),(0,i.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,i.jsx)(`span`,{className:`ds-asset-tile__name`,children:t}),c&&(0,i.jsx)(`span`,{className:`ds-asset-tile__meta`,children:c})]})]})});function l({title:t,description:n,action:r}){return(0,i.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,i.jsx)(e.t,{name:`image`,size:24}),(0,i.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,i.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=o,exports.AssetGridEmpty=l,exports.AssetTile=c,exports.AssetTileSkeleton=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs"),n=require("../Grid/index.cjs"),r=require("../Skeleton/index.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(...e){return e.filter(Boolean).join(` `)}var s=(0,i.forwardRef)(function({isLoading:e=!1,loadingCount:t=8,className:r,children:i,...s},l){return(0,a.jsx)(n.Grid,{ref:l,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:o(`ds-asset-grid`,r),"aria-busy":e||void 0,...s,children:e?Array.from({length:t},(e,t)=>(0,a.jsx)(c,{index:t},t)):i})});function c({index:e=0}){let t={animationDelay:`calc(var(--skeleton-stagger) * ${e})`};return(0,a.jsxs)(`div`,{className:`ds-asset-tile`,"data-loading":`true`,"aria-hidden":`true`,children:[(0,a.jsx)(r.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb`,style:t}),(0,a.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,a.jsx)(r.Skeleton,{shape:`text`,width:`80%`,style:t}),(0,a.jsx)(r.Skeleton,{shape:`text`,width:`45%`,style:t})]})]})}var l=(0,i.forwardRef)(function({name:n,src:s,icon:c=`image`,meta:l,isSelected:u=!1,isPending:d=!1,onSelect:f,actions:p,className:m,...h},g){let[_,v]=(0,i.useState)(!1),[y,b]=(0,i.useState)(!1),x=!!s&&!_;return(0,a.jsxs)(`div`,{ref:g,className:o(`ds-asset-tile`,m),"data-selected":u||void 0,"data-pending":d||void 0,...h,children:[(0,a.jsxs)(`div`,{className:`ds-asset-tile__thumb`,children:[x?(0,a.jsxs)(a.Fragment,{children:[!y&&(0,a.jsx)(r.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb-skeleton`}),(0,a.jsx)(`img`,{src:s,alt:``,loading:`lazy`,"data-loaded":y||void 0,onLoad:()=>b(!0),onError:()=>v(!0)})]}):(0,a.jsx)(`span`,{className:`ds-asset-tile__placeholder`,children:(0,a.jsx)(e.t,{name:_?`alert-triangle`:c,size:24})}),d&&(0,a.jsxs)(`span`,{className:`ds-asset-tile__pending`,role:`status`,children:[(0,a.jsx)(e.t,{name:`spinner`,size:20,className:`ds-asset-tile__spinner`}),(0,a.jsx)(`span`,{className:`ds-asset-tile__pending-label`,children:`Uploading`})]}),p&&(0,a.jsx)(`div`,{className:`ds-asset-tile__actions`,children:p}),f&&(0,a.jsx)(t.Button,{variant:`simple`,className:`ds-asset-tile__hit`,"aria-pressed":u,"aria-label":n,isDisabled:d,onClick:f})]}),(0,a.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,a.jsx)(`span`,{className:`ds-asset-tile__name`,children:n}),l&&(0,a.jsx)(`span`,{className:`ds-asset-tile__meta`,children:l})]})]})});function u({title:t,description:n,action:r}){return(0,a.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,a.jsx)(e.t,{name:`image`,size:24}),(0,a.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,a.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=s,exports.AssetGridEmpty=u,exports.AssetTile=l,exports.AssetTileSkeleton=c;
 //# sourceMappingURL=index.cjs.map