@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/TokenStylePanel.tsx

@@ -1,699 +0,0 @@
-/**
- * Token-Aware Style Comparison Panel
- *
- * Enhanced style comparison that shows:
- * - Property, Figma value, Rendered value, Match status
- * - Token names when values match design tokens
- * - Hardcoded value warnings
- * - Fix suggestions that can be copied
- */
-
-import { useState, useEffect, useCallback } from "react";
-import { Badge, Stack, Text, Button, Box } from "@fragments-sdk/ui";
-import type { DesignToken, EnhancedStyleDiffItem, TokenUsageSummary } from "../../core/index.js";
-import { Palette } from "@phosphor-icons/react";
-import { CheckIcon, XIcon, LoadingIcon, FigmaIcon, WandIcon } from "./Icons.js";
-import { PanelShell } from "./PanelShell.js";
-
-// Alias for semantic clarity
-const SyncingIcon = LoadingIcon;
-
-/**
- * Maps CSS properties to expected token categories
- * This prevents false positives like "height: 49px" matching "--top-bar-height"
- */
-const PROPERTY_CATEGORY_MAP: Record<string, string[]> = {
-  // Color properties
-  color: ["color"],
-  backgroundColor: ["color"],
-  borderColor: ["color", "border"],
-  borderTopColor: ["color", "border"],
-  borderRightColor: ["color", "border"],
-  borderBottomColor: ["color", "border"],
-  borderLeftColor: ["color", "border"],
-  outlineColor: ["color"],
-  fill: ["color"],
-  stroke: ["color"],
-  caretColor: ["color"],
-  textDecorationColor: ["color"],
-  boxShadow: ["shadow", "color"],
-
-  // Spacing properties
-  margin: ["spacing"],
-  marginTop: ["spacing"],
-  marginRight: ["spacing"],
-  marginBottom: ["spacing"],
-  marginLeft: ["spacing"],
-  padding: ["spacing"],
-  paddingTop: ["spacing"],
-  paddingRight: ["spacing"],
-  paddingBottom: ["spacing"],
-  paddingLeft: ["spacing"],
-  gap: ["spacing"],
-  rowGap: ["spacing"],
-  columnGap: ["spacing"],
-
-  // Sizing properties (NOT spacing - heights shouldn't match spacing tokens)
-  width: ["sizing"],
-  height: ["sizing"],
-  minWidth: ["sizing"],
-  minHeight: ["sizing"],
-  maxWidth: ["sizing"],
-  maxHeight: ["sizing"],
-
-  // Border radius
-  borderRadius: ["radius"],
-  borderTopLeftRadius: ["radius"],
-  borderTopRightRadius: ["radius"],
-  borderBottomLeftRadius: ["radius"],
-  borderBottomRightRadius: ["radius"],
-
-  // Typography
-  fontSize: ["typography"],
-  fontWeight: ["typography"],
-  lineHeight: ["typography"],
-  letterSpacing: ["typography"],
-  fontFamily: ["typography"],
-
-  // Border
-  borderWidth: ["border"],
-  borderTopWidth: ["border"],
-  borderRightWidth: ["border"],
-  borderBottomWidth: ["border"],
-  borderLeftWidth: ["border"],
-
-  // Z-index
-  zIndex: ["z-index"],
-
-  // Animation
-  transitionDuration: ["animation"],
-  animationDuration: ["animation"],
-  transitionDelay: ["animation"],
-  animationDelay: ["animation"],
-};
-
-/**
- * Get expected token categories for a CSS property
- */
-function getExpectedCategories(property: string): string[] | null {
-  return PROPERTY_CATEGORY_MAP[property] || null;
-}
-
-interface TokenStylePanelProps {
-  figmaUrl: string;
-  figmaStyles: Record<string, string> | null;
-  renderedStyles: Record<string, string> | null;
-  figmaLoading: boolean;
-  figmaError?: string;
-  onFetchFigma: () => void;
-  onRefreshRendered: () => void;
-}
-
-interface TokenData {
-  tokens: DesignToken[];
-  meta?: {
-    totalTokens: number;
-    parseTimeMs: number;
-  };
-}
-
-// Module-level cache for tokens to avoid refetching on tab switches
-let cachedTokenData: TokenData | null = null;
-let cachedTokenError: string | null = null;
-let tokenFetchPromise: Promise<void> | null = null;
-
-export function TokenStylePanel({
-  figmaUrl,
-  figmaStyles,
-  renderedStyles,
-  figmaLoading,
-  figmaError,
-  onFetchFigma,
-  onRefreshRendered,
-}: TokenStylePanelProps) {
-  const [tokenData, setTokenData] = useState<TokenData | null>(null);
-  const [tokenError, setTokenError] = useState<string | null>(null);
-  const [tokenLoading, setTokenLoading] = useState(false);
-  const [copiedFix, setCopiedFix] = useState<string | null>(null);
-
-  // Fetch tokens on mount (with module-level caching)
-  useEffect(() => {
-    // Use cached data if available
-    if (cachedTokenData) {
-      setTokenData(cachedTokenData);
-      setTokenLoading(false);
-      return;
-    }
-    if (cachedTokenError) {
-      setTokenError(cachedTokenError);
-      setTokenLoading(false);
-      return;
-    }
-
-    // If a fetch is already in progress, wait for it
-    if (tokenFetchPromise) {
-      setTokenLoading(true);
-      tokenFetchPromise.then(() => {
-        setTokenData(cachedTokenData);
-        setTokenError(cachedTokenError);
-        setTokenLoading(false);
-      });
-      return;
-    }
-
-    const fetchTokens = async () => {
-      setTokenLoading(true);
-      setTokenError(null);
-
-      try {
-        const response = await fetch("/fragments/tokens");
-
-        if (!response.ok) {
-          const data = await response.json();
-          if (data.error) {
-            cachedTokenError = data.suggestion || data.error;
-            setTokenError(cachedTokenError);
-          }
-          return;
-        }
-
-        const data = await response.json();
-        cachedTokenData = data;
-        setTokenData(data);
-      } catch (err) {
-        cachedTokenError = "Failed to fetch tokens";
-        setTokenError(cachedTokenError);
-      } finally {
-        setTokenLoading(false);
-        tokenFetchPromise = null;
-      }
-    };
-
-    tokenFetchPromise = fetchTokens();
-  }, []);
-
-  /**
-   * Find a token by value, filtered by property category to avoid false positives.
-   * Returns null if no appropriate token is found.
-   */
-  const tokenByValue = useCallback(
-    (value: string, property?: string): { token: DesignToken; confidence: "exact" | "value-only" } | null => {
-      if (!tokenData?.tokens) return null;
-
-      const normalized = normalizeValue(value);
-      const expectedCategories = property ? getExpectedCategories(property) : null;
-
-      // First pass: look for exact category match
-      for (const token of tokenData.tokens) {
-        const tokenNormalized = normalizeValue(token.resolvedValue);
-        if (tokenNormalized === normalized) {
-          // Check if this token's category matches what we expect for this property
-          if (expectedCategories && expectedCategories.includes(token.category)) {
-            return { token, confidence: "exact" };
-          }
-        }
-      }
-
-      // Second pass: if we have expectedCategories but found no match, don't return anything
-      // This prevents "height: 49px" from matching "--top-bar-height" (a sizing token when we want sizing)
-      if (expectedCategories) {
-        return null;
-      }
-
-      // Fallback: if we don't know the property type, return any matching token
-      // but mark it as "value-only" confidence
-      for (const token of tokenData.tokens) {
-        const tokenNormalized = normalizeValue(token.resolvedValue);
-        if (tokenNormalized === normalized) {
-          return { token, confidence: "value-only" };
-        }
-      }
-
-      return null;
-    },
-    [tokenData]
-  );
-
-  // Copy fix to clipboard
-  const copyFix = useCallback((property: string, tokenName: string) => {
-    const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase();
-    const code = `${cssProperty}: var(${tokenName});`;
-    navigator.clipboard.writeText(code);
-    setCopiedFix(property);
-    setTimeout(() => setCopiedFix(null), 2000);
-  }, []);
-
-  // Determine empty config for error / idle states
-  const emptyConfig = (() => {
-    if (!figmaLoading && figmaError) {
-      return {
-        icon: <Palette size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
-        title: "Style comparison failed",
-        description: figmaError,
-        action: <Button variant="secondary" size="sm" onClick={onFetchFigma}>Retry</Button>,
-      };
-    }
-    if (!figmaLoading && !figmaStyles) {
-      return {
-        icon: <Palette size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
-        title: "No style data",
-        description: "Load Figma styles to compare design tokens with rendered output.",
-        action: <Button size="sm" onClick={onFetchFigma}>Load Styles</Button>,
-      };
-    }
-    return undefined;
-  })();
-
-  // Build comparison data (safe — only used when figmaStyles exist, i.e. PanelShell renders children)
-  const figma = figmaStyles || {};
-  const rendered = renderedStyles || {};
-  const allProps = [...new Set([...Object.keys(figma), ...Object.keys(rendered)])];
-
-  const properties = allProps.map((prop) => {
-    const figmaValue = figma[prop] || "(not set)";
-    const renderedValue = rendered[prop] || "(not set)";
-    const match = compareValue(prop, figma[prop] || "", rendered[prop] || "");
-
-    const figmaMatch = figma[prop] ? tokenByValue(figma[prop], prop) : null;
-    const renderedMatch = rendered[prop] ? tokenByValue(rendered[prop], prop) : null;
-
-    const figmaToken = figmaMatch?.token || null;
-    const renderedToken = renderedMatch?.token || null;
-    const figmaConfidence = figmaMatch?.confidence;
-    const renderedConfidence = renderedMatch?.confidence;
-
-    const isHardcoded = !!figmaToken && !renderedToken && figma[prop] !== rendered[prop];
-
-    return {
-      property: prop,
-      figma: figmaValue,
-      rendered: renderedValue,
-      match,
-      figmaToken,
-      renderedToken,
-      figmaConfidence,
-      renderedConfidence,
-      isHardcoded,
-    };
-  });
-
-  const differences = properties.filter((p) => !p.match).length;
-  const hardcodedCount = properties.filter((p) => p.isHardcoded).length;
-  const fixableCount = properties.filter((p) => p.isHardcoded && p.figmaToken).length;
-  const tokenUsageCount = properties.filter((p) => p.renderedToken).length;
-
-  const compliancePercent =
-    properties.length > 0
-      ? Math.round(((tokenUsageCount + properties.filter((p) => p.match && !p.figmaToken).length) / properties.length) * 100)
-      : 100;
-
-  // Toolbar with token status + summary badges (only when data is loaded)
-  const toolbar = figmaStyles ? (
-    <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
-      <Stack direction="row" align="center" gap="md">
-        {tokenData && (
-          <Text size="xs" color="tertiary">
-            {tokenData.meta?.totalTokens || tokenData.tokens.length} tokens loaded
-          </Text>
-        )}
-        {tokenLoading && (
-          <Stack direction="row" align="center" gap="xs" style={{ color: 'var(--text-tertiary)' }}>
-            <SyncingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
-            <Text size="xs">Loading tokens...</Text>
-          </Stack>
-        )}
-        {tokenError && !tokenLoading && (
-          <Text size="xs" style={{ color: '#d97706' }} title={tokenError}>
-            Tokens not configured
-          </Text>
-        )}
-      </Stack>
-
-      <Stack direction="row" align="center" gap="sm">
-        {tokenData && (
-          <Badge
-            variant={compliancePercent >= 80 ? 'success' : compliancePercent >= 50 ? 'warning' : 'danger'}
-          >
-            {compliancePercent}% token compliance
-          </Badge>
-        )}
-
-        <Badge variant={differences === 0 ? 'success' : 'warning'}>
-          {differences === 0 ? "All styles match" : `${differences} difference${differences !== 1 ? "s" : ""}`}
-        </Badge>
-
-        {hardcodedCount > 0 && (
-          <Badge variant="danger">
-            {hardcodedCount} hardcoded
-          </Badge>
-        )}
-      </Stack>
-    </Stack>
-  ) : undefined;
-
-  return (
-    <PanelShell loading={figmaLoading} toolbar={toolbar} empty={emptyConfig}>
-      <div style={{ overflowX: 'auto' }}>
-        {/* Comparison Table */}
-        <table style={{ width: '100%', fontSize: '12px' }}>
-          <thead>
-            <tr style={{ borderBottom: '1px solid var(--border)' }}>
-              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Property</th>
-              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Figma</th>
-              {tokenData && (
-                <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Token</th>
-              )}
-              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Rendered</th>
-              <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '48px' }}>Match</th>
-              {tokenData && fixableCount > 0 && (
-                <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '64px' }}>Fix</th>
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {properties.map((prop, index) => (
-              <tr
-                key={prop.property}
-                style={{
-                  borderBottom: index < properties.length - 1 ? '1px solid var(--border)' : undefined,
-                  background: prop.isHardcoded
-                    ? 'color-mix(in srgb, #ef4444 5%, transparent)'
-                    : !prop.match
-                    ? 'color-mix(in srgb, #f59e0b 5%, transparent)'
-                    : undefined,
-                }}
-              >
-                <td style={{ padding: '8px 12px', fontFamily: 'monospace', color: 'var(--text-primary)' }}>{prop.property}</td>
-                <td style={{ padding: '8px 12px' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                    {isColorProperty(prop.property) && prop.figma !== "(not set)" && (
-                      <ColorSwatch color={prop.figma} />
-                    )}
-                    <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.figma}>
-                      {prop.figma}
-                    </span>
-                  </div>
-                </td>
-                {tokenData && (
-                  <td style={{ padding: '8px 12px' }}>
-                    {prop.figmaToken ? (
-                      <TokenBadge token={prop.figmaToken} confidence={prop.figmaConfidence} />
-                    ) : prop.renderedToken ? (
-                      <TokenBadge token={prop.renderedToken} confidence={prop.renderedConfidence} />
-                    ) : (
-                      <span style={{ color: 'var(--text-tertiary)' }}>-</span>
-                    )}
-                  </td>
-                )}
-                <td style={{ padding: '8px 12px' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                    {isColorProperty(prop.property) && prop.rendered !== "(not set)" && (
-                      <ColorSwatch color={prop.rendered} />
-                    )}
-                    <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.rendered}>
-                      {prop.rendered}
-                    </span>
-                    {prop.isHardcoded && (
-                      <Badge variant="danger">HC</Badge>
-                    )}
-                  </div>
-                </td>
-                <td style={{ padding: '8px 12px', textAlign: 'center' }}>
-                  {prop.match ? (
-                    <CheckIcon style={{ width: 16, height: 16, color: '#16a34a', margin: '0 auto' }} />
-                  ) : (
-                    <XIcon style={{ width: 16, height: 16, color: '#d97706', margin: '0 auto' }} />
-                  )}
-                </td>
-                {tokenData && fixableCount > 0 && (
-                  <td style={{ padding: '8px 12px', textAlign: 'center' }}>
-                    {prop.isHardcoded && prop.figmaToken && (
-                      <button
-                        onClick={() => copyFix(prop.property, prop.figmaToken!.name)}
-                        style={{
-                          padding: '4px',
-                          borderRadius: '4px',
-                          transition: 'color 0.15s, background 0.15s',
-                          background: copiedFix === prop.property ? 'color-mix(in srgb, #22c55e 15%, transparent)' : 'transparent',
-                          color: copiedFix === prop.property ? '#16a34a' : 'var(--text-tertiary)',
-                          border: 'none',
-                          cursor: 'pointer',
-                        }}
-                        title={`Copy: ${prop.property.replace(/([A-Z])/g, "-$1").toLowerCase()}: var(${prop.figmaToken.name});`}
-                      >
-                        {copiedFix === prop.property ? (
-                          <CheckIcon style={{ width: 12, height: 12 }} />
-                        ) : (
-                          <WandIcon style={{ width: 12, height: 12 }} />
-                        )}
-                      </button>
-                    )}
-                  </td>
-                )}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-
-        {/* Hardcoded fixes summary */}
-        {hardcodedCount > 0 && tokenData && (
-          <Box padding="sm" rounded="md" style={{ marginTop: '16px', background: 'color-mix(in srgb, #f59e0b 8%, transparent)', border: '1px solid color-mix(in srgb, #f59e0b 20%, transparent)' }}>
-            <Stack direction="row" align="start" gap="sm">
-              <WandIcon style={{ width: 16, height: 16, color: '#d97706', marginTop: '2px' }} />
-              <div>
-                <Text size="xs" weight="medium" style={{ color: '#92400e' }}>
-                  {hardcodedCount} hardcoded value{hardcodedCount !== 1 ? "s" : ""} detected
-                </Text>
-                <Text size="xs" style={{ color: '#a16207', marginTop: '4px' }}>
-                  These values should use design tokens for consistency and theming support.
-                  Click the fix button to copy the token-based CSS.
-                </Text>
-              </div>
-            </Stack>
-          </Box>
-        )}
-      </div>
-    </PanelShell>
-  );
-}
-
-// ----- Helper Components -----
-
-/**
- * Enhanced tooltip showing full token details on hover
- */
-function TokenBadge({
-  token,
-  confidence,
-}: {
-  token: DesignToken;
-  confidence?: "exact" | "value-only";
-}) {
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  const isValueOnly = confidence === "value-only";
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <span
-        style={{
-          fontFamily: 'monospace',
-          fontSize: '12px',
-          cursor: 'help',
-          padding: '2px 6px',
-          borderRadius: '4px',
-          color: isValueOnly ? '#d97706' : 'var(--color-accent)',
-          background: isValueOnly
-            ? 'color-mix(in srgb, #f59e0b 8%, transparent)'
-            : 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
-        }}
-        onMouseEnter={() => setShowTooltip(true)}
-        onMouseLeave={() => setShowTooltip(false)}
-      >
-        {token.name}
-      </span>
-
-      {/* Enhanced tooltip */}
-      {showTooltip && (
-        <div
-          style={{
-            position: 'absolute',
-            zIndex: 50,
-            left: 0,
-            top: '100%',
-            marginTop: '4px',
-            padding: '12px',
-            background: 'var(--bg-primary)',
-            border: '1px solid var(--border)',
-            borderRadius: '8px',
-            boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
-            minWidth: '280px',
-            maxWidth: '320px',
-          }}
-        >
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '12px' }}>
-            {/* Token name */}
-            <div>
-              <span style={{ color: 'var(--text-tertiary)' }}>Token:</span>
-              <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--text-primary)', fontWeight: 500 }}>{token.name}</span>
-            </div>
-
-            {/* Resolved value */}
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <span style={{ color: 'var(--text-tertiary)' }}>Value:</span>
-              <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--text-secondary)' }}>{token.resolvedValue}</span>
-              {token.category === "color" && (
-                <ColorSwatch color={token.resolvedValue} />
-              )}
-            </div>
-
-            {/* Raw value (if different from resolved) */}
-            {token.rawValue !== token.resolvedValue && (
-              <div>
-                <span style={{ color: 'var(--text-tertiary)' }}>Raw:</span>
-                <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--text-secondary)' }}>{token.rawValue}</span>
-              </div>
-            )}
-
-            {/* Category & Level */}
-            <div style={{ display: 'flex', gap: '16px' }}>
-              <div>
-                <span style={{ color: 'var(--text-tertiary)' }}>Category:</span>
-                <span style={{ marginLeft: '8px', color: 'var(--text-secondary)', textTransform: 'capitalize' }}>{token.category}</span>
-              </div>
-              <div>
-                <span style={{ color: 'var(--text-tertiary)' }}>Level:</span>
-                <span style={{ marginLeft: '8px', color: 'var(--text-secondary)' }}>
-                  {token.level === 1 ? "Base" : token.level === 2 ? "Semantic" : "Component"}
-                </span>
-              </div>
-            </div>
-
-            {/* Theme */}
-            <div>
-              <span style={{ color: 'var(--text-tertiary)' }}>Theme:</span>
-              <span style={{ marginLeft: '8px', color: 'var(--text-secondary)' }}>{token.theme}</span>
-            </div>
-
-            {/* Reference chain (if has references) */}
-            {token.referenceChain.length > 1 && (
-              <div>
-                <span style={{ color: 'var(--text-tertiary)' }}>References:</span>
-                <div style={{ marginTop: '4px', fontFamily: 'monospace', color: 'var(--text-secondary)', fontSize: '10px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                  {token.referenceChain.map((ref, i) => (
-                    <div key={ref} style={{ display: 'flex', alignItems: 'center' }}>
-                      {i > 0 && <span style={{ marginRight: '4px', color: 'var(--text-tertiary)' }}>&rarr;</span>}
-                      <span>{ref}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Source file */}
-            <div style={{ paddingTop: '4px', borderTop: '1px solid var(--border)' }}>
-              <span style={{ color: 'var(--text-tertiary)' }}>Source:</span>
-              <span style={{ marginLeft: '8px', fontFamily: 'monospace', fontSize: '10px', color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                {token.sourceFile.split("/").slice(-2).join("/")}
-                {token.lineNumber && `:${token.lineNumber}`}
-              </span>
-            </div>
-
-            {/* Confidence indicator */}
-            {confidence === "value-only" && (
-              <div style={{ paddingTop: '4px', color: '#d97706' }}>
-                Warning: Value match only - verify this is the correct token
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ColorSwatch({ color }: { color: string }) {
-  return (
-    <div
-      style={{
-        width: '16px',
-        height: '16px',
-        borderRadius: '4px',
-        border: '1px solid var(--border)',
-        flexShrink: 0,
-        marginLeft: '4px',
-        backgroundColor: color,
-      }}
-      title={color}
-    />
-  );
-}
-
-// ----- Helper Functions -----
-
-function isColorProperty(prop: string): boolean {
-  const colorProps = ["backgroundColor", "borderColor", "color", "fill", "stroke"];
-  return colorProps.includes(prop) || prop.toLowerCase().includes("color");
-}
-
-/**
- * Normalize a CSS value for comparison.
- * Handles colors (hex, rgb, rgba) and general values.
- */
-function normalizeValue(value: string): string {
-  if (!value) return "";
-
-  const trimmed = value.toLowerCase().trim();
-
-  // Already normalized hex
-  if (trimmed.match(/^#[0-9a-f]{6}$/i)) {
-    return trimmed;
-  }
-
-  // Short hex -> long hex
-  const shortHex = trimmed.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
-  if (shortHex) {
-    return `#${shortHex[1]}${shortHex[1]}${shortHex[2]}${shortHex[2]}${shortHex[3]}${shortHex[3]}`;
-  }
-
-  // Parse hex
-  const hexMatch = trimmed.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (hexMatch) {
-    return trimmed;
-  }
-
-  // Parse rgb/rgba
-  const rgbMatch = value.match(
-    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+)?\s*\)/
-  );
-  if (rgbMatch) {
-    const r = parseInt(rgbMatch[1], 10).toString(16).padStart(2, "0");
-    const g = parseInt(rgbMatch[2], 10).toString(16).padStart(2, "0");
-    const b = parseInt(rgbMatch[3], 10).toString(16).padStart(2, "0");
-    return `#${r}${g}${b}`;
-  }
-
-  return trimmed;
-}
-
-function compareValue(prop: string, figma: string, rendered: string): boolean {
-  if (figma === rendered) return true;
-  if (!figma || !rendered) return false;
-
-  // Color comparison
-  if (isColorProperty(prop)) {
-    return normalizeValue(figma) === normalizeValue(rendered);
-  }
-
-  // Numeric comparison with near-zero tolerance for floating point rounding only
-  // Using < 0.1 ensures 1px vs 2px shows as mismatch, while 1.0001px vs 1px matches
-  const figmaNum = parseFloat(figma);
-  const renderedNum = parseFloat(rendered);
-  if (!isNaN(figmaNum) && !isNaN(renderedNum)) {
-    return Math.abs(figmaNum - renderedNum) < 0.1;
-  }
-
-  return false;
-}
-
-export default TokenStylePanel;