@toriistudio/v0-playground 0.5.3 → 0.6.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Playground/Playground.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
 import { Check as Check3, Copy as Copy2 } from "lucide-react";
 
 // src/context/ResizableLayout.tsx
@@ -116,7 +116,8 @@ import {
   useState as useState2,
   useMemo,
   useEffect as useEffect2,
-  useCallback
+  useCallback,
+  useRef as useRef2
 } from "react";
 
 // src/utils/getUrlParams.ts
@@ -130,6 +131,274 @@ var getUrlParams = () => {
   return entries;
 };
 
+// src/constants/urlParams.ts
+var NO_CONTROLS_PARAM = "nocontrols";
+var PRESENTATION_PARAM = "presentation";
+var CONTROLS_ONLY_PARAM = "controlsonly";
+
+// src/utils/getControlsChannelName.ts
+var EXCLUDED_KEYS = /* @__PURE__ */ new Set([
+  NO_CONTROLS_PARAM,
+  PRESENTATION_PARAM,
+  CONTROLS_ONLY_PARAM
+]);
+var getControlsChannelName = () => {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  for (const key of EXCLUDED_KEYS) {
+    params.delete(key);
+  }
+  const query = params.toString();
+  const base = window.location.pathname || "/";
+  return `v0-controls:${base}${query ? `?${query}` : ""}`;
+};
+
+// src/lib/advancedPalette.ts
+var CHANNEL_KEYS = ["r", "g", "b"];
+var DEFAULT_CHANNEL_LABELS = {
+  r: "Red",
+  g: "Green",
+  b: "Blue"
+};
+var DEFAULT_SECTIONS = [
+  { key: "A", label: "Vector A", helper: "Base offset" },
+  { key: "B", label: "Vector B", helper: "Amplitude" },
+  { key: "C", label: "Vector C", helper: "Frequency" },
+  { key: "D", label: "Vector D", helper: "Phase shift" }
+];
+var DEFAULT_RANGES = {
+  A: { min: 0, max: 1, step: 0.01 },
+  B: { min: -1, max: 1, step: 0.01 },
+  C: { min: 0, max: 2, step: 0.01 },
+  D: { min: 0, max: 1, step: 0.01 }
+};
+var DEFAULT_HIDDEN_KEY_PREFIX = "palette";
+var DEFAULT_GRADIENT_STEPS = 12;
+var DEFAULT_HEX_PALETTE = {
+  A: { r: 0.5, g: 0.5, b: 0.5 },
+  B: { r: 0.5, g: 0.5, b: 0.5 },
+  C: { r: 1, g: 1, b: 1 },
+  D: { r: 0, g: 0.1, b: 0.2 }
+};
+var createPaletteControlKey = (prefix, section, channel) => `${prefix}${section}${channel}`;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var clamp01 = (value) => clamp(value, 0, 1);
+var toNumberOr = (value, fallback) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+};
+var paletteColorAt = (palette, t) => {
+  const twoPi = Math.PI * 2;
+  const computeChannel = (a, b, c, d) => {
+    const value = a + b * Math.cos(twoPi * (c * t + d));
+    return clamp(value, 0, 1);
+  };
+  return {
+    r: computeChannel(
+      palette.A?.r ?? 0,
+      palette.B?.r ?? 0,
+      palette.C?.r ?? 0,
+      palette.D?.r ?? 0
+    ),
+    g: computeChannel(
+      palette.A?.g ?? 0,
+      palette.B?.g ?? 0,
+      palette.C?.g ?? 0,
+      palette.D?.g ?? 0
+    ),
+    b: computeChannel(
+      palette.A?.b ?? 0,
+      palette.B?.b ?? 0,
+      palette.C?.b ?? 0,
+      palette.D?.b ?? 0
+    )
+  };
+};
+var toRgba = ({ r, g, b }, alpha = 0.5) => `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
+  b * 255
+)}, ${alpha})`;
+var computePaletteGradient = (palette, steps = DEFAULT_GRADIENT_STEPS) => {
+  const stops = Array.from({ length: steps }, (_, index) => {
+    const t = index / (steps - 1);
+    const color = paletteColorAt(palette, t);
+    const stop = (t * 100).toFixed(1);
+    return `${toRgba(color)} ${stop}%`;
+  });
+  return `linear-gradient(to right, ${stops.join(", ")})`;
+};
+var createPaletteSignature = (palette) => Object.entries(palette).sort(([aKey], [bKey]) => aKey.localeCompare(bKey)).flatMap(
+  ([, channels]) => CHANNEL_KEYS.map((channel) => (channels?.[channel] ?? 0).toFixed(3))
+).join("-");
+var isAdvancedPaletteValue = (value) => Boolean(
+  value && typeof value === "object" && CHANNEL_KEYS.every((channel) => {
+    const channelValue = value[channel];
+    return typeof channelValue === "number" && Number.isFinite(channelValue);
+  })
+);
+var isAdvancedPalette = (value) => Boolean(
+  value && typeof value === "object" && Object.values(value).every(
+    (entry) => isAdvancedPaletteValue(entry) || typeof entry === "object"
+  )
+);
+var normalizePaletteValue = (source) => {
+  if (typeof source === "string") {
+    return hexToPaletteValue(source);
+  }
+  const channelSource = source ?? {};
+  const toChannel = (channel) => clamp01(
+    toNumberOr(
+      channelSource[channel],
+      0
+    )
+  );
+  return {
+    r: toChannel("r"),
+    g: toChannel("g"),
+    b: toChannel("b")
+  };
+};
+var createPaletteFromRecord = (record) => Object.entries(record).reduce((acc, [key, value]) => {
+  acc[key] = normalizePaletteValue(value);
+  return acc;
+}, {});
+var clonePalette = (palette) => Object.fromEntries(
+  Object.entries(palette).map(([sectionKey, channels]) => [
+    sectionKey,
+    { ...channels }
+  ])
+);
+var hexComponentToNormalized = (component) => clamp01(parseInt(component, 16) / 255 || 0);
+var normalizedChannelToHex = (value) => Math.round(clamp01(value) * 255).toString(16).padStart(2, "0");
+var sanitizeHex = (hex) => {
+  let sanitized = hex.trim();
+  if (sanitized.startsWith("#")) {
+    sanitized = sanitized.slice(1);
+  }
+  if (sanitized.length === 3) {
+    sanitized = sanitized.split("").map((char) => char + char).join("");
+  }
+  return sanitized.length === 6 ? sanitized : null;
+};
+var hexToPaletteValue = (hex) => {
+  const sanitized = sanitizeHex(hex);
+  if (!sanitized) {
+    return { r: 0, g: 0, b: 0 };
+  }
+  return {
+    r: hexComponentToNormalized(sanitized.slice(0, 2)),
+    g: hexComponentToNormalized(sanitized.slice(2, 4)),
+    b: hexComponentToNormalized(sanitized.slice(4, 6))
+  };
+};
+var paletteValueToHex = (value) => `#${normalizedChannelToHex(value.r)}${normalizedChannelToHex(
+  value.g
+)}${normalizedChannelToHex(value.b)}`;
+var createAdvancedPalette = (source = DEFAULT_HEX_PALETTE, options) => {
+  if (Array.isArray(source)) {
+    const order = options?.sectionOrder ?? DEFAULT_SECTIONS.map((section) => section.key);
+    const record = {};
+    source.forEach((value, index) => {
+      const preferredKey = order[index];
+      const fallbackKey = `Color${index + 1}`;
+      const key = preferredKey && !(preferredKey in record) ? preferredKey : fallbackKey;
+      record[key] = value;
+    });
+    return createPaletteFromRecord(record);
+  }
+  if (isAdvancedPalette(source)) {
+    return clonePalette(
+      Object.entries(source ?? {}).reduce(
+        (acc, [key, value]) => {
+          acc[key] = normalizePaletteValue(value);
+          return acc;
+        },
+        {}
+      )
+    );
+  }
+  if (source && typeof source === "object") {
+    return createPaletteFromRecord(source);
+  }
+  return createPaletteFromRecord(DEFAULT_HEX_PALETTE);
+};
+var DEFAULT_ADVANCED_PALETTE = createAdvancedPalette(
+  DEFAULT_HEX_PALETTE
+);
+var advancedPaletteToHexColors = (palette, options) => {
+  const fallbackPalette = options?.fallbackPalette ?? DEFAULT_ADVANCED_PALETTE;
+  const orderedKeys = options?.sectionOrder ?? (Object.keys(palette).length > 0 ? Object.keys(palette) : Object.keys(fallbackPalette));
+  const uniqueKeys = Array.from(new Set(orderedKeys));
+  if (uniqueKeys.length === 0) {
+    uniqueKeys.push(...Object.keys(DEFAULT_ADVANCED_PALETTE));
+  }
+  const defaultColor = options?.defaultColor ?? "#000000";
+  return uniqueKeys.map((key) => {
+    const paletteValue = palette[key] ?? fallbackPalette[key];
+    if (!paletteValue) return defaultColor;
+    return paletteValueToHex(paletteValue);
+  });
+};
+var createDefaultSectionsFromPalette = (palette) => {
+  const sectionKeys = Object.keys(palette);
+  if (sectionKeys.length === 0) return DEFAULT_SECTIONS;
+  return sectionKeys.map((key, index) => ({
+    key,
+    label: `Vector ${key}`,
+    helper: DEFAULT_SECTIONS[index]?.helper ?? "Palette parameter"
+  }));
+};
+var resolveAdvancedPaletteConfig = (config) => {
+  const defaultPalette = createAdvancedPalette(config.defaultPalette);
+  const sections = config.sections ?? createDefaultSectionsFromPalette(defaultPalette);
+  const ranges = {};
+  sections.forEach((section) => {
+    ranges[section.key] = config.ranges?.[section.key] ?? DEFAULT_RANGES[section.key] ?? {
+      min: 0,
+      max: 1,
+      step: 0.01
+    };
+  });
+  const channelLabels = {
+    ...DEFAULT_CHANNEL_LABELS,
+    ...config.channelLabels ?? {}
+  };
+  return {
+    ...config,
+    defaultPalette,
+    sections,
+    ranges,
+    channelLabels,
+    hiddenKeyPrefix: config.hiddenKeyPrefix ?? DEFAULT_HIDDEN_KEY_PREFIX,
+    controlKey: config.controlKey ?? "advancedPaletteControl",
+    gradientSteps: config.gradientSteps ?? DEFAULT_GRADIENT_STEPS
+  };
+};
+var createAdvancedPaletteSchemaEntries = (schema, resolvedConfig) => {
+  const { sections, hiddenKeyPrefix, defaultPalette } = resolvedConfig;
+  const updatedSchema = { ...schema };
+  sections.forEach((section) => {
+    CHANNEL_KEYS.forEach((channel) => {
+      const key = createPaletteControlKey(
+        hiddenKeyPrefix,
+        section.key,
+        channel
+      );
+      if (!(key in updatedSchema)) {
+        updatedSchema[key] = {
+          type: "number",
+          value: defaultPalette?.[section.key]?.[channel] ?? DEFAULT_RANGES[section.key]?.min ?? 0,
+          hidden: true
+        };
+      }
+    });
+  });
+  return updatedSchema;
+};
+
 // src/context/ControlsContext.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ControlsContext = createContext2(null);
@@ -145,6 +414,18 @@ var ControlsProvider = ({ children }) => {
     showCopyButton: true
   });
   const [componentName, setComponentName] = useState2();
+  const [channelName, setChannelName] = useState2(null);
+  const channelRef = useRef2(null);
+  const instanceIdRef = useRef2(null);
+  const skipBroadcastRef = useRef2(false);
+  const latestValuesRef = useRef2(values);
+  useEffect2(() => {
+    latestValuesRef.current = values;
+  }, [values]);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    setChannelName(getControlsChannelName());
+  }, []);
   const setValue = (key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   };
@@ -153,9 +434,16 @@ var ControlsProvider = ({ children }) => {
       setComponentName(opts.componentName);
     }
     if (opts?.config) {
+      const { addAdvancedPaletteControl, ...otherConfig } = opts.config;
       setConfig((prev) => ({
         ...prev,
-        ...opts.config
+        ...otherConfig,
+        ...Object.prototype.hasOwnProperty.call(
+          opts.config,
+          "addAdvancedPaletteControl"
+        ) ? {
+          addAdvancedPaletteControl: addAdvancedPaletteControl ? resolveAdvancedPaletteConfig(addAdvancedPaletteControl) : void 0
+        } : {}
       }));
     }
     setSchema((prevSchema) => ({ ...prevSchema, ...newSchema }));
@@ -172,6 +460,66 @@ var ControlsProvider = ({ children }) => {
       return updated;
     });
   };
+  useEffect2(() => {
+    if (!channelName) return;
+    if (typeof window === "undefined") return;
+    if (typeof window.BroadcastChannel === "undefined") return;
+    const instanceId = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+    instanceIdRef.current = instanceId;
+    const channel = new BroadcastChannel(channelName);
+    channelRef.current = channel;
+    const sendValues = () => {
+      if (!instanceIdRef.current) return;
+      channel.postMessage({
+        type: "controls-sync-values",
+        source: instanceIdRef.current,
+        values: latestValuesRef.current
+      });
+    };
+    const handleMessage = (event) => {
+      const data = event.data;
+      if (!data || data.source === instanceIdRef.current) return;
+      if (data.type === "controls-sync-request") {
+        sendValues();
+        return;
+      }
+      if (data.type === "controls-sync-values" && data.values) {
+        const incoming = data.values;
+        setValues((prev) => {
+          const prevKeys = Object.keys(prev);
+          const incomingKeys = Object.keys(incoming);
+          const sameLength = prevKeys.length === incomingKeys.length;
+          const sameValues = sameLength && incomingKeys.every((key) => prev[key] === incoming[key]);
+          if (sameValues) return prev;
+          skipBroadcastRef.current = true;
+          return { ...incoming };
+        });
+      }
+    };
+    channel.addEventListener("message", handleMessage);
+    channel.postMessage({
+      type: "controls-sync-request",
+      source: instanceId
+    });
+    return () => {
+      channel.removeEventListener("message", handleMessage);
+      channel.close();
+      channelRef.current = null;
+      instanceIdRef.current = null;
+    };
+  }, [channelName]);
+  useEffect2(() => {
+    if (!channelRef.current || !instanceIdRef.current) return;
+    if (skipBroadcastRef.current) {
+      skipBroadcastRef.current = false;
+      return;
+    }
+    channelRef.current.postMessage({
+      type: "controls-sync-values",
+      source: instanceIdRef.current,
+      values
+    });
+  }, [values]);
   const contextValue = useMemo(
     () => ({
       schema,
@@ -188,28 +536,41 @@ var ControlsProvider = ({ children }) => {
 var useControls = (schema, options) => {
   const ctx = useContext2(ControlsContext);
   if (!ctx) throw new Error("useControls must be used within ControlsProvider");
+  const lastAdvancedPaletteSignature = useRef2(null);
   const urlParams = getUrlParams();
-  const mergedSchema = Object.fromEntries(
-    Object.entries(schema).map(([key, control]) => {
-      const urlValue = urlParams[key];
-      if (!urlValue || !("value" in control)) return [key, control];
-      const defaultValue = control.value;
-      let parsed = urlValue;
-      if (typeof defaultValue === "number") {
-        parsed = parseFloat(urlValue);
-        if (isNaN(parsed)) parsed = defaultValue;
-      } else if (typeof defaultValue === "boolean") {
-        parsed = urlValue === "true";
-      }
-      return [
-        key,
-        {
-          ...control,
-          value: parsed
+  const resolvedAdvancedConfig = options?.config?.addAdvancedPaletteControl ? resolveAdvancedPaletteConfig(options.config.addAdvancedPaletteControl) : void 0;
+  const schemaWithAdvanced = useMemo(() => {
+    const baseSchema = { ...schema };
+    if (!resolvedAdvancedConfig) return baseSchema;
+    return createAdvancedPaletteSchemaEntries(
+      baseSchema,
+      resolvedAdvancedConfig
+    );
+  }, [schema, resolvedAdvancedConfig]);
+  const urlParamsKey = useMemo(() => JSON.stringify(urlParams), [urlParams]);
+  const mergedSchema = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(schemaWithAdvanced).map(([key, control]) => {
+        const urlValue = urlParams[key];
+        if (!urlValue || !("value" in control)) return [key, control];
+        const defaultValue = control.value;
+        let parsed = urlValue;
+        if (typeof defaultValue === "number") {
+          parsed = parseFloat(urlValue);
+          if (isNaN(parsed)) parsed = defaultValue;
+        } else if (typeof defaultValue === "boolean") {
+          parsed = urlValue === "true";
         }
-      ];
-    })
-  );
+        return [
+          key,
+          {
+            ...control,
+            value: parsed
+          }
+        ];
+      })
+    );
+  }, [schemaWithAdvanced, urlParams, urlParamsKey]);
   useEffect2(() => {
     ctx.registerSchema(mergedSchema, options);
   }, [JSON.stringify(mergedSchema), JSON.stringify(options)]);
@@ -220,8 +581,35 @@ var useControls = (schema, options) => {
       }
     }
   }, [JSON.stringify(mergedSchema), JSON.stringify(ctx.values)]);
+  useEffect2(() => {
+    if (!resolvedAdvancedConfig?.onPaletteChange) return;
+    const palette = resolvedAdvancedConfig.sections.reduce(
+      (acc, section) => {
+        const channels = CHANNEL_KEYS.reduce(
+          (channelAcc, channel) => {
+            const key = createPaletteControlKey(
+              resolvedAdvancedConfig.hiddenKeyPrefix,
+              section.key,
+              channel
+            );
+            const fallback = resolvedAdvancedConfig.defaultPalette?.[section.key]?.[channel] ?? 0;
+            channelAcc[channel] = toNumberOr(ctx.values[key], fallback);
+            return channelAcc;
+          },
+          {}
+        );
+        acc[section.key] = channels;
+        return acc;
+      },
+      {}
+    );
+    const signature = createPaletteSignature(palette);
+    if (lastAdvancedPaletteSignature.current === signature) return;
+    lastAdvancedPaletteSignature.current = signature;
+    resolvedAdvancedConfig.onPaletteChange(clonePalette(palette));
+  }, [ctx.values, resolvedAdvancedConfig]);
   const typedValues = ctx.values;
-  const jsx16 = useCallback(() => {
+  const jsx14 = useCallback(() => {
     if (!options?.componentName) return "";
     const props = Object.entries(typedValues).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -235,14 +623,20 @@ var useControls = (schema, options) => {
     controls: ctx.values,
     schema: ctx.schema,
     setValue: ctx.setValue,
-    jsx: jsx16
+    jsx: jsx14
   };
 };
 var useUrlSyncedControls = useControls;
 
 // src/components/ControlPanel/ControlPanel.tsx
-import { useState as useState4, useMemo as useMemo2 } from "react";
-import { Check as Check2, Copy, SquareArrowOutUpRight } from "lucide-react";
+import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3 } from "react";
+import {
+  Check as Check2,
+  Copy,
+  SquareArrowOutUpRight,
+  ChevronDown as ChevronDown2,
+  Presentation
+} from "lucide-react";
 
 // src/hooks/usePreviewUrl.ts
 import { useEffect as useEffect3, useState as useState3 } from "react";
@@ -251,7 +645,7 @@ var usePreviewUrl = (values, basePath = "") => {
   useEffect3(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams();
-    params.set("nocontrols", "true");
+    params.set(NO_CONTROLS_PARAM, "true");
     for (const [key, value] of Object.entries(values)) {
       if (value !== void 0 && value !== null) {
         params.set(key, value.toString());
@@ -514,20 +908,223 @@ var Button = React8.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/constants/layout.ts
+var MOBILE_CONTROL_PANEL_PEEK = 112;
+
+// src/components/AdvancedPaletteControl/AdvancedPaletteControl.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useMemo as useMemo2,
+  useRef as useRef3
+} from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var AdvancedPaletteControl = ({
+  config
+}) => {
+  const { values, setValue } = useControlsContext();
+  const palette = useMemo2(() => {
+    const result = {};
+    config.sections.forEach((section) => {
+      result[section.key] = CHANNEL_KEYS.reduce((acc, channel) => {
+        const key = createPaletteControlKey(
+          config.hiddenKeyPrefix,
+          section.key,
+          channel
+        );
+        const defaultValue = config.defaultPalette?.[section.key]?.[channel] ?? DEFAULT_RANGES[section.key]?.min ?? 0;
+        acc[channel] = toNumberOr(values?.[key], defaultValue);
+        return acc;
+      }, {});
+    });
+    return result;
+  }, [config.defaultPalette, config.hiddenKeyPrefix, config.sections, values]);
+  const paletteGradient = useMemo2(
+    () => computePaletteGradient(palette, config.gradientSteps),
+    [palette, config.gradientSteps]
+  );
+  const paletteSignature = useMemo2(
+    () => createPaletteSignature(palette),
+    [palette]
+  );
+  const lastSignatureRef = useRef3(null);
+  useEffect4(() => {
+    if (!config.onPaletteChange) return;
+    if (lastSignatureRef.current === paletteSignature) return;
+    lastSignatureRef.current = paletteSignature;
+    config.onPaletteChange(palette);
+  }, [config, palette, paletteSignature]);
+  const updatePaletteValue = useCallback2(
+    (sectionKey, channel, nextValue) => {
+      const range = config.ranges[sectionKey] ?? DEFAULT_RANGES[sectionKey] ?? {
+        min: 0,
+        max: 1,
+        step: 0.01
+      };
+      const clamped = Math.min(Math.max(nextValue, range.min), range.max);
+      config.onInteraction?.();
+      const controlKey = createPaletteControlKey(
+        config.hiddenKeyPrefix,
+        sectionKey,
+        channel
+      );
+      setValue(controlKey, clamped);
+    },
+    [config, setValue]
+  );
+  const handleResetPalette = useCallback2(() => {
+    config.onInteraction?.();
+    config.sections.forEach((section) => {
+      CHANNEL_KEYS.forEach((channel) => {
+        const controlKey = createPaletteControlKey(
+          config.hiddenKeyPrefix,
+          section.key,
+          channel
+        );
+        const defaultValue = config.defaultPalette?.[section.key]?.[channel] ?? DEFAULT_RANGES[section.key]?.min ?? 0;
+        setValue(controlKey, defaultValue);
+      });
+    });
+  }, [config, setValue]);
+  return /* @__PURE__ */ jsx9("div", { className: "flex w-full flex-col gap-6", children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold uppercase tracking-wide text-stone-200", children: "Palette" }),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: handleResetPalette,
+          className: "rounded border border-stone-700 px-3 py-1 text-[10px] font-semibold uppercase tracking-widest text-stone-200 transition hover:border-stone-500",
+          children: "Reset Palette"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "h-4 w-full rounded border border-stone-700",
+        style: { background: paletteGradient }
+      }
+    ),
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4", children: config.sections.map((section) => {
+      const range = config.ranges[section.key];
+      return /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between text-[11px] uppercase tracking-widest text-stone-300", children: [
+          /* @__PURE__ */ jsx9("span", { children: section.label }),
+          section.helper && /* @__PURE__ */ jsx9("span", { className: "text-stone-500", children: section.helper })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-3 gap-3", children: CHANNEL_KEYS.map((channel) => {
+          const value = palette[section.key][channel];
+          const channelLabel = config.channelLabels?.[channel] ?? DEFAULT_CHANNEL_LABELS[channel];
+          return /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between text-[10px] uppercase tracking-widest text-stone-400", children: [
+              /* @__PURE__ */ jsx9("span", { children: channelLabel }),
+              /* @__PURE__ */ jsx9("span", { children: value.toFixed(2) })
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "range",
+                min: range.min,
+                max: range.max,
+                step: range.step,
+                value,
+                onPointerDown: config.onInteraction,
+                onChange: (event) => updatePaletteValue(
+                  section.key,
+                  channel,
+                  parseFloat(event.target.value)
+                ),
+                className: "w-full cursor-pointer accent-stone-300"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "number",
+                min: range.min,
+                max: range.max,
+                step: range.step,
+                value: value.toFixed(3),
+                onPointerDown: config.onInteraction,
+                onFocus: config.onInteraction,
+                onChange: (event) => {
+                  const parsed = parseFloat(event.target.value);
+                  if (Number.isNaN(parsed)) return;
+                  updatePaletteValue(section.key, channel, parsed);
+                },
+                className: "w-full rounded border border-stone-700 bg-stone-900 px-2 py-1 text-xs text-stone-200 focus:border-stone-500 focus:outline-none"
+              }
+            )
+          ] }, channel);
+        }) })
+      ] }, section.key);
+    }) })
+  ] }) });
+};
+var AdvancedPaletteControl_default = AdvancedPaletteControl;
+
 // src/components/ControlPanel/ControlPanel.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var ControlPanel = () => {
   const [copied, setCopied] = useState4(false);
+  const [folderStates, setFolderStates] = useState4({});
   const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
   const previewUrl = usePreviewUrl(values);
-  const normalControls = Object.entries(schema).filter(
-    ([, control]) => control.type !== "button" && !control.hidden
-  );
-  const buttonControls = Object.entries(schema).filter(
-    ([, control]) => control.type === "button" && !control.hidden
+  const buildUrl = useCallback3(
+    (modifier) => {
+      if (!previewUrl) return "";
+      const [path, search = ""] = previewUrl.split("?");
+      const params = new URLSearchParams(search);
+      modifier(params);
+      const query = params.toString();
+      return query ? `${path}?${query}` : path;
+    },
+    [previewUrl]
   );
-  const jsx16 = useMemo2(() => {
+  const presentationUrl = useMemo3(() => {
+    if (!previewUrl) return "";
+    return buildUrl((params) => {
+      params.set(PRESENTATION_PARAM, "true");
+    });
+  }, [buildUrl, previewUrl]);
+  const controlsOnlyUrl = useMemo3(() => {
+    if (!previewUrl) return "";
+    return buildUrl((params) => {
+      params.delete(NO_CONTROLS_PARAM);
+      params.delete(PRESENTATION_PARAM);
+      params.set(CONTROLS_ONLY_PARAM, "true");
+    });
+  }, [buildUrl, previewUrl]);
+  const handlePresentationClick = useCallback3(() => {
+    if (typeof window === "undefined" || !presentationUrl) return;
+    window.open(presentationUrl, "_blank", "noopener,noreferrer");
+    if (controlsOnlyUrl) {
+      const viewportWidth = window.innerWidth || 1200;
+      const viewportHeight = window.innerHeight || 900;
+      const controlsWidth = Math.max(
+        320,
+        Math.min(
+          600,
+          Math.round(viewportWidth * leftPanelWidth / 100)
+        )
+      );
+      const controlsHeight = Math.max(600, viewportHeight);
+      const controlsFeatures = [
+        "noopener",
+        "noreferrer",
+        "toolbar=0",
+        "menubar=0",
+        "resizable=yes",
+        "scrollbars=yes",
+        `width=${controlsWidth}`,
+        `height=${controlsHeight}`
+      ].join(",");
+      window.open(controlsOnlyUrl, "v0-controls", controlsFeatures);
+    }
+  }, [controlsOnlyUrl, leftPanelWidth, presentationUrl]);
+  const jsx14 = useMemo3(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -536,182 +1133,367 @@ var ControlPanel = () => {
     }).join(" ");
     return `<${componentName} ${props} />`;
   }, [componentName, values]);
-  return /* @__PURE__ */ jsx9(
+  const visibleEntries = Object.entries(schema).filter(
+    ([, control]) => !control.hidden
+  );
+  const rootControls = [];
+  const folderOrder = [];
+  const folderControls = /* @__PURE__ */ new Map();
+  const folderExtras = /* @__PURE__ */ new Map();
+  const folderPlacement = /* @__PURE__ */ new Map();
+  const seenFolders = /* @__PURE__ */ new Set();
+  const ensureFolder = (folder) => {
+    if (!seenFolders.has(folder)) {
+      seenFolders.add(folder);
+      folderOrder.push(folder);
+    }
+  };
+  visibleEntries.forEach((entry) => {
+    const [key, control] = entry;
+    const folder = control.folder?.trim();
+    if (folder) {
+      const placement = control.folderPlacement ?? "bottom";
+      ensureFolder(folder);
+      if (!folderControls.has(folder)) {
+        folderControls.set(folder, []);
+      }
+      folderControls.get(folder).push(entry);
+      const existingPlacement = folderPlacement.get(folder);
+      if (!existingPlacement || placement === "top") {
+        folderPlacement.set(folder, placement);
+      }
+    } else {
+      rootControls.push(entry);
+    }
+  });
+  const advancedConfig = config?.addAdvancedPaletteControl;
+  let advancedPaletteControlNode = null;
+  if (advancedConfig) {
+    const advancedNode = /* @__PURE__ */ jsx10(
+      AdvancedPaletteControl_default,
+      {
+        config: advancedConfig
+      },
+      "advancedPaletteControl"
+    );
+    const advancedFolder = advancedConfig.folder?.trim();
+    if (advancedFolder) {
+      const placement = advancedConfig.folderPlacement ?? "bottom";
+      ensureFolder(advancedFolder);
+      if (!folderControls.has(advancedFolder)) {
+        folderControls.set(advancedFolder, []);
+      }
+      const existingPlacement = folderPlacement.get(advancedFolder);
+      if (!existingPlacement || placement === "top") {
+        folderPlacement.set(advancedFolder, placement);
+      }
+      if (!folderExtras.has(advancedFolder)) {
+        folderExtras.set(advancedFolder, []);
+      }
+      folderExtras.get(advancedFolder).push(advancedNode);
+    } else {
+      advancedPaletteControlNode = advancedNode;
+    }
+  }
+  const rootButtonControls = rootControls.filter(
+    ([, control]) => control.type === "button"
+  );
+  const rootNormalControls = rootControls.filter(
+    ([, control]) => control.type !== "button"
+  );
+  const folderGroups = folderOrder.map((folder) => ({
+    folder,
+    entries: folderControls.get(folder) ?? [],
+    extras: folderExtras.get(folder) ?? [],
+    placement: folderPlacement.get(folder) ?? "bottom"
+  })).filter((group) => group.entries.length > 0 || group.extras.length > 0);
+  const hasRootButtonControls = rootButtonControls.length > 0;
+  const hasAnyFolders = folderGroups.length > 0;
+  const jsonToComponentString = useCallback3(
+    ({
+      componentName: componentNameOverride,
+      props
+    }) => {
+      const resolvedComponentName = componentNameOverride ?? componentName;
+      if (!resolvedComponentName) return "";
+      const formatProp = (key, value) => {
+        if (value === void 0) return null;
+        if (value === null) return `${key}={null}`;
+        if (typeof value === "string") return `${key}="${value}"`;
+        if (typeof value === "number" || typeof value === "boolean") {
+          return `${key}={${value}}`;
+        }
+        if (typeof value === "bigint") {
+          return `${key}={${value.toString()}n}`;
+        }
+        return `${key}={${JSON.stringify(value)}}`;
+      };
+      const formattedProps = Object.entries(props ?? {}).map(([key, value]) => formatProp(key, value)).filter((prop) => Boolean(prop)).join(" ");
+      if (!formattedProps) {
+        return `<${resolvedComponentName} />`;
+      }
+      return `<${resolvedComponentName} ${formattedProps} />`;
+    },
+    [componentName]
+  );
+  const copyText = config?.showCopyButtonFn?.({
+    componentName,
+    values,
+    schema,
+    jsx: jsx14,
+    jsonToComponentString
+  }) ?? jsx14;
+  const shouldShowCopyButton = config?.showCopyButton !== false && Boolean(copyText);
+  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",
     {
-      className: `order-2 md:order-1 w-full md:h-auto p-2 md:p-4 bg-stone-900 font-mono text-stone-300 transition-opacity duration-300 ${!isHydrated ? "opacity-0" : "opacity-100"}`,
-      onPointerDown: (e) => e.stopPropagation(),
-      onTouchStart: (e) => e.stopPropagation(),
-      style: {
-        width: "100%",
-        height: "auto",
-        flex: "0 0 auto",
-        ...isHydrated && isDesktop ? {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${leftPanelWidth}%`,
-          overflowY: "auto"
-        } : {}
-      },
-      children: /* @__PURE__ */ jsxs4("div", { className: "mb-10 space-y-4 p-2 md:p-4 border border-stone-700 rounded-md", children: [
-        /* @__PURE__ */ jsx9("div", { className: "space-y-1", children: /* @__PURE__ */ jsx9("h1", { className: "text-lg text-stone-100 font-bold", children: config?.mainLabel ?? "Controls" }) }),
-        /* @__PURE__ */ jsxs4("div", { className: "space-y-4 pt-2", children: [
-          normalControls.map(([key, control]) => {
-            const value = values[key];
-            switch (control.type) {
-              case "boolean":
-                return /* @__PURE__ */ jsxs4(
-                  "div",
-                  {
-                    className: "flex items-center space-x-4 border-t border-stone-700 pt-4",
-                    children: [
-                      /* @__PURE__ */ jsx9(
-                        Switch,
-                        {
-                          id: key,
-                          checked: value,
-                          onCheckedChange: (v) => setValue(key, v),
-                          className: "data-[state=checked]:bg-stone-700 data-[state=unchecked]:bg-stone-700/40"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx9(Label, { htmlFor: key, className: "cursor-pointer", children: key })
-                    ]
-                  },
-                  key
-                );
-              case "number":
-                return /* @__PURE__ */ jsxs4("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsxs4(Label, { className: "text-stone-300", htmlFor: key, children: [
-                    key,
-                    ": ",
-                    value
-                  ] }) }),
-                  /* @__PURE__ */ jsx9(
-                    Slider,
-                    {
-                      id: key,
-                      min: control.min ?? 0,
-                      max: control.max ?? 100,
-                      step: control.step ?? 1,
-                      value: [value],
-                      onValueChange: ([v]) => setValue(key, v),
-                      className: "[&>span]:border-none [&_.bg-primary]:bg-stone-800 [&>.bg-background]:bg-stone-500/30"
-                    }
-                  )
-                ] }, key);
-              case "string":
-                return /* @__PURE__ */ jsx9(
-                  Input,
-                  {
-                    id: key,
-                    value,
-                    className: "bg-stone-900",
-                    placeholder: key,
-                    onChange: (e) => setValue(key, e.target.value)
-                  },
-                  key
-                );
-              case "color":
-                return /* @__PURE__ */ jsxs4("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsx9(Label, { className: "text-stone-300", htmlFor: key, children: key }) }),
-                  /* @__PURE__ */ jsx9(
-                    "input",
-                    {
-                      type: "color",
-                      id: key,
-                      value,
-                      onChange: (e) => setValue(key, e.target.value),
-                      className: "w-full h-10 rounded border border-stone-600 bg-transparent"
-                    }
-                  )
-                ] }, key);
-              case "select":
-                return /* @__PURE__ */ jsxs4(
-                  "div",
-                  {
-                    className: "space-y-2 border-t border-stone-700 pt-4",
-                    children: [
-                      /* @__PURE__ */ jsx9(Label, { className: "text-stone-300", htmlFor: key, children: key }),
-                      /* @__PURE__ */ jsxs4(
-                        Select,
-                        {
-                          value,
-                          onValueChange: (val) => setValue(key, val),
-                          children: [
-                            /* @__PURE__ */ jsx9(SelectTrigger, { children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: "Select option" }) }),
-                            /* @__PURE__ */ jsx9(SelectContent, { children: Object.entries(control.options).map(
-                              ([label, _val]) => /* @__PURE__ */ jsx9(SelectItem, { value: label, children: label }, label)
-                            ) })
-                          ]
-                        }
-                      )
-                    ]
-                  },
-                  key
-                );
-              default:
-                return null;
+      className: variant === "root" ? "flex-1 [&_[data-slot=button]]:w-full" : "[&_[data-slot=button]]:w-full",
+      children: control.render ? control.render() : /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: control.onClick,
+          className: "w-full px-4 py-2 text-sm bg-stone-800 hover:bg-stone-700 text-white rounded-md shadow",
+          children: control.label ?? key
+        }
+      )
+    },
+    `control-panel-custom-${key}`
+  );
+  const renderControl = (key, control, variant) => {
+    if (control.type === "button") {
+      return renderButtonControl(key, control, variant);
+    }
+    const value = values[key];
+    switch (control.type) {
+      case "boolean":
+        return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx10(Label, { htmlFor: key, className: "cursor-pointer", children: labelize(key) }),
+          /* @__PURE__ */ jsx10(
+            Switch,
+            {
+              id: key,
+              checked: value,
+              onCheckedChange: (v) => setValue(key, v),
+              className: "cursor-pointer scale-90"
             }
-          }),
-          (buttonControls.length > 0 || jsx16) && /* @__PURE__ */ jsxs4(
-            "div",
+          )
+        ] }, key);
+      case "number":
+        return /* @__PURE__ */ jsxs5("div", { className: "space-y-3 w-full", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+            /* @__PURE__ */ jsx10(
+              Input,
+              {
+                type: "number",
+                value,
+                min: control.min ?? 0,
+                max: control.max ?? 100,
+                step: control.step ?? 1,
+                onChange: (e) => {
+                  const v = parseFloat(e.target.value);
+                  if (Number.isNaN(v)) return;
+                  setValue(key, v);
+                },
+                className: "w-20 text-center cursor-text"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10(
+            Slider,
+            {
+              id: key,
+              min: control.min ?? 0,
+              max: control.max ?? 100,
+              step: control.step ?? 1,
+              value: [value],
+              onValueChange: ([v]) => setValue(key, v),
+              className: "w-full cursor-pointer"
+            }
+          )
+        ] }, key);
+      case "string":
+        return /* @__PURE__ */ jsxs5("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ jsx10(
+            Input,
             {
-              className: `${normalControls.length > 0 ? "border-t" : ""} border-stone-700`,
+              id: key,
+              value,
+              placeholder: key,
+              onChange: (e) => setValue(key, e.target.value),
+              className: "bg-stone-900"
+            }
+          )
+        ] }, key);
+      case "color":
+        return /* @__PURE__ */ jsxs5("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              type: "color",
+              id: key,
+              value,
+              onChange: (e) => setValue(key, e.target.value),
+              className: "w-full h-10 rounded border border-stone-600 bg-transparent"
+            }
+          )
+        ] }, key);
+      case "select":
+        return /* @__PURE__ */ jsx10("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx10(Label, { className: "min-w-fit", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ jsxs5(Select, { value, onValueChange: (val) => setValue(key, val), children: [
+            /* @__PURE__ */ jsx10(SelectTrigger, { className: "flex-1 cursor-pointer", children: /* @__PURE__ */ jsx10(SelectValue, { placeholder: "Select option" }) }),
+            /* @__PURE__ */ jsx10(SelectContent, { className: "cursor-pointer z-[9999]", children: Object.entries(control.options).map(([label]) => /* @__PURE__ */ jsx10(
+              SelectItem,
+              {
+                value: label,
+                className: "cursor-pointer",
+                children: label
+              },
+              label
+            )) })
+          ] })
+        ] }) }, key);
+      default:
+        return null;
+    }
+  };
+  const renderFolder = (folder, entries, extras = []) => {
+    const isOpen = folderStates[folder] ?? true;
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "border border-stone-700/60 rounded-lg bg-stone-900/70",
+        children: [
+          /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              type: "button",
+              onClick: () => setFolderStates((prev) => ({
+                ...prev,
+                [folder]: !isOpen
+              })),
+              className: "w-full flex items-center justify-between px-4 py-3 text-left font-semibold text-stone-200 tracking-wide",
               children: [
-                jsx16 && config?.showCopyButton !== false && /* @__PURE__ */ jsx9("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx9(
-                  "button",
+                /* @__PURE__ */ jsx10("span", { children: folder }),
+                /* @__PURE__ */ jsx10(
+                  ChevronDown2,
                   {
-                    onClick: () => {
-                      navigator.clipboard.writeText(jsx16);
-                      setCopied(true);
-                      setTimeout(() => setCopied(false), 5e3);
-                    },
-                    className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded flex items-center justify-center gap-2",
-                    children: copied ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-                      /* @__PURE__ */ jsx9(Check2, { className: "w-4 h-4" }),
-                      "Copied"
-                    ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-                      /* @__PURE__ */ jsx9(Copy, { className: "w-4 h-4" }),
-                      "Copy to Clipboard"
-                    ] })
+                    className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
                   }
-                ) }, "control-panel-jsx"),
-                buttonControls.length > 0 && /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
-                  ([key, control]) => control.type === "button" ? /* @__PURE__ */ jsx9(
-                    "div",
-                    {
-                      className: "flex-1",
-                      children: control.render ? control.render() : /* @__PURE__ */ jsx9(
-                        "button",
-                        {
-                          onClick: control.onClick,
-                          className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
-                          children: control.label ?? key
-                        }
-                      )
-                    },
-                    `control-panel-custom-${key}`
-                  ) : null
-                ) })
+                )
               ]
             }
-          )
+          ),
+          isOpen && /* @__PURE__ */ jsxs5("div", { className: "px-4 pb-4 pt-0 space-y-5", children: [
+            entries.map(
+              ([key, control]) => renderControl(key, control, "folder")
+            ),
+            extras.map((extra) => extra)
+          ] })
+        ]
+      },
+      folder
+    );
+  };
+  const topFolderSections = hasAnyFolders ? folderGroups.filter(({ placement }) => placement === "top").map(
+    ({ folder, entries, extras }) => renderFolder(folder, entries, extras)
+  ) : null;
+  const bottomFolderSections = hasAnyFolders ? folderGroups.filter(({ placement }) => placement === "bottom").map(
+    ({ folder, entries, extras }) => renderFolder(folder, entries, extras)
+  ) : null;
+  const panelStyle = {
+    width: "100%",
+    height: "auto",
+    flex: "0 0 auto"
+  };
+  if (isHydrated) {
+    if (isDesktop) {
+      Object.assign(panelStyle, {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: `${leftPanelWidth}%`,
+        overflowY: "auto"
+      });
+    } else {
+      Object.assign(panelStyle, {
+        marginTop: `calc(-1 * (${MOBILE_CONTROL_PANEL_PEEK}px + env(safe-area-inset-bottom, 0px)))`,
+        paddingBottom: `calc(${MOBILE_CONTROL_PANEL_PEEK}px + env(safe-area-inset-bottom, 0px))`
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: `order-2 md:order-1 w-full md:h-auto p-2 md:p-4 bg-stone-900 font-mono text-stone-300 transition-opacity duration-300 z-max ${!isHydrated ? "opacity-0" : "opacity-100"}`,
+      onPointerDown: (e) => e.stopPropagation(),
+      onTouchStart: (e) => e.stopPropagation(),
+      style: panelStyle,
+      children: /* @__PURE__ */ jsxs5("div", { className: "dark mb-10 space-y-6 p-4 md:p-6 bg-stone-900/95 backdrop-blur-md border-2 border-stone-700 rounded-xl shadow-lg", children: [
+        /* @__PURE__ */ jsx10("div", { className: "space-y-1", children: /* @__PURE__ */ jsx10("h1", { className: "text-lg text-stone-100 font-semibold", children: config?.mainLabel ?? "Controls" }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+          topFolderSections,
+          hasRootButtonControls && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2", children: rootButtonControls.map(
+            ([key, control]) => renderButtonControl(key, control, "root")
+          ) }),
+          advancedPaletteControlNode,
+          rootNormalControls.map(
+            ([key, control]) => renderControl(key, control, "root")
+          ),
+          bottomFolderSections,
+          shouldShowCopyButton && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
+            "button",
+            {
+              onClick: () => {
+                if (!copyText) return;
+                navigator.clipboard.writeText(copyText);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 5e3);
+              },
+              className: "w-full px-4 py-2 text-sm bg-stone-800 hover:bg-stone-700 text-white rounded-md flex items-center justify-center gap-2 shadow",
+              children: copied ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4" }),
+                "Copied"
+              ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx10(Copy, { className: "w-4 h-4" }),
+                "Copy to Clipboard"
+              ] })
+            }
+          ) }, "control-panel-jsx")
         ] }),
-        previewUrl && /* @__PURE__ */ jsx9(Button, { asChild: true, children: /* @__PURE__ */ jsxs4(
-          "a",
-          {
-            href: previewUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "w-full px-4 py-2 text-sm text-center bg-stone-800 hover:bg-stone-700 text-white rounded",
-            children: [
-              /* @__PURE__ */ jsx9(SquareArrowOutUpRight, {}),
-              " Open in a New Tab"
-            ]
-          }
-        ) })
+        previewUrl && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx10(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxs5(
+            "a",
+            {
+              href: previewUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "w-full px-4 py-2 text-sm text-center bg-stone-900 hover:bg-stone-800 text-white rounded-md border border-stone-700",
+              children: [
+                /* @__PURE__ */ jsx10(SquareArrowOutUpRight, {}),
+                " Open in a New Tab"
+              ]
+            }
+          ) }),
+          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ jsxs5(
+            Button,
+            {
+              type: "button",
+              onClick: handlePresentationClick,
+              variant: "secondary",
+              className: "w-full bg-stone-800 text-white hover:bg-stone-700 border border-stone-700",
+              children: [
+                /* @__PURE__ */ jsx10(Presentation, {}),
+                " Presentation Mode"
+              ]
+            }
+          )
+        ] })
       ] })
     }
   );
@@ -719,12 +1501,12 @@ var ControlPanel = () => {
 var ControlPanel_default = ControlPanel;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef4 } from "react";
 
 // src/components/Grid/Grid.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Grid() {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       className: "absolute inset-0 w-screen h-screen z-[0] blur-[1px]",
@@ -742,12 +1524,12 @@ function Grid() {
 var Grid_default = Grid;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+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 = useRef2(null);
-  return /* @__PURE__ */ jsx11(
+  const previewRef = useRef4(null);
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ref: previewRef,
@@ -756,9 +1538,9 @@ var PreviewContainer = ({ children, hideControls }) => {
         width: `${100 - leftPanelWidth}%`,
         marginLeft: `${leftPanelWidth}%`
       } : {},
-      children: /* @__PURE__ */ jsxs5("div", { className: "w-screen h-screen", children: [
-        config?.showGrid && /* @__PURE__ */ jsx11(Grid_default, {}),
-        /* @__PURE__ */ jsx11("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
+      children: /* @__PURE__ */ jsxs6("div", { className: "w-screen h-screen", children: [
+        config?.showGrid && /* @__PURE__ */ jsx12(Grid_default, {}),
+        /* @__PURE__ */ jsx12("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
       ] })
     }
   );
@@ -766,166 +1548,178 @@ var PreviewContainer = ({ children, hideControls }) => {
 var PreviewContainer_default = PreviewContainer;
 
 // src/components/Playground/Playground.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var NO_CONTROLS_PARAM = "nocontrols";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var HiddenPreview = ({ children }) => /* @__PURE__ */ jsx13("div", { "aria-hidden": "true", className: "hidden", children });
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = useState5(false);
   const [copied, setCopied] = useState5(false);
-  useEffect4(() => {
+  useEffect5(() => {
     setIsHydrated(true);
   }, []);
-  const hideControls = useMemo3(() => {
-    if (typeof window === "undefined") return false;
-    return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
+  const { showControls, isPresentationMode, isControlsOnly } = useMemo4(() => {
+    if (typeof window === "undefined") {
+      return {
+        showControls: true,
+        isPresentationMode: false,
+        isControlsOnly: false
+      };
+    }
+    const params = new URLSearchParams(window.location.search);
+    const presentation = params.get(PRESENTATION_PARAM) === "true";
+    const controlsOnly = params.get(CONTROLS_ONLY_PARAM) === "true";
+    const noControlsParam = params.get(NO_CONTROLS_PARAM) === "true";
+    const showControlsValue = controlsOnly || !presentation && !noControlsParam;
+    return {
+      showControls: showControlsValue,
+      isPresentationMode: presentation,
+      isControlsOnly: controlsOnly
+    };
   }, []);
+  const shouldShowShareButton = !showControls && !isPresentationMode;
+  const layoutHideControls = !showControls || isControlsOnly;
   const handleCopy = () => {
     navigator.clipboard.writeText(window.location.href);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
   if (!isHydrated) return null;
-  return /* @__PURE__ */ jsx12(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs6(ControlsProvider, { children: [
-    hideControls && /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx13(ResizableLayout, { hideControls: layoutHideControls, children: /* @__PURE__ */ jsxs7(ControlsProvider, { children: [
+    shouldShowShareButton && /* @__PURE__ */ jsxs7(
       "button",
       {
         onClick: handleCopy,
         className: "absolute top-4 right-4 z-50 flex items-center gap-1 rounded bg-black/70 px-3 py-1 text-white hover:bg-black",
         children: [
-          copied ? /* @__PURE__ */ jsx12(Check3, { size: 16 }) : /* @__PURE__ */ jsx12(Copy2, { size: 16 }),
+          copied ? /* @__PURE__ */ jsx13(Check3, { size: 16 }) : /* @__PURE__ */ jsx13(Copy2, { size: 16 }),
           copied ? "Copied!" : "Share"
         ]
       }
     ),
-    /* @__PURE__ */ jsx12(PreviewContainer_default, { hideControls, children }),
-    !hideControls && /* @__PURE__ */ jsx12(ControlPanel_default, {})
+    isControlsOnly ? /* @__PURE__ */ jsx13(HiddenPreview, { children }) : /* @__PURE__ */ jsx13(PreviewContainer_default, { hideControls: layoutHideControls, children }),
+    showControls && /* @__PURE__ */ jsx13(ControlPanel_default, {})
   ] }) });
 }
 
-// src/components/Canvas/Canvas.tsx
-import React11, { useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
-import { Canvas as ThreeCanvas, useThree as useThree2 } from "@react-three/fiber";
-import "@react-three/fiber";
-
-// src/components/CameraLogger/CameraLogger.tsx
-import { useRef as useRef3, useEffect as useEffect5 } from "react";
-import { OrbitControls } from "@react-three/drei";
-import { useThree } from "@react-three/fiber";
-import { debounce } from "lodash";
-import { jsx as jsx13 } from "react/jsx-runtime";
-function CameraLogger() {
-  const { camera } = useThree();
-  const controlsRef = useRef3(null);
-  const logRef = useRef3(null);
-  useEffect5(() => {
-    logRef.current = debounce(() => {
-      console.info("Camera position:", camera.position.toArray());
-    }, 200);
-  }, [camera]);
-  useEffect5(() => {
-    const controls = controlsRef.current;
-    const handler = logRef.current;
-    if (!controls || !handler) return;
-    controls.addEventListener("change", handler);
-    return () => controls.removeEventListener("change", handler);
-  }, []);
-  return /* @__PURE__ */ jsx13(OrbitControls, { ref: controlsRef });
-}
-
-// src/components/Canvas/Canvas.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var ResponsiveCamera = ({
-  height,
-  width
-}) => {
-  const { camera } = useThree2();
-  useEffect6(() => {
-    const isMobile = width < 768;
-    const zoomFactor = isMobile ? 70 : 100;
-    camera.position.z = height / zoomFactor;
-    camera.updateProjectionMatrix();
-  }, [height, camera, width]);
-  return null;
-};
-var Canvas = ({
-  mediaProps,
-  children,
-  ...otherProps
-}) => {
-  const canvasRef = useRef4(null);
-  const [parentSize, setParentSize] = useState6(null);
+// src/hooks/useAdvancedPaletteControls.ts
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+var cloneForCallbacks = (palette) => clonePalette(palette);
+var useAdvancedPaletteControls = (options = {}) => {
+  const resolvedDefaultPalette = useMemo5(
+    () => createAdvancedPalette(options.defaultPalette),
+    [options.defaultPalette]
+  );
+  const resolvedFallbackPalette = useMemo5(
+    () => options.fallbackPalette ? createAdvancedPalette(options.fallbackPalette) : resolvedDefaultPalette,
+    [options.fallbackPalette, resolvedDefaultPalette]
+  );
+  const [palette, setPaletteState] = useState6(
+    () => clonePalette(resolvedDefaultPalette)
+  );
+  const defaultSignatureRef = useRef5(
+    createPaletteSignature(resolvedDefaultPalette)
+  );
   useEffect6(() => {
-    let observer = null;
-    const tryObserve = () => {
-      const node = canvasRef.current;
-      if (!node || !node.parentElement) {
-        setTimeout(tryObserve, 50);
-        return;
-      }
-      const parent = node.parentElement;
-      observer = new ResizeObserver(([entry]) => {
-        const { width, height } = entry.contentRect;
-        setParentSize({ width, height });
+    const nextSignature = createPaletteSignature(resolvedDefaultPalette);
+    if (defaultSignatureRef.current === nextSignature) return;
+    defaultSignatureRef.current = nextSignature;
+    setPaletteState(clonePalette(resolvedDefaultPalette));
+  }, [resolvedDefaultPalette]);
+  const notifyChange = useCallback4(
+    (nextPalette) => {
+      options.onChange?.(cloneForCallbacks(nextPalette));
+    },
+    [options.onChange]
+  );
+  const setPalette = useCallback4(
+    (source) => {
+      const nextPalette = createAdvancedPalette(
+        source ?? resolvedDefaultPalette
+      );
+      setPaletteState(clonePalette(nextPalette));
+      notifyChange(nextPalette);
+    },
+    [notifyChange, resolvedDefaultPalette]
+  );
+  const updatePalette = useCallback4(
+    (updater) => {
+      setPaletteState((current) => {
+        const nextSource = updater(clonePalette(current));
+        const nextPalette = createAdvancedPalette(
+          nextSource ?? current ?? resolvedDefaultPalette
+        );
+        notifyChange(nextPalette);
+        return clonePalette(nextPalette);
       });
-      observer.observe(parent);
-    };
-    tryObserve();
-    return () => {
-      if (observer) observer.disconnect();
-    };
-  }, []);
-  const mergedMediaProps = {
-    ...mediaProps || {},
-    size: mediaProps?.size || { width: 400, height: 400 }
-  };
-  return /* @__PURE__ */ jsx14(
-    "div",
-    {
-      ref: canvasRef,
-      className: "w-full h-full pointer-events-none relative touch-none",
-      children: /* @__PURE__ */ jsxs7(
-        ThreeCanvas,
-        {
-          resize: { polyfill: ResizeObserver },
-          style: { width: parentSize?.width, height: parentSize?.height },
-          gl: { preserveDrawingBuffer: true },
-          ...otherProps,
-          children: [
-            parentSize?.height && parentSize?.width && /* @__PURE__ */ jsx14(
-              ResponsiveCamera,
-              {
-                height: parentSize.height,
-                width: parentSize.width
-              }
-            ),
-            mediaProps?.debugOrbit && /* @__PURE__ */ jsx14(CameraLogger, {}),
-            /* @__PURE__ */ jsx14("ambientLight", { intensity: 1 }),
-            /* @__PURE__ */ jsx14("pointLight", { position: [10, 10, 10] }),
-            React11.cloneElement(children, mergedMediaProps)
-          ]
-        }
-      )
-    }
+    },
+    [notifyChange, resolvedDefaultPalette]
   );
+  const resetPalette = useCallback4(() => {
+    setPaletteState(clonePalette(resolvedDefaultPalette));
+    notifyChange(resolvedDefaultPalette);
+  }, [notifyChange, resolvedDefaultPalette]);
+  const handleControlPaletteChange = useCallback4(
+    (nextPalette) => {
+      setPaletteState(clonePalette(nextPalette));
+      notifyChange(nextPalette);
+    },
+    [notifyChange]
+  );
+  const controlConfig = useMemo5(
+    () => ({
+      ...options.control ?? {},
+      defaultPalette: resolvedDefaultPalette,
+      onPaletteChange: handleControlPaletteChange
+    }),
+    [handleControlPaletteChange, options.control, resolvedDefaultPalette]
+  );
+  const hexColors = useMemo5(
+    () => advancedPaletteToHexColors(palette, {
+      sectionOrder: options.sectionOrder,
+      fallbackPalette: resolvedFallbackPalette,
+      defaultColor: options.defaultColor
+    }),
+    [
+      options.defaultColor,
+      options.sectionOrder,
+      palette,
+      resolvedFallbackPalette
+    ]
+  );
+  const paletteSignature = useMemo5(
+    () => createPaletteSignature(palette),
+    [palette]
+  );
+  const paletteGradient = useMemo5(
+    () => computePaletteGradient(palette, options.gradientSteps),
+    [options.gradientSteps, palette]
+  );
+  return {
+    palette,
+    hexColors,
+    controlConfig,
+    paletteGradient,
+    setPalette,
+    updatePalette,
+    resetPalette,
+    paletteSignature
+  };
 };
-var Canvas_default = Canvas;
-
-// src/components/PlaygroundCanvas/PlaygroundCanvas.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var PlaygroundCanvas = ({
-  children,
-  mediaProps,
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ jsx15(Playground, { children: /* @__PURE__ */ jsx15(Canvas_default, { mediaProps, ...otherProps, children }) });
-};
-var PlaygroundCanvas_default = PlaygroundCanvas;
+var useDefaultAdvancedPaletteControls = () => useAdvancedPaletteControls({ defaultPalette: DEFAULT_ADVANCED_PALETTE });
 export {
   Button,
-  CameraLogger,
-  Canvas_default as Canvas,
   ControlsProvider,
+  DEFAULT_ADVANCED_PALETTE,
+  DEFAULT_HEX_PALETTE,
   Playground,
-  PlaygroundCanvas_default as PlaygroundCanvas,
+  advancedPaletteToHexColors,
+  clonePalette,
+  computePaletteGradient,
+  createAdvancedPalette,
+  createPaletteSignature,
+  hexToPaletteValue,
+  paletteValueToHex,
+  useAdvancedPaletteControls,
   useControls,
+  useDefaultAdvancedPaletteControls,
   useUrlSyncedControls
 };