@aprovan/bobbin 0.1.0-dev.03aaf5b

package/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/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>
+  );
+}

package/src/components/EditPanel/sections/TypographySection.tsx

@@ -0,0 +1,148 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { TokenDropdown } from '../controls/TokenDropdown';
+import { QuickSelectDropdown } from '../controls/QuickSelectDropdown';
+import { ColorPicker } from '../controls/ColorPicker';
+import { ToggleGroup } from '../controls/ToggleGroup';
+
+// Text alignment icons
+const AlignLeftIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="3" y1="12" x2="15" y2="12" />
+    <line x1="3" y1="18" x2="18" y2="18" />
+  </svg>
+);
+
+const AlignCenterIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="6" y1="12" x2="18" y2="12" />
+    <line x1="4" y1="18" x2="20" y2="18" />
+  </svg>
+);
+
+const AlignRightIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="9" y1="12" x2="21" y2="12" />
+    <line x1="6" y1="18" x2="21" y2="18" />
+  </svg>
+);
+
+const AlignJustifyIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="3" y1="12" x2="21" y2="12" />
+    <line x1="3" y1="18" x2="21" y2="18" />
+  </svg>
+);
+
+interface TypographySectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+export function TypographySection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false,
+}: TypographySectionProps) {
+  const color = computedStyle.color;
+  const fontSize = computedStyle.fontSize;
+  const fontWeight = computedStyle.fontWeight;
+  const fontFamily = computedStyle.fontFamily;
+  const textAlign = computedStyle.textAlign;
+  const lineHeight = computedStyle.lineHeight;
+
+  return (
+    <SectionWrapper title="Typography" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      {/* Color */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Color
+        </label>
+        <ColorPicker
+          value={color}
+          colors={tokens.colors}
+          onChange={(value) => onApplyStyle('color', value)}
+        />
+      </div>
+
+      {/* Font Size */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Font Size
+        </label>
+        <QuickSelectDropdown
+          value={fontSize}
+          tokens={tokens.fontSize}
+          quickKeys={['xs', 'sm', 'base', 'lg', 'xl', '2xl']}
+          onChange={(value) => onApplyStyle('font-size', value)}
+        />
+      </div>
+
+      {/* Font Weight */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Font Weight
+        </label>
+        <QuickSelectDropdown
+          value={fontWeight}
+          tokens={tokens.fontWeight}
+          quickKeys={['light', 'normal', 'medium', 'semibold', 'bold']}
+          onChange={(value) => onApplyStyle('font-weight', value)}
+        />
+      </div>
+
+      {/* Font Family */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Font Family
+        </label>
+        <TokenDropdown
+          value={fontFamily}
+          tokens={tokens.fontFamily}
+          onChange={(value) => onApplyStyle('font-family', value)}
+        />
+      </div>
+
+      {/* Text Align */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Text Align
+        </label>
+        <ToggleGroup
+          value={textAlign}
+          options={[
+            { value: 'left', label: <AlignLeftIcon /> },
+            { value: 'center', label: <AlignCenterIcon /> },
+            { value: 'right', label: <AlignRightIcon /> },
+            { value: 'justify', label: <AlignJustifyIcon /> },
+          ]}
+          onChange={(value) => onApplyStyle('text-align', value)}
+        />
+      </div>
+
+      {/* Line Height */}
+      <div>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Line Height
+        </label>
+        <QuickSelectDropdown
+          value={lineHeight}
+          tokens={tokens.lineHeight}
+          quickKeys={['tight', 'snug', 'normal', 'relaxed']}
+          onChange={(value) => onApplyStyle('line-height', value)}
+        />
+      </div>
+    </SectionWrapper>
+  );
+}

package/src/components/Inspector/Inspector.tsx

@@ -0,0 +1,221 @@
+import { useState, useMemo } from 'react';
+import type { SelectedElement } from '../../types';
+
+interface InspectorProps {
+  selectedElement: SelectedElement;
+  onSelectElement: (el: HTMLElement) => void;
+  onClose?: () => void;
+  zIndex?: number;
+}
+
+export function Inspector({
+  selectedElement,
+  onSelectElement,
+  zIndex = 9999,
+}: InspectorProps) {
+  const [activeTab, setActiveTab] = useState<'tree' | 'styles' | 'attributes'>('attributes');
+  const [isMinimized, setIsMinimized] = useState(false);
+
+  const computedStyles = useMemo(() => {
+    const computed = window.getComputedStyle(selectedElement.element);
+    const styles: Record<string, string> = {};
+    
+    // Get commonly-inspected properties
+    const properties = [
+      'display', 'position', 'width', 'height', 'margin', 'padding',
+      'border', 'background', 'color', 'font-family', 'font-size',
+      'font-weight', 'line-height', 'text-align', 'flex', 'grid',
+    ];
+    
+    for (const prop of properties) {
+      styles[prop] = computed.getPropertyValue(prop);
+    }
+    
+    return styles;
+  }, [selectedElement.element]);
+
+  const attributes = useMemo(() => {
+    const attrs: Record<string, string> = {};
+    const el = selectedElement.element;
+    for (const attr of el.attributes) {
+      // Skip 'contenteditable'
+      if (attr.name.toLowerCase() === 'contenteditable') {
+        continue;
+      }
+      attrs[attr.name] = attr.value;
+    }
+    return attrs;
+  }, [selectedElement.element]);
+
+  // Build DOM tree path
+  const domPath = useMemo(() => {
+    const path: HTMLElement[] = [];
+    let el: HTMLElement | null = selectedElement.element;
+    while (el && el !== document.body) {
+      path.unshift(el);
+      el = el.parentElement;
+    }
+    return path;
+  }, [selectedElement.element]);
+
+  return (
+    <div
+      data-bobbin="inspector"
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        left: '16px',
+        width: isMinimized ? 'auto' : '320px',
+        maxHeight: isMinimized ? 'auto' : '260px',
+        backgroundColor: '#fafafa',
+        borderRadius: '8px',
+        border: '1px solid #e4e4e7',
+        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+        zIndex,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        color: '#18181b',
+        fontFamily: 'ui-monospace, SFMono-Regular, monospace',
+        fontSize: '11px',
+      }}
+    >
+      {/* Header with minimize/close controls */}
+      {isMinimized ? (
+        <div
+          style={{
+            padding: '6px 10px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            cursor: 'pointer',
+            backgroundColor: '#ffffff',
+          }}
+          onClick={() => setIsMinimized(false)}
+        >
+          <span style={{ fontSize: '10px', color: '#71717a' }}>Inspector</span>
+        </div>
+      ) : (
+        <>
+          {/* Tabs with close button */}
+          <div style={{ display: 'flex', borderBottom: '1px solid #e4e4e7', backgroundColor: '#ffffff' }}>
+            {(['styles', 'attributes'] as const).map(tab => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                style={{
+                  flex: 1,
+                  padding: '6px 8px',
+                  border: 'none',
+                  borderBottom: activeTab === tab ? '2px solid #18181b' : '2px solid transparent',
+                  backgroundColor: 'transparent',
+                  color: activeTab === tab ? '#18181b' : '#71717a',
+                  cursor: 'pointer',
+                  textTransform: 'capitalize',
+                  fontSize: '11px',
+                  fontWeight: activeTab === tab ? 500 : 400,
+                }}
+              >
+                {tab}
+              </button>
+            ))}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '2px', padding: '0 4px' }}>
+              <button
+                onClick={() => setIsMinimized(true)}
+                style={{
+                  width: '18px',
+                  height: '18px',
+                  borderRadius: '3px',
+                  border: 'none',
+                  backgroundColor: 'transparent',
+                  color: '#71717a',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '14px',
+                }}
+                title="Minimize"
+              >
+                −
+              </button>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div style={{ flex: 1, overflow: 'auto', padding: '6px' }}>
+            {activeTab === 'tree' && (
+              <div>
+                {domPath.map((el, i) => (
+                  <div
+                    key={i}
+                    onClick={() => onSelectElement(el)}
+                    style={{
+                      padding: '3px 6px',
+                      paddingLeft: `${i * 10 + 6}px`,
+                      cursor: 'pointer',
+                      backgroundColor: el === selectedElement.element ? '#18181b' : 'transparent',
+                      color: el === selectedElement.element ? '#fafafa' : '#18181b',
+                      borderRadius: '3px',
+                      marginBottom: '1px',
+                    }}
+                  >
+                    <span style={{ color: el === selectedElement.element ? '#a1a1aa' : '#52525b' }}>
+                      {el.tagName.toLowerCase()}
+                    </span>
+                    {el.id && (
+                      <span style={{ color: el === selectedElement.element ? '#d4d4d8' : '#71717a' }}>
+                        #{el.id}
+                      </span>
+                    )}
+                    {el.classList.length > 0 && (
+                      <span style={{ color: el === selectedElement.element ? '#a1a1aa' : '#a1a1aa' }}>
+                        .{Array.from(el.classList).slice(0, 2).join('.')}
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {activeTab === 'styles' && (
+              <div>
+                {Object.entries(computedStyles).map(([prop, value]) => (
+                  <div
+                    key={prop}
+                    style={{
+                      display: 'flex',
+                      padding: '2px 0',
+                      borderBottom: '1px solid #f4f4f5',
+                    }}
+                  >
+                    <span style={{ color: '#52525b', width: '100px' }}>{prop}:</span>
+                    <span style={{ color: '#18181b', flex: 1 }}>{value}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {activeTab === 'attributes' && (
+              <div>
+                {Object.entries(attributes).map(([name, value]) => (
+                  <div
+                    key={name}
+                    style={{
+                      display: 'flex',
+                      padding: '2px 0',
+                      borderBottom: '1px solid #f4f4f5',
+                    }}
+                  >
+                    <span style={{ color: '#71717a', width: '80px' }}>{name}</span>
+                    <span style={{ color: '#18181b' }}>"{value}"</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}