@designtools/shadows 0.1.11 → 0.1.12

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

@@ -1,343 +0,0 @@
-import { useState, useRef } from "react";
-import {
-  ChevronRightIcon,
-  ChevronDownIcon,
-  Pencil1Icon,
-  BookmarkIcon,
-  CheckIcon,
-} 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, shadowName?: string) => void;
-  previewSettings: PreviewSettings;
-}
-
-export function ShadowList({
-  shadows,
-  cssFilePath,
-  stylingType,
-  onPreviewShadow,
-  previewSettings,
-}: ShadowListProps) {
-  const [expandedShadow, setExpandedShadow] = useState<string | null>(null);
-  const [editMode, setEditMode] = useState<Record<string, "custom" | "preset">>({});
-
-  return (
-    <div>
-      {shadows.map((shadow: any) => (
-        <ShadowRow
-          key={shadow.name}
-          shadow={shadow}
-          isExpanded={expandedShadow === shadow.name}
-          onToggle={() =>
-            setExpandedShadow(
-              expandedShadow === shadow.name ? null : shadow.name
-            )
-          }
-          mode={editMode[shadow.name] || "custom"}
-          onModeChange={(mode) =>
-            setEditMode({ ...editMode, [shadow.name]: mode })
-          }
-          cssFilePath={cssFilePath}
-          stylingType={stylingType}
-          onPreviewShadow={onPreviewShadow}
-          previewSettings={previewSettings}
-        />
-      ))}
-
-      {shadows.length === 0 && (
-        <div
-          className="px-4 py-6 text-center text-[11px]"
-          style={{ color: "var(--studio-text-dimmed)" }}
-        >
-          No shadows found. Add shadow CSS variables to your global CSS file.
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ShadowRow({
-  shadow,
-  isExpanded,
-  onToggle,
-  mode,
-  onModeChange,
-  cssFilePath,
-  stylingType,
-  onPreviewShadow,
-  previewSettings,
-}: {
-  shadow: any;
-  isExpanded: boolean;
-  onToggle: () => void;
-  mode: "custom" | "preset";
-  onModeChange: (mode: "custom" | "preset") => void;
-  cssFilePath: string;
-  stylingType: string;
-  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
-      if (shadow.source === "design-token" && shadow.tokenFilePath && shadow.tokenPath) {
-        const res = await fetch("/api/shadows/design-token", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            filePath: shadow.tokenFilePath,
-            tokenPath: shadow.tokenPath,
-            value: newValue,
-          }),
-        });
-        const data = await res.json();
-        if (!data.ok) console.error("Design token save failed:", data.error);
-      } else {
-        // CSS/SCSS shadow writes
-        const variableName = shadow.sassVariable || shadow.cssVariable || `--${shadow.name}`;
-        let selector: string;
-        let filePath = cssFilePath;
-
-        if (stylingType === "tailwind-v4") {
-          selector = "@theme";
-        } else if (stylingType === "bootstrap" && shadow.sassVariable) {
-          selector = "scss";
-          // Use the SCSS file if available, fall back to CSS file
-          filePath = shadow.filePath || cssFilePath;
-        } else {
-          selector = ":root";
-        }
-
-        const endpoint = shadow.isOverridden ? "/api/shadows" : "/api/shadows/create";
-        const res = await fetch(endpoint, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            filePath,
-            variableName,
-            value: newValue,
-            selector,
-          }),
-        });
-        const data = await res.json();
-        if (!data.ok) console.error("Shadow save failed:", data.error);
-      }
-    } catch (err) {
-      console.error("Shadow save error:", err);
-    }
-    setTimeout(() => setSaving(false), 1000);
-  };
-
-  return (
-    <div style={{ borderTop: "1px solid var(--studio-border-subtle)" }}>
-      <button
-        onClick={onToggle}
-        className="studio-section-hdr"
-        style={{ gap: 8 }}
-      >
-        {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
-        <ShadowPreview
-          value={currentValue}
-          size={24}
-          showBorder={previewSettings.showBorder}
-          borderColor={previewSettings.borderColor}
-        />
-        <span
-          className="flex-1 text-[11px] font-mono truncate text-left"
-          style={{
-            color: "var(--studio-text)",
-            fontWeight: 500,
-            textTransform: "none",
-            letterSpacing: 0,
-          }}
-        >
-          {shadow.name}
-        </span>
-        {shadow.source === "framework-preset" && !shadow.isOverridden && (
-          <span
-            className="text-[9px] px-1.5 py-0.5 rounded"
-            style={{
-              background: "var(--studio-input-bg)",
-              color: "var(--studio-text-dimmed)",
-            }}
-          >
-            preset
-          </span>
-        )}
-        {shadow.source === "design-token" && (
-          <span
-            className="text-[9px] px-1.5 py-0.5 rounded"
-            style={{
-              background: "var(--studio-input-bg)",
-              color: "var(--studio-text-dimmed)",
-            }}
-          >
-            token
-          </span>
-        )}
-        {saving && (
-          <span
-            className="flex items-center gap-0.5 text-[10px]"
-            style={{ color: "var(--studio-success)" }}
-          >
-            <CheckIcon style={{ width: 10, height: 10 }} />
-          </span>
-        )}
-      </button>
-
-      {isExpanded && (
-        <div className="px-4 pb-3">
-          {/* Edit mode toggle */}
-          <div className="studio-segmented mb-3" style={{ width: "100%" }}>
-            <button
-              onClick={() => onModeChange("custom")}
-              className={mode === "custom" ? "active" : ""}
-              style={{ flex: 1 }}
-            >
-              <Pencil1Icon style={{ width: 12, height: 12 }} />
-              Custom
-            </button>
-            <button
-              onClick={() => onModeChange("preset")}
-              className={mode === "preset" ? "active" : ""}
-              style={{ flex: 1 }}
-            >
-              <BookmarkIcon style={{ width: 12, height: 12 }} />
-              Use Preset
-            </button>
-          </div>
-
-          {mode === "custom" ? (
-            <ShadowControls
-              shadow={{ ...shadow, value: currentValue }}
-              onPreview={(value) => {
-                const varName = shadow.cssVariable || `--${shadow.name}`;
-                onPreviewShadow(varName, value, shadow.name);
-              }}
-              onSave={handleSave}
-              previewSettings={previewSettings}
-            />
-          ) : (
-            <PresetPicker
-              currentValue={currentValue}
-              onSelect={(value) => {
-                const varName = shadow.cssVariable || `--${shadow.name}`;
-                onPreviewShadow(varName, value, shadow.name);
-                handleSave(value);
-              }}
-              previewSettings={previewSettings}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function PresetPicker({
-  currentValue,
-  onSelect,
-  previewSettings,
-}: {
-  currentValue: string;
-  onSelect: (value: string) => void;
-  previewSettings: PreviewSettings;
-}) {
-  // Presets from shadow-explorer: multi-layer approaches at different depths
-  const presets = [
-    // 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" },
-  ];
-
-  return (
-    <div
-      className="grid gap-2"
-      style={{ gridTemplateColumns: "repeat(2, 1fr)" }}
-    >
-      {presets.map((preset) => {
-        const isActive = currentValue === preset.value;
-        return (
-          <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="flex items-center justify-center rounded-lg w-full"
-              style={{
-                background: previewSettings.previewBg,
-                height: 72,
-              }}
-            >
-              <ShadowPreview
-                value={preset.value}
-                size={48}
-                background="white"
-                showBorder={previewSettings.showBorder}
-                borderColor={previewSettings.borderColor}
-              />
-            </div>
-            <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)" }}
-                >
-                  {preset.desc}
-                </div>
-              )}
-            </div>
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,111 +0,0 @@
-import { useState } from "react";
-import { ShadowPreview } from "./shadow-preview.js";
-import type { PreviewSettings } from "./shadow-preview-settings.js";
-
-interface ShadowOverviewProps {
-  shadows: any[];
-  previewSettings: PreviewSettings;
-}
-
-type OverviewSize = "small" | "large";
-
-export function ShadowOverview({ shadows, previewSettings }: ShadowOverviewProps) {
-  const [size, setSize] = useState<OverviewSize>("small");
-
-  return (
-    <div>
-      {/* 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>
-
-      {/* Shadow grid */}
-      {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>
-          ))}
-        </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
-          className="px-4 py-6 text-center text-[11px]"
-          style={{ color: "var(--studio-text-dimmed)" }}
-        >
-          No shadows to display
-        </div>
-      )}
-    </div>
-  );
-}

package/src/client/components/shadow-preview-settings.tsx

@@ -1,210 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { Half2Icon } from "@radix-ui/react-icons";
-
-export interface PreviewSettings {
-  previewBg: string;
-  showBorder: boolean;
-  borderColor: string;
-}
-
-export const DEFAULT_PREVIEW_SETTINGS: PreviewSettings = {
-  previewBg: "rgb(240, 244, 250)",
-  showBorder: false,
-  borderColor: "#e8e8e8",
-};
-
-const BG_SWATCHES = [
-  { name: "Soft Blue", value: "rgb(240, 244, 250)" },
-  { name: "White", value: "white" },
-  { name: "Light Gray", value: "#f0f0f0" },
-  { name: "Gray", value: "#e0e0e0" },
-  { name: "Mid Gray", value: "#d0d0d0" },
-  { name: "Dark Gray", value: "#bbb" },
-];
-
-const BORDER_COLORS = [
-  { name: "Lightest", value: "#eee" },
-  { name: "Light", value: "#e0e0e0" },
-  { name: "Medium", value: "#d0d0d0" },
-  { name: "Dark", value: "#bbb" },
-];
-
-interface ShadowPreviewSettingsProps {
-  settings: PreviewSettings;
-  onChange: (settings: PreviewSettings) => void;
-}
-
-export function ShadowPreviewSettingsButton({
-  settings,
-  onChange,
-}: ShadowPreviewSettingsProps) {
-  const [open, setOpen] = useState(false);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(e.target as Node) &&
-        buttonRef.current &&
-        !buttonRef.current.contains(e.target as Node)
-      ) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
-  return (
-    <div style={{ position: "relative" }}>
-      <button
-        ref={buttonRef}
-        onClick={() => setOpen(!open)}
-        className="cursor-pointer"
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          padding: "3px 8px 3px 6px",
-          borderRadius: 6,
-          fontSize: 10,
-          fontWeight: 500,
-          color: open ? "var(--studio-accent)" : "var(--studio-text-dimmed)",
-          background: open ? "var(--studio-accent-muted)" : "var(--studio-input-bg)",
-          border: "1px solid",
-          borderColor: open ? "var(--studio-accent)" : "var(--studio-border)",
-          transition: "all 0.15s",
-        }}
-      >
-        <Half2Icon style={{ width: 12, height: 12 }} />
-        Settings
-      </button>
-
-      {open && (
-        <div
-          ref={popoverRef}
-          style={{
-            position: "absolute",
-            top: "100%",
-            right: 0,
-            marginTop: 4,
-            background: "var(--studio-surface)",
-            border: "1px solid var(--studio-border)",
-            borderRadius: 8,
-            padding: "12px 14px",
-            zIndex: 100,
-            width: 248,
-            boxShadow: "0 8px 24px rgb(0 0 0 / 0.15)",
-          }}
-        >
-          <div className="flex flex-col gap-3.5">
-            {/* Background */}
-            <div>
-              <div
-                className="text-[9px] font-semibold uppercase tracking-wide mb-2"
-                style={{ color: "var(--studio-text-dimmed)" }}
-              >
-                Preview Background
-              </div>
-              <div className="flex gap-1.5">
-                {BG_SWATCHES.map((bg) => (
-                  <button
-                    key={bg.value}
-                    onClick={() =>
-                      onChange({ ...settings, previewBg: bg.value })
-                    }
-                    className="shrink-0 cursor-pointer"
-                    title={bg.name}
-                    style={{
-                      width: 24,
-                      height: 24,
-                      borderRadius: 5,
-                      background: bg.value,
-                      border:
-                        settings.previewBg === bg.value
-                          ? "2px solid var(--studio-accent)"
-                          : "1px solid var(--studio-border)",
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-
-            {/* Borders */}
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <div
-                  className="text-[9px] font-semibold uppercase tracking-wide"
-                  style={{ color: "var(--studio-text-dimmed)" }}
-                >
-                  Show card borders
-                </div>
-                <button
-                  onClick={() =>
-                    onChange({
-                      ...settings,
-                      showBorder: !settings.showBorder,
-                    })
-                  }
-                  className="shrink-0 cursor-pointer"
-                  style={{
-                    width: 34,
-                    height: 20,
-                    borderRadius: 10,
-                    border: "1px solid var(--studio-border)",
-                    background: settings.showBorder
-                      ? "var(--studio-accent)"
-                      : "var(--studio-input-bg)",
-                    position: "relative",
-                    transition: "background 0.15s",
-                  }}
-                >
-                  <div
-                    style={{
-                      width: 14,
-                      height: 14,
-                      borderRadius: "50%",
-                      background: "white",
-                      position: "absolute",
-                      top: 2,
-                      left: settings.showBorder ? 16 : 2,
-                      transition: "left 0.15s",
-                      boxShadow: "0 1px 2px rgb(0 0 0 / 0.15)",
-                    }}
-                  />
-                </button>
-              </div>
-              {settings.showBorder && (
-                <div className="flex gap-1.5">
-                  {BORDER_COLORS.map((bc) => (
-                    <button
-                      key={bc.value}
-                      onClick={() =>
-                        onChange({ ...settings, borderColor: bc.value })
-                      }
-                      className="shrink-0 cursor-pointer"
-                      title={bc.name}
-                      style={{
-                        width: 24,
-                        height: 24,
-                        borderRadius: 5,
-                        background: bc.value,
-                        border:
-                          settings.borderColor === bc.value
-                            ? "2px solid var(--studio-accent)"
-                            : "1px solid var(--studio-border)",
-                      }}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-interface ShadowPreviewProps {
-  value: string;
-  size?: number;
-  shape?: "square" | "rounded" | "circle";
-  background?: string;
-  showBorder?: boolean;
-  borderColor?: string;
-}
-
-export function ShadowPreview({
-  value,
-  size = 32,
-  shape = "rounded",
-  background = "white",
-  showBorder = false,
-  borderColor = "#e0e0e0",
-}: ShadowPreviewProps) {
-  const borderRadius =
-    shape === "circle" ? "50%" : shape === "rounded" ? "4px" : "0";
-
-  return (
-    <div
-      className="shrink-0"
-      style={{
-        width: size,
-        height: size,
-        borderRadius,
-        background,
-        boxShadow: value,
-        border: showBorder ? `1px solid ${borderColor}` : "none",
-      }}
-    />
-  );
-}