radtools 0.1.0

package/templates/devtools/tabs/TypographyTab/TypographyStylesDisplay.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import React from 'react';
+import { useDevToolsStore } from '../../store';
+import type { TypographyStyle } from '../../types';
+
+// Sample text for each element type
+const SAMPLE_TEXT: Record<string, string> = {
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+  p: 'The quick brown fox jumps over the lazy dog.',
+  a: 'Click this link',
+  ul: 'List item example',
+  ol: 'Numbered item',
+  li: 'Item content',
+  small: 'Small fine print text',
+  strong: 'Strong importance',
+  em: 'Emphasized text',
+  code: 'inline code',
+  pre: 'code block\nexample',
+  kbd: 'Ctrl+C',
+  mark: 'Highlighted text',
+  blockquote: 'A wise quote goes here.',
+  cite: 'Citation reference',
+  abbr: 'HTML',
+  dfn: 'Definition term',
+  q: 'Inline quotation',
+  sub: 'Subscript',
+  sup: 'Superscript',
+  del: 'Deleted text',
+  ins: 'Inserted text',
+  caption: 'Table caption',
+  label: 'Form label',
+  figcaption: 'Figure caption',
+};
+
+export function TypographyStylesDisplay() {
+  const { typographyStyles, fonts } = useDevToolsStore();
+
+  // Group styles by category
+  const headings = typographyStyles.filter(s => s.element.startsWith('h'));
+  const text = typographyStyles.filter(s => ['p', 'a'].includes(s.element));
+  const lists = typographyStyles.filter(s => ['ul', 'ol', 'li'].includes(s.element));
+  const code = typographyStyles.filter(s => ['code', 'pre', 'kbd', 'samp', 'var'].includes(s.element));
+  const semantic = typographyStyles.filter(s => ['strong', 'em', 'mark', 'del', 'ins', 'b', 'i', 'u', 's'].includes(s.element));
+  const quotations = typographyStyles.filter(s => ['blockquote', 'cite', 'q'].includes(s.element));
+  const captions = typographyStyles.filter(s => ['caption', 'small', 'figcaption', 'label'].includes(s.element));
+  const other = typographyStyles.filter(s => 
+    !s.element.startsWith('h') && 
+    !['p', 'a', 'ul', 'ol', 'li', 'code', 'pre', 'kbd', 'samp', 'var', 'strong', 'em', 'mark', 'del', 'ins', 'b', 'i', 'u', 's', 'blockquote', 'cite', 'q', 'caption', 'small', 'figcaption', 'label'].includes(s.element)
+  );
+
+  // Get font family for display
+  const getFontFamily = (fontFamilyId: string) => {
+    const font = fonts.find(f => f.id === fontFamilyId);
+    return font?.family || fontFamilyId;
+  };
+
+  // Build classes string
+  const buildClasses = (style: TypographyStyle) => {
+    const classes = [
+      style.fontSize,
+      style.fontWeight,
+      style.lineHeight,
+      style.letterSpacing,
+      ...(style.utilities || []),
+    ].filter(Boolean);
+    return classes.join(' ');
+  };
+
+  // Render a single style row
+  const renderStyleRow = (style: TypographyStyle) => {
+    const fontFamily = getFontFamily(style.fontFamilyId);
+    const classes = buildClasses(style);
+
+    return (
+      <div
+        key={style.id}
+        className="p-4 bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4"
+      >
+        {/* Element name and preview */}
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <code className="px-2 py-0.5 bg-black/10 rounded">
+              {`<${style.element}>`}
+            </code>
+            <span className="font-mondwest text-sm text-black/60">
+              {style.displayName}
+            </span>
+          </div>
+        </div>
+
+        {/* Live Preview - each element has data-edit-scope directly */}
+        <div className="py-2 px-3 bg-warm-cloud rounded-sm">
+          {style.element === 'h1' && <h1 data-edit-scope="layer-base">{SAMPLE_TEXT.h1}</h1>}
+          {style.element === 'h2' && <h2 data-edit-scope="layer-base">{SAMPLE_TEXT.h2}</h2>}
+          {style.element === 'h3' && <h3 data-edit-scope="layer-base">{SAMPLE_TEXT.h3}</h3>}
+          {style.element === 'h4' && <h4 data-edit-scope="layer-base">{SAMPLE_TEXT.h4}</h4>}
+          {style.element === 'h5' && <h5 data-edit-scope="layer-base">{SAMPLE_TEXT.h5}</h5>}
+          {style.element === 'h6' && <h6 data-edit-scope="layer-base">{SAMPLE_TEXT.h6}</h6>}
+          {style.element === 'p' && <p data-edit-scope="layer-base">{SAMPLE_TEXT.p}</p>}
+          {style.element === 'a' && <a href="#" data-edit-scope="layer-base">{SAMPLE_TEXT.a}</a>}
+          {style.element === 'ul' && (
+            <ul data-edit-scope="layer-base">
+              <li>{SAMPLE_TEXT.ul}</li>
+            </ul>
+          )}
+          {style.element === 'ol' && (
+            <ol data-edit-scope="layer-base">
+              <li>{SAMPLE_TEXT.ol}</li>
+            </ol>
+          )}
+          {style.element === 'li' && <li data-edit-scope="layer-base">{SAMPLE_TEXT.li}</li>}
+          {style.element === 'small' && <small data-edit-scope="layer-base">{SAMPLE_TEXT.small}</small>}
+          {style.element === 'strong' && <strong data-edit-scope="layer-base">{SAMPLE_TEXT.strong}</strong>}
+          {style.element === 'em' && <em data-edit-scope="layer-base">{SAMPLE_TEXT.em}</em>}
+          {style.element === 'code' && <code data-edit-scope="layer-base">{SAMPLE_TEXT.code}</code>}
+          {style.element === 'pre' && <pre data-edit-scope="layer-base">{SAMPLE_TEXT.pre}</pre>}
+          {style.element === 'kbd' && <kbd data-edit-scope="layer-base">{SAMPLE_TEXT.kbd}</kbd>}
+          {style.element === 'mark' && <mark data-edit-scope="layer-base">{SAMPLE_TEXT.mark}</mark>}
+          {style.element === 'blockquote' && <blockquote data-edit-scope="layer-base">{SAMPLE_TEXT.blockquote}</blockquote>}
+          {style.element === 'cite' && <cite data-edit-scope="layer-base">{SAMPLE_TEXT.cite}</cite>}
+          {style.element === 'abbr' && <abbr title="HyperText Markup Language" data-edit-scope="layer-base">{SAMPLE_TEXT.abbr}</abbr>}
+          {style.element === 'dfn' && <dfn data-edit-scope="layer-base">{SAMPLE_TEXT.dfn}</dfn>}
+          {style.element === 'q' && <q data-edit-scope="layer-base">{SAMPLE_TEXT.q}</q>}
+          {style.element === 'sub' && <sub data-edit-scope="layer-base">{SAMPLE_TEXT.sub}</sub>}
+          {style.element === 'sup' && <sup data-edit-scope="layer-base">{SAMPLE_TEXT.sup}</sup>}
+          {style.element === 'del' && <del data-edit-scope="layer-base">{SAMPLE_TEXT.del}</del>}
+          {style.element === 'ins' && <ins data-edit-scope="layer-base">{SAMPLE_TEXT.ins}</ins>}
+          {style.element === 'caption' && <caption data-edit-scope="layer-base">{SAMPLE_TEXT.caption}</caption>}
+          {style.element === 'label' && <label data-edit-scope="layer-base">{SAMPLE_TEXT.label}</label>}
+          {style.element === 'figcaption' && <figcaption data-edit-scope="layer-base">{SAMPLE_TEXT.figcaption}</figcaption>}
+        </div>
+
+        {/* Style Properties (read-only) */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+          <div className="flex items-center gap-2">
+            <span className="text-black/50">Font:</span>
+            <span className="text-black font-mono">{fontFamily}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-black/50">Size:</span>
+            <span className="text-black font-mono">{style.fontSize}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-black/50">Weight:</span>
+            <span className="text-black font-mono">{style.fontWeight}</span>
+          </div>
+          {style.lineHeight && (
+            <div className="flex items-center gap-2">
+              <span className="text-black/50">Line Height:</span>
+              <span className="text-black font-mono">{style.lineHeight}</span>
+            </div>
+          )}
+          {style.letterSpacing && (
+            <div className="flex items-center gap-2">
+              <span className="text-black/50">Tracking:</span>
+              <span className="text-black font-mono">{style.letterSpacing}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <span className="text-black/50">Color:</span>
+            <span className="text-black font-mono">{style.baseColorId}</span>
+          </div>
+          {style.utilities && style.utilities.length > 0 && (
+            <div className="flex items-center gap-2 col-span-2">
+              <span className="text-black/50">Utilities:</span>
+              <span className="text-black font-mono">{style.utilities.join(' ')}</span>
+            </div>
+          )}
+        </div>
+
+        {/* @apply classes (what will be written to CSS) */}
+        <div className="pt-2 border-t border-black/10">
+          <code>
+            @apply {classes}
+          </code>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Headings Section */}
+      <div id="typography-headings">
+        <h3 className="mb-3">
+          Headings
+        </h3>
+        <div className="space-y-2">
+          {headings.map(renderStyleRow)}
+        </div>
+      </div>
+
+      {/* Text Section */}
+      <div id="typography-text">
+        <h3 className="mb-3">
+          Text
+        </h3>
+        <div className="space-y-2">
+          {text.map(renderStyleRow)}
+        </div>
+      </div>
+
+      {/* Lists Section */}
+      <div id="typography-lists">
+        <h3 className="mb-3">
+          Lists
+        </h3>
+        <div className="space-y-2">
+          {lists.map(renderStyleRow)}
+        </div>
+      </div>
+
+      {/* Code Section */}
+      {code.length > 0 && (
+        <div id="typography-code">
+          <h3 className="mb-3">
+            Code
+          </h3>
+          <div className="space-y-2">
+            {code.map(renderStyleRow)}
+          </div>
+        </div>
+      )}
+
+      {/* Semantic Section */}
+      {semantic.length > 0 && (
+        <div id="typography-semantic">
+          <h3 className="mb-3">
+            Semantic
+          </h3>
+          <div className="space-y-2">
+            {semantic.map(renderStyleRow)}
+          </div>
+        </div>
+      )}
+
+      {/* Quotations Section */}
+      {quotations.length > 0 && (
+        <div id="typography-quotations">
+          <h3 className="mb-3">
+            Quotations
+          </h3>
+          <div className="space-y-2">
+            {quotations.map(renderStyleRow)}
+          </div>
+        </div>
+      )}
+
+      {/* Captions Section */}
+      {captions.length > 0 && (
+        <div id="typography-captions">
+          <h3 className="mb-3">
+            Captions & Labels
+          </h3>
+          <div className="space-y-2">
+            {captions.map(renderStyleRow)}
+          </div>
+        </div>
+      )}
+
+      {/* Other Section */}
+      {other.length > 0 && (
+        <div>
+          <h3 className="mb-3">
+            Other
+          </h3>
+          <div className="space-y-2">
+            {other.map(renderStyleRow)}
+          </div>
+        </div>
+      )}
+
+      {/* Note about editing */}
+      <div className="p-3 bg-sun-yellow/20 border border-tertiary rounded-sm">
+        <p>
+          Typography styles are display-only. Use the Cursor visual editor to modify these styles directly in your CSS.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default TypographyStylesDisplay;
+

package/templates/devtools/tabs/TypographyTab/index.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useDevToolsStore } from '../../store';
+import { FontManager } from './FontManager';
+import { TypographyStylesDisplay } from './TypographyStylesDisplay';
+import { Button } from '@/components/ui/Button';
+import { Divider } from '@/components/ui/Divider';
+
+interface TypographyTabProps {
+  searchQuery?: string;
+}
+
+export function TypographyTab({ searchQuery = '' }: TypographyTabProps) {
+  const { loadTypographyFromCSS, loadFontsFromFilesystem } = useDevToolsStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  // Load typography on mount
+  useEffect(() => {
+    loadTypographyFromCSS();
+  }, [loadTypographyFromCSS]);
+
+  // Handle reload
+  const handleReload = async () => {
+    setIsLoading(true);
+    setMessage(null);
+    try {
+      // Load fonts from filesystem (more accurate)
+      await loadFontsFromFilesystem();
+      // Load typography styles from CSS
+      await loadTypographyFromCSS();
+      setMessage({ type: 'success', text: 'Typography reloaded!' });
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Failed to reload typography.' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Clear message after 3 seconds
+  useEffect(() => {
+    if (message) {
+      const timer = setTimeout(() => setMessage(null), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [message]);
+
+  return (
+    <div className="flex flex-col h-full overflow-auto pt-4 pb-4 pl-4 pr-2 bg-[var(--color-white)] border border-black rounded space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2>
+          Typography
+        </h2>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="md"
+            iconName="refresh"
+            onClick={handleReload}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Reloading...' : 'Reload'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Status Message */}
+      {message && (
+        <div
+          className={`px-4 py-2 text-sm font-mondwest ${
+            message.type === 'success'
+              ? 'bg-success-green/30 text-black'
+              : 'bg-error-red/30 text-black'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="space-y-4">
+        {/* Font Manager Section */}
+        <FontManager />
+
+        {/* Divider */}
+        <Divider />
+
+        {/* Typography Styles Section */}
+        <TypographyStylesDisplay />
+      </div>
+    </div>
+  );
+}
+
+export default TypographyTab;
+

package/templates/devtools/tabs/VariablesTab/BaseColorEditor.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useState } from 'react';
+import { useDevToolsStore } from '../../store';
+import { Icon } from '@/components/icons';
+import type { BaseColor } from '../../types';
+
+/**
+ * BaseColorEditor - Edit brand and neutral base colors
+ * Two separate sections: Brand Colors and Neutral Colors
+ * Each row has: color swatch, editable name, editable hex, delete button
+ * Each section has: "+ Add Variable" button
+ */
+export function BaseColorEditor() {
+  const { baseColors, addBaseColor, updateBaseColor, deleteBaseColor } = useDevToolsStore();
+
+  const brandColors = baseColors.filter((c) => c.category === 'brand');
+  const neutralColors = baseColors.filter((c) => c.category === 'neutral');
+
+  return (
+    <div className="space-y-6">
+      {/* Brand Colors Section */}
+      <ColorSection
+        title="Brand Colors"
+        colors={brandColors}
+        category="brand"
+        onAdd={addBaseColor}
+        onUpdate={updateBaseColor}
+        onDelete={deleteBaseColor}
+      />
+
+      {/* Neutral Colors Section */}
+      <ColorSection
+        title="Neutrals"
+        colors={neutralColors}
+        category="neutral"
+        onAdd={addBaseColor}
+        onUpdate={updateBaseColor}
+        onDelete={deleteBaseColor}
+      />
+    </div>
+  );
+}
+
+interface ColorSectionProps {
+  title: string;
+  colors: BaseColor[];
+  category: 'brand' | 'neutral';
+  onAdd: (color: Omit<BaseColor, 'id'>) => void;
+  onUpdate: (id: string, updates: Partial<BaseColor>) => void;
+  onDelete: (id: string) => void;
+}
+
+function ColorSection({ title, colors, category, onAdd, onUpdate, onDelete }: ColorSectionProps) {
+  const [isAdding, setIsAdding] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newHex, setNewHex] = useState('#000000');
+
+  const handleAdd = () => {
+    if (!newName.trim()) return;
+    
+    const name = newName.trim().toLowerCase().replace(/\s+/g, '-');
+    const displayName = newName.trim()
+      .split(/[-_\s]+/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+    
+    onAdd({
+      name,
+      displayName,
+      value: newHex.toUpperCase(),
+      category,
+    });
+    
+    setNewName('');
+    setNewHex('#000000');
+    setIsAdding(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleAdd();
+    } else if (e.key === 'Escape') {
+      setIsAdding(false);
+      setNewName('');
+      setNewHex('#000000');
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Section Header */}
+      <h4>
+        {title}
+      </h4>
+
+      {/* Color List */}
+      <div className="space-y-1">
+        {colors.map((color) => (
+          <ColorRow
+            key={color.id}
+            color={color}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+          />
+        ))}
+      </div>
+
+      {/* Add New Row */}
+      {isAdding ? (
+        <div className="flex items-center gap-2 p-2 bg-sun-yellow/30 rounded-sm border border-dashed border-black">
+          {/* Color Picker */}
+          <input
+            type="color"
+            value={newHex}
+            onChange={(e) => setNewHex(e.target.value)}
+            className="w-6 h-6 rounded-xs border border-black cursor-pointer flex-shrink-0"
+          />
+          {/* Name Input */}
+          <input
+            type="text"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Color name"
+            autoFocus
+            className="flex-1 min-w-0 px-2 py-1 font-mondwest text-base bg-warm-cloud border border-black rounded-sm text-black focus:outline-none focus:ring-1 focus:ring-tertiary"
+          />
+          {/* Hex Input */}
+          <input
+            type="text"
+            value={newHex}
+            onChange={(e) => setNewHex(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="#000000"
+            className="w-24 px-2 py-1 font-mondwest text-sm font-mono bg-warm-cloud border border-black rounded-sm text-black uppercase focus:outline-none focus:ring-1 focus:ring-tertiary"
+          />
+          {/* Actions */}
+          <button
+            onClick={handleAdd}
+            className="font-mondwest text-base text-black hover:text-sun-yellow px-1 flex items-center"
+            title="Add"
+          >
+            <Icon name="checkmark-filled" size={16} />
+          </button>
+          <button
+            onClick={() => {
+              setIsAdding(false);
+              setNewName('');
+              setNewHex('#000000');
+            }}
+            className="font-mondwest text-base text-black/50 hover:text-black px-1 flex items-center"
+            title="Cancel"
+          >
+            <Icon name="close" size={16} />
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setIsAdding(true)}
+          className="
+            w-full py-2 px-3
+            font-joystix text-xs uppercase
+            text-black/50 hover:text-black
+            border border-dashed border-black/30 hover:border-black
+            rounded-sm
+            transition-colors
+          "
+        >
+          + Add Variable
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface ColorRowProps {
+  color: BaseColor;
+  onUpdate: (id: string, updates: Partial<BaseColor>) => void;
+  onDelete: (id: string) => void;
+}
+
+function ColorRow({ color, onUpdate, onDelete }: ColorRowProps) {
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [editedName, setEditedName] = useState(color.displayName);
+
+  const handleNameSubmit = () => {
+    if (editedName.trim() && editedName !== color.displayName) {
+      const name = editedName.trim().toLowerCase().replace(/\s+/g, '-');
+      onUpdate(color.id, {
+        name,
+        displayName: editedName.trim(),
+      });
+    }
+    setIsEditingName(false);
+  };
+
+  const handleNameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleNameSubmit();
+    } else if (e.key === 'Escape') {
+      setEditedName(color.displayName);
+      setIsEditingName(false);
+    }
+  };
+
+  const handleHexChange = (value: string) => {
+    // Allow typing and validate on blur
+    onUpdate(color.id, { value: value.toUpperCase() });
+  };
+
+  return (
+    <div className="flex items-center gap-2 p-2 rounded-sm hover:bg-black/5 group">
+      {/* Color Picker */}
+      <input
+        type="color"
+        value={color.value}
+        onChange={(e) => handleHexChange(e.target.value)}
+        className="w-6 h-6 rounded-xs border border-black cursor-pointer flex-shrink-0"
+      />
+
+      {/* Name (editable on click) */}
+      {isEditingName ? (
+        <input
+          type="text"
+          value={editedName}
+          onChange={(e) => setEditedName(e.target.value)}
+          onBlur={handleNameSubmit}
+          onKeyDown={handleNameKeyDown}
+          autoFocus
+          className="flex-1 min-w-0 px-2 py-1 font-mondwest text-base bg-warm-cloud border border-black rounded-sm text-black focus:outline-none focus:ring-1 focus:ring-tertiary"
+        />
+      ) : (
+        <span
+          onClick={() => {
+            setEditedName(color.displayName);
+            setIsEditingName(true);
+          }}
+          className="flex-1 min-w-0 font-mondwest text-base text-black truncate cursor-text hover:bg-black/5 px-2 py-1 rounded-sm"
+          title="Click to edit"
+        >
+          {color.displayName}
+        </span>
+      )}
+
+      {/* Hex Input */}
+      <input
+        type="text"
+        value={color.value}
+        onChange={(e) => handleHexChange(e.target.value)}
+        className="w-24 px-2 py-1 font-mondwest text-sm font-mono bg-warm-cloud border border-black rounded-sm text-black uppercase focus:outline-none focus:ring-1 focus:ring-tertiary"
+      />
+
+      {/* Delete Button */}
+      <button
+        onClick={() => onDelete(color.id)}
+        className="font-mondwest text-base text-error-red opacity-0 group-hover:opacity-100 hover:text-error-red/80 px-1 transition-opacity flex items-center"
+        title="Delete"
+      >
+        <Icon name="close" size={16} />
+      </button>
+    </div>
+  );
+}
+
+export default BaseColorEditor;
+

package/templates/devtools/tabs/VariablesTab/BorderRadiusEditor.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useDevToolsStore } from '../../store';
+
+const RADIUS_KEYS = ['none', 'xs', 'sm', 'md', 'lg', 'full'] as const;
+
+export function BorderRadiusEditor() {
+  const { borderRadius, updateBorderRadius } = useDevToolsStore();
+
+  return (
+    <div className="space-y-3">
+      <h3>Border Radius</h3>
+      
+      <div className="grid grid-cols-2 gap-2">
+        {RADIUS_KEYS.map((key) => (
+          <div key={key} className="flex items-center gap-2 p-2 bg-black/10 rounded-sm">
+            <div
+              className="w-8 h-8 bg-sun-yellow border border-black"
+              style={{ borderRadius: borderRadius[key] || '0' }}
+            />
+            <div className="flex-1">
+              <span className="font-mondwest text-base font-mono text-black block">{key}</span>
+              <input
+                type="text"
+                value={borderRadius[key] || ''}
+                onChange={(e) => updateBorderRadius(key, e.target.value)}
+                className="w-full px-1.5 py-0.5 font-mondwest text-base font-mono bg-warm-cloud border border-black rounded-sm text-black mt-0.5"
+                placeholder="0.5rem"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+