@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/editors/text-editor/text-editor-toolbar.cjs

@@ -0,0 +1,251 @@
+"use client";
+const require_index = require("../../actions/button/index.cjs");
+const require_index$1 = require("../../layout/stack/index.cjs");
+const require_index$2 = require("./index.cjs");
+;/* empty css                          */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
+let _puzzle_ui_icons = require("@puzzle-ui/icons");
+// src/components/editors/text-editor/text-editor-toolbar.tsx
+const TextEditorToolbar = ({ className, ariaLabel = "Text formatting", dir = "ltr" }) => {
+	const { toggleMark, isActive, setTextAlign, isTextAlignActive, setListType, isListTypeActive, undo, redo, canUndo, canRedo } = require_index$2.useTextEditor();
+	const iconSize = 20;
+	const classes = (0, _puzzle_ui_core.cn)("text-editor-toolbar", className);
+	const canUndoAction = canUndo?.() ?? false;
+	const canRedoAction = canRedo?.() ?? false;
+	const rovingFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
+		items: [
+			{ id: "bold" },
+			{ id: "italic" },
+			{ id: "underline" },
+			{ id: "strike" },
+			{ id: "align-left" },
+			{ id: "align-center" },
+			{ id: "align-right" },
+			{ id: "align-justify" },
+			{
+				id: "undo",
+				disabled: !canUndoAction
+			},
+			{
+				id: "redo",
+				disabled: !canRedoAction
+			},
+			{ id: "list-bullet" },
+			{ id: "list-ordered" }
+		],
+		orientation: "horizontal",
+		dir
+	});
+	const getToolbarItemProps = (id, disabled = false) => ({
+		ref: rovingFocus.getItemRef(id),
+		tabIndex: rovingFocus.getItemTabIndex(id, disabled),
+		onFocus: () => rovingFocus.onItemFocus(id),
+		onKeyDown: (event) => rovingFocus.onItemKeyDown(event, id)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Stack, {
+		className: classes,
+		direction: "row",
+		alignH: "start",
+		alignV: "stretch",
+		gap: "md",
+		role: "toolbar",
+		"aria-label": ariaLabel,
+		"aria-orientation": "horizontal",
+		dir,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "Text style",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("bold"),
+						"aria-label": "Bold",
+						"aria-pressed": isActive?.("bold") ?? false,
+						variant: isActive?.("bold") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("bold"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-bold",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("italic"),
+						"aria-label": "Italic",
+						"aria-pressed": isActive?.("italic") ?? false,
+						variant: isActive?.("italic") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("italic"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-italic",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("underline"),
+						"aria-label": "Underline",
+						"aria-pressed": isActive?.("underline") ?? false,
+						variant: isActive?.("underline") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("underline"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-underline",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("strike"),
+						"aria-label": "Strikethrough",
+						"aria-pressed": isActive?.("strike") ?? false,
+						variant: isActive?.("strike") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("strike"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-strike",
+							size: iconSize
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				className: "text-editor-toolbar__separator"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "Alignment",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("align-left"),
+						"aria-label": "Align left",
+						"aria-pressed": isTextAlignActive?.("left") ?? false,
+						variant: isTextAlignActive?.("left") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("left"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-align-left",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("align-center"),
+						"aria-label": "Align center",
+						"aria-pressed": isTextAlignActive?.("center") ?? false,
+						variant: isTextAlignActive?.("center") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("center"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-align-center",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("align-right"),
+						"aria-label": "Align right",
+						"aria-pressed": isTextAlignActive?.("right") ?? false,
+						variant: isTextAlignActive?.("right") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("right"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "oui:editor-align-right",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+						...getToolbarItemProps("align-justify"),
+						"aria-label": "Justify text",
+						"aria-pressed": isTextAlignActive?.("justify") ?? false,
+						variant: isTextAlignActive?.("justify") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("justify"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+							name: "energy-icons:align-justify-20",
+							size: iconSize
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				className: "text-editor-toolbar__separator"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "History",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+					...getToolbarItemProps("undo", !canUndoAction),
+					"aria-label": "Undo",
+					variant: "outline",
+					disabled: !canUndoAction,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => undo?.(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+						name: "oui:editor-undo",
+						size: iconSize
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+					...getToolbarItemProps("redo", !canRedoAction),
+					"aria-label": "Redo",
+					variant: "outline",
+					disabled: !canRedoAction,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => redo?.(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+						name: "oui:editor-redo",
+						size: iconSize
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "Lists",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+					...getToolbarItemProps("list-bullet"),
+					"aria-label": "Bulleted list",
+					"aria-pressed": isListTypeActive?.("bullet") ?? false,
+					variant: isListTypeActive?.("bullet") ? "toggle-active" : "toggle",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => setListType?.("bullet"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+						name: "oui:editor-ordered-list",
+						size: iconSize
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+					...getToolbarItemProps("list-ordered"),
+					"aria-label": "Numbered list",
+					"aria-pressed": isListTypeActive?.("ordered") ?? false,
+					variant: isListTypeActive?.("ordered") ? "toggle-active" : "toggle",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => setListType?.("ordered"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+						name: "oui:editor-unordered-list",
+						size: iconSize
+					})
+				})]
+			})
+		]
+	});
+};
+exports.TextEditorToolbar = TextEditorToolbar;
+
+//# sourceMappingURL=text-editor-toolbar.cjs.map

package/dist/components/editors/text-editor/text-editor-toolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-toolbar.cjs","names":["useTextEditor","cn","useRovingFocus","Stack","Button","Icon"],"sources":["../../../../src/components/editors/text-editor/text-editor-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { KeyboardEvent } from \"react\";\n\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { Button } from \"../../actions/button\";\nimport { Stack } from \"../../layout/stack\";\nimport { Icon } from \"@puzzle-ui/icons\";\nimport { useTextEditor } from \".\";\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./text-editor-toolbar.css\";\n\ntype TextEditorToolbarProps = {\n  className?: string;\n  ariaLabel?: string;\n  dir?: \"ltr\" | \"rtl\";\n};\n\nconst TextEditorToolbar = ({\n  className,\n  ariaLabel = \"Text formatting\",\n  dir = \"ltr\",\n}: TextEditorToolbarProps) => {\n  const {\n    toggleMark,\n    isActive,\n    setTextAlign,\n    isTextAlignActive,\n    setListType,\n    isListTypeActive,\n    undo,\n    redo,\n    canUndo,\n    canRedo,\n  } = useTextEditor();\n\n  const iconSize = 20;\n  const classes = cn(\"text-editor-toolbar\", className);\n\n  const canUndoAction = canUndo?.() ?? false;\n  const canRedoAction = canRedo?.() ?? false;\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: [\n      { id: \"bold\" },\n      { id: \"italic\" },\n      { id: \"underline\" },\n      { id: \"strike\" },\n      { id: \"align-left\" },\n      { id: \"align-center\" },\n      { id: \"align-right\" },\n      { id: \"align-justify\" },\n      { id: \"undo\", disabled: !canUndoAction },\n      { id: \"redo\", disabled: !canRedoAction },\n      { id: \"list-bullet\" },\n      { id: \"list-ordered\" },\n    ],\n    orientation: \"horizontal\",\n    dir,\n  });\n\n  const getToolbarItemProps = (id: string, disabled = false) => ({\n    ref: rovingFocus.getItemRef(id),\n    tabIndex: rovingFocus.getItemTabIndex(id, disabled),\n    onFocus: () => rovingFocus.onItemFocus(id),\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n      rovingFocus.onItemKeyDown(event, id),\n  });\n\n  return (\n    <Stack\n      className={classes}\n      direction=\"row\"\n      alignH=\"start\"\n      alignV=\"stretch\"\n      gap=\"md\"\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      aria-orientation=\"horizontal\"\n      dir={dir}\n    >\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"Text style\"\n      >\n        <Button\n          {...getToolbarItemProps(\"bold\")}\n          aria-label=\"Bold\"\n          aria-pressed={isActive?.(\"bold\") ?? false}\n          variant={isActive?.(\"bold\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"bold\")}\n        >\n          <Icon name=\"oui:editor-bold\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"italic\")}\n          aria-label=\"Italic\"\n          aria-pressed={isActive?.(\"italic\") ?? false}\n          variant={isActive?.(\"italic\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"italic\")}\n        >\n          <Icon name=\"oui:editor-italic\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"underline\")}\n          aria-label=\"Underline\"\n          aria-pressed={isActive?.(\"underline\") ?? false}\n          variant={isActive?.(\"underline\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"underline\")}\n        >\n          <Icon name=\"oui:editor-underline\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"strike\")}\n          aria-label=\"Strikethrough\"\n          aria-pressed={isActive?.(\"strike\") ?? false}\n          variant={isActive?.(\"strike\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"strike\")}\n        >\n          <Icon name=\"oui:editor-strike\" size={iconSize} />\n        </Button>\n      </Stack>\n\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"text-editor-toolbar__separator\"\n      />\n\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"Alignment\"\n      >\n        <Button\n          {...getToolbarItemProps(\"align-left\")}\n          aria-label=\"Align left\"\n          aria-pressed={isTextAlignActive?.(\"left\") ?? false}\n          variant={isTextAlignActive?.(\"left\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"left\")}\n        >\n          <Icon name=\"oui:editor-align-left\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"align-center\")}\n          aria-label=\"Align center\"\n          aria-pressed={isTextAlignActive?.(\"center\") ?? false}\n          variant={isTextAlignActive?.(\"center\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"center\")}\n        >\n          <Icon name=\"oui:editor-align-center\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"align-right\")}\n          aria-label=\"Align right\"\n          aria-pressed={isTextAlignActive?.(\"right\") ?? false}\n          variant={isTextAlignActive?.(\"right\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"right\")}\n        >\n          <Icon name=\"oui:editor-align-right\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"align-justify\")}\n          aria-label=\"Justify text\"\n          aria-pressed={isTextAlignActive?.(\"justify\") ?? false}\n          variant={isTextAlignActive?.(\"justify\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"justify\")}\n        >\n          <Icon name=\"energy-icons:align-justify-20\" size={iconSize} />\n        </Button>\n      </Stack>\n\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"text-editor-toolbar__separator\"\n      />\n\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"History\"\n      >\n        <Button\n          {...getToolbarItemProps(\"undo\", !canUndoAction)}\n          aria-label=\"Undo\"\n          variant=\"outline\"\n          disabled={!canUndoAction}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => undo?.()}\n        >\n          <Icon name=\"oui:editor-undo\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"redo\", !canRedoAction)}\n          aria-label=\"Redo\"\n          variant=\"outline\"\n          disabled={!canRedoAction}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => redo?.()}\n        >\n          <Icon name=\"oui:editor-redo\" size={iconSize} />\n        </Button>\n      </Stack>\n\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"Lists\"\n      >\n        <Button\n          {...getToolbarItemProps(\"list-bullet\")}\n          aria-label=\"Bulleted list\"\n          aria-pressed={isListTypeActive?.(\"bullet\") ?? false}\n          variant={isListTypeActive?.(\"bullet\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setListType?.(\"bullet\")}\n        >\n          <Icon name=\"oui:editor-ordered-list\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"list-ordered\")}\n          aria-label=\"Numbered list\"\n          aria-pressed={isListTypeActive?.(\"ordered\") ?? false}\n          variant={isListTypeActive?.(\"ordered\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setListType?.(\"ordered\")}\n        >\n          <Icon name=\"oui:editor-unordered-list\" size={iconSize} />\n        </Button>\n      </Stack>\n    </Stack>\n  );\n};\n\nexport { TextEditorToolbar, type TextEditorToolbarProps };\n"],"mappings":"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"}

package/dist/components/editors/text-editor/text-editor-toolbar.css

@@ -0,0 +1,16 @@
+.text-editor-toolbar {
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface, #fff);
+  border: 1px solid var(--puzzle-color-border, #e5e0d6);
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  padding: var(--puzzle-space-2, .5rem);
+  top: calc(var(--puzzle-sticky-offset, 0px) + var(--puzzle-space-2, .5rem));
+  z-index: 1;
+  position: sticky;
+}
+
+.text-editor-toolbar__separator {
+  background-color: var(--puzzle-color-border, #e5e0d6);
+  width: 1px;
+  min-height: 1.5rem;
+}

package/dist/components/editors/text-editor/text-editor-toolbar.d.cts

@@ -0,0 +1,7 @@
+type TextEditorToolbarProps = {
+  className?: string;
+  ariaLabel?: string;
+  dir?: "ltr" | "rtl";
+};
+declare const TextEditorToolbar: ({ className, ariaLabel, dir }: TextEditorToolbarProps) => import("react").JSX.Element;
+export { TextEditorToolbar, type TextEditorToolbarProps };

package/dist/components/editors/text-editor/text-editor-toolbar.d.ts

@@ -0,0 +1,7 @@
+type TextEditorToolbarProps = {
+  className?: string;
+  ariaLabel?: string;
+  dir?: "ltr" | "rtl";
+};
+declare const TextEditorToolbar: ({ className, ariaLabel, dir }: TextEditorToolbarProps) => import("react").JSX.Element;
+export { TextEditorToolbar, type TextEditorToolbarProps };

package/dist/components/editors/text-editor/text-editor-toolbar.js

@@ -0,0 +1,251 @@
+"use client";
+import { Button } from "../../actions/button/index.js";
+import { Stack } from "../../layout/stack/index.js";
+import { useTextEditor } from "./index.js";
+import "./text-editor-toolbar.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRovingFocus } from "@puzzle-ui/hooks";
+import { Icon } from "@puzzle-ui/icons";
+// src/components/editors/text-editor/text-editor-toolbar.tsx
+const TextEditorToolbar = ({ className, ariaLabel = "Text formatting", dir = "ltr" }) => {
+	const { toggleMark, isActive, setTextAlign, isTextAlignActive, setListType, isListTypeActive, undo, redo, canUndo, canRedo } = useTextEditor();
+	const iconSize = 20;
+	const classes = cn("text-editor-toolbar", className);
+	const canUndoAction = canUndo?.() ?? false;
+	const canRedoAction = canRedo?.() ?? false;
+	const rovingFocus = useRovingFocus({
+		items: [
+			{ id: "bold" },
+			{ id: "italic" },
+			{ id: "underline" },
+			{ id: "strike" },
+			{ id: "align-left" },
+			{ id: "align-center" },
+			{ id: "align-right" },
+			{ id: "align-justify" },
+			{
+				id: "undo",
+				disabled: !canUndoAction
+			},
+			{
+				id: "redo",
+				disabled: !canRedoAction
+			},
+			{ id: "list-bullet" },
+			{ id: "list-ordered" }
+		],
+		orientation: "horizontal",
+		dir
+	});
+	const getToolbarItemProps = (id, disabled = false) => ({
+		ref: rovingFocus.getItemRef(id),
+		tabIndex: rovingFocus.getItemTabIndex(id, disabled),
+		onFocus: () => rovingFocus.onItemFocus(id),
+		onKeyDown: (event) => rovingFocus.onItemKeyDown(event, id)
+	});
+	return /* @__PURE__ */ jsxs(Stack, {
+		className: classes,
+		direction: "row",
+		alignH: "start",
+		alignV: "stretch",
+		gap: "md",
+		role: "toolbar",
+		"aria-label": ariaLabel,
+		"aria-orientation": "horizontal",
+		dir,
+		children: [
+			/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "Text style",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("bold"),
+						"aria-label": "Bold",
+						"aria-pressed": isActive?.("bold") ?? false,
+						variant: isActive?.("bold") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("bold"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-bold",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("italic"),
+						"aria-label": "Italic",
+						"aria-pressed": isActive?.("italic") ?? false,
+						variant: isActive?.("italic") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("italic"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-italic",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("underline"),
+						"aria-label": "Underline",
+						"aria-pressed": isActive?.("underline") ?? false,
+						variant: isActive?.("underline") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("underline"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-underline",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("strike"),
+						"aria-label": "Strikethrough",
+						"aria-pressed": isActive?.("strike") ?? false,
+						variant: isActive?.("strike") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => toggleMark?.("strike"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-strike",
+							size: iconSize
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				className: "text-editor-toolbar__separator"
+			}),
+			/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "Alignment",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("align-left"),
+						"aria-label": "Align left",
+						"aria-pressed": isTextAlignActive?.("left") ?? false,
+						variant: isTextAlignActive?.("left") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("left"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-align-left",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("align-center"),
+						"aria-label": "Align center",
+						"aria-pressed": isTextAlignActive?.("center") ?? false,
+						variant: isTextAlignActive?.("center") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("center"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-align-center",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("align-right"),
+						"aria-label": "Align right",
+						"aria-pressed": isTextAlignActive?.("right") ?? false,
+						variant: isTextAlignActive?.("right") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("right"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "oui:editor-align-right",
+							size: iconSize
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						...getToolbarItemProps("align-justify"),
+						"aria-label": "Justify text",
+						"aria-pressed": isTextAlignActive?.("justify") ?? false,
+						variant: isTextAlignActive?.("justify") ? "toggle-active" : "toggle",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => setTextAlign?.("justify"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "energy-icons:align-justify-20",
+							size: iconSize
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				className: "text-editor-toolbar__separator"
+			}),
+			/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "History",
+				children: [/* @__PURE__ */ jsx(Button, {
+					...getToolbarItemProps("undo", !canUndoAction),
+					"aria-label": "Undo",
+					variant: "outline",
+					disabled: !canUndoAction,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => undo?.(),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "oui:editor-undo",
+						size: iconSize
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					...getToolbarItemProps("redo", !canRedoAction),
+					"aria-label": "Redo",
+					variant: "outline",
+					disabled: !canRedoAction,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => redo?.(),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "oui:editor-redo",
+						size: iconSize
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				alignH: "start",
+				alignV: "center",
+				gap: "xs",
+				role: "group",
+				"aria-label": "Lists",
+				children: [/* @__PURE__ */ jsx(Button, {
+					...getToolbarItemProps("list-bullet"),
+					"aria-label": "Bulleted list",
+					"aria-pressed": isListTypeActive?.("bullet") ?? false,
+					variant: isListTypeActive?.("bullet") ? "toggle-active" : "toggle",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => setListType?.("bullet"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "oui:editor-ordered-list",
+						size: iconSize
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					...getToolbarItemProps("list-ordered"),
+					"aria-label": "Numbered list",
+					"aria-pressed": isListTypeActive?.("ordered") ?? false,
+					variant: isListTypeActive?.("ordered") ? "toggle-active" : "toggle",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => setListType?.("ordered"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "oui:editor-unordered-list",
+						size: iconSize
+					})
+				})]
+			})
+		]
+	});
+};
+export { TextEditorToolbar };
+
+//# sourceMappingURL=text-editor-toolbar.js.map

package/dist/components/editors/text-editor/text-editor-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-toolbar.js","names":[],"sources":["../../../../src/components/editors/text-editor/text-editor-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { KeyboardEvent } from \"react\";\n\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { Button } from \"../../actions/button\";\nimport { Stack } from \"../../layout/stack\";\nimport { Icon } from \"@puzzle-ui/icons\";\nimport { useTextEditor } from \".\";\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./text-editor-toolbar.css\";\n\ntype TextEditorToolbarProps = {\n  className?: string;\n  ariaLabel?: string;\n  dir?: \"ltr\" | \"rtl\";\n};\n\nconst TextEditorToolbar = ({\n  className,\n  ariaLabel = \"Text formatting\",\n  dir = \"ltr\",\n}: TextEditorToolbarProps) => {\n  const {\n    toggleMark,\n    isActive,\n    setTextAlign,\n    isTextAlignActive,\n    setListType,\n    isListTypeActive,\n    undo,\n    redo,\n    canUndo,\n    canRedo,\n  } = useTextEditor();\n\n  const iconSize = 20;\n  const classes = cn(\"text-editor-toolbar\", className);\n\n  const canUndoAction = canUndo?.() ?? false;\n  const canRedoAction = canRedo?.() ?? false;\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: [\n      { id: \"bold\" },\n      { id: \"italic\" },\n      { id: \"underline\" },\n      { id: \"strike\" },\n      { id: \"align-left\" },\n      { id: \"align-center\" },\n      { id: \"align-right\" },\n      { id: \"align-justify\" },\n      { id: \"undo\", disabled: !canUndoAction },\n      { id: \"redo\", disabled: !canRedoAction },\n      { id: \"list-bullet\" },\n      { id: \"list-ordered\" },\n    ],\n    orientation: \"horizontal\",\n    dir,\n  });\n\n  const getToolbarItemProps = (id: string, disabled = false) => ({\n    ref: rovingFocus.getItemRef(id),\n    tabIndex: rovingFocus.getItemTabIndex(id, disabled),\n    onFocus: () => rovingFocus.onItemFocus(id),\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n      rovingFocus.onItemKeyDown(event, id),\n  });\n\n  return (\n    <Stack\n      className={classes}\n      direction=\"row\"\n      alignH=\"start\"\n      alignV=\"stretch\"\n      gap=\"md\"\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      aria-orientation=\"horizontal\"\n      dir={dir}\n    >\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"Text style\"\n      >\n        <Button\n          {...getToolbarItemProps(\"bold\")}\n          aria-label=\"Bold\"\n          aria-pressed={isActive?.(\"bold\") ?? false}\n          variant={isActive?.(\"bold\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"bold\")}\n        >\n          <Icon name=\"oui:editor-bold\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"italic\")}\n          aria-label=\"Italic\"\n          aria-pressed={isActive?.(\"italic\") ?? false}\n          variant={isActive?.(\"italic\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"italic\")}\n        >\n          <Icon name=\"oui:editor-italic\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"underline\")}\n          aria-label=\"Underline\"\n          aria-pressed={isActive?.(\"underline\") ?? false}\n          variant={isActive?.(\"underline\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"underline\")}\n        >\n          <Icon name=\"oui:editor-underline\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"strike\")}\n          aria-label=\"Strikethrough\"\n          aria-pressed={isActive?.(\"strike\") ?? false}\n          variant={isActive?.(\"strike\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => toggleMark?.(\"strike\")}\n        >\n          <Icon name=\"oui:editor-strike\" size={iconSize} />\n        </Button>\n      </Stack>\n\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"text-editor-toolbar__separator\"\n      />\n\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"Alignment\"\n      >\n        <Button\n          {...getToolbarItemProps(\"align-left\")}\n          aria-label=\"Align left\"\n          aria-pressed={isTextAlignActive?.(\"left\") ?? false}\n          variant={isTextAlignActive?.(\"left\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"left\")}\n        >\n          <Icon name=\"oui:editor-align-left\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"align-center\")}\n          aria-label=\"Align center\"\n          aria-pressed={isTextAlignActive?.(\"center\") ?? false}\n          variant={isTextAlignActive?.(\"center\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"center\")}\n        >\n          <Icon name=\"oui:editor-align-center\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"align-right\")}\n          aria-label=\"Align right\"\n          aria-pressed={isTextAlignActive?.(\"right\") ?? false}\n          variant={isTextAlignActive?.(\"right\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"right\")}\n        >\n          <Icon name=\"oui:editor-align-right\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"align-justify\")}\n          aria-label=\"Justify text\"\n          aria-pressed={isTextAlignActive?.(\"justify\") ?? false}\n          variant={isTextAlignActive?.(\"justify\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setTextAlign?.(\"justify\")}\n        >\n          <Icon name=\"energy-icons:align-justify-20\" size={iconSize} />\n        </Button>\n      </Stack>\n\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"text-editor-toolbar__separator\"\n      />\n\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"History\"\n      >\n        <Button\n          {...getToolbarItemProps(\"undo\", !canUndoAction)}\n          aria-label=\"Undo\"\n          variant=\"outline\"\n          disabled={!canUndoAction}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => undo?.()}\n        >\n          <Icon name=\"oui:editor-undo\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"redo\", !canRedoAction)}\n          aria-label=\"Redo\"\n          variant=\"outline\"\n          disabled={!canRedoAction}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => redo?.()}\n        >\n          <Icon name=\"oui:editor-redo\" size={iconSize} />\n        </Button>\n      </Stack>\n\n      <Stack\n        direction=\"row\"\n        alignH=\"start\"\n        alignV=\"center\"\n        gap=\"xs\"\n        role=\"group\"\n        aria-label=\"Lists\"\n      >\n        <Button\n          {...getToolbarItemProps(\"list-bullet\")}\n          aria-label=\"Bulleted list\"\n          aria-pressed={isListTypeActive?.(\"bullet\") ?? false}\n          variant={isListTypeActive?.(\"bullet\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setListType?.(\"bullet\")}\n        >\n          <Icon name=\"oui:editor-ordered-list\" size={iconSize} />\n        </Button>\n\n        <Button\n          {...getToolbarItemProps(\"list-ordered\")}\n          aria-label=\"Numbered list\"\n          aria-pressed={isListTypeActive?.(\"ordered\") ?? false}\n          variant={isListTypeActive?.(\"ordered\") ? \"toggle-active\" : \"toggle\"}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => setListType?.(\"ordered\")}\n        >\n          <Icon name=\"oui:editor-unordered-list\" size={iconSize} />\n        </Button>\n      </Stack>\n    </Stack>\n  );\n};\n\nexport { TextEditorToolbar, type TextEditorToolbarProps };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,qBAAqB,EACzB,WACA,YAAY,mBACZ,MAAM,YACsB;CAC5B,MAAM,EACJ,YACA,UACA,cACA,mBACA,aACA,kBACA,MACA,MACA,SACA,YACE,cAAc;CAElB,MAAM,WAAW;CACjB,MAAM,UAAU,GAAG,uBAAuB,SAAS;CAEnD,MAAM,gBAAgB,UAAU,KAAK;CACrC,MAAM,gBAAgB,UAAU,KAAK;CAErC,MAAM,cAAc,eAAkC;EACpD,OAAO;GACL,EAAE,IAAI,OAAO;GACb,EAAE,IAAI,SAAS;GACf,EAAE,IAAI,YAAY;GAClB,EAAE,IAAI,SAAS;GACf,EAAE,IAAI,aAAa;GACnB,EAAE,IAAI,eAAe;GACrB,EAAE,IAAI,cAAc;GACpB,EAAE,IAAI,gBAAgB;GACtB;IAAE,IAAI;IAAQ,UAAU,CAAC;GAAc;GACvC;IAAE,IAAI;IAAQ,UAAU,CAAC;GAAc;GACvC,EAAE,IAAI,cAAc;GACpB,EAAE,IAAI,eAAe;EACvB;EACA,aAAa;EACb;CACF,CAAC;CAED,MAAM,uBAAuB,IAAY,WAAW,WAAW;EAC7D,KAAK,YAAY,WAAW,EAAE;EAC9B,UAAU,YAAY,gBAAgB,IAAI,QAAQ;EAClD,eAAe,YAAY,YAAY,EAAE;EACzC,YAAY,UACV,YAAY,cAAc,OAAO,EAAE;CACvC;CAEA,OACE,qBAAC,OAAD;EACE,WAAW;EACX,WAAU;EACV,QAAO;EACP,QAAO;EACP,KAAI;EACJ,MAAK;EACL,cAAY;EACZ,oBAAiB;EACZ;EATP,UAAA;GAWE,qBAAC,OAAD;IACE,WAAU;IACV,QAAO;IACP,QAAO;IACP,KAAI;IACJ,MAAK;IACL,cAAW;IANb,UAAA;KAQE,oBAAC,QAAD;MACE,GAAI,oBAAoB,MAAM;MAC9B,cAAW;MACX,gBAAc,WAAW,MAAM,KAAK;MACpC,SAAS,WAAW,MAAM,IAAI,kBAAkB;MAChD,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,aAAa,MAAM;MAElC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAkB,MAAM;MAAW,CAAA;KACxC,CAAA;KAER,oBAAC,QAAD;MACE,GAAI,oBAAoB,QAAQ;MAChC,cAAW;MACX,gBAAc,WAAW,QAAQ,KAAK;MACtC,SAAS,WAAW,QAAQ,IAAI,kBAAkB;MAClD,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,aAAa,QAAQ;MAEpC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAoB,MAAM;MAAW,CAAA;KAC1C,CAAA;KAER,oBAAC,QAAD;MACE,GAAI,oBAAoB,WAAW;MACnC,cAAW;MACX,gBAAc,WAAW,WAAW,KAAK;MACzC,SAAS,WAAW,WAAW,IAAI,kBAAkB;MACrD,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,aAAa,WAAW;MAEvC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAuB,MAAM;MAAW,CAAA;KAC7C,CAAA;KAER,oBAAC,QAAD;MACE,GAAI,oBAAoB,QAAQ;MAChC,cAAW;MACX,gBAAc,WAAW,QAAQ,KAAK;MACtC,SAAS,WAAW,QAAQ,IAAI,kBAAkB;MAClD,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,aAAa,QAAQ;MAEpC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAoB,MAAM;MAAW,CAAA;KAC1C,CAAA;IACH;;GAEP,oBAAC,OAAD;IACE,MAAK;IACL,oBAAiB;IACjB,WAAU;GACX,CAAA;GAED,qBAAC,OAAD;IACE,WAAU;IACV,QAAO;IACP,QAAO;IACP,KAAI;IACJ,MAAK;IACL,cAAW;IANb,UAAA;KAQE,oBAAC,QAAD;MACE,GAAI,oBAAoB,YAAY;MACpC,cAAW;MACX,gBAAc,oBAAoB,MAAM,KAAK;MAC7C,SAAS,oBAAoB,MAAM,IAAI,kBAAkB;MACzD,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,eAAe,MAAM;MAEpC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAwB,MAAM;MAAW,CAAA;KAC9C,CAAA;KAER,oBAAC,QAAD;MACE,GAAI,oBAAoB,cAAc;MACtC,cAAW;MACX,gBAAc,oBAAoB,QAAQ,KAAK;MAC/C,SAAS,oBAAoB,QAAQ,IAAI,kBAAkB;MAC3D,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,eAAe,QAAQ;MAEtC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAA0B,MAAM;MAAW,CAAA;KAChD,CAAA;KAER,oBAAC,QAAD;MACE,GAAI,oBAAoB,aAAa;MACrC,cAAW;MACX,gBAAc,oBAAoB,OAAO,KAAK;MAC9C,SAAS,oBAAoB,OAAO,IAAI,kBAAkB;MAC1D,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,eAAe,OAAO;MAErC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAyB,MAAM;MAAW,CAAA;KAC/C,CAAA;KAER,oBAAC,QAAD;MACE,GAAI,oBAAoB,eAAe;MACvC,cAAW;MACX,gBAAc,oBAAoB,SAAS,KAAK;MAChD,SAAS,oBAAoB,SAAS,IAAI,kBAAkB;MAC5D,cAAc,UAAU,MAAM,eAAe;MAC7C,eAAe,eAAe,SAAS;MAEvC,UAAA,oBAAC,MAAD;OAAM,MAAK;OAAgC,MAAM;MAAW,CAAA;KACtD,CAAA;IACH;;GAEP,oBAAC,OAAD;IACE,MAAK;IACL,oBAAiB;IACjB,WAAU;GACX,CAAA;GAED,qBAAC,OAAD;IACE,WAAU;IACV,QAAO;IACP,QAAO;IACP,KAAI;IACJ,MAAK;IACL,cAAW;IANb,UAAA,CAQE,oBAAC,QAAD;KACE,GAAI,oBAAoB,QAAQ,CAAC,aAAa;KAC9C,cAAW;KACX,SAAQ;KACR,UAAU,CAAC;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,eAAe,OAAO;KAEtB,UAAA,oBAAC,MAAD;MAAM,MAAK;MAAkB,MAAM;KAAW,CAAA;IACxC,CAAA,GAER,oBAAC,QAAD;KACE,GAAI,oBAAoB,QAAQ,CAAC,aAAa;KAC9C,cAAW;KACX,SAAQ;KACR,UAAU,CAAC;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,eAAe,OAAO;KAEtB,UAAA,oBAAC,MAAD;MAAM,MAAK;MAAkB,MAAM;KAAW,CAAA;IACxC,CAAA,CACH;;GAEP,qBAAC,OAAD;IACE,WAAU;IACV,QAAO;IACP,QAAO;IACP,KAAI;IACJ,MAAK;IACL,cAAW;IANb,UAAA,CAQE,oBAAC,QAAD;KACE,GAAI,oBAAoB,aAAa;KACrC,cAAW;KACX,gBAAc,mBAAmB,QAAQ,KAAK;KAC9C,SAAS,mBAAmB,QAAQ,IAAI,kBAAkB;KAC1D,cAAc,UAAU,MAAM,eAAe;KAC7C,eAAe,cAAc,QAAQ;KAErC,UAAA,oBAAC,MAAD;MAAM,MAAK;MAA0B,MAAM;KAAW,CAAA;IAChD,CAAA,GAER,oBAAC,QAAD;KACE,GAAI,oBAAoB,cAAc;KACtC,cAAW;KACX,gBAAc,mBAAmB,SAAS,KAAK;KAC/C,SAAS,mBAAmB,SAAS,IAAI,kBAAkB;KAC3D,cAAc,UAAU,MAAM,eAAe;KAC7C,eAAe,cAAc,SAAS;KAEtC,UAAA,oBAAC,MAAD;MAAM,MAAK;MAA4B,MAAM;KAAW,CAAA;IAClD,CAAA,CACH;;EACF;;AAEX"}