@designtools/shadows 0.1.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@designtools/shadows",
+  "version": "0.1.0",
+  "description": "Visual shadow editing CLI — scan, preview, and edit box-shadow values in your project",
+  "type": "module",
+  "license": "CC-BY-NC-4.0",
+  "author": "Andrew Flett",
+  "engines": { "node": ">=18" },
+  "scripts": {
+    "dev": "tsx src/cli.ts",
+    "dev:client": "vite dev src/client",
+    "build": "vite build src/client && tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "bin": { "designtools-shadows": "dist/cli.js" },
+  "files": ["dist", "src/client", "src/inject"],
+  "dependencies": {
+    "@designtools/core": "*",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@tailwindcss/vite": "^4.1.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "express": "^5.1.0",
+    "http-proxy": "^1.18.1",
+    "http-proxy-middleware": "^3.0.3",
+    "open": "^10.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0",
+    "vite": "^6.3.0",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/http-proxy": "^1.17.17",
+    "@types/node": "^22.15.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/ws": "^8.5.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}

package/src/client/app.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { ShadowIcon } from "@radix-ui/react-icons";
+import { ToolChrome } from "@designtools/core/client/components/tool-chrome";
+import {
+  sendToIframe,
+  onIframeMessage,
+  type ElementData,
+} from "@designtools/core/client/lib/iframe-bridge";
+import { ShadowEditorPanel } from "./components/shadow-editor-panel.js";
+
+export interface ShadowsScanData {
+  framework: { name: string; cssFiles: string[] };
+  styling: { type: string; cssFiles: string[] };
+  shadows: {
+    shadows: any[];
+    cssFilePath: string;
+    stylingType: string;
+  };
+  routes: { routes: { urlPath: string; filePath: string }[] };
+}
+
+export function App() {
+  const [scanData, setScanData] = useState<ShadowsScanData | null>(null);
+  const [selectedElement, setSelectedElement] = useState<ElementData | null>(null);
+  const [selectionMode, setSelectionMode] = useState(false);
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [viewportWidth, setViewportWidth] = useState<number | "fill">("fill");
+  const [iframePath, setIframePath] = useState("/");
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    fetch("/scan/all")
+      .then((r) => r.json())
+      .then(setScanData)
+      .catch(console.error);
+  }, []);
+
+  useEffect(() => {
+    return onIframeMessage((msg) => {
+      if (msg.type === "tool:elementSelected") {
+        setSelectedElement(msg.data);
+      }
+      if (msg.type === "tool:injectedReady" && iframeRef.current) {
+        if (selectionMode) {
+          sendToIframe(iframeRef.current, {
+            type: "tool:enterSelectionMode",
+          });
+        }
+      }
+    });
+  }, [selectionMode]);
+
+  useEffect(() => {
+    if (!iframeRef.current) return;
+    sendToIframe(iframeRef.current, {
+      type: selectionMode
+        ? "tool:enterSelectionMode"
+        : "tool:exitSelectionMode",
+    });
+  }, [selectionMode]);
+
+  const toggleTheme = useCallback(() => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    if (iframeRef.current) {
+      sendToIframe(iframeRef.current, {
+        type: "tool:setTheme",
+        theme: newTheme,
+      });
+    }
+  }, [theme]);
+
+  const previewShadow = useCallback(
+    (variableName: string, value: string) => {
+      if (iframeRef.current) {
+        sendToIframe(iframeRef.current, {
+          type: "tool:setProperty",
+          token: variableName,
+          value,
+        });
+      }
+    },
+    []
+  );
+
+  return (
+    <ToolChrome
+      toolName="Shadows"
+      toolIcon={<ShadowIcon style={{ width: 15, height: 15 }} />}
+      routes={scanData?.routes.routes || []}
+      selectionMode={selectionMode}
+      onToggleSelectionMode={() => setSelectionMode((s) => !s)}
+      theme={theme}
+      onToggleTheme={toggleTheme}
+      viewportWidth={viewportWidth}
+      onViewportWidthChange={setViewportWidth}
+      iframePath={iframePath}
+      onIframePathChange={setIframePath}
+      iframeRef={iframeRef}
+      editorPanel={
+        <ShadowEditorPanel
+          scanData={scanData}
+          selectedElement={selectedElement}
+          onPreviewShadow={previewShadow}
+        />
+      }
+    />
+  );
+}

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

@@ -0,0 +1,281 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  PlusIcon,
+  TrashIcon,
+  MoveIcon,
+} from "@radix-ui/react-icons";
+
+interface ShadowLayer {
+  offsetX: string;
+  offsetY: string;
+  blur: string;
+  spread: string;
+  color: string;
+  inset: boolean;
+}
+
+interface ShadowControlsProps {
+  shadow: { value: string; layers: ShadowLayer[] };
+  onPreview: (value: string) => void;
+  onSave: (value: string) => void;
+}
+
+export function ShadowControls({
+  shadow,
+  onPreview,
+  onSave,
+}: ShadowControlsProps) {
+  const [layers, setLayers] = useState<ShadowLayer[]>(() =>
+    shadow.layers.length > 0
+      ? shadow.layers
+      : [{ offsetX: "0", offsetY: "4px", blur: "6px", spread: "-1px", color: "rgb(0 0 0 / 0.1)", inset: false }]
+  );
+
+  const formatValue = useCallback((layers: ShadowLayer[]) => {
+    if (layers.length === 0) return "none";
+    return layers
+      .map((l) => {
+        const parts: string[] = [];
+        if (l.inset) parts.push("inset");
+        parts.push(l.offsetX, l.offsetY, l.blur, l.spread, l.color);
+        return parts.join(" ");
+      })
+      .join(", ");
+  }, []);
+
+  const updateLayer = useCallback(
+    (index: number, update: Partial<ShadowLayer>) => {
+      const newLayers = layers.map((l, i) =>
+        i === index ? { ...l, ...update } : l
+      );
+      setLayers(newLayers);
+      onPreview(formatValue(newLayers));
+    },
+    [layers, onPreview, formatValue]
+  );
+
+  const addLayer = () => {
+    const newLayers = [
+      ...layers,
+      { offsetX: "0", offsetY: "4px", blur: "8px", spread: "0", color: "rgb(0 0 0 / 0.1)", inset: false },
+    ];
+    setLayers(newLayers);
+    onPreview(formatValue(newLayers));
+  };
+
+  const removeLayer = (index: number) => {
+    const newLayers = layers.filter((_, i) => i !== index);
+    setLayers(newLayers);
+    onPreview(formatValue(newLayers));
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Preview */}
+      <div
+        className="flex items-center justify-center p-4 rounded-lg"
+        style={{
+          background: "var(--studio-bg)",
+          border: "1px solid var(--studio-border-subtle)",
+        }}
+      >
+        <div
+          className="w-20 h-20 rounded-lg"
+          style={{
+            background: "white",
+            boxShadow: formatValue(layers),
+          }}
+        />
+      </div>
+
+      {/* Layers */}
+      {layers.map((layer, i) => (
+        <LayerEditor
+          key={i}
+          layer={layer}
+          index={i}
+          total={layers.length}
+          onChange={(update) => updateLayer(i, update)}
+          onRemove={() => removeLayer(i)}
+        />
+      ))}
+
+      {/* Add layer button */}
+      <button
+        onClick={addLayer}
+        className="flex items-center justify-center gap-1 py-1.5 rounded text-[11px] cursor-pointer"
+        style={{
+          background: "var(--studio-input-bg)",
+          border: "1px solid var(--studio-border-subtle)",
+          color: "var(--studio-text-muted)",
+        }}
+      >
+        <PlusIcon style={{ width: 12, height: 12 }} />
+        Add Layer
+      </button>
+
+      {/* Save */}
+      <button
+        onClick={() => onSave(formatValue(layers))}
+        className="w-full py-1.5 rounded text-[11px] font-medium cursor-pointer"
+        style={{
+          background: "var(--studio-accent)",
+          color: "white",
+          border: "none",
+        }}
+      >
+        Save to File
+      </button>
+    </div>
+  );
+}
+
+function LayerEditor({
+  layer,
+  index,
+  total,
+  onChange,
+  onRemove,
+}: {
+  layer: ShadowLayer;
+  index: number;
+  total: number;
+  onChange: (update: Partial<ShadowLayer>) => void;
+  onRemove: () => void;
+}) {
+  const parseNum = (v: string): number => parseFloat(v) || 0;
+
+  return (
+    <div
+      className="rounded-lg p-2.5"
+      style={{
+        background: "var(--studio-input-bg)",
+        border: "1px solid var(--studio-border-subtle)",
+      }}
+    >
+      {/* Layer header */}
+      <div className="flex items-center justify-between mb-2">
+        <span
+          className="text-[9px] font-semibold uppercase tracking-wide"
+          style={{ color: "var(--studio-text-dimmed)" }}
+        >
+          Layer {index + 1}
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => onChange({ inset: !layer.inset })}
+            className={`studio-bp-btn ${layer.inset ? "active" : ""}`}
+            style={{ fontSize: 9, padding: "1px 5px" }}
+          >
+            inset
+          </button>
+          {total > 1 && (
+            <button
+              onClick={onRemove}
+              className="studio-icon-btn"
+              style={{ width: 20, height: 20 }}
+            >
+              <TrashIcon style={{ width: 10, height: 10 }} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Controls grid */}
+      <div className="grid grid-cols-2 gap-x-2 gap-y-1.5">
+        <SliderField
+          label="X Offset"
+          value={parseNum(layer.offsetX)}
+          min={-50}
+          max={50}
+          unit="px"
+          onChange={(v) => onChange({ offsetX: `${v}px` })}
+        />
+        <SliderField
+          label="Y Offset"
+          value={parseNum(layer.offsetY)}
+          min={-50}
+          max={50}
+          unit="px"
+          onChange={(v) => onChange({ offsetY: `${v}px` })}
+        />
+        <SliderField
+          label="Blur"
+          value={parseNum(layer.blur)}
+          min={0}
+          max={100}
+          unit="px"
+          onChange={(v) => onChange({ blur: `${v}px` })}
+        />
+        <SliderField
+          label="Spread"
+          value={parseNum(layer.spread)}
+          min={-50}
+          max={50}
+          unit="px"
+          onChange={(v) => onChange({ spread: `${v}px` })}
+        />
+      </div>
+
+      {/* Color */}
+      <div className="mt-1.5">
+        <div
+          className="text-[9px] font-medium mb-0.5"
+          style={{ color: "var(--studio-text-dimmed)" }}
+        >
+          Color
+        </div>
+        <input
+          type="text"
+          value={layer.color}
+          onChange={(e) => onChange({ color: e.target.value })}
+          className="studio-input w-full"
+          style={{ fontSize: 10 }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SliderField({
+  label,
+  value,
+  min,
+  max,
+  unit,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  unit: string;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <span
+          className="text-[9px] font-medium"
+          style={{ color: "var(--studio-text-dimmed)" }}
+        >
+          {label}
+        </span>
+        <span
+          className="text-[9px] font-mono"
+          style={{ color: "var(--studio-text-muted)" }}
+        >
+          {value}{unit}
+        </span>
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onChange={(e) => onChange(parseInt(e.target.value, 10))}
+        className="w-full"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+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";
+
+type ViewMode = "list" | "overview";
+
+interface ShadowEditorPanelProps {
+  scanData: ShadowsScanData | null;
+  selectedElement: ElementData | null;
+  onPreviewShadow: (variableName: string, value: string) => void;
+}
+
+export function ShadowEditorPanel({
+  scanData,
+  selectedElement,
+  onPreviewShadow,
+}: ShadowEditorPanelProps) {
+  const [viewMode, setViewMode] = useState<ViewMode>("list");
+
+  if (!scanData) {
+    return (
+      <div
+        className="flex flex-col border-l studio-scrollbar"
+        style={{
+          width: 340,
+          minWidth: 340,
+          background: "var(--studio-surface)",
+          borderColor: "var(--studio-border)",
+        }}
+      >
+        <div
+          className="px-4 py-3 text-[11px]"
+          style={{ color: "var(--studio-text-dimmed)" }}
+        >
+          Scanning project...
+        </div>
+      </div>
+    );
+  }
+
+  const modeConfig: Record<ViewMode, { icon: any; label: string }> = {
+    list: { icon: MixerHorizontalIcon, label: "Edit" },
+    overview: { icon: GridIcon, label: "Overview" },
+  };
+
+  return (
+    <div
+      className="flex flex-col border-l studio-scrollbar overflow-y-auto"
+      style={{
+        width: 340,
+        minWidth: 340,
+        background: "var(--studio-surface)",
+        borderColor: "var(--studio-border)",
+      }}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center gap-2 px-4 py-3 border-b shrink-0"
+        style={{ borderColor: "var(--studio-border)" }}
+      >
+        <div
+          className="w-5 h-5 rounded flex items-center justify-center shrink-0"
+          style={{ background: "var(--studio-accent-muted)" }}
+        >
+          <ShadowIcon
+            style={{ width: 12, height: 12, color: "var(--studio-accent)" }}
+          />
+        </div>
+        <div className="flex-1 min-w-0">
+          <span
+            className="text-[12px] font-semibold"
+            style={{ color: "var(--studio-text)" }}
+          >
+            Shadows
+          </span>
+          <div
+            className="text-[10px]"
+            style={{ color: "var(--studio-text-dimmed)" }}
+          >
+            {scanData.shadows.shadows.length} shadow
+            {scanData.shadows.shadows.length !== 1 ? "s" : ""} found
+          </div>
+        </div>
+      </div>
+
+      {/* View mode switcher */}
+      <div
+        className="px-4 py-2.5 border-b shrink-0"
+        style={{ borderColor: "var(--studio-border)" }}
+      >
+        <div className="studio-segmented" style={{ width: "100%" }}>
+          {(Object.keys(modeConfig) as ViewMode[]).map((mode) => {
+            const cfg = modeConfig[mode];
+            return (
+              <button
+                key={mode}
+                onClick={() => setViewMode(mode)}
+                className={viewMode === mode ? "active" : ""}
+                style={{ flex: 1 }}
+              >
+                <cfg.icon style={{ width: 12, height: 12 }} />
+                {cfg.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto studio-scrollbar">
+        {viewMode === "list" && (
+          <ShadowList
+            shadows={scanData.shadows.shadows}
+            cssFilePath={scanData.shadows.cssFilePath}
+            stylingType={scanData.shadows.stylingType}
+            onPreviewShadow={onPreviewShadow}
+          />
+        )}
+        {viewMode === "overview" && (
+          <ShadowOverview
+            shadows={scanData.shadows.shadows}
+          />
+        )}
+      </div>
+    </div>
+  );
+}