@toriistudio/v0-playground 0.5.2 → 0.5.5

package/dist/index.js

@@ -31,18 +31,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
-  CameraLogger: () => CameraLogger,
-  Canvas: () => Canvas_default,
   ControlsProvider: () => ControlsProvider,
+  DEFAULT_ADVANCED_PALETTE: () => DEFAULT_ADVANCED_PALETTE,
+  DEFAULT_HEX_PALETTE: () => DEFAULT_HEX_PALETTE,
   Playground: () => Playground,
-  PlaygroundCanvas: () => PlaygroundCanvas_default,
+  advancedPaletteToHexColors: () => advancedPaletteToHexColors,
+  clonePalette: () => clonePalette,
+  computePaletteGradient: () => computePaletteGradient,
+  createAdvancedPalette: () => createAdvancedPalette,
+  createPaletteSignature: () => createPaletteSignature,
+  hexToPaletteValue: () => hexToPaletteValue,
+  paletteValueToHex: () => paletteValueToHex,
+  useAdvancedPaletteControls: () => useAdvancedPaletteControls,
   useControls: () => useControls,
+  useDefaultAdvancedPaletteControls: () => useDefaultAdvancedPaletteControls,
   useUrlSyncedControls: () => useUrlSyncedControls
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Playground/Playground.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react4 = require("lucide-react");
 
 // src/context/ResizableLayout.tsx
@@ -160,6 +168,252 @@ var getUrlParams = () => {
   return entries;
 };
 
+// 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
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ControlsContext = (0, import_react2.createContext)(null);
@@ -183,9 +437,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 }));
@@ -218,28 +479,41 @@ var ControlsProvider = ({ children }) => {
 var useControls = (schema, options) => {
   const ctx = (0, import_react2.useContext)(ControlsContext);
   if (!ctx) throw new Error("useControls must be used within ControlsProvider");
+  const lastAdvancedPaletteSignature = (0, import_react2.useRef)(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 = (0, import_react2.useMemo)(() => {
+    const baseSchema = { ...schema };
+    if (!resolvedAdvancedConfig) return baseSchema;
+    return createAdvancedPaletteSchemaEntries(
+      baseSchema,
+      resolvedAdvancedConfig
+    );
+  }, [schema, resolvedAdvancedConfig]);
+  const urlParamsKey = (0, import_react2.useMemo)(() => JSON.stringify(urlParams), [urlParams]);
+  const mergedSchema = (0, import_react2.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]);
   (0, import_react2.useEffect)(() => {
     ctx.registerSchema(mergedSchema, options);
   }, [JSON.stringify(mergedSchema), JSON.stringify(options)]);
@@ -250,8 +524,35 @@ var useControls = (schema, options) => {
       }
     }
   }, [JSON.stringify(mergedSchema), JSON.stringify(ctx.values)]);
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useCallback)(() => {
+  const jsx14 = (0, import_react2.useCallback)(() => {
     if (!options?.componentName) return "";
     const props = Object.entries(typedValues).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -265,13 +566,13 @@ 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
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/hooks/usePreviewUrl.ts
@@ -544,20 +845,166 @@ var Button = React8.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/ControlPanel/ControlPanel.tsx
+// src/constants/layout.ts
+var MOBILE_CONTROL_PANEL_PEEK = 112;
+
+// src/components/AdvancedPaletteControl/AdvancedPaletteControl.tsx
+var import_react4 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var AdvancedPaletteControl = ({
+  config
+}) => {
+  const { values, setValue } = useControlsContext();
+  const palette = (0, import_react4.useMemo)(() => {
+    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 = (0, import_react4.useMemo)(
+    () => computePaletteGradient(palette, config.gradientSteps),
+    [palette, config.gradientSteps]
+  );
+  const paletteSignature = (0, import_react4.useMemo)(
+    () => createPaletteSignature(palette),
+    [palette]
+  );
+  const lastSignatureRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!config.onPaletteChange) return;
+    if (lastSignatureRef.current === paletteSignature) return;
+    lastSignatureRef.current = paletteSignature;
+    config.onPaletteChange(palette);
+  }, [config, palette, paletteSignature]);
+  const updatePaletteValue = (0, import_react4.useCallback)(
+    (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 = (0, import_react4.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex w-full flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-semibold uppercase tracking-wide text-stone-200", children: "Palette" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "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__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: "h-4 w-full rounded border border-stone-700",
+        style: { background: paletteGradient }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-4", children: config.sections.map((section) => {
+      const range = config.ranges[section.key];
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between text-[11px] uppercase tracking-widest text-stone-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: section.label }),
+          section.helper && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-stone-500", children: section.helper })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between text-[10px] uppercase tracking-widest text-stone-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: channelLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: value.toFixed(2) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "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__ */ (0, import_jsx_runtime9.jsx)(
+              "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
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ControlPanel = () => {
-  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [copied, setCopied] = (0, import_react5.useState)(false);
+  const [folderStates, setFolderStates] = (0, import_react5.useState)({});
   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 jsx16 = (0, import_react4.useMemo)(() => {
+  const jsx14 = (0, import_react5.useMemo)(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -566,178 +1013,348 @@ var ControlPanel = () => {
     }).join(" ");
     return `<${componentName} ${props} />`;
   }, [componentName, values]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  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__ */ (0, import_jsx_runtime10.jsx)(
+      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 = (0, import_react5.useCallback)(
+    ({
+      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__ */ (0, import_jsx_runtime10.jsx)(
     "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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-10 space-y-4 p-2 md:p-4 border border-stone-700 rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-lg text-stone-100 font-bold", children: config?.mainLabel ?? "Controls" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-4 pt-2", children: [
-          normalControls.map(([key, control]) => {
-            const value = values[key];
-            switch (control.type) {
-              case "boolean":
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                  "div",
-                  {
-                    className: "flex items-center space-x-4 border-t border-stone-700 pt-4",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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__ */ (0, import_jsx_runtime9.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: key })
-                    ]
-                  },
-                  key
-                );
-              case "number":
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: "text-stone-300", htmlFor: key, children: [
-                    key,
-                    ": ",
-                    value
-                  ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    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__ */ (0, import_jsx_runtime9.jsx)(
-                  Input,
-                  {
-                    id: key,
-                    value,
-                    className: "bg-stone-900",
-                    placeholder: key,
-                    onChange: (e) => setValue(key, e.target.value)
-                  },
-                  key
-                );
-              case "color":
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: key }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "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__ */ (0, import_jsx_runtime9.jsxs)(
-                  "div",
-                  {
-                    className: "space-y-2 border-t border-stone-700 pt-4",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: key }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                        Select,
-                        {
-                          value,
-                          onValueChange: (val) => setValue(key, val),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder: "Select option" }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: Object.entries(control.options).map(
-                              ([label, _val]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Switch,
+            {
+              id: key,
+              checked: value,
+              onCheckedChange: (v) => setValue(key, v),
+              className: "cursor-pointer scale-90"
+            }
+          )
+        ] }, key);
+      case "number":
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              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__ */ (0, import_jsx_runtime10.jsx)(
+            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"
             }
-          }),
-          (buttonControls.length > 0 || jsx16) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-            "div",
+          )
+        ] }, key);
+      case "string":
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Input,
+            {
+              id: key,
+              value,
+              placeholder: key,
+              onChange: (e) => setValue(key, e.target.value),
+              className: "bg-stone-900"
+            }
+          )
+        ] }, key);
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "min-w-fit", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Select, { value, onValueChange: (val) => setValue(key, val), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { className: "flex-1 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, { placeholder: "Select option" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectContent, { className: "cursor-pointer z-[9999]", children: Object.entries(control.options).map(([label]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              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__ */ (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",
             {
-              className: `${normalControls.length > 0 ? "border-t" : ""} border-stone-700`,
+              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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  "button",
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: folder }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  import_lucide_react3.ChevronDown,
                   {
-                    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__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "w-4 h-4" }),
-                      "Copied"
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
-                  ([key, control]) => control.type === "button" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "div",
-                    {
-                      className: "flex-1",
-                      children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        "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__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsx)(
+    "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__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-lg text-stone-100 font-semibold", children: config?.mainLabel ?? "Controls" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-6", children: [
+          topFolderSections,
+          hasRootButtonControls && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (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);
+                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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "w-4 h-4" }),
+                "Copied"
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Copy, { className: "w-4 h-4" }),
+                "Copy to Clipboard"
+              ] })
+            }
+          ) }, "control-panel-jsx")
         ] }),
-        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "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",
+            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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.SquareArrowOutUpRight, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.SquareArrowOutUpRight, {}),
               " Open in a New Tab"
             ]
           }
@@ -749,12 +1366,12 @@ var ControlPanel = () => {
 var ControlPanel_default = ControlPanel;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/Grid/Grid.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Grid() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       className: "absolute inset-0 w-screen h-screen z-[0] blur-[1px]",
@@ -772,12 +1389,12 @@ function Grid() {
 var Grid_default = Grid;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PreviewContainer = ({ children, hideControls }) => {
   const { config } = useControlsContext();
   const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
-  const previewRef = (0, import_react5.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const previewRef = (0, import_react6.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       ref: previewRef,
@@ -786,9 +1403,9 @@ var PreviewContainer = ({ children, hideControls }) => {
         width: `${100 - leftPanelWidth}%`,
         marginLeft: `${leftPanelWidth}%`
       } : {},
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-screen h-screen", children: [
-        config?.showGrid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Grid_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-screen h-screen", children: [
+        config?.showGrid && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Grid_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
       ] })
     }
   );
@@ -796,15 +1413,15 @@ var PreviewContainer = ({ children, hideControls }) => {
 var PreviewContainer_default = PreviewContainer;
 
 // src/components/Playground/Playground.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
-  const [isHydrated, setIsHydrated] = (0, import_react6.useState)(false);
-  const [copied, setCopied] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [isHydrated, setIsHydrated] = (0, import_react7.useState)(false);
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     setIsHydrated(true);
   }, []);
-  const hideControls = (0, import_react6.useMemo)(() => {
+  const hideControls = (0, import_react7.useMemo)(() => {
     if (typeof window === "undefined") return false;
     return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
   }, []);
@@ -814,143 +1431,144 @@ function Playground({ children }) {
     setTimeout(() => setCopied(false), 2e3);
   };
   if (!isHydrated) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ControlsProvider, { children: [
-    hideControls && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ControlsProvider, { children: [
+    hideControls && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "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__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Copy, { size: 16 }),
+          copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Copy, { size: 16 }),
           copied ? "Copied!" : "Share"
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreviewContainer_default, { hideControls, children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ControlPanel_default, {})
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PreviewContainer_default, { hideControls, children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ControlPanel_default, {})
   ] }) });
 }
 
-// src/components/Canvas/Canvas.tsx
-var import_react8 = __toESM(require("react"));
-var import_fiber2 = require("@react-three/fiber");
-var import_fiber3 = require("@react-three/fiber");
-
-// src/components/CameraLogger/CameraLogger.tsx
-var import_react7 = require("react");
-var import_drei = require("@react-three/drei");
-var import_fiber = require("@react-three/fiber");
-var import_lodash = require("lodash");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function CameraLogger() {
-  const { camera } = (0, import_fiber.useThree)();
-  const controlsRef = (0, import_react7.useRef)(null);
-  const logRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
-    logRef.current = (0, import_lodash.debounce)(() => {
-      console.info("Camera position:", camera.position.toArray());
-    }, 200);
-  }, [camera]);
-  (0, import_react7.useEffect)(() => {
-    const controls = controlsRef.current;
-    const handler = logRef.current;
-    if (!controls || !handler) return;
-    controls.addEventListener("change", handler);
-    return () => controls.removeEventListener("change", handler);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_drei.OrbitControls, { ref: controlsRef });
-}
-
-// src/components/Canvas/Canvas.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ResponsiveCamera = ({
-  height,
-  width
-}) => {
-  const { camera } = (0, import_fiber2.useThree)();
-  (0, import_react8.useEffect)(() => {
-    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 }) => {
-  const canvasRef = (0, import_react8.useRef)(null);
-  const [parentSize, setParentSize] = (0, import_react8.useState)(null);
+// src/hooks/useAdvancedPaletteControls.ts
+var import_react8 = require("react");
+var cloneForCallbacks = (palette) => clonePalette(palette);
+var useAdvancedPaletteControls = (options = {}) => {
+  const resolvedDefaultPalette = (0, import_react8.useMemo)(
+    () => createAdvancedPalette(options.defaultPalette),
+    [options.defaultPalette]
+  );
+  const resolvedFallbackPalette = (0, import_react8.useMemo)(
+    () => options.fallbackPalette ? createAdvancedPalette(options.fallbackPalette) : resolvedDefaultPalette,
+    [options.fallbackPalette, resolvedDefaultPalette]
+  );
+  const [palette, setPaletteState] = (0, import_react8.useState)(
+    () => clonePalette(resolvedDefaultPalette)
+  );
+  const defaultSignatureRef = (0, import_react8.useRef)(
+    createPaletteSignature(resolvedDefaultPalette)
+  );
   (0, import_react8.useEffect)(() => {
-    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 = (0, import_react8.useCallback)(
+    (nextPalette) => {
+      options.onChange?.(cloneForCallbacks(nextPalette));
+    },
+    [options.onChange]
+  );
+  const setPalette = (0, import_react8.useCallback)(
+    (source) => {
+      const nextPalette = createAdvancedPalette(
+        source ?? resolvedDefaultPalette
+      );
+      setPaletteState(clonePalette(nextPalette));
+      notifyChange(nextPalette);
+    },
+    [notifyChange, resolvedDefaultPalette]
+  );
+  const updatePalette = (0, import_react8.useCallback)(
+    (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__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
-    {
-      ref: canvasRef,
-      className: "w-full h-full pointer-events-none relative touch-none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        import_fiber2.Canvas,
-        {
-          resize: { polyfill: ResizeObserver },
-          style: { width: parentSize?.width, height: parentSize?.height },
-          gl: { preserveDrawingBuffer: true },
-          children: [
-            parentSize?.height && parentSize?.width && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              ResponsiveCamera,
-              {
-                height: parentSize.height,
-                width: parentSize.width
-              }
-            ),
-            mediaProps?.debugOrbit && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CameraLogger, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ambientLight", { intensity: 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("pointLight", { position: [10, 10, 10] }),
-            import_react8.default.cloneElement(children, mergedMediaProps)
-          ]
-        }
-      )
-    }
+    },
+    [notifyChange, resolvedDefaultPalette]
   );
+  const resetPalette = (0, import_react8.useCallback)(() => {
+    setPaletteState(clonePalette(resolvedDefaultPalette));
+    notifyChange(resolvedDefaultPalette);
+  }, [notifyChange, resolvedDefaultPalette]);
+  const handleControlPaletteChange = (0, import_react8.useCallback)(
+    (nextPalette) => {
+      setPaletteState(clonePalette(nextPalette));
+      notifyChange(nextPalette);
+    },
+    [notifyChange]
+  );
+  const controlConfig = (0, import_react8.useMemo)(
+    () => ({
+      ...options.control ?? {},
+      defaultPalette: resolvedDefaultPalette,
+      onPaletteChange: handleControlPaletteChange
+    }),
+    [handleControlPaletteChange, options.control, resolvedDefaultPalette]
+  );
+  const hexColors = (0, import_react8.useMemo)(
+    () => advancedPaletteToHexColors(palette, {
+      sectionOrder: options.sectionOrder,
+      fallbackPalette: resolvedFallbackPalette,
+      defaultColor: options.defaultColor
+    }),
+    [
+      options.defaultColor,
+      options.sectionOrder,
+      palette,
+      resolvedFallbackPalette
+    ]
+  );
+  const paletteSignature = (0, import_react8.useMemo)(
+    () => createPaletteSignature(palette),
+    [palette]
+  );
+  const paletteGradient = (0, import_react8.useMemo)(
+    () => 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
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var PlaygroundCanvas = ({
-  children,
-  mediaProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Playground, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Canvas_default, { mediaProps, children }) });
-};
-var PlaygroundCanvas_default = PlaygroundCanvas;
+var useDefaultAdvancedPaletteControls = () => useAdvancedPaletteControls({ defaultPalette: DEFAULT_ADVANCED_PALETTE });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  CameraLogger,
-  Canvas,
   ControlsProvider,
+  DEFAULT_ADVANCED_PALETTE,
+  DEFAULT_HEX_PALETTE,
   Playground,
-  PlaygroundCanvas,
+  advancedPaletteToHexColors,
+  clonePalette,
+  computePaletteGradient,
+  createAdvancedPalette,
+  createPaletteSignature,
+  hexToPaletteValue,
+  paletteValueToHex,
+  useAdvancedPaletteControls,
   useControls,
+  useDefaultAdvancedPaletteControls,
   useUrlSyncedControls
 });