@antigenic-oss/paint 0.1.0

package/src/components/right-panel/design/PropertiesSection.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useEditorStore } from '@/store'
+import { SectionHeader } from '@/components/right-panel/design/inputs/SectionHeader'
+
+export function PropertiesSection() {
+  const tagName = useEditorStore((s) => s.tagName)
+  const elementId = useEditorStore((s) => s.elementId)
+  const className = useEditorStore((s) => s.className)
+  const attributes = useEditorStore((s) => s.attributes)
+
+  const classes = className ? className.split(/\s+/).filter(Boolean) : []
+  const attrEntries = Object.entries(attributes).filter(
+    ([key]) => key !== 'class' && key !== 'id' && key !== 'style',
+  )
+
+  return (
+    <SectionHeader title="Properties" defaultOpen={false}>
+      <div className="space-y-2 font-mono text-[11px]">
+        {/* Tag name */}
+        <div className="flex items-center gap-2">
+          <span style={{ color: 'var(--text-secondary)' }}>Tag</span>
+          <span style={{ color: 'var(--text-primary)' }}>{tagName || '—'}</span>
+        </div>
+
+        {/* Element ID */}
+        {elementId && (
+          <div className="flex items-center gap-2">
+            <span style={{ color: 'var(--text-secondary)' }}>ID</span>
+            <span style={{ color: 'var(--accent)' }}>#{elementId}</span>
+          </div>
+        )}
+
+        {/* Classes */}
+        {classes.length > 0 && (
+          <div>
+            <span
+              className="block mb-1"
+              style={{ color: 'var(--text-secondary)' }}
+            >
+              Classes
+            </span>
+            <div className="flex flex-wrap gap-1">
+              {classes.map((cls, i) => (
+                <span
+                  key={i}
+                  className="px-1.5 py-0.5 rounded text-[10px]"
+                  style={{
+                    background: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid var(--border)',
+                  }}
+                >
+                  .{cls}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Attributes */}
+        {attrEntries.length > 0 && (
+          <div>
+            <span
+              className="block mb-1"
+              style={{ color: 'var(--text-secondary)' }}
+            >
+              Attributes
+            </span>
+            <div className="space-y-0.5">
+              {attrEntries.map(([key, value]) => (
+                <div key={key}>
+                  <span style={{ color: 'var(--accent)' }}>{key}</span>
+                  <span style={{ color: 'var(--text-muted)' }}>=</span>
+                  <span style={{ color: 'var(--text-primary)' }}>
+                    &quot;{value}&quot;
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </SectionHeader>
+  )
+}

package/src/components/right-panel/design/SVGSection.tsx

@@ -0,0 +1,361 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { useEditorStore } from '@/store'
+import { SectionHeader } from '@/components/right-panel/design/inputs/SectionHeader'
+import { ColorInput } from '@/components/right-panel/design/inputs/ColorInput'
+import { useChangeTracker } from '@/hooks/useChangeTracker'
+import { sendViaIframe } from '@/hooks/usePostMessage'
+import { generateId } from '@/lib/utils'
+
+const SVG_PROPERTIES = ['fill', 'stroke']
+
+// ─── Save as Variable Row ──────────────────────────────────────
+
+function SaveAsVariableRow({
+  property,
+  onSave,
+  existingVarName,
+  onRemove,
+}: {
+  property: string
+  onSave: (varName: string) => void
+  existingVarName: string | null
+  onRemove: () => void
+}) {
+  const [editing, setEditing] = useState(false)
+  const [varName, setVarName] = useState(`--svg-${property}`)
+
+  const handleSave = () => {
+    const name = varName.trim()
+    if (!name) return
+    // Ensure it starts with --
+    const finalName = name.startsWith('--') ? name : `--${name}`
+    onSave(finalName)
+    setEditing(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleSave()
+    if (e.key === 'Escape') setEditing(false)
+  }
+
+  if (existingVarName) {
+    return (
+      <div className="flex items-center gap-1.5 pl-1">
+        <span
+          className="text-[10px] truncate flex-1"
+          style={{ color: 'var(--accent)' }}
+        >
+          {existingVarName}
+        </span>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="text-[10px] px-1.5 py-0.5 rounded shrink-0"
+          style={{
+            color: 'var(--text-muted)',
+            background: 'var(--bg-tertiary)',
+          }}
+          title="Remove variable"
+        >
+          Remove
+        </button>
+      </div>
+    )
+  }
+
+  if (editing) {
+    return (
+      <div className="flex items-center gap-1 pl-1">
+        <input
+          autoFocus
+          value={varName}
+          onChange={(e) => setVarName(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className="flex-1 h-6 rounded text-[11px] px-1.5 outline-none min-w-0"
+          style={{
+            background: 'var(--bg-tertiary)',
+            border: '1px solid var(--accent)',
+            color: 'var(--text-primary)',
+          }}
+          placeholder="--variable-name"
+        />
+        <button
+          type="button"
+          onClick={handleSave}
+          className="text-[10px] px-1.5 py-0.5 rounded shrink-0"
+          style={{ color: '#fff', background: 'var(--accent)' }}
+        >
+          Save
+        </button>
+        <button
+          type="button"
+          onClick={() => setEditing(false)}
+          className="text-[10px] px-1.5 py-0.5 rounded shrink-0"
+          style={{
+            color: 'var(--text-muted)',
+            background: 'var(--bg-tertiary)',
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => setEditing(true)}
+      className="flex items-center gap-1 pl-1 text-[10px] transition-colors hover:opacity-80"
+      style={{
+        color: 'var(--text-muted)',
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+      }}
+    >
+      <svg width={10} height={10} viewBox="0 0 12 12" fill="none">
+        <path
+          d="M2 2h3v8H2zM7 2h3v8H7z"
+          stroke="currentColor"
+          strokeWidth={1}
+          strokeLinecap="round"
+        />
+        <path
+          d="M5 6h2"
+          stroke="currentColor"
+          strokeWidth={1}
+          strokeLinecap="round"
+        />
+      </svg>
+      Save as variable
+    </button>
+  )
+}
+
+// ─── Helpers ────────────────────────────────────────────────────
+
+/** Extract variable name from a var() expression */
+function extractVarName(value: string): string | null {
+  const match = value.match(/^var\((--[^,)]+)\)/)
+  return match ? match[1] : null
+}
+
+/** Resolve a var() value by looking up the :root change in the store */
+function resolveVarValue(value: string): string | null {
+  const varName = extractVarName(value)
+  if (!varName) return null
+  const { styleChanges } = useEditorStore.getState()
+  const rootChange = styleChanges.find(
+    (c) => c.elementSelector === ':root' && c.property === varName,
+  )
+  return rootChange ? rootChange.newValue : null
+}
+
+// ─── Main Component ─────────────────────────────────────────────
+
+export function SVGSection() {
+  const computedStyles = useEditorStore((state) => state.computedStyles)
+  const cssVariableUsages = useEditorStore((state) => state.cssVariableUsages)
+  const addStyleChange = useEditorStore((s) => s.addStyleChange)
+  const removeStyleChange = useEditorStore((s) => s.removeStyleChange)
+  const { applyChange, resetProperty } = useChangeTracker()
+
+  // Track which properties have been saved as variables
+  const fillVarName = useEditorStore((s) => {
+    const sp = s.selectorPath
+    if (!sp) return null
+    const fillChange = s.styleChanges.find(
+      (c) => c.elementSelector === sp && c.property === 'fill',
+    )
+    if (fillChange) return extractVarName(fillChange.newValue)
+    return null
+  })
+
+  const strokeVarName = useEditorStore((s) => {
+    const sp = s.selectorPath
+    if (!sp) return null
+    const strokeChange = s.styleChanges.find(
+      (c) => c.elementSelector === sp && c.property === 'stroke',
+    )
+    if (strokeChange) return extractVarName(strokeChange.newValue)
+    return null
+  })
+
+  const hasChanges = useEditorStore((s) => {
+    const sp = s.selectorPath
+    if (!sp) return false
+    return s.styleChanges.some(
+      (c) => c.elementSelector === sp && SVG_PROPERTIES.includes(c.property),
+    )
+  })
+
+  const handleResetAll = () => {
+    const { selectorPath, styleChanges } = useEditorStore.getState()
+    if (!selectorPath) return
+    const matching = styleChanges.filter(
+      (c) =>
+        c.elementSelector === selectorPath &&
+        SVG_PROPERTIES.includes(c.property),
+    )
+    for (const c of matching) {
+      // Also remove associated :root variable definitions
+      const varName = extractVarName(c.newValue)
+      if (varName) {
+        const rootChange = styleChanges.find(
+          (rc) => rc.elementSelector === ':root' && rc.property === varName,
+        )
+        if (rootChange) removeStyleChange(rootChange.id)
+        // Revert the :root inline style in the iframe
+        sendViaIframe({
+          type: 'REVERT_CHANGE',
+          payload: { selectorPath: ':root', property: varName },
+        })
+      }
+      resetProperty(c.property)
+    }
+  }
+
+  const handleColorChange = useCallback(
+    (property: string, value: string) => applyChange(property, value),
+    [applyChange],
+  )
+
+  const handleSaveAsVariable = useCallback(
+    (property: 'fill' | 'stroke', varName: string) => {
+      const { selectorPath, styleChanges, activeBreakpoint, changeScope } =
+        useEditorStore.getState()
+      if (!selectorPath) return
+
+      // Get the current color value (from existing change or computed styles)
+      const existingChange = styleChanges.find(
+        (c) => c.elementSelector === selectorPath && c.property === property,
+      )
+      const colorValue = existingChange
+        ? existingChange.newValue
+        : useEditorStore.getState().computedStyles[property] || ''
+
+      if (!colorValue) return
+
+      // 1. Add :root variable definition change
+      addStyleChange({
+        id: generateId(),
+        elementSelector: ':root',
+        property: varName,
+        originalValue: '',
+        newValue: colorValue,
+        breakpoint: activeBreakpoint,
+        timestamp: Date.now(),
+        changeScope,
+      })
+
+      // 2. Apply the variable on :root in the iframe
+      sendViaIframe({
+        type: 'PREVIEW_CHANGE',
+        payload: {
+          selectorPath: ':root',
+          property: varName,
+          value: colorValue,
+        },
+      })
+
+      // 3. Update the fill/stroke to use var() reference
+      applyChange(property, `var(${varName})`)
+    },
+    [applyChange, addStyleChange],
+  )
+
+  const handleRemoveVariable = useCallback(
+    (property: 'fill' | 'stroke') => {
+      const { selectorPath, styleChanges } = useEditorStore.getState()
+      if (!selectorPath) return
+
+      // Find the fill/stroke change with var() reference
+      const propChange = styleChanges.find(
+        (c) => c.elementSelector === selectorPath && c.property === property,
+      )
+      if (!propChange) return
+
+      const varName = extractVarName(propChange.newValue)
+      if (!varName) return
+
+      // Resolve the color value from the :root change
+      const resolved = resolveVarValue(propChange.newValue)
+
+      // Remove the :root variable definition
+      const rootChange = styleChanges.find(
+        (c) => c.elementSelector === ':root' && c.property === varName,
+      )
+      if (rootChange) removeStyleChange(rootChange.id)
+
+      // Revert :root inline style in iframe
+      sendViaIframe({
+        type: 'REVERT_CHANGE',
+        payload: { selectorPath: ':root', property: varName },
+      })
+
+      // Restore fill/stroke to the resolved color value
+      if (resolved) {
+        applyChange(property, resolved)
+      }
+    },
+    [applyChange, removeStyleChange],
+  )
+
+  // Resolve display values: if the value is var(), show the resolved color
+  const rawFill = computedStyles.fill || ''
+  const rawStroke = computedStyles.stroke || ''
+  const fillDisplay = extractVarName(rawFill)
+    ? resolveVarValue(rawFill) || rawFill
+    : rawFill
+  const strokeDisplay = extractVarName(rawStroke)
+    ? resolveVarValue(rawStroke) || rawStroke
+    : rawStroke
+
+  return (
+    <SectionHeader
+      title="SVG"
+      defaultOpen={true}
+      hasChanges={hasChanges}
+      onReset={handleResetAll}
+    >
+      <div className="space-y-2.5">
+        {/* Fill */}
+        <div className="space-y-1">
+          <ColorInput
+            label="Fill"
+            value={fillDisplay}
+            property="fill"
+            onChange={handleColorChange}
+            varExpression={cssVariableUsages['fill']}
+          />
+          <SaveAsVariableRow
+            property="fill"
+            existingVarName={fillVarName}
+            onSave={(name) => handleSaveAsVariable('fill', name)}
+            onRemove={() => handleRemoveVariable('fill')}
+          />
+        </div>
+
+        {/* Stroke */}
+        <div className="space-y-1">
+          <ColorInput
+            label="Stroke"
+            value={strokeDisplay}
+            property="stroke"
+            onChange={handleColorChange}
+            varExpression={cssVariableUsages['stroke']}
+          />
+          <SaveAsVariableRow
+            property="stroke"
+            existingVarName={strokeVarName}
+            onSave={(name) => handleSaveAsVariable('stroke', name)}
+            onRemove={() => handleRemoveVariable('stroke')}
+          />
+        </div>
+      </div>
+    </SectionHeader>
+  )
+}

package/src/components/right-panel/design/ShadowBlurSection.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useEditorStore } from '@/store'
+import { SectionHeader } from '@/components/right-panel/design/inputs/SectionHeader'
+import { CompactInput } from '@/components/right-panel/design/inputs/CompactInput'
+import { ColorPicker } from '@/components/common/ColorPicker'
+import {
+  PlusIcon,
+  TrashIcon,
+  InsetIcon,
+} from '@/components/right-panel/design/icons'
+import { parseShadow, serializeShadow } from '@/lib/shadowParser'
+import { useChangeTracker } from '@/hooks/useChangeTracker'
+import type { ShadowData } from '@/types/shadow'
+
+const SHADOW_PROPERTIES = ['boxShadow', 'filter']
+
+const DEFAULT_SHADOW: ShadowData = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: 'rgba(0,0,0,0.25)',
+  inset: false,
+}
+
+export function ShadowBlurSection() {
+  const computedStyles = useEditorStore((state) => state.computedStyles)
+  const { applyChange, resetProperty } = useChangeTracker()
+
+  const hasChanges = useEditorStore((s) => {
+    const sp = s.selectorPath
+    if (!sp) return false
+    return s.styleChanges.some(
+      (c) => c.elementSelector === sp && SHADOW_PROPERTIES.includes(c.property),
+    )
+  })
+
+  const handleResetAll = () => {
+    const { selectorPath, styleChanges } = useEditorStore.getState()
+    if (!selectorPath) return
+    const matching = styleChanges.filter(
+      (c) =>
+        c.elementSelector === selectorPath &&
+        SHADOW_PROPERTIES.includes(c.property),
+    )
+    for (const c of matching) resetProperty(c.property)
+  }
+
+  const boxShadow = computedStyles.boxShadow || 'none'
+  const filter = computedStyles.filter || 'none'
+
+  const shadows = useMemo(() => parseShadow(boxShadow), [boxShadow])
+
+  // Extract blur value from filter
+  const filterBlurMatch = filter.match(/blur\((\d+(?:\.\d+)?)px\)/)
+  const filterBlurValue = filterBlurMatch ? filterBlurMatch[1] : '0'
+
+  const updateShadows = (newShadows: ShadowData[]) => {
+    applyChange('boxShadow', serializeShadow(newShadows))
+  }
+
+  const updateShadow = (index: number, updates: Partial<ShadowData>) => {
+    const newShadows = shadows.map((s, i) =>
+      i === index ? { ...s, ...updates } : s,
+    )
+    updateShadows(newShadows)
+  }
+
+  const addShadow = () => {
+    updateShadows([...shadows, { ...DEFAULT_SHADOW }])
+  }
+
+  const removeShadow = (index: number) => {
+    updateShadows(shadows.filter((_, i) => i !== index))
+  }
+
+  const handleFilterBlurChange = (_property: string, value: string) => {
+    const num = parseFloat(value)
+    if (!isNaN(num) && num > 0) {
+      applyChange('filter', `blur(${num}px)`)
+    } else {
+      applyChange('filter', 'none')
+    }
+  }
+
+  return (
+    <SectionHeader
+      title="Shadow & Blur"
+      defaultOpen={false}
+      hasChanges={hasChanges}
+      onReset={handleResetAll}
+      actions={
+        <button
+          type="button"
+          onClick={addShadow}
+          className="flex items-center justify-center w-5 h-5 rounded hover:opacity-80"
+          style={{ color: 'var(--text-muted)' }}
+          title="Add shadow"
+        >
+          <PlusIcon />
+        </button>
+      }
+    >
+      {/* Shadow layers */}
+      {shadows.map((shadow, i) => (
+        <div
+          key={i}
+          className="space-y-1 pb-2"
+          style={{ borderBottom: '1px solid var(--border)' }}
+        >
+          <div className="flex items-center justify-between">
+            <span
+              className="text-[10px] font-medium"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              Shadow {shadows.length > 1 ? i + 1 : ''}
+            </span>
+            <div className="flex items-center gap-0.5">
+              <button
+                type="button"
+                onClick={() => updateShadow(i, { inset: !shadow.inset })}
+                className="flex items-center justify-center w-5 h-5 rounded hover:opacity-80"
+                style={{
+                  color: shadow.inset ? 'var(--accent)' : 'var(--text-muted)',
+                  background: shadow.inset
+                    ? 'var(--accent-bg, rgba(74,158,255,0.15))'
+                    : 'transparent',
+                }}
+                title="Inset"
+              >
+                <InsetIcon />
+              </button>
+              <button
+                type="button"
+                onClick={() => removeShadow(i)}
+                className="flex items-center justify-center w-5 h-5 rounded hover:opacity-80"
+                style={{ color: 'var(--text-muted)' }}
+                title="Remove"
+              >
+                <TrashIcon />
+              </button>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-1">
+            <CompactInput
+              label="X"
+              value={`${shadow.x}px`}
+              property={`shadow-${i}-x`}
+              onChange={(_p, v) => {
+                const num = parseFloat(v)
+                if (!isNaN(num)) updateShadow(i, { x: num })
+              }}
+              units={['px']}
+            />
+            <CompactInput
+              label="Y"
+              value={`${shadow.y}px`}
+              property={`shadow-${i}-y`}
+              onChange={(_p, v) => {
+                const num = parseFloat(v)
+                if (!isNaN(num)) updateShadow(i, { y: num })
+              }}
+              units={['px']}
+            />
+            <CompactInput
+              label="B"
+              value={`${shadow.blur}px`}
+              property={`shadow-${i}-blur`}
+              onChange={(_p, v) => {
+                const num = parseFloat(v)
+                if (!isNaN(num)) updateShadow(i, { blur: Math.max(0, num) })
+              }}
+              units={['px']}
+              min={0}
+            />
+            <CompactInput
+              label="S"
+              value={`${shadow.spread}px`}
+              property={`shadow-${i}-spread`}
+              onChange={(_p, v) => {
+                const num = parseFloat(v)
+                if (!isNaN(num)) updateShadow(i, { spread: num })
+              }}
+              units={['px']}
+            />
+          </div>
+          <ColorPicker
+            label="Color"
+            value={shadow.color}
+            onChange={(c) => updateShadow(i, { color: c })}
+            onSelectVariable={(varExpr) => updateShadow(i, { color: varExpr })}
+          />
+        </div>
+      ))}
+
+      {shadows.length === 0 && (
+        <div
+          className="text-[11px] py-1"
+          style={{ color: 'var(--text-muted)' }}
+        >
+          No shadows. Click + to add one.
+        </div>
+      )}
+
+      {/* Filter blur */}
+      <div className="pt-1">
+        <div
+          className="text-[10px] font-medium mb-1"
+          style={{ color: 'var(--text-muted)' }}
+        >
+          Filter Blur
+        </div>
+        <CompactInput
+          label="B"
+          value={`${filterBlurValue}px`}
+          property="filter"
+          onChange={handleFilterBlurChange}
+          units={['px']}
+          min={0}
+          className="w-1/2"
+        />
+      </div>
+    </SectionHeader>
+  )
+}