@toriistudio/v0-playground 0.6.0 → 0.7.0

package/dist/index.d.mts

@@ -119,6 +119,7 @@ type ControlsConfig = {
     mainLabel?: string;
     showGrid?: boolean;
     showPresentationButton?: boolean;
+    showCodeSnippet?: boolean;
     addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
 };
 type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {

package/dist/index.d.ts

@@ -119,6 +119,7 @@ type ControlsConfig = {
     mainLabel?: string;
     showGrid?: boolean;
     showPresentationButton?: boolean;
+    showCodeSnippet?: boolean;
     addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
 };
 type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {

package/dist/index.js

@@ -448,7 +448,8 @@ var ControlsProvider = ({ children }) => {
   const [schema, setSchema] = (0, import_react2.useState)({});
   const [values, setValues] = (0, import_react2.useState)({});
   const [config, setConfig] = (0, import_react2.useState)({
-    showCopyButton: true
+    showCopyButton: true,
+    showCodeSnippet: false
   });
   const [componentName, setComponentName] = (0, import_react2.useState)();
   const [channelName, setChannelName] = (0, import_react2.useState)(null);
@@ -1092,11 +1093,227 @@ var AdvancedPaletteControl_default = AdvancedPaletteControl;
 
 // src/components/ControlPanel/ControlPanel.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var splitPropsString = (input) => {
+  const props = [];
+  let current = "";
+  let curlyDepth = 0;
+  let squareDepth = 0;
+  let parenDepth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inBacktick = false;
+  let escapeNext = false;
+  for (const char of input) {
+    if (escapeNext) {
+      current += char;
+      escapeNext = false;
+      continue;
+    }
+    if (char === "\\") {
+      current += char;
+      escapeNext = true;
+      continue;
+    }
+    if (char === "'" && !inDoubleQuote && !inBacktick) {
+      inSingleQuote = !inSingleQuote;
+      current += char;
+      continue;
+    }
+    if (char === '"' && !inSingleQuote && !inBacktick) {
+      inDoubleQuote = !inDoubleQuote;
+      current += char;
+      continue;
+    }
+    if (char === "`" && !inSingleQuote && !inDoubleQuote) {
+      inBacktick = !inBacktick;
+      current += char;
+      continue;
+    }
+    if (!inSingleQuote && !inDoubleQuote && !inBacktick) {
+      if (char === "{") {
+        curlyDepth += 1;
+      } else if (char === "}") {
+        curlyDepth = Math.max(0, curlyDepth - 1);
+      } else if (char === "[") {
+        squareDepth += 1;
+      } else if (char === "]") {
+        squareDepth = Math.max(0, squareDepth - 1);
+      } else if (char === "(") {
+        parenDepth += 1;
+      } else if (char === ")") {
+        parenDepth = Math.max(0, parenDepth - 1);
+      }
+    }
+    const atTopLevel = !inSingleQuote && !inDoubleQuote && !inBacktick && curlyDepth === 0 && squareDepth === 0 && parenDepth === 0;
+    if (atTopLevel && /\s/.test(char)) {
+      if (current.trim()) {
+        props.push(current.trim());
+      }
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.trim()) {
+    props.push(current.trim());
+  }
+  return props;
+};
+var formatJsxCodeSnippet = (input) => {
+  const trimmed = input.trim();
+  if (!trimmed) return "";
+  if (trimmed.includes("\n")) {
+    return trimmed;
+  }
+  if (!trimmed.startsWith("<") || !trimmed.endsWith(">")) {
+    return trimmed;
+  }
+  if (!trimmed.endsWith("/>")) {
+    return trimmed;
+  }
+  const inner = trimmed.slice(1, -2).trim();
+  const firstSpaceIndex = inner.indexOf(" ");
+  if (firstSpaceIndex === -1) {
+    return `<${inner} />`;
+  }
+  const componentName = inner.slice(0, firstSpaceIndex);
+  const propsString = inner.slice(firstSpaceIndex + 1).trim();
+  if (!propsString) {
+    return `<${componentName} />`;
+  }
+  const propsList = splitPropsString(propsString);
+  if (propsList.length === 0) {
+    return `<${componentName} ${propsString} />`;
+  }
+  const formattedProps = propsList.map((prop) => `  ${prop}`).join("\n");
+  return `<${componentName}
+${formattedProps}
+/>`;
+};
+var isWhitespace = (char) => /\s/.test(char);
+var isAttrNameChar = (char) => /[A-Za-z0-9_$\-.:]/.test(char);
+var isAlphaStart = (char) => /[A-Za-z_$]/.test(char);
+var tokenizeJsx = (input) => {
+  const tokens = [];
+  let i = 0;
+  while (i < input.length) {
+    const char = input[i];
+    if (char === "<") {
+      tokens.push({ type: "punctuation", value: "<" });
+      i += 1;
+      if (input[i] === "/") {
+        tokens.push({ type: "punctuation", value: "/" });
+        i += 1;
+      }
+      const start = i;
+      while (i < input.length && isAttrNameChar(input[i])) {
+        i += 1;
+      }
+      if (i > start) {
+        tokens.push({ type: "tag", value: input.slice(start, i) });
+      }
+      continue;
+    }
+    if (char === "/" && input[i + 1] === ">") {
+      tokens.push({ type: "punctuation", value: "/>" });
+      i += 2;
+      continue;
+    }
+    if (char === ">") {
+      tokens.push({ type: "punctuation", value: ">" });
+      i += 1;
+      continue;
+    }
+    if (char === "=") {
+      tokens.push({ type: "punctuation", value: "=" });
+      i += 1;
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      const quote = char;
+      let j = i + 1;
+      let value = quote;
+      while (j < input.length) {
+        const current = input[j];
+        value += current;
+        if (current === quote && input[j - 1] !== "\\") {
+          break;
+        }
+        j += 1;
+      }
+      tokens.push({ type: "string", value });
+      i = j + 1;
+      continue;
+    }
+    if (char === "{") {
+      let depth = 1;
+      let j = i + 1;
+      while (j < input.length && depth > 0) {
+        if (input[j] === "{") {
+          depth += 1;
+        } else if (input[j] === "}") {
+          depth -= 1;
+        }
+        j += 1;
+      }
+      const expression = input.slice(i, j);
+      tokens.push({ type: "expression", value: expression });
+      i = j;
+      continue;
+    }
+    if (isAlphaStart(char)) {
+      const start = i;
+      i += 1;
+      while (i < input.length && isAttrNameChar(input[i])) {
+        i += 1;
+      }
+      const word = input.slice(start, i);
+      let k = i;
+      while (k < input.length && isWhitespace(input[k])) {
+        k += 1;
+      }
+      if (input[k] === "=") {
+        tokens.push({ type: "attrName", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      continue;
+    }
+    tokens.push({ type: "plain", value: char });
+    i += 1;
+  }
+  return tokens;
+};
+var TOKEN_CLASS_MAP = {
+  tag: "text-sky-300",
+  attrName: "text-amber-200",
+  string: "text-emerald-300",
+  expression: "text-purple-300",
+  punctuation: "text-stone-400"
+};
+var highlightJsx = (input) => {
+  const tokens = tokenizeJsx(input);
+  const nodes = [];
+  tokens.forEach((token, index) => {
+    if (token.type === "plain") {
+      nodes.push(token.value);
+    } else {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: TOKEN_CLASS_MAP[token.type], children: token.value }, `token-${index}`)
+      );
+    }
+  });
+  return nodes;
+};
 var ControlPanel = () => {
   const [copied, setCopied] = (0, import_react5.useState)(false);
+  const [codeCopied, setCodeCopied] = (0, import_react5.useState)(false);
+  const [isCodeVisible, setIsCodeVisible] = (0, import_react5.useState)(false);
   const [folderStates, setFolderStates] = (0, import_react5.useState)({});
+  const codeCopyTimeoutRef = (0, import_react5.useRef)(null);
   const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
+  const isControlsOnlyView = typeof window !== "undefined" && new URLSearchParams(window.location.search).get(CONTROLS_ONLY_PARAM) === "true";
   const previewUrl = usePreviewUrl(values);
   const buildUrl = (0, import_react5.useCallback)(
     (modifier) => {
@@ -1270,6 +1487,65 @@ var ControlPanel = () => {
     jsonToComponentString
   }) ?? jsx14;
   const shouldShowCopyButton = config?.showCopyButton !== false && Boolean(copyText);
+  const baseSnippet = copyText || jsx14;
+  const formattedCode = (0, import_react5.useMemo)(
+    () => formatJsxCodeSnippet(baseSnippet),
+    [baseSnippet]
+  );
+  const hasCodeSnippet = Boolean(config?.showCodeSnippet && formattedCode);
+  const highlightedCode = (0, import_react5.useMemo)(
+    () => formattedCode ? highlightJsx(formattedCode) : null,
+    [formattedCode]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (!hasCodeSnippet) {
+      setIsCodeVisible(false);
+    }
+  }, [hasCodeSnippet]);
+  (0, import_react5.useEffect)(() => {
+    setCodeCopied(false);
+    if (codeCopyTimeoutRef.current) {
+      clearTimeout(codeCopyTimeoutRef.current);
+      codeCopyTimeoutRef.current = null;
+    }
+  }, [formattedCode]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleToggleCodeVisibility = (0, import_react5.useCallback)(() => {
+    setIsCodeVisible((prev) => {
+      const next = !prev;
+      if (!next) {
+        setCodeCopied(false);
+        if (codeCopyTimeoutRef.current) {
+          clearTimeout(codeCopyTimeoutRef.current);
+          codeCopyTimeoutRef.current = null;
+        }
+      }
+      return next;
+    });
+  }, []);
+  const handleCodeCopy = (0, import_react5.useCallback)(() => {
+    if (!formattedCode) return;
+    if (typeof navigator === "undefined" || !navigator.clipboard || typeof navigator.clipboard.writeText !== "function") {
+      return;
+    }
+    navigator.clipboard.writeText(formattedCode).then(() => {
+      setCodeCopied(true);
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+      codeCopyTimeoutRef.current = setTimeout(() => {
+        setCodeCopied(false);
+        codeCopyTimeoutRef.current = null;
+      }, 3e3);
+    }).catch(() => {
+    });
+  }, [formattedCode]);
   const labelize = (key) => key.replace(/([A-Z])/g, " $1").replace(/[\-_]/g, " ").replace(/\s+/g, " ").trim().replace(/(^|\s)\S/g, (s) => s.toUpperCase());
   const renderButtonControl = (key, control, variant) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
@@ -1436,7 +1712,7 @@ var ControlPanel = () => {
     height: "auto",
     flex: "0 0 auto"
   };
-  if (isHydrated) {
+  if (isHydrated && !isControlsOnlyView) {
     if (isDesktop) {
       Object.assign(panelStyle, {
         position: "absolute",
@@ -1472,12 +1748,51 @@ var ControlPanel = () => {
             ([key, control]) => renderControl(key, control, "root")
           ),
           bottomFolderSections,
+          hasCodeSnippet && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "border border-stone-700/60 rounded-lg bg-stone-900/70", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleToggleCodeVisibility,
+                className: "w-full flex items-center justify-between px-4 py-3 text-left font-semibold text-stone-200 tracking-wide",
+                "aria-expanded": isCodeVisible,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: isCodeVisible ? "Hide Code" : "Show Code" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    import_lucide_react3.ChevronDown,
+                    {
+                      className: `w-4 h-4 transition-transform duration-200 ${isCodeVisible ? "rotate-180" : ""}`
+                    }
+                  )
+                ]
+              }
+            ),
+            isCodeVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative border-t border-stone-700/60 bg-stone-950/60 px-4 py-4 rounded-b-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCodeCopy,
+                  className: "absolute top-3 right-3 flex items-center gap-1 rounded-md border border-stone-700 bg-stone-800 px-2 py-1 text-xs font-medium text-white shadow hover:bg-stone-700",
+                  children: codeCopied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "h-3.5 w-3.5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Copy, { className: "h-3.5 w-3.5" }),
+                    "Copy"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { className: "whitespace-pre overflow-x-auto text-xs md:text-sm text-stone-200 pr-14", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { className: "block text-stone-200", children: highlightedCode ?? formattedCode }) })
+            ] })
+          ] }),
           shouldShowCopyButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               onClick: () => {
-                if (!copyText) return;
-                navigator.clipboard.writeText(copyText);
+                const copyPayload = formattedCode || baseSnippet;
+                if (!copyPayload) return;
+                navigator.clipboard.writeText(copyPayload);
                 setCopied(true);
                 setTimeout(() => setCopied(false), 5e3);
               },

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Playground/Playground.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
 import { Check as Check3, Copy as Copy2 } from "lucide-react";
 
 // src/context/ResizableLayout.tsx
@@ -411,7 +411,8 @@ var ControlsProvider = ({ children }) => {
   const [schema, setSchema] = useState2({});
   const [values, setValues] = useState2({});
   const [config, setConfig] = useState2({
-    showCopyButton: true
+    showCopyButton: true,
+    showCodeSnippet: false
   });
   const [componentName, setComponentName] = useState2();
   const [channelName, setChannelName] = useState2(null);
@@ -629,7 +630,7 @@ var useControls = (schema, options) => {
 var useUrlSyncedControls = useControls;
 
 // src/components/ControlPanel/ControlPanel.tsx
-import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3 } from "react";
+import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3, useEffect as useEffect5, useRef as useRef4 } from "react";
 import {
   Check as Check2,
   Copy,
@@ -1066,11 +1067,227 @@ var AdvancedPaletteControl_default = AdvancedPaletteControl;
 
 // src/components/ControlPanel/ControlPanel.tsx
 import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var splitPropsString = (input) => {
+  const props = [];
+  let current = "";
+  let curlyDepth = 0;
+  let squareDepth = 0;
+  let parenDepth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inBacktick = false;
+  let escapeNext = false;
+  for (const char of input) {
+    if (escapeNext) {
+      current += char;
+      escapeNext = false;
+      continue;
+    }
+    if (char === "\\") {
+      current += char;
+      escapeNext = true;
+      continue;
+    }
+    if (char === "'" && !inDoubleQuote && !inBacktick) {
+      inSingleQuote = !inSingleQuote;
+      current += char;
+      continue;
+    }
+    if (char === '"' && !inSingleQuote && !inBacktick) {
+      inDoubleQuote = !inDoubleQuote;
+      current += char;
+      continue;
+    }
+    if (char === "`" && !inSingleQuote && !inDoubleQuote) {
+      inBacktick = !inBacktick;
+      current += char;
+      continue;
+    }
+    if (!inSingleQuote && !inDoubleQuote && !inBacktick) {
+      if (char === "{") {
+        curlyDepth += 1;
+      } else if (char === "}") {
+        curlyDepth = Math.max(0, curlyDepth - 1);
+      } else if (char === "[") {
+        squareDepth += 1;
+      } else if (char === "]") {
+        squareDepth = Math.max(0, squareDepth - 1);
+      } else if (char === "(") {
+        parenDepth += 1;
+      } else if (char === ")") {
+        parenDepth = Math.max(0, parenDepth - 1);
+      }
+    }
+    const atTopLevel = !inSingleQuote && !inDoubleQuote && !inBacktick && curlyDepth === 0 && squareDepth === 0 && parenDepth === 0;
+    if (atTopLevel && /\s/.test(char)) {
+      if (current.trim()) {
+        props.push(current.trim());
+      }
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.trim()) {
+    props.push(current.trim());
+  }
+  return props;
+};
+var formatJsxCodeSnippet = (input) => {
+  const trimmed = input.trim();
+  if (!trimmed) return "";
+  if (trimmed.includes("\n")) {
+    return trimmed;
+  }
+  if (!trimmed.startsWith("<") || !trimmed.endsWith(">")) {
+    return trimmed;
+  }
+  if (!trimmed.endsWith("/>")) {
+    return trimmed;
+  }
+  const inner = trimmed.slice(1, -2).trim();
+  const firstSpaceIndex = inner.indexOf(" ");
+  if (firstSpaceIndex === -1) {
+    return `<${inner} />`;
+  }
+  const componentName = inner.slice(0, firstSpaceIndex);
+  const propsString = inner.slice(firstSpaceIndex + 1).trim();
+  if (!propsString) {
+    return `<${componentName} />`;
+  }
+  const propsList = splitPropsString(propsString);
+  if (propsList.length === 0) {
+    return `<${componentName} ${propsString} />`;
+  }
+  const formattedProps = propsList.map((prop) => `  ${prop}`).join("\n");
+  return `<${componentName}
+${formattedProps}
+/>`;
+};
+var isWhitespace = (char) => /\s/.test(char);
+var isAttrNameChar = (char) => /[A-Za-z0-9_$\-.:]/.test(char);
+var isAlphaStart = (char) => /[A-Za-z_$]/.test(char);
+var tokenizeJsx = (input) => {
+  const tokens = [];
+  let i = 0;
+  while (i < input.length) {
+    const char = input[i];
+    if (char === "<") {
+      tokens.push({ type: "punctuation", value: "<" });
+      i += 1;
+      if (input[i] === "/") {
+        tokens.push({ type: "punctuation", value: "/" });
+        i += 1;
+      }
+      const start = i;
+      while (i < input.length && isAttrNameChar(input[i])) {
+        i += 1;
+      }
+      if (i > start) {
+        tokens.push({ type: "tag", value: input.slice(start, i) });
+      }
+      continue;
+    }
+    if (char === "/" && input[i + 1] === ">") {
+      tokens.push({ type: "punctuation", value: "/>" });
+      i += 2;
+      continue;
+    }
+    if (char === ">") {
+      tokens.push({ type: "punctuation", value: ">" });
+      i += 1;
+      continue;
+    }
+    if (char === "=") {
+      tokens.push({ type: "punctuation", value: "=" });
+      i += 1;
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      const quote = char;
+      let j = i + 1;
+      let value = quote;
+      while (j < input.length) {
+        const current = input[j];
+        value += current;
+        if (current === quote && input[j - 1] !== "\\") {
+          break;
+        }
+        j += 1;
+      }
+      tokens.push({ type: "string", value });
+      i = j + 1;
+      continue;
+    }
+    if (char === "{") {
+      let depth = 1;
+      let j = i + 1;
+      while (j < input.length && depth > 0) {
+        if (input[j] === "{") {
+          depth += 1;
+        } else if (input[j] === "}") {
+          depth -= 1;
+        }
+        j += 1;
+      }
+      const expression = input.slice(i, j);
+      tokens.push({ type: "expression", value: expression });
+      i = j;
+      continue;
+    }
+    if (isAlphaStart(char)) {
+      const start = i;
+      i += 1;
+      while (i < input.length && isAttrNameChar(input[i])) {
+        i += 1;
+      }
+      const word = input.slice(start, i);
+      let k = i;
+      while (k < input.length && isWhitespace(input[k])) {
+        k += 1;
+      }
+      if (input[k] === "=") {
+        tokens.push({ type: "attrName", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      continue;
+    }
+    tokens.push({ type: "plain", value: char });
+    i += 1;
+  }
+  return tokens;
+};
+var TOKEN_CLASS_MAP = {
+  tag: "text-sky-300",
+  attrName: "text-amber-200",
+  string: "text-emerald-300",
+  expression: "text-purple-300",
+  punctuation: "text-stone-400"
+};
+var highlightJsx = (input) => {
+  const tokens = tokenizeJsx(input);
+  const nodes = [];
+  tokens.forEach((token, index) => {
+    if (token.type === "plain") {
+      nodes.push(token.value);
+    } else {
+      nodes.push(
+        /* @__PURE__ */ jsx10("span", { className: TOKEN_CLASS_MAP[token.type], children: token.value }, `token-${index}`)
+      );
+    }
+  });
+  return nodes;
+};
 var ControlPanel = () => {
   const [copied, setCopied] = useState4(false);
+  const [codeCopied, setCodeCopied] = useState4(false);
+  const [isCodeVisible, setIsCodeVisible] = useState4(false);
   const [folderStates, setFolderStates] = useState4({});
+  const codeCopyTimeoutRef = useRef4(null);
   const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
+  const isControlsOnlyView = typeof window !== "undefined" && new URLSearchParams(window.location.search).get(CONTROLS_ONLY_PARAM) === "true";
   const previewUrl = usePreviewUrl(values);
   const buildUrl = useCallback3(
     (modifier) => {
@@ -1244,6 +1461,65 @@ var ControlPanel = () => {
     jsonToComponentString
   }) ?? jsx14;
   const shouldShowCopyButton = config?.showCopyButton !== false && Boolean(copyText);
+  const baseSnippet = copyText || jsx14;
+  const formattedCode = useMemo3(
+    () => formatJsxCodeSnippet(baseSnippet),
+    [baseSnippet]
+  );
+  const hasCodeSnippet = Boolean(config?.showCodeSnippet && formattedCode);
+  const highlightedCode = useMemo3(
+    () => formattedCode ? highlightJsx(formattedCode) : null,
+    [formattedCode]
+  );
+  useEffect5(() => {
+    if (!hasCodeSnippet) {
+      setIsCodeVisible(false);
+    }
+  }, [hasCodeSnippet]);
+  useEffect5(() => {
+    setCodeCopied(false);
+    if (codeCopyTimeoutRef.current) {
+      clearTimeout(codeCopyTimeoutRef.current);
+      codeCopyTimeoutRef.current = null;
+    }
+  }, [formattedCode]);
+  useEffect5(() => {
+    return () => {
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleToggleCodeVisibility = useCallback3(() => {
+    setIsCodeVisible((prev) => {
+      const next = !prev;
+      if (!next) {
+        setCodeCopied(false);
+        if (codeCopyTimeoutRef.current) {
+          clearTimeout(codeCopyTimeoutRef.current);
+          codeCopyTimeoutRef.current = null;
+        }
+      }
+      return next;
+    });
+  }, []);
+  const handleCodeCopy = useCallback3(() => {
+    if (!formattedCode) return;
+    if (typeof navigator === "undefined" || !navigator.clipboard || typeof navigator.clipboard.writeText !== "function") {
+      return;
+    }
+    navigator.clipboard.writeText(formattedCode).then(() => {
+      setCodeCopied(true);
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+      codeCopyTimeoutRef.current = setTimeout(() => {
+        setCodeCopied(false);
+        codeCopyTimeoutRef.current = null;
+      }, 3e3);
+    }).catch(() => {
+    });
+  }, [formattedCode]);
   const labelize = (key) => key.replace(/([A-Z])/g, " $1").replace(/[\-_]/g, " ").replace(/\s+/g, " ").trim().replace(/(^|\s)\S/g, (s) => s.toUpperCase());
   const renderButtonControl = (key, control, variant) => /* @__PURE__ */ jsx10(
     "div",
@@ -1410,7 +1686,7 @@ var ControlPanel = () => {
     height: "auto",
     flex: "0 0 auto"
   };
-  if (isHydrated) {
+  if (isHydrated && !isControlsOnlyView) {
     if (isDesktop) {
       Object.assign(panelStyle, {
         position: "absolute",
@@ -1446,12 +1722,51 @@ var ControlPanel = () => {
             ([key, control]) => renderControl(key, control, "root")
           ),
           bottomFolderSections,
+          hasCodeSnippet && /* @__PURE__ */ jsxs5("div", { className: "border border-stone-700/60 rounded-lg bg-stone-900/70", children: [
+            /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                onClick: handleToggleCodeVisibility,
+                className: "w-full flex items-center justify-between px-4 py-3 text-left font-semibold text-stone-200 tracking-wide",
+                "aria-expanded": isCodeVisible,
+                children: [
+                  /* @__PURE__ */ jsx10("span", { children: isCodeVisible ? "Hide Code" : "Show Code" }),
+                  /* @__PURE__ */ jsx10(
+                    ChevronDown2,
+                    {
+                      className: `w-4 h-4 transition-transform duration-200 ${isCodeVisible ? "rotate-180" : ""}`
+                    }
+                  )
+                ]
+              }
+            ),
+            isCodeVisible && /* @__PURE__ */ jsxs5("div", { className: "relative border-t border-stone-700/60 bg-stone-950/60 px-4 py-4 rounded-b-lg", children: [
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCodeCopy,
+                  className: "absolute top-3 right-3 flex items-center gap-1 rounded-md border border-stone-700 bg-stone-800 px-2 py-1 text-xs font-medium text-white shadow hover:bg-stone-700",
+                  children: codeCopied ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+                    /* @__PURE__ */ jsx10(Check2, { className: "h-3.5 w-3.5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+                    /* @__PURE__ */ jsx10(Copy, { className: "h-3.5 w-3.5" }),
+                    "Copy"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx10("pre", { className: "whitespace-pre overflow-x-auto text-xs md:text-sm text-stone-200 pr-14", children: /* @__PURE__ */ jsx10("code", { className: "block text-stone-200", children: highlightedCode ?? formattedCode }) })
+            ] })
+          ] }),
           shouldShowCopyButton && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
             "button",
             {
               onClick: () => {
-                if (!copyText) return;
-                navigator.clipboard.writeText(copyText);
+                const copyPayload = formattedCode || baseSnippet;
+                if (!copyPayload) return;
+                navigator.clipboard.writeText(copyPayload);
                 setCopied(true);
                 setTimeout(() => setCopied(false), 5e3);
               },
@@ -1501,7 +1816,7 @@ var ControlPanel = () => {
 var ControlPanel_default = ControlPanel;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 
 // src/components/Grid/Grid.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -1528,7 +1843,7 @@ import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var PreviewContainer = ({ children, hideControls }) => {
   const { config } = useControlsContext();
   const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
-  const previewRef = useRef4(null);
+  const previewRef = useRef5(null);
   return /* @__PURE__ */ jsx12(
     "div",
     {
@@ -1553,7 +1868,7 @@ var HiddenPreview = ({ children }) => /* @__PURE__ */ jsx13("div", { "aria-hidde
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = useState5(false);
   const [copied, setCopied] = useState5(false);
-  useEffect5(() => {
+  useEffect6(() => {
     setIsHydrated(true);
   }, []);
   const { showControls, isPresentationMode, isControlsOnly } = useMemo4(() => {
@@ -1601,7 +1916,7 @@ function Playground({ children }) {
 }
 
 // src/hooks/useAdvancedPaletteControls.ts
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
 var cloneForCallbacks = (palette) => clonePalette(palette);
 var useAdvancedPaletteControls = (options = {}) => {
   const resolvedDefaultPalette = useMemo5(
@@ -1615,10 +1930,10 @@ var useAdvancedPaletteControls = (options = {}) => {
   const [palette, setPaletteState] = useState6(
     () => clonePalette(resolvedDefaultPalette)
   );
-  const defaultSignatureRef = useRef5(
+  const defaultSignatureRef = useRef6(
     createPaletteSignature(resolvedDefaultPalette)
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const nextSignature = createPaletteSignature(resolvedDefaultPalette);
     if (defaultSignatureRef.current === nextSignature) return;
     defaultSignatureRef.current = nextSignature;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/v0-playground",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",