@designtools/shadows 0.1.10 → 0.1.12

package/src/client/app.tsx

@@ -1,123 +0,0 @@
-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;
-  };
-}
-
-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:pathChanged") {
-        setIframePath(msg.path);
-      }
-      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, 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,
-          value,
-        });
-      }
-    },
-    [scanData]
-  );
-
-  return (
-    <ToolChrome
-      toolName="Shadows"
-      toolIcon={<ShadowIcon style={{ width: 15, height: 15 }} />}
-      showSelectionMode={false}
-      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

@@ -1,287 +0,0 @@
-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;
-}
-
-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
-      ? 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-6 rounded-lg"
-        style={{
-          background: previewSettings.previewBg,
-        }}
-      >
-        <div
-          className="w-20 h-20 rounded-lg"
-          style={{
-            background: "white",
-            boxShadow: formatValue(layers),
-            border: previewSettings.showBorder
-              ? `1px solid ${previewSettings.borderColor}`
-              : "none",
-          }}
-        />
-      </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

@@ -1,163 +0,0 @@
-import { useState } from "react";
-import {
-  ShadowIcon,
-  MixerHorizontalIcon,
-  GridIcon,
-} 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, shadowName?: string) => void;
-}
-
-export function ShadowEditorPanel({
-  scanData,
-  selectedElement,
-  onPreviewShadow,
-}: ShadowEditorPanelProps) {
-  const [viewMode, setViewMode] = useState<ViewMode>("list");
-  const [previewSettings, setPreviewSettings] = useState<PreviewSettings>(
-    DEFAULT_PREVIEW_SETTINGS
-  );
-
-  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: "Preview" },
-  };
-
-  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>
-        <ShadowPreviewSettingsButton
-          settings={previewSettings}
-          onChange={setPreviewSettings}
-        />
-      </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>
-
-      {/* 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" && (
-          <ShadowList
-            shadows={scanData.shadows.shadows}
-            cssFilePath={scanData.shadows.cssFilePath}
-            stylingType={scanData.shadows.stylingType}
-            onPreviewShadow={onPreviewShadow}
-            previewSettings={previewSettings}
-          />
-        )}
-        {viewMode === "overview" && (
-          <ShadowOverview
-            shadows={scanData.shadows.shadows}
-            previewSettings={previewSettings}
-          />
-        )}
-      </div>
-    </div>
-  );
-}