@designtools/shadows 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/shadows",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Visual shadow editing CLI — scan, preview, and edit box-shadow values in your project",
   "type": "module",
   "license": "CC-BY-NC-4.0",

package/src/client/app.tsx

@@ -16,7 +16,6 @@ export interface ShadowsScanData {
     cssFilePath: string;
     stylingType: string;
   };
-  routes: { routes: { urlPath: string; filePath: string }[] };
 }
 
 export function App() {
@@ -40,6 +39,9 @@ export function App() {
       if (msg.type === "tool:elementSelected") {
         setSelectedElement(msg.data);
       }
+      if (msg.type === "tool:pathChanged") {
+        setIframePath(msg.path);
+      }
       if (msg.type === "tool:injectedReady" && iframeRef.current) {
         if (selectionMode) {
           sendToIframe(iframeRef.current, {
@@ -71,8 +73,20 @@ export function App() {
   }, [theme]);
 
   const previewShadow = useCallback(
-    (variableName: string, value: string) => {
-      if (iframeRef.current) {
+    (variableName: string, value: string, shadowName?: string) => {
+      if (!iframeRef.current) return;
+
+      // Tailwind v4 compiles shadow utilities (.shadow-sm) to use --tw-shadow
+      // internally, so setting --shadow-sm on :root has no effect.
+      // Instead, inject a <style> that overrides the utility class.
+      const isTailwind = scanData?.styling.type === "tailwind-v4";
+      if (isTailwind && shadowName) {
+        sendToIframe(iframeRef.current, {
+          type: "tool:previewShadow",
+          className: shadowName,
+          value,
+        });
+      } else {
         sendToIframe(iframeRef.current, {
           type: "tool:setProperty",
           token: variableName,
@@ -80,14 +94,14 @@ export function App() {
         });
       }
     },
-    []
+    [scanData]
   );
 
   return (
     <ToolChrome
       toolName="Shadows"
       toolIcon={<ShadowIcon style={{ width: 15, height: 15 }} />}
-      routes={scanData?.routes.routes || []}
+      showSelectionMode={false}
       selectionMode={selectionMode}
       onToggleSelectionMode={() => setSelectionMode((s) => !s)}
       theme={theme}

package/src/client/components/shadow-controls.tsx

@@ -14,16 +14,20 @@ interface ShadowLayer {
   inset: boolean;
 }
 
+import type { PreviewSettings } from "./shadow-preview-settings.js";
+
 interface ShadowControlsProps {
   shadow: { value: string; layers: ShadowLayer[] };
   onPreview: (value: string) => void;
   onSave: (value: string) => void;
+  previewSettings: PreviewSettings;
 }
 
 export function ShadowControls({
   shadow,
   onPreview,
   onSave,
+  previewSettings,
 }: ShadowControlsProps) {
   const [layers, setLayers] = useState<ShadowLayer[]>(() =>
     shadow.layers.length > 0
@@ -73,10 +77,9 @@ export function ShadowControls({
     <div className="flex flex-col gap-3">
       {/* Preview */}
       <div
-        className="flex items-center justify-center p-4 rounded-lg"
+        className="flex items-center justify-center p-6 rounded-lg"
         style={{
-          background: "var(--studio-bg)",
-          border: "1px solid var(--studio-border-subtle)",
+          background: previewSettings.previewBg,
         }}
       >
         <div
@@ -84,6 +87,9 @@ export function ShadowControls({
           style={{
             background: "white",
             boxShadow: formatValue(layers),
+            border: previewSettings.showBorder
+              ? `1px solid ${previewSettings.borderColor}`
+              : "none",
           }}
         />
       </div>

package/src/client/components/shadow-editor-panel.tsx

@@ -1,23 +1,25 @@
 import { useState } from "react";
 import {
-  Cross2Icon,
   ShadowIcon,
   MixerHorizontalIcon,
   GridIcon,
-  ChevronRightIcon,
-  ChevronDownIcon,
 } from "@radix-ui/react-icons";
 import type { ShadowsScanData } from "../app.js";
 import type { ElementData } from "@designtools/core/client/lib/iframe-bridge";
 import { ShadowList } from "./shadow-list.js";
 import { ShadowOverview } from "./shadow-overview.js";
+import {
+  ShadowPreviewSettingsButton,
+  DEFAULT_PREVIEW_SETTINGS,
+  type PreviewSettings,
+} from "./shadow-preview-settings.js";
 
 type ViewMode = "list" | "overview";
 
 interface ShadowEditorPanelProps {
   scanData: ShadowsScanData | null;
   selectedElement: ElementData | null;
-  onPreviewShadow: (variableName: string, value: string) => void;
+  onPreviewShadow: (variableName: string, value: string, shadowName?: string) => void;
 }
 
 export function ShadowEditorPanel({
@@ -26,6 +28,9 @@ export function ShadowEditorPanel({
   onPreviewShadow,
 }: ShadowEditorPanelProps) {
   const [viewMode, setViewMode] = useState<ViewMode>("list");
+  const [previewSettings, setPreviewSettings] = useState<PreviewSettings>(
+    DEFAULT_PREVIEW_SETTINGS
+  );
 
   if (!scanData) {
     return (
@@ -50,7 +55,7 @@ export function ShadowEditorPanel({
 
   const modeConfig: Record<ViewMode, { icon: any; label: string }> = {
     list: { icon: MixerHorizontalIcon, label: "Edit" },
-    overview: { icon: GridIcon, label: "Overview" },
+    overview: { icon: GridIcon, label: "Preview" },
   };
 
   return (
@@ -91,6 +96,10 @@ export function ShadowEditorPanel({
             {scanData.shadows.shadows.length !== 1 ? "s" : ""} found
           </div>
         </div>
+        <ShadowPreviewSettingsButton
+          settings={previewSettings}
+          onChange={setPreviewSettings}
+        />
       </div>
 
       {/* View mode switcher */}
@@ -116,6 +125,21 @@ export function ShadowEditorPanel({
         </div>
       </div>
 
+      {/* No CSS file warning */}
+      {!scanData.shadows.cssFilePath && (
+        <div
+          className="mx-4 mt-2.5 mb-0 px-3 py-2 rounded-md text-[10px] shrink-0"
+          style={{
+            background: "rgb(255 243 205)",
+            color: "rgb(133 100 4)",
+            border: "1px solid rgb(255 224 130)",
+            lineHeight: 1.4,
+          }}
+        >
+          No CSS file found. Run this tool from your app directory to enable editing.
+        </div>
+      )}
+
       {/* Content */}
       <div className="flex-1 overflow-y-auto studio-scrollbar">
         {viewMode === "list" && (
@@ -124,11 +148,13 @@ export function ShadowEditorPanel({
             cssFilePath={scanData.shadows.cssFilePath}
             stylingType={scanData.shadows.stylingType}
             onPreviewShadow={onPreviewShadow}
+            previewSettings={previewSettings}
           />
         )}
         {viewMode === "overview" && (
           <ShadowOverview
             shadows={scanData.shadows.shadows}
+            previewSettings={previewSettings}
           />
         )}
       </div>

package/src/client/components/shadow-list.tsx

@@ -8,12 +8,14 @@ import {
 } from "@radix-ui/react-icons";
 import { ShadowControls } from "./shadow-controls.js";
 import { ShadowPreview } from "./shadow-preview.js";
+import type { PreviewSettings } from "./shadow-preview-settings.js";
 
 interface ShadowListProps {
   shadows: any[];
   cssFilePath: string;
   stylingType: string;
-  onPreviewShadow: (variableName: string, value: string) => void;
+  onPreviewShadow: (variableName: string, value: string, shadowName?: string) => void;
+  previewSettings: PreviewSettings;
 }
 
 export function ShadowList({
@@ -21,6 +23,7 @@ export function ShadowList({
   cssFilePath,
   stylingType,
   onPreviewShadow,
+  previewSettings,
 }: ShadowListProps) {
   const [expandedShadow, setExpandedShadow] = useState<string | null>(null);
   const [editMode, setEditMode] = useState<Record<string, "custom" | "preset">>({});
@@ -44,6 +47,7 @@ export function ShadowList({
           cssFilePath={cssFilePath}
           stylingType={stylingType}
           onPreviewShadow={onPreviewShadow}
+          previewSettings={previewSettings}
         />
       ))}
 
@@ -68,6 +72,7 @@ function ShadowRow({
   cssFilePath,
   stylingType,
   onPreviewShadow,
+  previewSettings,
 }: {
   shadow: any;
   isExpanded: boolean;
@@ -76,11 +81,14 @@ function ShadowRow({
   onModeChange: (mode: "custom" | "preset") => void;
   cssFilePath: string;
   stylingType: string;
-  onPreviewShadow: (variableName: string, value: string) => void;
+  onPreviewShadow: (variableName: string, value: string, shadowName?: string) => void;
+  previewSettings: PreviewSettings;
 }) {
   const [saving, setSaving] = useState(false);
+  const [currentValue, setCurrentValue] = useState(shadow.value);
 
   const handleSave = async (newValue: string) => {
+    setCurrentValue(newValue);
     setSaving(true);
     try {
       // Design token shadows write to their own endpoint
@@ -140,7 +148,12 @@ function ShadowRow({
         style={{ gap: 8 }}
       >
         {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
-        <ShadowPreview value={shadow.value} size={24} />
+        <ShadowPreview
+          value={currentValue}
+          size={24}
+          showBorder={previewSettings.showBorder}
+          borderColor={previewSettings.borderColor}
+        />
         <span
           className="flex-1 text-[11px] font-mono truncate text-left"
           style={{
@@ -208,21 +221,23 @@ function ShadowRow({
 
           {mode === "custom" ? (
             <ShadowControls
-              shadow={shadow}
+              shadow={{ ...shadow, value: currentValue }}
               onPreview={(value) => {
                 const varName = shadow.cssVariable || `--${shadow.name}`;
-                onPreviewShadow(varName, value);
+                onPreviewShadow(varName, value, shadow.name);
               }}
               onSave={handleSave}
+              previewSettings={previewSettings}
             />
           ) : (
             <PresetPicker
-              currentValue={shadow.value}
+              currentValue={currentValue}
               onSelect={(value) => {
                 const varName = shadow.cssVariable || `--${shadow.name}`;
-                onPreviewShadow(varName, value);
+                onPreviewShadow(varName, value, shadow.name);
                 handleSave(value);
               }}
+              previewSettings={previewSettings}
             />
           )}
         </div>
@@ -234,80 +249,93 @@ function ShadowRow({
 function PresetPicker({
   currentValue,
   onSelect,
+  previewSettings,
 }: {
   currentValue: string;
   onSelect: (value: string) => void;
+  previewSettings: PreviewSettings;
 }) {
-  // Import presets inline to avoid circular deps
+  // Presets from shadow-explorer: multi-layer approaches at different depths
   const presets = [
-    { name: "Soft Small", value: "0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.06)", category: "subtle" },
-    { name: "Soft Medium", value: "0 2px 8px -2px rgb(0 0 0 / 0.05), 0 4px 12px -2px rgb(0 0 0 / 0.08)", category: "subtle" },
-    { name: "Soft Large", value: "0 4px 16px -4px rgb(0 0 0 / 0.08), 0 8px 24px -4px rgb(0 0 0 / 0.1)", category: "subtle" },
-    { name: "Card", value: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", category: "medium" },
-    { name: "Dropdown", value: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", category: "medium" },
-    { name: "Modal", value: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", category: "medium" },
-    { name: "Elevated", value: "0 25px 50px -12px rgb(0 0 0 / 0.25)", category: "dramatic" },
-    { name: "Floating", value: "0 20px 60px -15px rgb(0 0 0 / 0.3)", category: "dramatic" },
-    { name: "Layered Small", value: "0 1px 1px rgb(0 0 0 / 0.04), 0 2px 2px rgb(0 0 0 / 0.04), 0 4px 4px rgb(0 0 0 / 0.04)", category: "layered" },
-    { name: "Layered Medium", value: "0 1px 1px rgb(0 0 0 / 0.03), 0 2px 2px rgb(0 0 0 / 0.03), 0 4px 4px rgb(0 0 0 / 0.03), 0 8px 8px rgb(0 0 0 / 0.03), 0 16px 16px rgb(0 0 0 / 0.03)", category: "layered" },
-    { name: "Blue Glow", value: "0 4px 14px 0 rgb(59 130 246 / 0.3)", category: "colored" },
-    { name: "Purple Glow", value: "0 4px 14px 0 rgb(147 51 234 / 0.3)", category: "colored" },
-    { name: "None", value: "none", category: "reset" },
+    // Crisp 2-layer
+    { name: "Crisp 2L", value: "0px 0.3px 0.7px 0px rgb(0 0 0 / 0.1), 0px 0.7px 2.1px 0px rgb(0 0 0 / 0.07)", desc: "Subtle" },
+    { name: "Crisp 2L +", value: "0px 0.5px 1px 0px rgb(0 0 0 / 0.1), 0px 1px 3px 0px rgb(0 0 0 / 0.07), 0px 2px 6px 0px rgb(0 0 0 / 0.07)", desc: "Elevated" },
+    // Crisp 3-layer (doubling)
+    { name: "Crisp 3L", value: "0px 1px 1px 0px rgb(0 0 0 / 0.08), 0px 2px 2px 0px rgb(0 0 0 / 0.08), 0px 4px 4px 0px rgb(0 0 0 / 0.08)", desc: "Card" },
+    { name: "Crisp 3L +", value: "0px 1px 1px 0px rgb(0 0 0 / 0.08), 0px 2px 2px 0px rgb(0 0 0 / 0.08), 0px 4px 4px 0px rgb(0 0 0 / 0.08), 0px 8px 8px 0px rgb(0 0 0 / 0.08)", desc: "Elevated" },
+    // Crisp 3-layer tight
+    { name: "Crisp Tight", value: "0px 0.5px 0.5px 0px rgb(0 0 0 / 0.09), 0px 1px 1.5px 0px rgb(0 0 0 / 0.07), 0px 3px 3px 0px rgb(0 0 0 / 0.06)", desc: "Card" },
+    { name: "Crisp Tight +", value: "0px 0.5px 0.5px 0px rgb(0 0 0 / 0.09), 0px 1px 1.5px 0px rgb(0 0 0 / 0.07), 0px 3px 3px 0px rgb(0 0 0 / 0.06), 0px 6px 6px 0px rgb(0 0 0 / 0.06)", desc: "Elevated" },
+    // Crisp 4-layer
+    { name: "Crisp 4L", value: "0px 0.5px 0.5px 0px rgb(0 0 0 / 0.07), 0px 1px 1px 0px rgb(0 0 0 / 0.06), 0px 2px 2px 0px rgb(0 0 0 / 0.06), 0px 4px 4px 0px rgb(0 0 0 / 0.06)", desc: "Card" },
+    { name: "Crisp 4L +", value: "0px 0.5px 0.5px 0px rgb(0 0 0 / 0.07), 0px 1px 1px 0px rgb(0 0 0 / 0.06), 0px 2px 2px 0px rgb(0 0 0 / 0.06), 0px 4px 4px 0px rgb(0 0 0 / 0.06), 0px 8px 8px 0px rgb(0 0 0 / 0.06)", desc: "Elevated" },
+    // Crisp 4-layer with hard edge
+    { name: "Edge 4L", value: "0px 0px 0.5px -0.5px rgb(0 0 0 / 0.12), 0px 1px 1px 0px rgb(0 0 0 / 0.06), 0px 2px 2px 0px rgb(0 0 0 / 0.06), 0px 4px 4px 0px rgb(0 0 0 / 0.05)", desc: "Card" },
+    { name: "Edge 4L +", value: "0px 0px 0.5px -0.5px rgb(0 0 0 / 0.12), 0px 1px 1px 0px rgb(0 0 0 / 0.06), 0px 2px 2px 0px rgb(0 0 0 / 0.06), 0px 4px 4px 0px rgb(0 0 0 / 0.05), 0px 8px 8px 0px rgb(0 0 0 / 0.05)", desc: "Elevated" },
+    // Soft / diffuse
+    { name: "Soft", value: "0px 1px 2px 0px rgb(0 0 0 / 0.04), 0px 2px 4px 0px rgb(0 0 0 / 0.04), 0px 4px 8px 0px rgb(0 0 0 / 0.04)", desc: "Diffuse" },
+    { name: "Soft +", value: "0px 1px 2px 0px rgb(0 0 0 / 0.04), 0px 2px 4px 0px rgb(0 0 0 / 0.04), 0px 4px 8px 0px rgb(0 0 0 / 0.04), 0px 8px 16px 0px rgb(0 0 0 / 0.04)", desc: "Elevated" },
+    // Chunky — solid, hard shadow with minimal blur
+    { name: "Chunky", value: "0px 2px 0px 0px rgb(0 0 0 / 0.15), 0px 4px 0px 0px rgb(0 0 0 / 0.1)", desc: "Hard" },
+    { name: "Chunky +", value: "0px 2px 0px 0px rgb(0 0 0 / 0.15), 0px 4px 0px 0px rgb(0 0 0 / 0.1), 0px 8px 0px 0px rgb(0 0 0 / 0.07)", desc: "Elevated" },
+    // None
+    { name: "None", value: "none", desc: "Remove" },
   ];
 
-  const categories = ["subtle", "medium", "dramatic", "layered", "colored", "reset"];
-  const categoryLabels: Record<string, string> = {
-    subtle: "Subtle",
-    medium: "Medium",
-    dramatic: "Dramatic",
-    layered: "Layered",
-    colored: "Colored",
-    reset: "Reset",
-  };
-
   return (
-    <div className="flex flex-col gap-2">
-      {categories.map((cat) => {
-        const catPresets = presets.filter((p) => p.category === cat);
-        if (catPresets.length === 0) return null;
+    <div
+      className="grid gap-2"
+      style={{ gridTemplateColumns: "repeat(2, 1fr)" }}
+    >
+      {presets.map((preset) => {
+        const isActive = currentValue === preset.value;
         return (
-          <div key={cat}>
+          <button
+            key={preset.name}
+            onClick={() => onSelect(preset.value)}
+            className="flex flex-col items-center gap-1.5 p-3 rounded-lg cursor-pointer"
+            style={{
+              background: isActive
+                ? "var(--studio-accent-muted)"
+                : "transparent",
+              border: "1px solid",
+              borderColor: isActive
+                ? "var(--studio-accent)"
+                : "var(--studio-border-subtle)",
+            }}
+          >
             <div
-              className="text-[9px] font-semibold uppercase tracking-wide mb-1"
-              style={{ color: "var(--studio-text-dimmed)" }}
+              className="flex items-center justify-center rounded-lg w-full"
+              style={{
+                background: previewSettings.previewBg,
+                height: 72,
+              }}
             >
-              {categoryLabels[cat]}
+              <ShadowPreview
+                value={preset.value}
+                size={48}
+                background="white"
+                showBorder={previewSettings.showBorder}
+                borderColor={previewSettings.borderColor}
+              />
             </div>
-            <div className="flex flex-col gap-1">
-              {catPresets.map((preset) => (
-                <button
-                  key={preset.name}
-                  onClick={() => onSelect(preset.value)}
-                  className="flex items-center gap-2 p-1.5 rounded text-left w-full"
-                  style={{
-                    background:
-                      currentValue === preset.value
-                        ? "var(--studio-accent-muted)"
-                        : "transparent",
-                    border: "1px solid",
-                    borderColor:
-                      currentValue === preset.value
-                        ? "var(--studio-accent)"
-                        : "var(--studio-border-subtle)",
-                    cursor: "pointer",
-                  }}
+            <div className="text-center">
+              <div
+                className="text-[10px] font-medium"
+                style={{ color: "var(--studio-text-muted)" }}
+              >
+                {preset.name}
+              </div>
+              {preset.desc && (
+                <div
+                  className="text-[9px]"
+                  style={{ color: "var(--studio-text-dimmed)" }}
                 >
-                  <ShadowPreview value={preset.value} size={32} />
-                  <span
-                    className="text-[11px]"
-                    style={{ color: "var(--studio-text)" }}
-                  >
-                    {preset.name}
-                  </span>
-                </button>
-              ))}
+                  {preset.desc}
+                </div>
+              )}
             </div>
-          </div>
+          </button>
         );
       })}
     </div>

package/src/client/components/shadow-overview.tsx

@@ -1,97 +1,102 @@
 import { useState } from "react";
 import { ShadowPreview } from "./shadow-preview.js";
+import type { PreviewSettings } from "./shadow-preview-settings.js";
 
 interface ShadowOverviewProps {
   shadows: any[];
+  previewSettings: PreviewSettings;
 }
 
-const BACKGROUNDS = [
-  { name: "White", value: "white" },
-  { name: "Light", value: "#f5f5f5" },
-  { name: "Dark", value: "#1a1a2e" },
-  { name: "Blue", value: "#e0f2fe" },
-  { name: "Warm", value: "#fef3c7" },
-];
+type OverviewSize = "small" | "large";
 
-export function ShadowOverview({ shadows }: ShadowOverviewProps) {
-  const [activeBg, setActiveBg] = useState("white");
-  const [previewSize, setPreviewSize] = useState(64);
+export function ShadowOverview({ shadows, previewSettings }: ShadowOverviewProps) {
+  const [size, setSize] = useState<OverviewSize>("small");
 
   return (
     <div>
-      {/* Background selector */}
-      <div className="px-4 py-2 flex items-center gap-2">
-        <span
-          className="text-[9px] font-semibold uppercase tracking-wide shrink-0"
-          style={{ color: "var(--studio-text-dimmed)" }}
-        >
-          BG
-        </span>
-        <div className="flex gap-1">
-          {BACKGROUNDS.map((bg) => (
-            <button
-              key={bg.value}
-              onClick={() => setActiveBg(bg.value)}
-              className="shrink-0 cursor-pointer"
-              title={bg.name}
-              style={{
-                width: 18,
-                height: 18,
-                borderRadius: 3,
-                background: bg.value,
-                border:
-                  activeBg === bg.value
-                    ? "2px solid var(--studio-accent)"
-                    : "1px solid var(--studio-border)",
-              }}
-            />
-          ))}
+      {/* Size toggle tabs */}
+      <div
+        className="px-4 py-2 shrink-0"
+      >
+        <div className="studio-segmented" style={{ width: "100%" }}>
+          <button
+            onClick={() => setSize("small")}
+            className={size === "small" ? "active" : ""}
+            style={{ flex: 1 }}
+          >
+            Small
+          </button>
+          <button
+            onClick={() => setSize("large")}
+            className={size === "large" ? "active" : ""}
+            style={{ flex: 1 }}
+          >
+            Large
+          </button>
         </div>
-        <div className="flex-1" />
-        <select
-          value={previewSize}
-          onChange={(e) => setPreviewSize(parseInt(e.target.value))}
-          className="studio-select"
-          style={{ fontSize: 10, width: 50 }}
-        >
-          <option value={48}>S</option>
-          <option value={64}>M</option>
-          <option value={96}>L</option>
-        </select>
       </div>
 
       {/* Shadow grid */}
-      <div
-        className="grid gap-4 px-4 py-3"
-        style={{
-          gridTemplateColumns: `repeat(auto-fill, minmax(${previewSize + 24}px, 1fr))`,
-        }}
-      >
-        {shadows.map((shadow: any) => (
-          <div key={shadow.name} className="flex flex-col items-center gap-1.5">
-            <div
-              className="flex items-center justify-center rounded-lg p-3"
-              style={{
-                background: activeBg,
-                width: previewSize + 24,
-                height: previewSize + 24,
-              }}
-            >
-              <ShadowPreview
-                value={shadow.value}
-                size={previewSize}
-                background={activeBg}
-              />
+      {size === "small" ? (
+        <div
+          className="grid gap-3 px-4 py-3"
+          style={{ gridTemplateColumns: "repeat(2, 1fr)" }}
+        >
+          {shadows.map((shadow: any) => (
+            <div key={shadow.name} className="flex flex-col items-center gap-2">
+              <div
+                className="flex items-center justify-center rounded-xl w-full"
+                style={{
+                  background: previewSettings.previewBg,
+                  height: 100,
+                }}
+              >
+                <ShadowPreview
+                  value={shadow.value}
+                  size={56}
+                  background="white"
+                  showBorder={previewSettings.showBorder}
+                  borderColor={previewSettings.borderColor}
+                />
+              </div>
+              <span
+                className="text-[9px] font-mono text-center truncate w-full"
+                style={{ color: "var(--studio-text-muted)" }}
+              >
+                {shadow.name}
+              </span>
             </div>
-            <span
-              className="text-[9px] font-mono text-center truncate w-full"
-              style={{ color: "var(--studio-text-muted)" }}
-            >
-              {shadow.name}
-            </span>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3 px-4 py-3">
+          {shadows.map((shadow: any) => (
+            <div key={shadow.name} className="flex flex-col items-center gap-2">
+              <div
+                className="flex items-center justify-center rounded-xl w-full"
+                style={{
+                  background: previewSettings.previewBg,
+                  height: 200,
+                }}
+              >
+                <ShadowPreview
+                  value={shadow.value}
+                  size={96}
+                  background="white"
+                  showBorder={previewSettings.showBorder}
+                  borderColor={previewSettings.borderColor}
+                />
+              </div>
+              <span
+                className="text-[9px] font-mono text-center truncate w-full"
+                style={{ color: "var(--studio-text-muted)" }}
+              >
+                {shadow.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
 
       {shadows.length === 0 && (
         <div