@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/floating-panel/floating-panel.js

@@ -0,0 +1,995 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { Ct as Header, Dt as CloseTrigger, Et as Content, Ot as Body, St as Positioner, Tt as Control, _t as Trigger, bt as Root, vt as Title, wt as DragTrigger, xt as ResizeTriggers, yt as StageTrigger } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { Button } from "@stealthscale/component-actions";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Portal } from "@stealthscale/component-primitives";
+import { Field, Switch } from "@stealthscale/component-forms";
+import { Group, Stack } from "@stealthscale/component-layout";
+import { Sample, specimen, useWords } from "@stealthscale/specimen";
+import { GripHorizontalIcon, Maximize2Icon, Minimize2Icon, MinusIcon, XIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+import { Avatar } from "@stealthscale/component-media";
+import { DataList } from "@stealthscale/component-collections";
+//#region src/floating-panel/examples/controlled.example.tsx
+var controlled_example_exports = /* @__PURE__ */ __exportAll({
+	Controlled: () => Controlled,
+	source: () => source$5
+});
+const FIRST = {
+	height: 200,
+	width: 320
+};
+function Controlled() {
+	const $ = c(52);
+	const { t } = useWords("floating-panel");
+	const [open, setOpen] = useState(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			x: 0,
+			y: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [place, setPlace] = useState(t0);
+	const [size, setSize] = useState(FIRST);
+	let t1;
+	let t2;
+	let t3;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (details) => {
+			setOpen(details.open);
+		};
+		t2 = (details_0) => {
+			setPlace(details_0.position);
+		};
+		t3 = (details_1) => {
+			setSize(details_1.size);
+		};
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] !== t) {
+		t4 = t("controlled.trigger");
+		$[4] = t;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Trigger, {
+			as: Button,
+			children: t4
+		});
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(GripHorizontalIcon, { "aria-hidden": true });
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== t) {
+		t7 = t("controlled.heading");
+		$[9] = t;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(DragTrigger, { children: [t6, /* @__PURE__ */ jsx(Title, { children: t7 })] });
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== t) {
+		t9 = t("close");
+		$[13] = t;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(XIcon, {});
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[16] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Control, { children: /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t9,
+			children: t10
+		}) });
+		$[16] = t9;
+		$[17] = t11;
+	} else t11 = $[17];
+	let t12;
+	if ($[18] !== t11 || $[19] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(Header, { children: [t8, t11] });
+		$[18] = t11;
+		$[19] = t8;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t) {
+		t13 = t("controlled.body");
+		$[21] = t;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t13
+		});
+		$[23] = t13;
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = () => {
+			setSize(FIRST);
+		};
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== t) {
+		t16 = t("controlled.reset");
+		$[26] = t;
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Button, {
+			onClick: t15,
+			size: "sm",
+			variant: "outline",
+			children: t16
+		});
+		$[28] = t16;
+		$[29] = t17;
+	} else t17 = $[29];
+	let t18;
+	if ($[30] !== t14 || $[31] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			gap: "sm",
+			children: [t14, t17]
+		}) });
+		$[30] = t14;
+		$[31] = t17;
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(ResizeTriggers, {});
+		$[33] = t19;
+	} else t19 = $[33];
+	let t20;
+	if ($[34] !== t12 || $[35] !== t18) {
+		t20 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t12,
+			t18,
+			t19
+		] }) }) });
+		$[34] = t12;
+		$[35] = t18;
+		$[36] = t20;
+	} else t20 = $[36];
+	let t21;
+	if ($[37] !== open || $[38] !== size || $[39] !== t20 || $[40] !== t5) {
+		t21 = /* @__PURE__ */ jsxs(Root, {
+			onOpenChange: t1,
+			onPositionChange: t2,
+			onSizeChange: t3,
+			open,
+			size,
+			children: [t5, t20]
+		});
+		$[37] = open;
+		$[38] = size;
+		$[39] = t20;
+		$[40] = t5;
+		$[41] = t21;
+	} else t21 = $[41];
+	let t22;
+	if ($[42] !== open || $[43] !== place || $[44] !== size || $[45] !== t) {
+		t22 = open ? t("controlled.place", {
+			...size,
+			x: Math.round(place.x),
+			y: Math.round(place.y)
+		}) : null;
+		$[42] = open;
+		$[43] = place;
+		$[44] = size;
+		$[45] = t;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			tone: "muted",
+			children: t22
+		});
+		$[47] = t22;
+		$[48] = t23;
+	} else t23 = $[48];
+	let t24;
+	if ($[49] !== t21 || $[50] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			gap: "sm",
+			children: [t21, t23]
+		});
+		$[49] = t21;
+		$[50] = t23;
+		$[51] = t24;
+	} else t24 = $[51];
+	return t24;
+}
+const source$5 = "import { type ReactElement, useState } from \"react\";\n\nimport { GripHorizontalIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { FloatingPanel } from \"@stealthscale/component-screen\";\n\nconst FIRST = { height: 200, width: 320 };\n\nexport function Controlled(): ReactElement {\n  const { t } = useWords(\"floating-panel\");\n  const [open, setOpen] = useState(false);\n  const [place, setPlace] = useState({ x: 0, y: 0 });\n  const [size, setSize] = useState(FIRST);\n\n  return (\n    <Stack align=\"flex-start\" gap=\"sm\">\n      <FloatingPanel.Root\n        onOpenChange={(details) => {\n          setOpen(details.open);\n        }}\n        onPositionChange={(details) => {\n          setPlace(details.position);\n        }}\n        onSizeChange={(details) => {\n          setSize(details.size);\n        }}\n        open={open}\n        size={size}\n      >\n        <FloatingPanel.Trigger as={Button}>{t(\"controlled.trigger\")}</FloatingPanel.Trigger>\n        <Portal>\n          <FloatingPanel.Positioner>\n            <FloatingPanel.Content>\n              <FloatingPanel.Header>\n                <FloatingPanel.DragTrigger>\n                  <GripHorizontalIcon aria-hidden />\n                  <FloatingPanel.Title>{t(\"controlled.heading\")}</FloatingPanel.Title>\n                </FloatingPanel.DragTrigger>\n                <FloatingPanel.Control>\n                  <FloatingPanel.CloseTrigger label={t(\"close\")}>\n                    <XIcon />\n                  </FloatingPanel.CloseTrigger>\n                </FloatingPanel.Control>\n              </FloatingPanel.Header>\n              <FloatingPanel.Body>\n                <Stack align=\"flex-start\" gap=\"sm\">\n                  <Text size=\"sm\">{t(\"controlled.body\")}</Text>\n                  <Button\n                    onClick={() => {\n                      setSize(FIRST);\n                    }}\n                    size=\"sm\"\n                    variant=\"outline\"\n                  >\n                    {t(\"controlled.reset\")}\n                  </Button>\n                </Stack>\n              </FloatingPanel.Body>\n              <FloatingPanel.ResizeTriggers />\n            </FloatingPanel.Content>\n          </FloatingPanel.Positioner>\n        </Portal>\n      </FloatingPanel.Root>\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {open\n          ? t(\"controlled.place\", { ...size, x: Math.round(place.x), y: Math.round(place.y) })\n          : null}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/floating-panel/examples/inspector.example.tsx
+var inspector_example_exports = /* @__PURE__ */ __exportAll({
+	Inspector: () => Inspector,
+	source: () => source$4
+});
+const FIELDS = [{
+	name: "width",
+	value: "1200"
+}, {
+	name: "height",
+	value: "630"
+}];
+function Inspector() {
+	const $ = c(49);
+	const { t } = useWords("floating-panel");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			height: 300,
+			width: 280
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("inspector.trigger");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Trigger, {
+			as: Button,
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(GripHorizontalIcon, { "aria-hidden": true });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("inspector.heading");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(DragTrigger, { children: [t3, /* @__PURE__ */ jsx(Title, { children: t4 })] });
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("close");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(XIcon, {});
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Control, { children: /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t6,
+			children: t7
+		}) });
+		$[13] = t6;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t5 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Header, { children: [t5, t8] });
+		$[15] = t5;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("inspector.name");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Field.Label, { children: t10 });
+		$[20] = t10;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t) {
+		t12 = t("inspector.value");
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Field.Control, { defaultValue: t12 });
+		$[24] = t12;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t11 || $[27] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Field.Root, { children: [t11, t13] });
+		$[26] = t11;
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t) {
+		t15 = FIELDS.map((t16) => {
+			const { name, value } = t16;
+			return /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, { children: t(`inspector.${name}`) }), /* @__PURE__ */ jsx(Field.Control, {
+				defaultValue: value,
+				inputMode: "numeric"
+			})] }, name);
+		});
+		$[29] = t;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Group, {
+			gap: "sm",
+			children: t15
+		});
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) });
+		$[33] = t17;
+	} else t17 = $[33];
+	let t18;
+	if ($[34] !== t) {
+		t18 = t("inspector.locked");
+		$[34] = t;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Switch.Root, { children: [t17, /* @__PURE__ */ jsx(Switch.Label, { children: t18 })] });
+		$[36] = t18;
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] !== t14 || $[39] !== t16 || $[40] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				t14,
+				t16,
+				t19
+			]
+		}) });
+		$[38] = t14;
+		$[39] = t16;
+		$[40] = t19;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(ResizeTriggers, {});
+		$[42] = t21;
+	} else t21 = $[42];
+	let t22;
+	if ($[43] !== t20 || $[44] !== t9) {
+		t22 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t9,
+			t20,
+			t21
+		] }) }) });
+		$[43] = t20;
+		$[44] = t9;
+		$[45] = t22;
+	} else t22 = $[45];
+	let t23;
+	if ($[46] !== t2 || $[47] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Root, {
+			defaultSize: t0,
+			getAnchorPosition: _temp,
+			children: [t2, t22]
+		});
+		$[46] = t2;
+		$[47] = t22;
+		$[48] = t23;
+	} else t23 = $[48];
+	return t23;
+}
+function _temp(t0) {
+	const { boundaryRect, triggerRect } = t0;
+	return {
+		x: Math.min(triggerRect?.left ?? 0, (boundaryRect?.width ?? 0) - 288),
+		y: Math.min((triggerRect?.bottom ?? 0) + 8, (boundaryRect?.height ?? 0) - 308)
+	};
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { GripHorizontalIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Field, Switch } from \"@stealthscale/component-forms\";\nimport { Group, Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { FloatingPanel } from \"@stealthscale/component-screen\";\n\nconst FIELDS = [\n  { name: \"width\", value: \"1200\" },\n  { name: \"height\", value: \"630\" },\n] as const;\n\nexport function Inspector(): ReactElement {\n  const { t } = useWords(\"floating-panel\");\n\n  return (\n    <FloatingPanel.Root\n      defaultSize={{ height: 300, width: 280 }}\n      getAnchorPosition={({ boundaryRect, triggerRect }) => ({\n        x: Math.min(triggerRect?.left ?? 0, (boundaryRect?.width ?? 0) - 288),\n        y: Math.min((triggerRect?.bottom ?? 0) + 8, (boundaryRect?.height ?? 0) - 308),\n      })}\n    >\n      <FloatingPanel.Trigger as={Button}>{t(\"inspector.trigger\")}</FloatingPanel.Trigger>\n      <Portal>\n        <FloatingPanel.Positioner>\n          <FloatingPanel.Content>\n            <FloatingPanel.Header>\n              <FloatingPanel.DragTrigger>\n                <GripHorizontalIcon aria-hidden />\n                <FloatingPanel.Title>{t(\"inspector.heading\")}</FloatingPanel.Title>\n              </FloatingPanel.DragTrigger>\n              <FloatingPanel.Control>\n                <FloatingPanel.CloseTrigger label={t(\"close\")}>\n                  <XIcon />\n                </FloatingPanel.CloseTrigger>\n              </FloatingPanel.Control>\n            </FloatingPanel.Header>\n            <FloatingPanel.Body>\n              <Stack gap=\"md\">\n                <Field.Root>\n                  <Field.Label>{t(\"inspector.name\")}</Field.Label>\n                  <Field.Control defaultValue={t(\"inspector.value\")} />\n                </Field.Root>\n                <Group gap=\"sm\">\n                  {FIELDS.map(({ name, value }) => (\n                    <Field.Root key={name}>\n                      <Field.Label>{t(`inspector.${name}`)}</Field.Label>\n                      <Field.Control defaultValue={value} inputMode=\"numeric\" />\n                    </Field.Root>\n                  ))}\n                </Group>\n                <Switch.Root>\n                  <Switch.Control>\n                    <Switch.Thumb />\n                  </Switch.Control>\n                  <Switch.Label>{t(\"inspector.locked\")}</Switch.Label>\n                </Switch.Root>\n              </Stack>\n            </FloatingPanel.Body>\n            <FloatingPanel.ResizeTriggers />\n          </FloatingPanel.Content>\n        </FloatingPanel.Positioner>\n      </Portal>\n    </FloatingPanel.Root>\n  );\n}\n";
+//#endregion
+//#region src/floating-panel/examples/notes.example.tsx
+var notes_example_exports = /* @__PURE__ */ __exportAll({
+	Notes: () => Notes,
+	source: () => source$3
+});
+const STAGES = [
+	{
+		Icon: MinusIcon,
+		stage: "minimized",
+		word: "minimize"
+	},
+	{
+		Icon: Maximize2Icon,
+		stage: "maximized",
+		word: "maximize"
+	},
+	{
+		Icon: Minimize2Icon,
+		stage: "default",
+		word: "restore"
+	}
+];
+function Notes() {
+	const $ = c(33);
+	const { t } = useWords("floating-panel");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("notes.trigger");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Trigger, {
+			as: Button,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(GripHorizontalIcon, { "aria-hidden": true });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("notes.heading");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(DragTrigger, { children: [t2, /* @__PURE__ */ jsx(Title, { children: t3 })] });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = STAGES.map((t6) => {
+			const { Icon, stage, word } = t6;
+			return /* @__PURE__ */ jsx(StageTrigger, {
+				label: t(word),
+				stage,
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, stage);
+		});
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("close");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(XIcon, {});
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t6) {
+		t8 = /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t6,
+			children: t7
+		});
+		$[14] = t6;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t5 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Control, { children: [t5, t8] });
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t4 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Header, { children: [t4, t9] });
+		$[19] = t4;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t) {
+		t11 = t("notes.body");
+		$[22] = t;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: t11
+		}) });
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ResizeTriggers, {});
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t10 || $[28] !== t12) {
+		t14 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t10,
+			t12,
+			t13
+		] }) }) });
+		$[27] = t10;
+		$[28] = t12;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t1 || $[31] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Root, { children: [t1, t14] });
+		$[30] = t1;
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
+	return t15;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { GripHorizontalIcon, Maximize2Icon, Minimize2Icon, MinusIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { FloatingPanel } from \"@stealthscale/component-screen\";\n\nconst STAGES = [\n  { Icon: MinusIcon, stage: \"minimized\", word: \"minimize\" },\n  { Icon: Maximize2Icon, stage: \"maximized\", word: \"maximize\" },\n  { Icon: Minimize2Icon, stage: \"default\", word: \"restore\" },\n] as const;\n\nexport function Notes(): ReactElement {\n  const { t } = useWords(\"floating-panel\");\n\n  return (\n    <FloatingPanel.Root>\n      <FloatingPanel.Trigger as={Button}>{t(\"notes.trigger\")}</FloatingPanel.Trigger>\n      <Portal>\n        <FloatingPanel.Positioner>\n          <FloatingPanel.Content>\n            <FloatingPanel.Header>\n              <FloatingPanel.DragTrigger>\n                <GripHorizontalIcon aria-hidden />\n                <FloatingPanel.Title>{t(\"notes.heading\")}</FloatingPanel.Title>\n              </FloatingPanel.DragTrigger>\n              <FloatingPanel.Control>\n                {STAGES.map(({ Icon, stage, word }) => (\n                  <FloatingPanel.StageTrigger key={stage} label={t(word)} stage={stage}>\n                    <Icon />\n                  </FloatingPanel.StageTrigger>\n                ))}\n                <FloatingPanel.CloseTrigger label={t(\"close\")}>\n                  <XIcon />\n                </FloatingPanel.CloseTrigger>\n              </FloatingPanel.Control>\n            </FloatingPanel.Header>\n            <FloatingPanel.Body>\n              <Text size=\"sm\">{t(\"notes.body\")}</Text>\n            </FloatingPanel.Body>\n            <FloatingPanel.ResizeTriggers />\n          </FloatingPanel.Content>\n        </FloatingPanel.Positioner>\n      </Portal>\n    </FloatingPanel.Root>\n  );\n}\n";
+//#endregion
+//#region src/floating-panel/examples/preview.example.tsx
+var preview_example_exports = /* @__PURE__ */ __exportAll({
+	Preview: () => Preview,
+	source: () => source$2
+});
+function Preview() {
+	const $ = c(39);
+	const { t } = useWords("floating-panel");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			height: 234,
+			width: 320
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			height: 468,
+			width: 640
+		};
+		t2 = {
+			height: 176,
+			width: 240
+		};
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] !== t) {
+		t3 = t("preview.trigger");
+		$[3] = t;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Trigger, {
+			as: Button,
+			children: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(GripHorizontalIcon, { "aria-hidden": true });
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t) {
+		t6 = t("preview.heading");
+		$[8] = t;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(DragTrigger, { children: [t5, /* @__PURE__ */ jsx(Title, { children: t6 })] });
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("preview.leave");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(XIcon, {});
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Control, { children: /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t8,
+			children: t9
+		}) });
+		$[15] = t8;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== t10 || $[18] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(Header, { children: [t7, t10] });
+		$[17] = t10;
+		$[18] = t7;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t) {
+		t12 = t("preview.ada");
+		$[20] = t;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(Avatar.Fallback, {});
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== t12) {
+		t14 = /* @__PURE__ */ jsx(Avatar.Root, {
+			name: t12,
+			size: "lg",
+			children: t13
+		});
+		$[23] = t12;
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t) {
+		t15 = t("preview.speaking");
+		$[25] = t;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t15
+		});
+		$[27] = t15;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t14 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsxs(Group, {
+			align: "baseline",
+			gap: "sm",
+			children: [t14, t16]
+		}) });
+		$[29] = t14;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(ResizeTriggers, {});
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] !== t11 || $[34] !== t17) {
+		t19 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t11,
+			t17,
+			t18
+		] }) }) });
+		$[33] = t11;
+		$[34] = t17;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] !== t19 || $[37] !== t4) {
+		t20 = /* @__PURE__ */ jsxs(Root, {
+			defaultSize: t0,
+			lockAspectRatio: true,
+			maxSize: t1,
+			minSize: t2,
+			children: [t4, t19]
+		});
+		$[36] = t19;
+		$[37] = t4;
+		$[38] = t20;
+	} else t20 = $[38];
+	return t20;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { GripHorizontalIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Group } from \"@stealthscale/component-layout\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { FloatingPanel } from \"@stealthscale/component-screen\";\n\nexport function Preview(): ReactElement {\n  const { t } = useWords(\"floating-panel\");\n\n  return (\n    <FloatingPanel.Root\n      defaultSize={{ height: 234, width: 320 }}\n      lockAspectRatio\n      maxSize={{ height: 468, width: 640 }}\n      minSize={{ height: 176, width: 240 }}\n    >\n      <FloatingPanel.Trigger as={Button}>{t(\"preview.trigger\")}</FloatingPanel.Trigger>\n      <Portal>\n        <FloatingPanel.Positioner>\n          <FloatingPanel.Content>\n            <FloatingPanel.Header>\n              <FloatingPanel.DragTrigger>\n                <GripHorizontalIcon aria-hidden />\n                <FloatingPanel.Title>{t(\"preview.heading\")}</FloatingPanel.Title>\n              </FloatingPanel.DragTrigger>\n              <FloatingPanel.Control>\n                <FloatingPanel.CloseTrigger label={t(\"preview.leave\")}>\n                  <XIcon />\n                </FloatingPanel.CloseTrigger>\n              </FloatingPanel.Control>\n            </FloatingPanel.Header>\n            <FloatingPanel.Body>\n              <Group align=\"baseline\" gap=\"sm\">\n                <Avatar.Root name={t(\"preview.ada\")} size=\"lg\">\n                  <Avatar.Fallback />\n                </Avatar.Root>\n                <Text size=\"sm\" tone=\"muted\">\n                  {t(\"preview.speaking\")}\n                </Text>\n              </Group>\n            </FloatingPanel.Body>\n            <FloatingPanel.ResizeTriggers />\n          </FloatingPanel.Content>\n        </FloatingPanel.Positioner>\n      </Portal>\n    </FloatingPanel.Root>\n  );\n}\n";
+//#endregion
+//#region src/floating-panel/examples/snapped.example.tsx
+var snapped_example_exports = /* @__PURE__ */ __exportAll({
+	Snapped: () => Snapped,
+	source: () => source$1
+});
+const SHORTCUTS = [
+	"bold",
+	"italic",
+	"link",
+	"undo"
+];
+function Snapped() {
+	const $ = c(31);
+	const { t } = useWords("floating-panel");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			height: 224,
+			width: 272
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			height: 480,
+			width: 480
+		};
+		t2 = {
+			height: 160,
+			width: 256
+		};
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] !== t) {
+		t3 = t("snapped.trigger");
+		$[3] = t;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Trigger, {
+			as: Button,
+			children: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(GripHorizontalIcon, { "aria-hidden": true });
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t) {
+		t6 = t("snapped.heading");
+		$[8] = t;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(DragTrigger, { children: [t5, /* @__PURE__ */ jsx(Title, { children: t6 })] });
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("close");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(XIcon, {});
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Control, { children: /* @__PURE__ */ jsx(CloseTrigger, {
+			label: t8,
+			children: t9
+		}) });
+		$[15] = t8;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== t10 || $[18] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(Header, { children: [t7, t10] });
+		$[17] = t10;
+		$[18] = t7;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t) {
+		t12 = SHORTCUTS.map((shortcut) => /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: t(`snapped.shortcuts.${shortcut}.label`) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: t(`snapped.shortcuts.${shortcut}.keys`) })] }, shortcut));
+		$[20] = t;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(DataList.Root, {
+			orientation: "horizontal",
+			size: "sm",
+			children: t12
+		}) });
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ResizeTriggers, {});
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t11 || $[26] !== t13) {
+		t15 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+			t11,
+			t13,
+			t14
+		] }) }) });
+		$[25] = t11;
+		$[26] = t13;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== t15 || $[29] !== t4) {
+		t16 = /* @__PURE__ */ jsxs(Root, {
+			allowOverflow: false,
+			defaultSize: t0,
+			gridSize: 16,
+			maxSize: t1,
+			minSize: t2,
+			children: [t4, t15]
+		});
+		$[28] = t15;
+		$[29] = t4;
+		$[30] = t16;
+	} else t16 = $[30];
+	return t16;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { GripHorizontalIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { FloatingPanel } from \"@stealthscale/component-screen\";\n\nconst SHORTCUTS = [\"bold\", \"italic\", \"link\", \"undo\"] as const;\n\nexport function Snapped(): ReactElement {\n  const { t } = useWords(\"floating-panel\");\n\n  return (\n    <FloatingPanel.Root\n      allowOverflow={false}\n      defaultSize={{ height: 224, width: 272 }}\n      gridSize={16}\n      maxSize={{ height: 480, width: 480 }}\n      minSize={{ height: 160, width: 256 }}\n    >\n      <FloatingPanel.Trigger as={Button}>{t(\"snapped.trigger\")}</FloatingPanel.Trigger>\n      <Portal>\n        <FloatingPanel.Positioner>\n          <FloatingPanel.Content>\n            <FloatingPanel.Header>\n              <FloatingPanel.DragTrigger>\n                <GripHorizontalIcon aria-hidden />\n                <FloatingPanel.Title>{t(\"snapped.heading\")}</FloatingPanel.Title>\n              </FloatingPanel.DragTrigger>\n              <FloatingPanel.Control>\n                <FloatingPanel.CloseTrigger label={t(\"close\")}>\n                  <XIcon />\n                </FloatingPanel.CloseTrigger>\n              </FloatingPanel.Control>\n            </FloatingPanel.Header>\n            <FloatingPanel.Body>\n              <DataList.Root orientation=\"horizontal\" size=\"sm\">\n                {SHORTCUTS.map((shortcut) => (\n                  <DataList.Item key={shortcut}>\n                    <DataList.ItemLabel>\n                      {t(`snapped.shortcuts.${shortcut}.label`)}\n                    </DataList.ItemLabel>\n                    <DataList.ItemValue>\n                      {t(`snapped.shortcuts.${shortcut}.keys`)}\n                    </DataList.ItemValue>\n                  </DataList.Item>\n                ))}\n              </DataList.Root>\n            </FloatingPanel.Body>\n            <FloatingPanel.ResizeTriggers />\n          </FloatingPanel.Content>\n        </FloatingPanel.Positioner>\n      </Portal>\n    </FloatingPanel.Root>\n  );\n}\n";
+//#endregion
+//#region src/floating-panel/examples/stacked.example.tsx
+var stacked_example_exports = /* @__PURE__ */ __exportAll({
+	Stacked: () => Stacked,
+	source: () => source
+});
+const PANELS = ["layers", "history"];
+function placed(step) {
+	return ({ boundaryRect }) => ({
+		x: (boundaryRect?.width ?? 0) / 2 - 144 + step * 32,
+		y: (boundaryRect?.height ?? 0) / 2 - 112 + step * 32
+	});
+}
+function Stacked() {
+	const $ = c(4);
+	const { t } = useWords("floating-panel");
+	let t0;
+	if ($[0] !== t) {
+		t0 = PANELS.map((name, step) => /* @__PURE__ */ jsxs(Root, {
+			defaultSize: {
+				height: 192,
+				width: 256
+			},
+			getAnchorPosition: placed(step),
+			children: [/* @__PURE__ */ jsx(Trigger, {
+				as: Button,
+				children: t(`stacked.${name}.trigger`)
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+				/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsxs(DragTrigger, { children: [/* @__PURE__ */ jsx(GripHorizontalIcon, { "aria-hidden": true }), /* @__PURE__ */ jsx(Title, { children: t(`stacked.${name}.heading`) })] }), /* @__PURE__ */ jsx(Control, { children: /* @__PURE__ */ jsx(CloseTrigger, {
+					label: t("close"),
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				}) })] }),
+				/* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					children: t(`stacked.${name}.body`)
+				}) }),
+				/* @__PURE__ */ jsx(ResizeTriggers, {})
+			] }) }) })]
+		}, name));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Group, {
+			gap: "sm",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { GripHorizontalIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Group } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { FloatingPanel } from \"@stealthscale/component-screen\";\n\nconst PANELS = [\"layers\", \"history\"] as const;\n\nfunction placed(\n  step: number,\n): (details: FloatingPanel.AnchorPositionDetails) => FloatingPanel.Point {\n  return ({ boundaryRect }) => ({\n    x: (boundaryRect?.width ?? 0) / 2 - 144 + step * 32,\n    y: (boundaryRect?.height ?? 0) / 2 - 112 + step * 32,\n  });\n}\n\nexport function Stacked(): ReactElement {\n  const { t } = useWords(\"floating-panel\");\n\n  return (\n    <Group gap=\"sm\">\n      {PANELS.map((name, step) => (\n        <FloatingPanel.Root\n          defaultSize={{ height: 192, width: 256 }}\n          getAnchorPosition={placed(step)}\n          key={name}\n        >\n          <FloatingPanel.Trigger as={Button}>{t(`stacked.${name}.trigger`)}</FloatingPanel.Trigger>\n          <Portal>\n            <FloatingPanel.Positioner>\n              <FloatingPanel.Content>\n                <FloatingPanel.Header>\n                  <FloatingPanel.DragTrigger>\n                    <GripHorizontalIcon aria-hidden />\n                    <FloatingPanel.Title>{t(`stacked.${name}.heading`)}</FloatingPanel.Title>\n                  </FloatingPanel.DragTrigger>\n                  <FloatingPanel.Control>\n                    <FloatingPanel.CloseTrigger label={t(\"close\")}>\n                      <XIcon />\n                    </FloatingPanel.CloseTrigger>\n                  </FloatingPanel.Control>\n                </FloatingPanel.Header>\n                <FloatingPanel.Body>\n                  <Text size=\"sm\">{t(`stacked.${name}.body`)}</Text>\n                </FloatingPanel.Body>\n                <FloatingPanel.ResizeTriggers />\n              </FloatingPanel.Content>\n            </FloatingPanel.Positioner>\n          </Portal>\n        </FloatingPanel.Root>\n      ))}\n    </Group>\n  );\n}\n";
+//#endregion
+//#region src/floating-panel/floating-panel.specimen.tsx
+/**
+* Returns a scene that renders an example in a sample at the start of the scene.
+*
+* @param name - The example's key under `floating-panel` in the words.
+* @param example - The example module.
+* @param Example - The example's component.
+*/
+function sampled(name, example, Example) {
+	return {
+		about: `floating-panel.${name}.about`,
+		draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Example, {}) }),
+		example,
+		title: `floating-panel.${name}.title`
+	};
+}
+var floating_panel_specimen_default = specimen({
+	about: "floating-panel.about",
+	id: "components/screen/floating-panel",
+	imports: "import { FloatingPanel } from \"@stealthscale/component-screen\";",
+	scenes: [
+		sampled("notes", notes_example_exports, Notes),
+		sampled("inspector", inspector_example_exports, Inspector),
+		sampled("controlled", controlled_example_exports, Controlled),
+		sampled("stacked", stacked_example_exports, Stacked),
+		sampled("snapped", snapped_example_exports, Snapped),
+		sampled("preview", preview_example_exports, Preview)
+	],
+	title: "floating-panel.title"
+});
+//#endregion
+export { floating_panel_specimen_default as default };