@aprovan/patchwork 0.1.0

package/packages/bobbin/src/components/EditPanel/sections/EffectsSection.tsx

@@ -0,0 +1,85 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { QuickSelectDropdown } from '../controls/QuickSelectDropdown';
+import { SliderInput } from '../controls/SliderInput';
+
+interface EffectsSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+export function EffectsSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false,
+}: EffectsSectionProps) {
+  const boxShadow = computedStyle.boxShadow;
+  const borderRadius = computedStyle.borderRadius;
+  const borderWidth = computedStyle.borderWidth;
+  const opacity = parseFloat(computedStyle.opacity) * 100;
+
+  return (
+    <SectionWrapper title="Effects" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      {/* Border Radius */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Radius
+        </label>
+        <QuickSelectDropdown
+          value={borderRadius}
+          tokens={tokens.borderRadius}
+          quickKeys={['none', 'sm', 'md', 'lg', 'full']}
+          onChange={(value) => onApplyStyle('border-radius', value)}
+        />
+      </div>
+
+      {/* Border Width */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Width
+        </label>
+        <QuickSelectDropdown
+          value={borderWidth}
+          tokens={tokens.borderWidth}
+          quickKeys={['0', 'DEFAULT', '2', '4']}
+          onChange={(value) => onApplyStyle('border-width', value)}
+        />
+      </div>
+
+      {/* Box Shadow */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Shadow
+        </label>
+        <QuickSelectDropdown
+          value={boxShadow}
+          tokens={tokens.boxShadow}
+          quickKeys={['none', 'sm', 'md', 'lg']}
+          onChange={(value) => onApplyStyle('box-shadow', value)}
+        />
+      </div>
+
+      {/* Opacity */}
+      <div>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Opacity
+        </label>
+        <SliderInput
+          value={opacity}
+          min={0}
+          max={100}
+          step={1}
+          unit="%"
+          onChange={(value) => onApplyStyle('opacity', String(value / 100))}
+        />
+      </div>
+    </SectionWrapper>
+  );
+}

package/packages/bobbin/src/components/EditPanel/sections/LayoutSection.tsx

@@ -0,0 +1,224 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { ToggleGroup } from '../controls/ToggleGroup';
+import { TokenDropdown } from '../controls/TokenDropdown';
+
+// Direction icons
+const ArrowRightIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="5" y1="12" x2="19" y2="12" />
+    <polyline points="12 5 19 12 12 19" />
+  </svg>
+);
+
+const ArrowLeftIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="19" y1="12" x2="5" y2="12" />
+    <polyline points="12 19 5 12 12 5" />
+  </svg>
+);
+
+const ArrowDownIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <polyline points="19 12 12 19 5 12" />
+  </svg>
+);
+
+const ArrowUpIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="12" y1="19" x2="12" y2="5" />
+    <polyline points="5 12 12 5 19 12" />
+  </svg>
+);
+
+// Justify icons
+const JustifyStartIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="4" x2="3" y2="20" />
+    <rect x="7" y="8" width="4" height="8" rx="1" />
+    <rect x="13" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyCenterIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="6" y="8" width="4" height="8" rx="1" />
+    <rect x="14" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyEndIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="21" y1="4" x2="21" y2="20" />
+    <rect x="7" y="8" width="4" height="8" rx="1" />
+    <rect x="13" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyBetweenIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="4" x2="3" y2="20" />
+    <line x1="21" y1="4" x2="21" y2="20" />
+    <rect x="6" y="8" width="4" height="8" rx="1" />
+    <rect x="14" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyAroundIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="4" y="8" width="4" height="8" rx="1" />
+    <rect x="10" y="8" width="4" height="8" rx="1" />
+    <rect x="16" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+// Align icons
+const AlignStartIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="3" x2="20" y2="3" />
+    <rect x="6" y="6" width="4" height="10" rx="1" />
+    <rect x="14" y="6" width="4" height="6" rx="1" />
+  </svg>
+);
+
+const AlignCenterVIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="6" y="5" width="4" height="14" rx="1" />
+    <rect x="14" y="7" width="4" height="10" rx="1" />
+  </svg>
+);
+
+const AlignEndIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="21" x2="20" y2="21" />
+    <rect x="6" y="8" width="4" height="10" rx="1" />
+    <rect x="14" y="12" width="4" height="6" rx="1" />
+  </svg>
+);
+
+const AlignStretchIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="3" x2="20" y2="3" />
+    <line x1="4" y1="21" x2="20" y2="21" />
+    <rect x="6" y="6" width="4" height="12" rx="1" />
+    <rect x="14" y="6" width="4" height="12" rx="1" />
+  </svg>
+);
+
+interface LayoutSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+export function LayoutSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false,
+}: LayoutSectionProps) {
+  const display = computedStyle.display;
+  const flexDirection = computedStyle.flexDirection;
+  const justifyContent = computedStyle.justifyContent;
+  const alignItems = computedStyle.alignItems;
+  const gap = computedStyle.gap;
+
+  const isFlex = display === 'flex' || display === 'inline-flex';
+  const isGrid = display === 'grid' || display === 'inline-grid';
+
+  return (
+    <SectionWrapper title="Layout" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      {/* Display */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Display
+        </label>
+        <ToggleGroup
+          value={display}
+          options={[
+            { value: 'block', label: 'Block' },
+            { value: 'flex', label: 'Flex' },
+            { value: 'grid', label: 'Grid' },
+            { value: 'inline', label: 'Inline' },
+            { value: 'none', label: 'None' },
+          ]}
+          onChange={(value) => onApplyStyle('display', value)}
+        />
+      </div>
+
+      {/* Flex-specific controls */}
+      {isFlex && (
+        <>
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+              Direction
+            </label>
+            <ToggleGroup
+              value={flexDirection}
+              options={[
+                { value: 'row', label: <ArrowRightIcon /> },
+                { value: 'row-reverse', label: <ArrowLeftIcon /> },
+                { value: 'column', label: <ArrowDownIcon /> },
+                { value: 'column-reverse', label: <ArrowUpIcon /> },
+              ]}
+              onChange={(value) => onApplyStyle('flex-direction', value)}
+            />
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+              Justify
+            </label>
+            <ToggleGroup
+              value={justifyContent}
+              options={[
+                { value: 'flex-start', label: <JustifyStartIcon /> },
+                { value: 'center', label: <JustifyCenterIcon /> },
+                { value: 'flex-end', label: <JustifyEndIcon /> },
+                { value: 'space-between', label: <JustifyBetweenIcon /> },
+                { value: 'space-around', label: <JustifyAroundIcon /> },
+              ]}
+              onChange={(value) => onApplyStyle('justify-content', value)}
+            />
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+              Align
+            </label>
+            <ToggleGroup
+              value={alignItems}
+              options={[
+                { value: 'flex-start', label: <AlignStartIcon /> },
+                { value: 'center', label: <AlignCenterVIcon /> },
+                { value: 'flex-end', label: <AlignEndIcon /> },
+                { value: 'stretch', label: <AlignStretchIcon /> },
+              ]}
+              onChange={(value) => onApplyStyle('align-items', value)}
+            />
+          </div>
+        </>
+      )}
+
+      {/* Gap (for flex and grid) */}
+      {(isFlex || isGrid) && (
+        <div style={{ marginBottom: '12px' }}>
+          <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+            Gap
+          </label>
+          <TokenDropdown
+            value={gap}
+            tokens={tokens.spacing}
+            onChange={(value) => onApplyStyle('gap', value)}
+          />
+        </div>
+      )}
+    </SectionWrapper>
+  );
+}

package/packages/bobbin/src/components/EditPanel/sections/SectionWrapper.tsx

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+
+interface SectionWrapperProps {
+  title: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+  hasChanges?: boolean;
+}
+
+export function SectionWrapper({ title, expanded, onToggle, children, hasChanges = false }: SectionWrapperProps) {
+  return (
+    <div style={{ borderBottom: '1px solid #f4f4f5' }}>
+      <button
+        onClick={onToggle}
+        style={{
+          width: '100%',
+          padding: '8px 12px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: hasChanges ? '#eff6ff' : 'transparent',
+          border: 'none',
+          cursor: 'pointer',
+          color: '#18181b',
+          fontSize: '11px',
+          fontWeight: 500,
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}
+      >
+        <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          {title}
+          {hasChanges && (
+            <span
+              style={{
+                width: '6px',
+                height: '6px',
+                borderRadius: '50%',
+                backgroundColor: '#3b82f6',
+              }}
+              title="Has unsaved changes"
+            />
+          )}
+        </span>
+        <span style={{ fontSize: '10px', color: '#a1a1aa' }}>
+          {expanded ? '▲' : '▼'}
+        </span>
+      </button>
+      {expanded && (
+        <div style={{ padding: '0 12px 12px' }}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/bobbin/src/components/EditPanel/sections/SizeSection.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { SliderInput } from '../controls/SliderInput';
+
+// Common size presets
+const sizePresets: Record<string, string> = {
+  'auto': 'auto',
+  'full': '100%',
+  'fit': 'fit-content',
+  'min': 'min-content',
+  'max': 'max-content',
+  'screen': '100vh',
+};
+
+interface SizeSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+// Component for size input with quick presets and slider
+function SizeInput({
+  label,
+  value,
+  property,
+  onApplyStyle,
+}: {
+  label: string;
+  value: string;
+  property: string;
+  onApplyStyle: (property: string, value: string) => void;
+}) {
+  const [showSlider, setShowSlider] = useState(false);
+  const numericValue = parseFloat(value) || 0;
+
+  // Check if current value matches a preset
+  const isPresetSelected = (presetValue: string) => {
+    return value.toLowerCase() === presetValue.toLowerCase();
+  };
+
+  return (
+    <div style={{ marginBottom: '10px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a' }}>{label}</label>
+        <button
+          onClick={() => setShowSlider(!showSlider)}
+          style={{
+            padding: '1px 4px',
+            borderRadius: '2px',
+            border: '1px solid #e4e4e7',
+            backgroundColor: showSlider ? '#18181b' : '#ffffff',
+            color: showSlider ? '#fafafa' : '#71717a',
+            fontSize: '8px',
+            cursor: 'pointer',
+          }}
+          title="Toggle custom size slider"
+        >
+          px
+        </button>
+      </div>
+      
+      {/* Quick presets */}
+      <div style={{ display: 'flex', gap: '2px', flexWrap: 'wrap', marginBottom: showSlider ? '6px' : 0 }}>
+        {Object.entries(sizePresets).slice(0, 5).map(([key, presetValue]) => (
+          <button
+            key={key}
+            onClick={() => onApplyStyle(property, presetValue)}
+            style={{
+              padding: '2px 5px',
+              borderRadius: '3px',
+              border: '1px solid',
+              borderColor: isPresetSelected(presetValue) ? '#18181b' : '#e4e4e7',
+              backgroundColor: isPresetSelected(presetValue) ? '#18181b' : '#ffffff',
+              color: isPresetSelected(presetValue) ? '#fafafa' : '#18181b',
+              fontSize: '9px',
+              fontFamily: 'ui-monospace, monospace',
+              cursor: 'pointer',
+              transition: 'all 0.1s ease',
+            }}
+            title={presetValue}
+          >
+            {key}
+          </button>
+        ))}
+      </div>
+
+      {/* Slider for custom values */}
+      {showSlider && (
+        <SliderInput
+          value={numericValue}
+          min={0}
+          max={1000}
+          onChange={(v) => onApplyStyle(property, `${v}px`)}
+        />
+      )}
+    </div>
+  );
+}
+
+export function SizeSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  hasChanges = false,
+}: SizeSectionProps) {
+  const width = computedStyle.width;
+  const height = computedStyle.height;
+  const minWidth = computedStyle.minWidth;
+  const maxWidth = computedStyle.maxWidth;
+  const minHeight = computedStyle.minHeight;
+  const maxHeight = computedStyle.maxHeight;
+
+  return (
+    <SectionWrapper title="Size" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+        <SizeInput
+          label="Width"
+          value={width}
+          property="width"
+          onApplyStyle={onApplyStyle}
+        />
+        <SizeInput
+          label="Height"
+          value={height}
+          property="height"
+          onApplyStyle={onApplyStyle}
+        />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+        <SizeInput
+          label="Min W"
+          value={minWidth}
+          property="min-width"
+          onApplyStyle={onApplyStyle}
+        />
+        <SizeInput
+          label="Max W"
+          value={maxWidth}
+          property="max-width"
+          onApplyStyle={onApplyStyle}
+        />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+        <SizeInput
+          label="Min H"
+          value={minHeight}
+          property="min-height"
+          onApplyStyle={onApplyStyle}
+        />
+        <SizeInput
+          label="Max H"
+          value={maxHeight}
+          property="max-height"
+          onApplyStyle={onApplyStyle}
+        />
+      </div>
+    </SectionWrapper>
+  );
+}

package/packages/bobbin/src/components/EditPanel/sections/SpacingSection.tsx

@@ -0,0 +1,69 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { SpacingControl } from '../controls/SpacingControl';
+
+interface SpacingSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+  changedProps?: Record<string, boolean>;
+}
+
+export function SpacingSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  hasChanges = false,
+  changedProps = {},
+}: SpacingSectionProps) {
+  const margin = {
+    top: computedStyle.marginTop,
+    right: computedStyle.marginRight,
+    bottom: computedStyle.marginBottom,
+    left: computedStyle.marginLeft,
+  };
+
+  const padding = {
+    top: computedStyle.paddingTop,
+    right: computedStyle.paddingRight,
+    bottom: computedStyle.paddingBottom,
+    left: computedStyle.paddingLeft,
+  };
+
+  const marginChanges = {
+    top: changedProps['margin-top'],
+    right: changedProps['margin-right'],
+    bottom: changedProps['margin-bottom'],
+    left: changedProps['margin-left'],
+  };
+
+  const paddingChanges = {
+    top: changedProps['padding-top'],
+    right: changedProps['padding-right'],
+    bottom: changedProps['padding-bottom'],
+    left: changedProps['padding-left'],
+  };
+
+  return (
+    <SectionWrapper title="Spacing" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      <div style={{ marginBottom: '16px' }}>
+        <SpacingControl
+          label="Margin"
+          values={margin}
+          onChange={(side, value) => onApplyStyle(`margin-${side}`, value)}
+          hasChanges={marginChanges}
+        />
+      </div>
+      <SpacingControl
+        label="Padding"
+        values={padding}
+        onChange={(side, value) => onApplyStyle(`padding-${side}`, value)}
+        hasChanges={paddingChanges}
+      />
+    </SectionWrapper>
+  );
+}