dishui 0.0.64 → 0.0.66

package/dist/components/pro/Flow/panels/ShapePalette.js

@@ -1,580 +1,570 @@
-import { PALETTE_ITEMS as $ } from "../constants.js";
-import { useFlowUI as y } from "../context/FlowUIContext.js";
-import { resolveThemeColor as b } from "../utils/themeColor.js";
-import { SVG_ICON_CATEGORIES as v, buildSvgMarkup as M, getSvgIcon as x, getSvgIconsByCategory as S } from "../nodes/svgIcons.js";
-import { useDraggablePanel as C } from "../hooks/useDraggablePanel.js";
-import { useResizablePanel as P } from "../hooks/useResizablePanel.js";
-import { makeStarterDataConfig as W } from "../nodes/dataUtils.js";
-import { useCallback as u, useState as I } from "react";
-import { Fragment as g, jsx as e, jsxs as c } from "react/jsx-runtime";
-var T = [
-  {
-    mode: "freehand",
-    label: "Freehand"
-  },
-  {
-    mode: "line",
-    label: "Line"
-  },
-  {
-    mode: "polyline",
-    label: "Polyline"
-  },
-  {
-    mode: "arrow",
-    label: "Arrow"
-  }
+import { PALETTE_ITEMS as e } from "../constants.js";
+import { useFlowUI as t } from "../context/FlowUIContext.js";
+import { resolveThemeColor as n } from "../utils/themeColor.js";
+import { SVG_ICON_CATEGORIES as r, buildSvgMarkup as i, getSvgIcon as a, getSvgIconsByCategory as o } from "../nodes/svgIcons.js";
+import { useDraggablePanel as s } from "../hooks/useDraggablePanel.js";
+import { useResizablePanel as c } from "../hooks/useResizablePanel.js";
+import { makeStarterDataConfig as l } from "../nodes/dataUtils.js";
+import { useCallback as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/pro/Flow/panels/ShapePalette.tsx
+var h = [
+	{
+		mode: "freehand",
+		label: "Freehand"
+	},
+	{
+		mode: "line",
+		label: "Line"
+	},
+	{
+		mode: "polyline",
+		label: "Polyline"
+	},
+	{
+		mode: "arrow",
+		label: "Arrow"
+	}
 ];
-function V() {
-  const { showPalette: l } = y(), { panelStyle: i, handleProps: a } = C(), { panelWidth: t, resizeHandleProps: o } = P("right", 180);
-  return l ? /* @__PURE__ */ c("div", {
-    className: "flow-palette",
-    "data-flow-panel": !0,
-    style: {
-      ...i,
-      width: t
-    },
-    children: [
-      /* @__PURE__ */ e("div", {
-        className: "flow-panel-resize-handle flow-panel-resize-handle--right",
-        ...o
-      }),
-      /* @__PURE__ */ e("div", {
-        className: "flow-panel-drag-handle",
-        ...a,
-        style: {
-          fontSize: 11,
-          fontWeight: 600,
-          marginBottom: 6,
-          color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-          cursor: "grab"
-        },
-        children: "Shapes"
-      }),
-      /* @__PURE__ */ e("div", {
-        className: "flow-palette-content",
-        children: /* @__PURE__ */ e(N, {})
-      })
-    ]
-  }) : null;
+function g() {
+	let { showPalette: e } = t(), { panelStyle: n, handleProps: r } = s(), { panelWidth: i, resizeHandleProps: a } = c("right", 180);
+	return e ? /* @__PURE__ */ m("div", {
+		className: "flow-palette",
+		"data-flow-panel": !0,
+		style: {
+			...n,
+			width: i
+		},
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flow-panel-resize-handle flow-panel-resize-handle--right",
+				...a
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flow-panel-drag-handle",
+				...r,
+				style: {
+					fontSize: 11,
+					fontWeight: 600,
+					marginBottom: 6,
+					color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
+					textTransform: "uppercase",
+					letterSpacing: "0.05em",
+					cursor: "grab"
+				},
+				children: "Shapes"
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flow-palette-content",
+				children: /* @__PURE__ */ p(_, {})
+			})
+		]
+	}) : null;
 }
-function N() {
-  const { toolMode: l, setToolMode: i, setPendingPlacement: a, pendingPlacement: t } = y(), o = u((n, s, p, h) => {
-    t?.type === n ? a(null) : (a({
-      type: n,
-      width: s,
-      height: p,
-      data: { ...h }
-    }), i("select"));
-  }, [
-    a,
-    i,
-    t
-  ]);
-  return /* @__PURE__ */ c(g, { children: [
-    /* @__PURE__ */ e("div", {
-      className: "flow-palette-grid",
-      children: $.map((n) => /* @__PURE__ */ c("div", {
-        className: `flow-palette-item${t?.type === n.type ? " flow-palette-item--active" : ""}`,
-        onClick: () => o(n.type, n.width, n.height, n.data),
-        children: [/* @__PURE__ */ e(z, { type: n.type }), /* @__PURE__ */ e("span", {
-          className: "flow-palette-item-label",
-          children: n.data.label
-        })]
-      }, n.type))
-    }),
-    /* @__PURE__ */ e(L, { children: "Lines" }),
-    /* @__PURE__ */ e("div", {
-      className: "flow-palette-grid",
-      children: T.map((n) => /* @__PURE__ */ c("div", {
-        className: `flow-palette-item${l === n.mode ? " flow-palette-item--active" : ""}`,
-        onClick: () => {
-          a(null), i(l === n.mode ? "select" : n.mode);
-        },
-        children: [/* @__PURE__ */ e(E, { mode: n.mode }), /* @__PURE__ */ e("span", {
-          className: "flow-palette-item-label",
-          children: n.label
-        })]
-      }, n.mode))
-    })
-  ] });
+function _() {
+	let { toolMode: n, setToolMode: r, setPendingPlacement: i, pendingPlacement: a } = t(), o = u((e, t, n, o) => {
+		a?.type === e ? i(null) : (i({
+			type: e,
+			width: t,
+			height: n,
+			data: { ...o }
+		}), r("select"));
+	}, [
+		i,
+		r,
+		a
+	]);
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p("div", {
+			className: "flow-palette-grid",
+			children: e.map((e) => /* @__PURE__ */ m("div", {
+				className: `flow-palette-item${a?.type === e.type ? " flow-palette-item--active" : ""}`,
+				onClick: () => o(e.type, e.width, e.height, e.data),
+				children: [/* @__PURE__ */ p(w, { type: e.type }), /* @__PURE__ */ p("span", {
+					className: "flow-palette-item-label",
+					children: e.data.label
+				})]
+			}, e.type))
+		}),
+		/* @__PURE__ */ p(C, { children: "Lines" }),
+		/* @__PURE__ */ p("div", {
+			className: "flow-palette-grid",
+			children: h.map((e) => /* @__PURE__ */ m("div", {
+				className: `flow-palette-item${n === e.mode ? " flow-palette-item--active" : ""}`,
+				onClick: () => {
+					i(null), r(n === e.mode ? "select" : e.mode);
+				},
+				children: [/* @__PURE__ */ p(T, { mode: e.mode }), /* @__PURE__ */ p("span", {
+					className: "flow-palette-item-label",
+					children: e.label
+				})]
+			}, e.mode))
+		})
+	] });
 }
-function Z() {
-  const { setPendingPlacement: l, setToolMode: i, pendingPlacement: a } = y(), [t, o] = I({ lang: !0 }), n = u((s, p) => {
-    const h = a?.data.svgId;
-    if (a?.type === "shapeSvg" && h === s) {
-      l(null);
-      return;
-    }
-    const r = {
-      label: p,
-      fill: "transparent",
-      stroke: "theme:base-content",
-      strokeWidth: 1.5,
-      color: x(s)?.brandColor ?? "theme:base-content",
-      labelColor: "theme:base-content",
-      fontSize: 12,
-      svgId: s,
-      iconBox: !1,
-      labelPlacement: "bottom",
-      borderStyle: "none"
-    };
-    l({
-      type: "shapeSvg",
-      width: 56,
-      height: 56,
-      data: r
-    }), i("select");
-  }, [
-    a,
-    l,
-    i
-  ]);
-  return /* @__PURE__ */ e(g, { children: v.map((s) => {
-    const p = S(s.id), h = t[s.id];
-    return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("button", {
-      type: "button",
-      className: "flow-palette-section-toggle",
-      onClick: () => o((r) => ({
-        ...r,
-        [s.id]: !r[s.id]
-      })),
-      children: [/* @__PURE__ */ e("span", {
-        style: {
-          transform: h ? "rotate(90deg)" : "none",
-          transition: "transform .15s"
-        },
-        children: "▸"
-      }), s.label]
-    }), h && /* @__PURE__ */ e("div", {
-      className: "flow-palette-grid",
-      children: p.map((r) => /* @__PURE__ */ c("div", {
-        className: `flow-palette-item${a?.type === "shapeSvg" && a.data.svgId === r.id ? " flow-palette-item--active" : ""}`,
-        onClick: () => n(r.id, r.label),
-        title: r.label,
-        children: [/* @__PURE__ */ e(A, { id: r.id }), /* @__PURE__ */ e("span", {
-          className: "flow-palette-item-label",
-          children: r.label
-        })]
-      }, r.id))
-    })] }, s.id);
-  }) });
+function v() {
+	let { setPendingPlacement: e, setToolMode: n, pendingPlacement: i } = t(), [s, c] = d({ lang: !0 }), l = u((t, r) => {
+		let o = i?.data.svgId;
+		if (i?.type === "shapeSvg" && o === t) {
+			e(null);
+			return;
+		}
+		let s = {
+			label: r,
+			fill: "transparent",
+			stroke: "theme:base-content",
+			strokeWidth: 1.5,
+			color: a(t)?.brandColor ?? "theme:base-content",
+			labelColor: "theme:base-content",
+			fontSize: 12,
+			svgId: t,
+			iconBox: !1,
+			labelPlacement: "bottom",
+			borderStyle: "none"
+		};
+		e({
+			type: "shapeSvg",
+			width: 56,
+			height: 56,
+			data: s
+		}), n("select");
+	}, [
+		i,
+		e,
+		n
+	]);
+	return /* @__PURE__ */ p(f, { children: r.map((e) => {
+		let t = o(e.id), n = s[e.id];
+		return /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("button", {
+			type: "button",
+			className: "flow-palette-section-toggle",
+			onClick: () => c((t) => ({
+				...t,
+				[e.id]: !t[e.id]
+			})),
+			children: [/* @__PURE__ */ p("span", {
+				style: {
+					transform: n ? "rotate(90deg)" : "none",
+					transition: "transform .15s"
+				},
+				children: "▸"
+			}), e.label]
+		}), n && /* @__PURE__ */ p("div", {
+			className: "flow-palette-grid",
+			children: t.map((e) => /* @__PURE__ */ m("div", {
+				className: `flow-palette-item${i?.type === "shapeSvg" && i.data.svgId === e.id ? " flow-palette-item--active" : ""}`,
+				onClick: () => l(e.id, e.label),
+				title: e.label,
+				children: [/* @__PURE__ */ p(y, { id: e.id }), /* @__PURE__ */ p("span", {
+					className: "flow-palette-item-label",
+					children: e.label
+				})]
+			}, e.id))
+		})] }, e.id);
+	}) });
 }
-function A({ id: l }) {
-  const i = M(l, b(x(l)?.brandColor, "") || "#475569");
-  return i ? /* @__PURE__ */ e("img", {
-    src: `data:image/svg+xml;utf8,${encodeURIComponent(i)}`,
-    width: 20,
-    height: 16,
-    alt: "",
-    style: { objectFit: "contain" }
-  }) : null;
+function y({ id: e }) {
+	let t = a(e), r = n(t?.brandColor, "") || "#475569", o = i(e, r);
+	if (!o) return null;
+	let s = `data:image/svg+xml;utf8,${encodeURIComponent(o)}`;
+	return /* @__PURE__ */ p("img", {
+		src: s,
+		width: 20,
+		height: 16,
+		alt: "",
+		style: { objectFit: "contain" }
+	});
 }
-var D = [
-  {
-    kind: "markdown",
-    label: "Markdown",
-    width: 260,
-    height: 180,
-    content: `# 标题
-
-- 支持 **GFM**
-- 支持 \`代码\`
-
-> 引用文本`,
-    icon: /* @__PURE__ */ e(m, { text: "M↓" })
-  },
-  {
-    kind: "html",
-    label: "HTML",
-    width: 260,
-    height: 180,
-    content: `<div style="font-family:sans-serif;padding:12px">
-  <h3>Hello</h3>
-  <p>可编辑的 HTML 片段</p>
-</div>`,
-    icon: /* @__PURE__ */ e(m, { text: "</>" })
-  },
-  {
-    kind: "mermaid",
-    label: "Mermaid",
-    width: 280,
-    height: 200,
-    content: `graph TD
-  A[开始] --> B{判断}
-  B -->|是| C[处理]
-  B -->|否| D[结束]`,
-    icon: /* @__PURE__ */ e(m, { text: "⎇" })
-  },
-  {
-    kind: "math",
-    label: "Math",
-    width: 240,
-    height: 120,
-    content: "E = mc^2",
-    icon: /* @__PURE__ */ e(m, { text: "√x" })
-  },
-  {
-    kind: "image",
-    label: "Image",
-    width: 320,
-    height: 220,
-    content: "",
-    icon: /* @__PURE__ */ e(m, { text: "IMG" })
-  },
-  {
-    kind: "model3d",
-    label: "3D",
-    width: 360,
-    height: 280,
-    content: "",
-    icon: /* @__PURE__ */ e(m, { text: "3D" })
-  },
-  {
-    kind: "ai",
-    label: "AI",
-    width: 300,
-    height: 340,
-    content: "",
-    icon: /* @__PURE__ */ e(m, { text: "AI" })
-  },
-  {
-    kind: "data",
-    label: "Data",
-    width: 420,
-    height: 300,
-    content: "",
-    icon: /* @__PURE__ */ e(m, { text: "⊞" })
-  }
+var b = [
+	{
+		kind: "markdown",
+		label: "Markdown",
+		width: 260,
+		height: 180,
+		content: "# 标题\n\n- 支持 **GFM**\n- 支持 `代码`\n\n> 引用文本",
+		icon: /* @__PURE__ */ p(x, { text: "M↓" })
+	},
+	{
+		kind: "html",
+		label: "HTML",
+		width: 260,
+		height: 180,
+		content: "<div style=\"font-family:sans-serif;padding:12px\">\n  <h3>Hello</h3>\n  <p>可编辑的 HTML 片段</p>\n</div>",
+		icon: /* @__PURE__ */ p(x, { text: "</>" })
+	},
+	{
+		kind: "mermaid",
+		label: "Mermaid",
+		width: 280,
+		height: 200,
+		content: "graph TD\n  A[开始] --> B{判断}\n  B -->|是| C[处理]\n  B -->|否| D[结束]",
+		icon: /* @__PURE__ */ p(x, { text: "⎇" })
+	},
+	{
+		kind: "math",
+		label: "Math",
+		width: 240,
+		height: 120,
+		content: "E = mc^2",
+		icon: /* @__PURE__ */ p(x, { text: "√x" })
+	},
+	{
+		kind: "image",
+		label: "Image",
+		width: 320,
+		height: 220,
+		content: "",
+		icon: /* @__PURE__ */ p(x, { text: "IMG" })
+	},
+	{
+		kind: "model3d",
+		label: "3D",
+		width: 360,
+		height: 280,
+		content: "",
+		icon: /* @__PURE__ */ p(x, { text: "3D" })
+	},
+	{
+		kind: "ai",
+		label: "AI",
+		width: 300,
+		height: 340,
+		content: "",
+		icon: /* @__PURE__ */ p(x, { text: "AI" })
+	},
+	{
+		kind: "data",
+		label: "Data",
+		width: 420,
+		height: 300,
+		content: "",
+		icon: /* @__PURE__ */ p(x, { text: "⊞" })
+	}
 ];
-function m({ text: l }) {
-  return /* @__PURE__ */ e("div", {
-    style: {
-      width: 20,
-      height: 16,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontSize: 9,
-      fontWeight: 700,
-      color: "color-mix(in oklch, var(--color-base-content) 60%, transparent)",
-      border: "1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent)",
-      borderRadius: 3,
-      flexShrink: 0
-    },
-    children: l
-  });
+function x({ text: e }) {
+	return /* @__PURE__ */ p("div", {
+		style: {
+			width: 20,
+			height: 16,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			fontSize: 9,
+			fontWeight: 700,
+			color: "color-mix(in oklch, var(--color-base-content) 60%, transparent)",
+			border: "1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent)",
+			borderRadius: 3,
+			flexShrink: 0
+		},
+		children: e
+	});
 }
-function q() {
-  const { setPendingPlacement: l, setToolMode: i, pendingPlacement: a } = y(), t = u((o) => {
-    if (a?.type === "mediaNode" && a.data.mediaKind === o.kind) {
-      l(null);
-      return;
-    }
-    const n = {
-      label: o.label,
-      fill: "theme:base-100",
-      stroke: "theme:base-content",
-      strokeWidth: 1.5,
-      color: "theme:base-content",
-      fontSize: 13,
-      borderStyle: "solid",
-      mediaKind: o.kind,
-      mediaContent: o.content,
-      ...o.kind === "ai" ? { aiConfig: {
-        gateway: "",
-        protocol: "openai",
-        model: ""
-      } } : o.kind === "model3d" ? { modelFormat: "stl" } : o.kind === "data" ? { dataConfig: W() } : {}
-    };
-    l({
-      type: "mediaNode",
-      width: o.width,
-      height: o.height,
-      data: n
-    }), i("select");
-  }, [
-    a,
-    l,
-    i
-  ]);
-  return /* @__PURE__ */ e("div", {
-    className: "flow-palette-grid",
-    children: D.map((o) => /* @__PURE__ */ c("div", {
-      className: `flow-palette-item${a?.type === "mediaNode" && a.data.mediaKind === o.kind ? " flow-palette-item--active" : ""}`,
-      onClick: () => t(o),
-      title: o.label,
-      children: [o.icon, /* @__PURE__ */ e("span", {
-        className: "flow-palette-item-label",
-        children: o.label
-      })]
-    }, o.kind))
-  });
+function S() {
+	let { setPendingPlacement: e, setToolMode: n, pendingPlacement: r } = t(), i = u((t) => {
+		if (r?.type === "mediaNode" && r.data.mediaKind === t.kind) {
+			e(null);
+			return;
+		}
+		let i = {
+			label: t.label,
+			fill: "theme:base-100",
+			stroke: "theme:base-content",
+			strokeWidth: 1.5,
+			color: "theme:base-content",
+			fontSize: 13,
+			borderStyle: "solid",
+			mediaKind: t.kind,
+			mediaContent: t.content,
+			...t.kind === "ai" ? { aiConfig: {
+				gateway: "",
+				protocol: "openai",
+				model: ""
+			} } : t.kind === "model3d" ? { modelFormat: "stl" } : t.kind === "data" ? { dataConfig: l() } : {}
+		};
+		e({
+			type: "mediaNode",
+			width: t.width,
+			height: t.height,
+			data: i
+		}), n("select");
+	}, [
+		r,
+		e,
+		n
+	]);
+	return /* @__PURE__ */ p("div", {
+		className: "flow-palette-grid",
+		children: b.map((e) => /* @__PURE__ */ m("div", {
+			className: `flow-palette-item${r?.type === "mediaNode" && r.data.mediaKind === e.kind ? " flow-palette-item--active" : ""}`,
+			onClick: () => i(e),
+			title: e.label,
+			children: [e.icon, /* @__PURE__ */ p("span", {
+				className: "flow-palette-item-label",
+				children: e.label
+			})]
+		}, e.kind))
+	});
 }
-function L({ children: l }) {
-  return /* @__PURE__ */ e("div", {
-    style: {
-      fontSize: 11,
-      fontWeight: 600,
-      margin: "10px 0 6px",
-      color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
-      textTransform: "uppercase",
-      letterSpacing: "0.05em"
-    },
-    children: l
-  });
+function C({ children: e }) {
+	return /* @__PURE__ */ p("div", {
+		style: {
+			fontSize: 11,
+			fontWeight: 600,
+			margin: "10px 0 6px",
+			color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
+			textTransform: "uppercase",
+			letterSpacing: "0.05em"
+		},
+		children: e
+	});
 }
-function z({ type: l }) {
-  const t = "currentColor", n = {
-    shapeRect: /* @__PURE__ */ e("rect", {
-      x: "3",
-      y: "4",
-      width: 30,
-      height: 20,
-      rx: "1",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeRoundRect: /* @__PURE__ */ e("rect", {
-      x: "3",
-      y: "4",
-      width: 30,
-      height: 20,
-      rx: "5",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeEllipse: /* @__PURE__ */ e("ellipse", {
-      cx: 18,
-      cy: 14,
-      rx: 14,
-      ry: 10,
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeDiamond: /* @__PURE__ */ e("polygon", {
-      points: "18,3 32,14 18,25 4,14",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeDocument: /* @__PURE__ */ e("path", {
-      d: `M4,4 L32,4 L32,20 C${25.2},16 ${10.799999999999999},26 4,20 Z`,
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeParallelogram: /* @__PURE__ */ e("polygon", {
-      points: `9.600000000000001,4 32,4 ${26.4},24 4,24`,
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeTriangle: /* @__PURE__ */ e("polygon", {
-      points: "18,4 32,24 4,24",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeTrapezoid: /* @__PURE__ */ e("polygon", {
-      points: `8.2,4 ${27.8},4 32,24 4,24`,
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapePentagon: (() => {
-      const h = Math.min(18, 14) - 4;
-      return /* @__PURE__ */ e("polygon", {
-        points: Array.from({ length: 5 }, (r, k) => {
-          const d = Math.PI * 2 * k / 5 - Math.PI / 2;
-          return `${18 + h * Math.cos(d)},${14 + h * Math.sin(d)}`;
-        }).join(" "),
-        fill: "none",
-        stroke: t,
-        strokeWidth: 1.5
-      });
-    })(),
-    shapeHexagon: /* @__PURE__ */ e("polygon", {
-      points: Array.from({ length: 6 }, (k, d) => {
-        const w = Math.PI * 2 * d / 6 - Math.PI / 6;
-        return `${18 + 14 * Math.cos(w)},${14 + 10 * Math.sin(w)}`;
-      }).join(" "),
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeStar: (() => {
-      const h = Math.min(18, 14) - 3, r = h * 0.4;
-      return /* @__PURE__ */ e("polygon", {
-        points: Array.from({ length: 10 }, (k, d) => {
-          const w = Math.PI * d / 5 - Math.PI / 2, f = d % 2 === 0 ? h : r;
-          return `${18 + f * Math.cos(w)},${14 + f * Math.sin(w)}`;
-        }).join(" "),
-        fill: "none",
-        stroke: t,
-        strokeWidth: 1.5
-      });
-    })(),
-    shapeHexagram: (() => {
-      const h = Math.min(18, 14) - 3, r = h * 0.55;
-      return /* @__PURE__ */ e("polygon", {
-        points: Array.from({ length: 12 }, (k, d) => {
-          const w = Math.PI * d / 6 - Math.PI / 2, f = d % 2 === 0 ? h : r;
-          return `${18 + f * Math.cos(w)},${14 + f * Math.sin(w)}`;
-        }).join(" "),
-        fill: "none",
-        stroke: t,
-        strokeWidth: 1.5
-      });
-    })(),
-    shapeRightTriangle: /* @__PURE__ */ e("polygon", {
-      points: "4,4 32,24 4,24",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    shapeCorner: (Math.min(28, 20) * 0.4, /* @__PURE__ */ e("polygon", {
-      points: "4,4 32,4 32,12 12,12 12,24 4,24",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5
-    })),
-    textLabel: /* @__PURE__ */ e("text", {
-      x: 18,
-      y: 15,
-      textAnchor: "middle",
-      dominantBaseline: "middle",
-      fontSize: "10",
-      fill: "currentColor",
-      children: "Aa"
-    }),
-    animAnchor: /* @__PURE__ */ c(g, { children: [
-      /* @__PURE__ */ e("rect", {
-        x: "3",
-        y: "4",
-        width: 30,
-        height: 20,
-        rx: "2",
-        fill: "none",
-        stroke: t,
-        strokeWidth: 1.5,
-        strokeDasharray: "4 3"
-      }),
-      /* @__PURE__ */ e("circle", {
-        cx: "8",
-        cy: "9",
-        r: "4",
-        fill: "none",
-        stroke: t,
-        strokeWidth: 1.5
-      }),
-      /* @__PURE__ */ e("text", {
-        x: "8",
-        y: "10.5",
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        fontSize: "7",
-        fill: "currentColor",
-        children: "1"
-      })
-    ] }),
-    geometryGroup: /* @__PURE__ */ e("rect", {
-      x: "3",
-      y: "4",
-      width: 30,
-      height: 20,
-      rx: "3",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5,
-      strokeDasharray: "6 3"
-    }),
-    flowGroup: /* @__PURE__ */ e("rect", {
-      x: "3",
-      y: "4",
-      width: 30,
-      height: 20,
-      rx: "3",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5,
-      strokeDasharray: "2 3"
-    })
-  };
-  return /* @__PURE__ */ e("svg", {
-    width: 36,
-    height: 28,
-    viewBox: "0 0 36 28",
-    style: { color: "color-mix(in oklch, var(--color-base-content) 55%, transparent)" },
-    children: n[l] ?? n.shapeRect
-  });
+function w({ type: e }) {
+	let t = "currentColor", n = 1.5, r = {
+		shapeRect: /* @__PURE__ */ p("rect", {
+			x: "3",
+			y: "4",
+			width: 30,
+			height: 20,
+			rx: "1",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeRoundRect: /* @__PURE__ */ p("rect", {
+			x: "3",
+			y: "4",
+			width: 30,
+			height: 20,
+			rx: "5",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeEllipse: /* @__PURE__ */ p("ellipse", {
+			cx: 18,
+			cy: 14,
+			rx: 14,
+			ry: 10,
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeDiamond: /* @__PURE__ */ p("polygon", {
+			points: "18,3 32,14 18,25 4,14",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeDocument: /* @__PURE__ */ p("path", {
+			d: `M4,4 L32,4 L32,20 C25.2,16 ${36 * .3},26 4,20 Z`,
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeParallelogram: /* @__PURE__ */ p("polygon", {
+			points: "9.600000000000001,4 32,4 26.4,24 4,24",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeTriangle: /* @__PURE__ */ p("polygon", {
+			points: "18,4 32,24 4,24",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeTrapezoid: /* @__PURE__ */ p("polygon", {
+			points: "8.2,4 27.8,4 32,24 4,24",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapePentagon: (() => {
+			let e = Array.from({ length: 5 }, (e, t) => {
+				let n = Math.PI * 2 * t / 5 - Math.PI / 2;
+				return `${18 + 10 * Math.cos(n)},${14 + 10 * Math.sin(n)}`;
+			}).join(" ");
+			return /* @__PURE__ */ p("polygon", {
+				points: e,
+				fill: "none",
+				stroke: t,
+				strokeWidth: n
+			});
+		})(),
+		shapeHexagon: (() => {
+			let e = Array.from({ length: 6 }, (e, t) => {
+				let n = Math.PI * 2 * t / 6 - Math.PI / 6;
+				return `${18 + 14 * Math.cos(n)},${14 + 10 * Math.sin(n)}`;
+			}).join(" ");
+			return /* @__PURE__ */ p("polygon", {
+				points: e,
+				fill: "none",
+				stroke: t,
+				strokeWidth: n
+			});
+		})(),
+		shapeStar: (() => {
+			let e = Array.from({ length: 10 }, (e, t) => {
+				let n = Math.PI * t / 5 - Math.PI / 2, r = t % 2 == 0 ? 11 : 4.4;
+				return `${18 + r * Math.cos(n)},${14 + r * Math.sin(n)}`;
+			}).join(" ");
+			return /* @__PURE__ */ p("polygon", {
+				points: e,
+				fill: "none",
+				stroke: t,
+				strokeWidth: n
+			});
+		})(),
+		shapeHexagram: (() => {
+			let e = Array.from({ length: 12 }, (e, t) => {
+				let n = Math.PI * t / 6 - Math.PI / 2, r = t % 2 == 0 ? 11 : 6.050000000000001;
+				return `${18 + r * Math.cos(n)},${14 + r * Math.sin(n)}`;
+			}).join(" ");
+			return /* @__PURE__ */ p("polygon", {
+				points: e,
+				fill: "none",
+				stroke: t,
+				strokeWidth: n
+			});
+		})(),
+		shapeRightTriangle: /* @__PURE__ */ p("polygon", {
+			points: "4,4 32,24 4,24",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		shapeCorner: /* @__PURE__ */ p("polygon", {
+			points: "4,4 32,4 32,12 12,12 12,24 4,24",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n
+		}),
+		textLabel: /* @__PURE__ */ p("text", {
+			x: 18,
+			y: 15,
+			textAnchor: "middle",
+			dominantBaseline: "middle",
+			fontSize: "10",
+			fill: "currentColor",
+			children: "Aa"
+		}),
+		animAnchor: /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p("rect", {
+				x: "3",
+				y: "4",
+				width: 30,
+				height: 20,
+				rx: "2",
+				fill: "none",
+				stroke: t,
+				strokeWidth: n,
+				strokeDasharray: "4 3"
+			}),
+			/* @__PURE__ */ p("circle", {
+				cx: "8",
+				cy: "9",
+				r: "4",
+				fill: "none",
+				stroke: t,
+				strokeWidth: n
+			}),
+			/* @__PURE__ */ p("text", {
+				x: "8",
+				y: "10.5",
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fontSize: "7",
+				fill: "currentColor",
+				children: "1"
+			})
+		] }),
+		geometryGroup: /* @__PURE__ */ p("rect", {
+			x: "3",
+			y: "4",
+			width: 30,
+			height: 20,
+			rx: "3",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n,
+			strokeDasharray: "6 3"
+		}),
+		flowGroup: /* @__PURE__ */ p("rect", {
+			x: "3",
+			y: "4",
+			width: 30,
+			height: 20,
+			rx: "3",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n,
+			strokeDasharray: "2 3"
+		})
+	};
+	return /* @__PURE__ */ p("svg", {
+		width: 36,
+		height: 28,
+		viewBox: "0 0 36 28",
+		style: { color: "color-mix(in oklch, var(--color-base-content) 55%, transparent)" },
+		children: r[e] ?? r.shapeRect
+	});
 }
-function E({ mode: l }) {
-  const t = "currentColor", n = {
-    connect: /* @__PURE__ */ c(g, { children: [/* @__PURE__ */ e("line", {
-      x1: "6",
-      y1: 22,
-      x2: 30,
-      y2: "6",
-      stroke: t,
-      strokeWidth: 1.5
-    }), /* @__PURE__ */ e("polygon", {
-      points: "30,6 25,4 27,9",
-      fill: t
-    })] }),
-    freehand: /* @__PURE__ */ e("path", {
-      d: "M6,20 C10,14 14,10 18,14 S26,6 30,8",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5,
-      strokeLinecap: "round"
-    }),
-    line: /* @__PURE__ */ e("line", {
-      x1: "6",
-      y1: 22,
-      x2: 30,
-      y2: "6",
-      stroke: t,
-      strokeWidth: 1.5
-    }),
-    polyline: /* @__PURE__ */ e("polyline", {
-      points: "6,22 14,8 20,18 30,6",
-      fill: "none",
-      stroke: t,
-      strokeWidth: 1.5,
-      strokeLinejoin: "round"
-    }),
-    arrow: /* @__PURE__ */ c(g, { children: [/* @__PURE__ */ e("line", {
-      x1: "6",
-      y1: 22,
-      x2: 30,
-      y2: "6",
-      stroke: t,
-      strokeWidth: 1.5
-    }), /* @__PURE__ */ e("polygon", {
-      points: "30,6 24,6 28,12",
-      fill: t
-    })] })
-  };
-  return /* @__PURE__ */ e("svg", {
-    width: 36,
-    height: 28,
-    viewBox: "0 0 36 28",
-    style: { color: "color-mix(in oklch, var(--color-base-content) 55%, transparent)" },
-    children: n[l] ?? n.line
-  });
+function T({ mode: e }) {
+	let t = "currentColor", n = 1.5, r = {
+		connect: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("line", {
+			x1: "6",
+			y1: 22,
+			x2: 30,
+			y2: "6",
+			stroke: t,
+			strokeWidth: n
+		}), /* @__PURE__ */ p("polygon", {
+			points: "30,6 25,4 27,9",
+			fill: t
+		})] }),
+		freehand: /* @__PURE__ */ p("path", {
+			d: "M6,20 C10,14 14,10 18,14 S26,6 30,8",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n,
+			strokeLinecap: "round"
+		}),
+		line: /* @__PURE__ */ p("line", {
+			x1: "6",
+			y1: 22,
+			x2: 30,
+			y2: "6",
+			stroke: t,
+			strokeWidth: n
+		}),
+		polyline: /* @__PURE__ */ p("polyline", {
+			points: "6,22 14,8 20,18 30,6",
+			fill: "none",
+			stroke: t,
+			strokeWidth: n,
+			strokeLinejoin: "round"
+		}),
+		arrow: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("line", {
+			x1: "6",
+			y1: 22,
+			x2: 30,
+			y2: "6",
+			stroke: t,
+			strokeWidth: n
+		}), /* @__PURE__ */ p("polygon", {
+			points: "30,6 24,6 28,12",
+			fill: t
+		})] })
+	};
+	return /* @__PURE__ */ p("svg", {
+		width: 36,
+		height: 28,
+		viewBox: "0 0 36 28",
+		style: { color: "color-mix(in oklch, var(--color-base-content) 55%, transparent)" },
+		children: r[e] ?? r.line
+	});
 }
-export {
-  q as MediaStampContent,
-  z as PaletteThumbnail,
-  N as ShapePaletteContent,
-  Z as SvgStampContent,
-  V as default
-};
+//#endregion
+export { S as MediaStampContent, w as PaletteThumbnail, _ as ShapePaletteContent, v as SvgStampContent, g as default };
 
 //# sourceMappingURL=ShapePalette.js.map