@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/typography/text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.cjs","names":["cn"],"sources":["../../../src/components/typography/text.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { TypographyStyle } from \"@puzzle-ui/theme\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\n\ntype TextType = Omit<\n  TypographyStyle,\n  \"headline1\" | \"headline2\" | \"headline3\" | \"headline4\"\n>;\n\ntype PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {\n  as?: E;\n} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | \"as\">;\n\ntype TextOwnProps = {\n  type?: TextType;\n};\n\ntype TextProps<E extends ElementType = \"span\"> = PolymorphicProps<\n  E,\n  TextOwnProps\n>;\n\nconst Text = <E extends ElementType = \"span\">({\n  as,\n  type = \"body1\",\n  className,\n  ...props\n}: TextProps<E>) => {\n  const Component = as ?? \"span\";\n  const classes = cn(\"puzzle-text\", `puzzle-typography-${type}`, className);\n  return <Component {...props} className={classes}></Component>;\n};\n\nexport { Text, type TextProps, type TextType };\n"],"mappings":";;;AAsBA,MAAM,QAAwC,EAC5C,IACA,OAAO,SACP,WACA,GAAG,YACe;CAClB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CAAG,eAAe,qBAAqB,QAAQ,SAAS;CACxE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,GAAI;EAAO,WAAW;CAAoB,CAAA;AAC9D"}

package/dist/components/typography/text.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+import { TypographyStyle } from "@puzzle-ui/theme";
+type TextType = Omit<TypographyStyle, "headline1" | "headline2" | "headline3" | "headline4">;
+type PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {
+  as?: E;
+} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | "as">;
+type TextOwnProps = {
+  type?: TextType;
+};
+type TextProps<E extends ElementType = "span"> = PolymorphicProps<E, TextOwnProps>;
+declare const Text: <E extends ElementType = "span">({ as, type, className, ...props }: TextProps<E>) => import("react").JSX.Element;
+export { Text, type TextProps, type TextType };

package/dist/components/typography/text.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+import { TypographyStyle } from "@puzzle-ui/theme";
+type TextType = Omit<TypographyStyle, "headline1" | "headline2" | "headline3" | "headline4">;
+type PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {
+  as?: E;
+} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | "as">;
+type TextOwnProps = {
+  type?: TextType;
+};
+type TextProps<E extends ElementType = "span"> = PolymorphicProps<E, TextOwnProps>;
+declare const Text: <E extends ElementType = "span">({ as, type, className, ...props }: TextProps<E>) => import("react").JSX.Element;
+export { Text, type TextProps, type TextType };

package/dist/components/typography/text.js

@@ -0,0 +1,14 @@
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/typography/text.tsx
+const Text = ({ as, type = "body1", className, ...props }) => {
+	const Component = as ?? "span";
+	const classes = cn("puzzle-text", `puzzle-typography-${type}`, className);
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		className: classes
+	});
+};
+export { Text };
+
+//# sourceMappingURL=text.js.map

package/dist/components/typography/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../src/components/typography/text.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { TypographyStyle } from \"@puzzle-ui/theme\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\n\ntype TextType = Omit<\n  TypographyStyle,\n  \"headline1\" | \"headline2\" | \"headline3\" | \"headline4\"\n>;\n\ntype PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {\n  as?: E;\n} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | \"as\">;\n\ntype TextOwnProps = {\n  type?: TextType;\n};\n\ntype TextProps<E extends ElementType = \"span\"> = PolymorphicProps<\n  E,\n  TextOwnProps\n>;\n\nconst Text = <E extends ElementType = \"span\">({\n  as,\n  type = \"body1\",\n  className,\n  ...props\n}: TextProps<E>) => {\n  const Component = as ?? \"span\";\n  const classes = cn(\"puzzle-text\", `puzzle-typography-${type}`, className);\n  return <Component {...props} className={classes}></Component>;\n};\n\nexport { Text, type TextProps, type TextType };\n"],"mappings":";;;AAsBA,MAAM,QAAwC,EAC5C,IACA,OAAO,SACP,WACA,GAAG,YACe;CAClB,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,GAAG,eAAe,qBAAqB,QAAQ,SAAS;CACxE,OAAO,oBAAC,WAAD;EAAW,GAAI;EAAO,WAAW;CAAoB,CAAA;AAC9D"}

package/dist/components/utilities/preview/highlight.cjs

@@ -0,0 +1,79 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/utilities/preview/highlight.tsx
+const TOKEN_PATTERN = new RegExp([
+	"(?<comment>\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/)",
+	"(?<string>\"(?:[^\"\\\\\\n]|\\\\.)*\"|'(?:[^'\\\\\\n]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`)",
+	`(?<keyword>\\b(?:${[
+		"as",
+		"async",
+		"await",
+		"break",
+		"case",
+		"class",
+		"const",
+		"continue",
+		"default",
+		"else",
+		"enum",
+		"export",
+		"extends",
+		"false",
+		"finally",
+		"for",
+		"from",
+		"function",
+		"if",
+		"implements",
+		"import",
+		"in",
+		"interface",
+		"let",
+		"new",
+		"null",
+		"of",
+		"return",
+		"switch",
+		"this",
+		"throw",
+		"true",
+		"try",
+		"type",
+		"typeof",
+		"undefined",
+		"var",
+		"void",
+		"while"
+	].join("|")})\\b)`,
+	"(?<number>\\b\\d+(?:\\.\\d+)?\\b)",
+	"(?<type>\\b[A-Z][A-Za-z0-9_]*\\b)"
+].join("|"), "g");
+const TOKEN_TYPES = [
+	"comment",
+	"string",
+	"keyword",
+	"number",
+	"type"
+];
+/**
+* Splits TypeScript/TSX source into plain text and highlighted spans.
+* This is a lightweight lexical pass, not a parser.
+*/
+const highlightCode = (code) => {
+	const nodes = [];
+	let lastIndex = 0;
+	for (const match of code.matchAll(TOKEN_PATTERN)) {
+		const type = TOKEN_TYPES.find((name) => match.groups?.[name] !== void 0);
+		if (!type) continue;
+		if (match.index > lastIndex) nodes.push(code.slice(lastIndex, match.index));
+		nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `puzzle-preview__token--${type}`,
+			children: match[0]
+		}, match.index));
+		lastIndex = match.index + match[0].length;
+	}
+	if (lastIndex < code.length) nodes.push(code.slice(lastIndex));
+	return nodes;
+};
+exports.highlightCode = highlightCode;
+
+//# sourceMappingURL=highlight.cjs.map

package/dist/components/utilities/preview/highlight.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.cjs","names":[],"sources":["../../../../src/components/utilities/preview/highlight.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype TokenType = \"comment\" | \"string\" | \"keyword\" | \"number\" | \"type\";\n\nconst KEYWORDS = [\n  \"as\",\n  \"async\",\n  \"await\",\n  \"break\",\n  \"case\",\n  \"class\",\n  \"const\",\n  \"continue\",\n  \"default\",\n  \"else\",\n  \"enum\",\n  \"export\",\n  \"extends\",\n  \"false\",\n  \"finally\",\n  \"for\",\n  \"from\",\n  \"function\",\n  \"if\",\n  \"implements\",\n  \"import\",\n  \"in\",\n  \"interface\",\n  \"let\",\n  \"new\",\n  \"null\",\n  \"of\",\n  \"return\",\n  \"switch\",\n  \"this\",\n  \"throw\",\n  \"true\",\n  \"try\",\n  \"type\",\n  \"typeof\",\n  \"undefined\",\n  \"var\",\n  \"void\",\n  \"while\",\n];\n\n// Order matters: earlier groups win at the same position.\nconst TOKEN_PATTERN = new RegExp(\n  [\n    \"(?<comment>\\\\/\\\\/[^\\\\n]*|\\\\/\\\\*[\\\\s\\\\S]*?\\\\*\\\\/)\",\n    \"(?<string>\\\"(?:[^\\\"\\\\\\\\\\\\n]|\\\\\\\\.)*\\\"|'(?:[^'\\\\\\\\\\\\n]|\\\\\\\\.)*'|`(?:[^`\\\\\\\\]|\\\\\\\\.)*`)\",\n    `(?<keyword>\\\\b(?:${KEYWORDS.join(\"|\")})\\\\b)`,\n    \"(?<number>\\\\b\\\\d+(?:\\\\.\\\\d+)?\\\\b)\",\n    \"(?<type>\\\\b[A-Z][A-Za-z0-9_]*\\\\b)\",\n  ].join(\"|\"),\n  \"g\",\n);\n\nconst TOKEN_TYPES: TokenType[] = [\n  \"comment\",\n  \"string\",\n  \"keyword\",\n  \"number\",\n  \"type\",\n];\n\n/**\n * Splits TypeScript/TSX source into plain text and highlighted spans.\n * This is a lightweight lexical pass, not a parser.\n */\nconst highlightCode = (code: string): ReactNode[] => {\n  const nodes: ReactNode[] = [];\n  let lastIndex = 0;\n\n  for (const match of code.matchAll(TOKEN_PATTERN)) {\n    const type = TOKEN_TYPES.find((name) => match.groups?.[name] !== undefined);\n\n    if (!type) continue;\n\n    if (match.index > lastIndex) {\n      nodes.push(code.slice(lastIndex, match.index));\n    }\n\n    nodes.push(\n      <span key={match.index} className={`puzzle-preview__token--${type}`}>\n        {match[0]}\n      </span>,\n    );\n\n    lastIndex = match.index + match[0].length;\n  }\n\n  if (lastIndex < code.length) {\n    nodes.push(code.slice(lastIndex));\n  }\n\n  return nodes;\n};\n\nexport { highlightCode };\n"],"mappings":";;AA+CA,MAAM,gBAAgB,IAAI,OACxB;CACE;CACA;CACA,oBAAoB;EA9CtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAQ6B,CAAC,CAAC,KAAK,GAAG,EAAE;CACvC;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GACV,GACF;AAEA,MAAM,cAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;;;;;AAMA,MAAM,iBAAiB,SAA8B;CACnD,MAAM,QAAqB,CAAC;CAC5B,IAAI,YAAY;CAEhB,KAAK,MAAM,SAAS,KAAK,SAAS,aAAa,GAAG;EAChD,MAAM,OAAO,YAAY,MAAM,SAAS,MAAM,SAAS,UAAU,KAAA,CAAS;EAE1E,IAAI,CAAC,MAAM;EAEX,IAAI,MAAM,QAAQ,WAChB,MAAM,KAAK,KAAK,MAAM,WAAW,MAAM,KAAK,CAAC;EAG/C,MAAM,KACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAwB,WAAW,0BAA0B;GAC1D,UAAA,MAAM;EACH,GAFK,MAAM,KAEX,CACR;EAEA,YAAY,MAAM,QAAQ,MAAM,EAAE,CAAC;CACrC;CAEA,IAAI,YAAY,KAAK,QACnB,MAAM,KAAK,KAAK,MAAM,SAAS,CAAC;CAGlC,OAAO;AACT"}

package/dist/components/utilities/preview/highlight.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/utilities/preview/highlight.tsx
+const TOKEN_PATTERN = new RegExp([
+	"(?<comment>\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/)",
+	"(?<string>\"(?:[^\"\\\\\\n]|\\\\.)*\"|'(?:[^'\\\\\\n]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`)",
+	`(?<keyword>\\b(?:${[
+		"as",
+		"async",
+		"await",
+		"break",
+		"case",
+		"class",
+		"const",
+		"continue",
+		"default",
+		"else",
+		"enum",
+		"export",
+		"extends",
+		"false",
+		"finally",
+		"for",
+		"from",
+		"function",
+		"if",
+		"implements",
+		"import",
+		"in",
+		"interface",
+		"let",
+		"new",
+		"null",
+		"of",
+		"return",
+		"switch",
+		"this",
+		"throw",
+		"true",
+		"try",
+		"type",
+		"typeof",
+		"undefined",
+		"var",
+		"void",
+		"while"
+	].join("|")})\\b)`,
+	"(?<number>\\b\\d+(?:\\.\\d+)?\\b)",
+	"(?<type>\\b[A-Z][A-Za-z0-9_]*\\b)"
+].join("|"), "g");
+const TOKEN_TYPES = [
+	"comment",
+	"string",
+	"keyword",
+	"number",
+	"type"
+];
+/**
+* Splits TypeScript/TSX source into plain text and highlighted spans.
+* This is a lightweight lexical pass, not a parser.
+*/
+const highlightCode = (code) => {
+	const nodes = [];
+	let lastIndex = 0;
+	for (const match of code.matchAll(TOKEN_PATTERN)) {
+		const type = TOKEN_TYPES.find((name) => match.groups?.[name] !== void 0);
+		if (!type) continue;
+		if (match.index > lastIndex) nodes.push(code.slice(lastIndex, match.index));
+		nodes.push(/* @__PURE__ */ jsx("span", {
+			className: `puzzle-preview__token--${type}`,
+			children: match[0]
+		}, match.index));
+		lastIndex = match.index + match[0].length;
+	}
+	if (lastIndex < code.length) nodes.push(code.slice(lastIndex));
+	return nodes;
+};
+export { highlightCode };
+
+//# sourceMappingURL=highlight.js.map

package/dist/components/utilities/preview/highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","names":[],"sources":["../../../../src/components/utilities/preview/highlight.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype TokenType = \"comment\" | \"string\" | \"keyword\" | \"number\" | \"type\";\n\nconst KEYWORDS = [\n  \"as\",\n  \"async\",\n  \"await\",\n  \"break\",\n  \"case\",\n  \"class\",\n  \"const\",\n  \"continue\",\n  \"default\",\n  \"else\",\n  \"enum\",\n  \"export\",\n  \"extends\",\n  \"false\",\n  \"finally\",\n  \"for\",\n  \"from\",\n  \"function\",\n  \"if\",\n  \"implements\",\n  \"import\",\n  \"in\",\n  \"interface\",\n  \"let\",\n  \"new\",\n  \"null\",\n  \"of\",\n  \"return\",\n  \"switch\",\n  \"this\",\n  \"throw\",\n  \"true\",\n  \"try\",\n  \"type\",\n  \"typeof\",\n  \"undefined\",\n  \"var\",\n  \"void\",\n  \"while\",\n];\n\n// Order matters: earlier groups win at the same position.\nconst TOKEN_PATTERN = new RegExp(\n  [\n    \"(?<comment>\\\\/\\\\/[^\\\\n]*|\\\\/\\\\*[\\\\s\\\\S]*?\\\\*\\\\/)\",\n    \"(?<string>\\\"(?:[^\\\"\\\\\\\\\\\\n]|\\\\\\\\.)*\\\"|'(?:[^'\\\\\\\\\\\\n]|\\\\\\\\.)*'|`(?:[^`\\\\\\\\]|\\\\\\\\.)*`)\",\n    `(?<keyword>\\\\b(?:${KEYWORDS.join(\"|\")})\\\\b)`,\n    \"(?<number>\\\\b\\\\d+(?:\\\\.\\\\d+)?\\\\b)\",\n    \"(?<type>\\\\b[A-Z][A-Za-z0-9_]*\\\\b)\",\n  ].join(\"|\"),\n  \"g\",\n);\n\nconst TOKEN_TYPES: TokenType[] = [\n  \"comment\",\n  \"string\",\n  \"keyword\",\n  \"number\",\n  \"type\",\n];\n\n/**\n * Splits TypeScript/TSX source into plain text and highlighted spans.\n * This is a lightweight lexical pass, not a parser.\n */\nconst highlightCode = (code: string): ReactNode[] => {\n  const nodes: ReactNode[] = [];\n  let lastIndex = 0;\n\n  for (const match of code.matchAll(TOKEN_PATTERN)) {\n    const type = TOKEN_TYPES.find((name) => match.groups?.[name] !== undefined);\n\n    if (!type) continue;\n\n    if (match.index > lastIndex) {\n      nodes.push(code.slice(lastIndex, match.index));\n    }\n\n    nodes.push(\n      <span key={match.index} className={`puzzle-preview__token--${type}`}>\n        {match[0]}\n      </span>,\n    );\n\n    lastIndex = match.index + match[0].length;\n  }\n\n  if (lastIndex < code.length) {\n    nodes.push(code.slice(lastIndex));\n  }\n\n  return nodes;\n};\n\nexport { highlightCode };\n"],"mappings":";;AA+CA,MAAM,gBAAgB,IAAI,OACxB;CACE;CACA;CACA,oBAAoB;EA9CtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAQ6B,CAAC,CAAC,KAAK,GAAG,EAAE;CACvC;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GACV,GACF;AAEA,MAAM,cAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;;;;;AAMA,MAAM,iBAAiB,SAA8B;CACnD,MAAM,QAAqB,CAAC;CAC5B,IAAI,YAAY;CAEhB,KAAK,MAAM,SAAS,KAAK,SAAS,aAAa,GAAG;EAChD,MAAM,OAAO,YAAY,MAAM,SAAS,MAAM,SAAS,UAAU,KAAA,CAAS;EAE1E,IAAI,CAAC,MAAM;EAEX,IAAI,MAAM,QAAQ,WAChB,MAAM,KAAK,KAAK,MAAM,WAAW,MAAM,KAAK,CAAC;EAG/C,MAAM,KACJ,oBAAC,QAAD;GAAwB,WAAW,0BAA0B;GAC1D,UAAA,MAAM;EACH,GAFK,MAAM,KAEX,CACR;EAEA,YAAY,MAAM,QAAQ,MAAM,EAAE,CAAC;CACrC;CAEA,IAAI,YAAY,KAAK,QACnB,MAAM,KAAK,KAAK,MAAM,SAAS,CAAC;CAGlC,OAAO;AACT"}

package/dist/components/utilities/preview/index.cjs

@@ -0,0 +1,391 @@
+"use client";
+const require_index = require("../../layout/background/index.cjs");
+const require_highlight = require("./highlight.cjs");
+;/* empty css              */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
+let react_dom = require("react-dom");
+let _puzzle_ui_icons = require("@puzzle-ui/icons");
+let _puzzle_ui_theme_scope_context = require("@puzzle-ui/theme/scope-context");
+// src/components/utilities/preview/index.tsx
+const PREVIEW_DEVICES = {
+	mobile: {
+		label: "Mobile",
+		width: 390,
+		height: 844
+	},
+	tablet: {
+		label: "Tablet",
+		width: 768,
+		height: 1024
+	},
+	desktop: {
+		label: "Desktop",
+		width: 1024,
+		height: 768
+	}
+};
+const PREVIEW_DEVICE_ITEMS = Object.keys(PREVIEW_DEVICES).map((id) => ({ id }));
+const ALIGN_VALUES = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	stretch: "stretch"
+};
+const JUSTIFY_VALUES = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+};
+const createPreviewDocument = (rootId) => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="${rootId}"></div>
+  </body>
+</html>`;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+const PreviewBackground = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Background, {
+	pattern: "blueprint",
+	size: 20,
+	majorSize: 100,
+	lineWidth: 1,
+	patternOpacity: .25,
+	...props
+});
+const Preview = ({ children, className, defaultDevice = "mobile", code, height, align, justify, hideDevices = false }) => {
+	const generatedId = (0, react.useId)();
+	const frameRootId = `${generatedId}-root`;
+	const previewTabId = `${generatedId}-tab-preview`;
+	const codeTabId = `${generatedId}-tab-code`;
+	const panelId = `${generatedId}-panel`;
+	const themeScope = (0, _puzzle_ui_theme_scope_context.useThemeScope)();
+	const [device, setDevice] = (0, react.useState)(defaultDevice);
+	const [activeTab, setActiveTab] = (0, react.useState)("preview");
+	const [frameRoot, setFrameRoot] = (0, react.useState)(null);
+	const [scale, setScale] = (0, react.useState)(1);
+	const [copied, setCopied] = (0, react.useState)(false);
+	const containerRef = (0, react.useRef)(null);
+	const iframeRef = (0, react.useRef)(null);
+	const copyTimeoutRef = (0, react.useRef)(null);
+	const config = PREVIEW_DEVICES[device];
+	const frameHeight = height ?? config.height;
+	const hasCode = code !== void 0;
+	const [direction, setDirection] = (0, react.useState)("ltr");
+	const sectionRef = (0, react.useRef)(null);
+	const isKeyboardNavigation = (0, react.useRef)(false);
+	(0, react.useLayoutEffect)(() => {
+		const section = sectionRef.current;
+		if (section) {
+			const isRtl = getComputedStyle(section).direction === "rtl" || section.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+			setDirection(isRtl ? "rtl" : "ltr");
+		}
+	}, []);
+	const rovingFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
+		items: hasCode ? [{ id: "preview" }, { id: "code" }] : [{ id: "preview" }],
+		dir: direction,
+		initialActiveId: activeTab
+	});
+	const deviceFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
+		items: PREVIEW_DEVICE_ITEMS,
+		dir: direction,
+		initialActiveId: device
+	});
+	const handleTabKeyDown = (event, tab) => {
+		isKeyboardNavigation.current = true;
+		try {
+			rovingFocus.onItemKeyDown(event, tab);
+		} finally {
+			isKeyboardNavigation.current = false;
+		}
+	};
+	const handleTabFocus = (tab) => {
+		rovingFocus.onItemFocus(tab);
+		if (isKeyboardNavigation.current) setActiveTab(tab);
+	};
+	const syncStyles = (0, react.useCallback)(() => {
+		const frameDocument = iframeRef.current?.contentDocument;
+		if (!frameDocument) return;
+		const frameHead = frameDocument.head;
+		frameHead.querySelectorAll("[data-puzzle-preview-style]").forEach((element) => element.remove());
+		document.querySelectorAll([
+			"head link[rel='stylesheet']",
+			"head style",
+			"style[data-puzzle-theme]",
+			"style[data-puzzle-theme-scope-style]"
+		].join(", ")).forEach((element) => {
+			const clone = element.cloneNode(true);
+			clone.setAttribute("data-puzzle-preview-style", "");
+			frameHead.appendChild(clone);
+		});
+		const sourceRoot = document.documentElement;
+		const targetRoot = frameDocument.documentElement;
+		targetRoot.style.cssText = sourceRoot.style.cssText;
+		targetRoot.className = sourceRoot.className;
+		Array.from(sourceRoot.attributes).forEach((attribute) => {
+			if (attribute.name === "style" || attribute.name === "class") return;
+			targetRoot.setAttribute(attribute.name, attribute.value);
+		});
+		const body = frameDocument.body;
+		body.className = document.body.className;
+		body.style.cssText = document.body.style.cssText;
+		targetRoot.style.setProperty("box-sizing", "border-box", "important");
+		targetRoot.style.setProperty("width", "100%", "important");
+		targetRoot.style.setProperty("height", "100%", "important");
+		targetRoot.style.setProperty("min-height", "100%", "important");
+		targetRoot.style.setProperty("margin", "0", "important");
+		targetRoot.style.setProperty("overflow-x", "hidden", "important");
+		targetRoot.style.setProperty("overflow-y", "auto", "important");
+		targetRoot.style.setProperty("scrollbar-width", "none", "important");
+		targetRoot.style.setProperty("-ms-overflow-style", "none", "important");
+		body.style.setProperty("display", "block", "important");
+		body.style.setProperty("position", "static", "important");
+		body.style.setProperty("box-sizing", "border-box", "important");
+		body.style.setProperty("width", "100%", "important");
+		body.style.setProperty("height", "auto", "important");
+		body.style.setProperty("min-height", "100%", "important");
+		body.style.setProperty("margin", "0", "important");
+		body.style.setProperty("overflow", "visible", "important");
+		frameDocument.getElementById(frameRootId)?.style.removeProperty("min-height");
+		const scrollbarStyle = frameDocument.createElement("style");
+		scrollbarStyle.setAttribute("data-puzzle-preview-style", "");
+		scrollbarStyle.textContent = `
+      html,
+      body {
+        scrollbar-width: none !important;
+        -ms-overflow-style: none !important;
+      }
+
+      html::-webkit-scrollbar,
+      body::-webkit-scrollbar {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+      }
+    `;
+		frameHead.appendChild(scrollbarStyle);
+	}, [frameRootId]);
+	const updateScale = (0, react.useCallback)((availableWidth) => {
+		const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);
+		setScale((current) => Math.abs(current - nextScale) < .001 ? current : nextScale);
+	}, [config.width]);
+	useIsomorphicLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const measure = () => {
+			const styles = window.getComputedStyle(container);
+			const horizontalPadding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+			updateScale(container.clientWidth - horizontalPadding);
+		};
+		measure();
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) updateScale(entry.contentRect.width);
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [updateScale]);
+	(0, react.useEffect)(() => {
+		const isStyleNode = (node) => node instanceof Element && (node.matches("style, link[rel='stylesheet']") || node.querySelector("style, link[rel='stylesheet']") !== null);
+		const headObserver = new MutationObserver(syncStyles);
+		headObserver.observe(document.head, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true
+		});
+		const bodyObserver = new MutationObserver((mutations) => {
+			if (mutations.some((mutation) => {
+				return (mutation.target instanceof Element ? mutation.target : mutation.target.parentElement)?.closest("style[data-puzzle-theme], style[data-puzzle-theme-scope-style]") != null || Array.from(mutation.addedNodes).some(isStyleNode) || Array.from(mutation.removedNodes).some(isStyleNode);
+			})) syncStyles();
+		});
+		bodyObserver.observe(document.body, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		return () => {
+			headObserver.disconnect();
+			bodyObserver.disconnect();
+		};
+	}, [syncStyles]);
+	const initializeFrame = (0, react.useCallback)(() => {
+		const root = (iframeRef.current?.contentDocument)?.getElementById(frameRootId);
+		if (!root) return;
+		syncStyles();
+		setFrameRoot(root);
+	}, [frameRootId, syncStyles]);
+	(0, react.useEffect)(() => {
+		initializeFrame();
+	}, [initializeFrame]);
+	const handleCopyCode = (0, react.useCallback)(async () => {
+		if (code === void 0) return;
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
+			copyTimeoutRef.current = setTimeout(() => {
+				setCopied(false);
+			}, 2e3);
+		} catch {
+			setCopied(false);
+		}
+	}, [code]);
+	(0, react.useEffect)(() => () => {
+		if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!hasCode && activeTab === "code") setActiveTab("preview");
+	}, [activeTab, hasCode]);
+	const frameStyle = {
+		width: config.width,
+		height: frameHeight,
+		transform: `scale(${scale})`,
+		transformOrigin: "top left"
+	};
+	const contentStyle = {
+		display: "flex",
+		boxSizing: "border-box",
+		minHeight: "100vh",
+		alignItems: align ? ALIGN_VALUES[align] : void 0,
+		justifyContent: justify ? JUSTIFY_VALUES[justify] : void 0
+	};
+	const viewportStyle = {
+		width: config.width * scale,
+		aspectRatio: `${config.width} / ${frameHeight}`
+	};
+	const panelProps = {
+		id: panelId,
+		role: "tabpanel",
+		"aria-labelledby": activeTab === "preview" ? previewTabId : codeTabId
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		ref: sectionRef,
+		className: (0, _puzzle_ui_core.cn)("puzzle-preview", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-preview__toolbar",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "puzzle-preview__tabs",
+					role: "tablist",
+					"aria-label": "Preview view",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						role: "tab",
+						id: previewTabId,
+						ref: rovingFocus.getItemRef("preview"),
+						tabIndex: activeTab === "preview" ? 0 : -1,
+						onFocus: () => handleTabFocus("preview"),
+						onKeyDown: (event) => handleTabKeyDown(event, "preview"),
+						"aria-selected": activeTab === "preview",
+						"aria-controls": panelId,
+						className: (0, _puzzle_ui_core.cn)("puzzle-preview__tab", activeTab === "preview" && "puzzle-preview__tab--active"),
+						onClick: () => setActiveTab("preview"),
+						children: "Preview"
+					}), hasCode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						role: "tab",
+						id: codeTabId,
+						ref: rovingFocus.getItemRef("code"),
+						tabIndex: activeTab === "code" ? 0 : -1,
+						onFocus: () => handleTabFocus("code"),
+						onKeyDown: (event) => handleTabKeyDown(event, "code"),
+						"aria-selected": activeTab === "code",
+						"aria-controls": panelId,
+						className: (0, _puzzle_ui_core.cn)("puzzle-preview__tab", activeTab === "code" && "puzzle-preview__tab--active"),
+						onClick: () => setActiveTab("code"),
+						children: "Code"
+					})]
+				}), activeTab === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "puzzle-preview__toolbar-actions",
+					children: [!hideDevices && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-preview__devices",
+						role: "group",
+						"aria-label": "Device size",
+						children: Object.keys(PREVIEW_DEVICES).map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							ref: deviceFocus.getItemRef(item),
+							type: "button",
+							className: (0, _puzzle_ui_core.cn)("puzzle-preview__device", device === item && "puzzle-preview__device--active"),
+							"aria-pressed": device === item,
+							tabIndex: deviceFocus.getItemTabIndex(item),
+							onFocus: () => deviceFocus.onItemFocus(item),
+							onKeyDown: (event) => deviceFocus.onItemKeyDown(event, item),
+							onClick: () => setDevice(item),
+							children: PREVIEW_DEVICES[item].label
+						}, item))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "puzzle-preview__dimensions",
+						children: [
+							config.width,
+							" × ",
+							frameHeight
+						]
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "puzzle-preview__copy",
+					onClick: handleCopyCode,
+					"aria-label": copied ? "Code copied" : "Copy code",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, {
+						name: copied ? "tabler:check" : "tabler:copy",
+						size: 16,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: copied ? "Copied" : "Copy code" })]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PreviewBackground, {
+				...panelProps,
+				className: "puzzle-preview__panel",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: containerRef,
+					className: "puzzle-preview__stage",
+					hidden: activeTab !== "preview",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "puzzle-preview__viewport",
+						style: viewportStyle,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+							ref: iframeRef,
+							className: "puzzle-preview__frame",
+							srcDoc: createPreviewDocument(frameRootId),
+							title: `${config.label} component preview`,
+							onLoad: initializeFrame,
+							style: frameStyle
+						}), frameRoot && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_theme_scope_context.ThemeScopeProvider, {
+							scopeId: themeScope?.scopeId ?? null,
+							theme: themeScope?.theme ?? "system",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: contentStyle,
+								children
+							})
+						}), frameRoot)]
+					})
+				}), activeTab === "code" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-preview__code",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "language-tsx",
+						children: code === void 0 ? null : require_highlight.highlightCode(code)
+					}) })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-preview__copy-status",
+				role: "status",
+				"aria-live": "polite",
+				children: copied ? "Code copied to clipboard." : ""
+			})
+		]
+	});
+};
+exports.Preview = Preview;
+
+//# sourceMappingURL=index.cjs.map