@wireweave/core 1.0.0-beta.20260107130839 → 1.0.0-beta.20260107132939

package/src/renderer/types.ts

@@ -1,173 +0,0 @@
-/**
- * Renderer type definitions for wireweave
- *
- * Provides types for rendering options, themes, and context
- */
-
-// ===========================================
-// Render Options
-// ===========================================
-
-export interface RenderOptions {
-  /** Theme variant */
-  theme?: 'light' | 'dark';
-  /** Scale factor for sizing */
-  scale?: number;
-  /** Include CSS styles in output */
-  includeStyles?: boolean;
-  /** Minify output (no indentation/newlines) */
-  minify?: boolean;
-  /** CSS class prefix for scoping */
-  classPrefix?: string;
-}
-
-export interface RenderResult {
-  /** Rendered HTML content */
-  html: string;
-  /** Generated CSS styles */
-  css: string;
-}
-
-export interface SvgRenderOptions {
-  /** Width of the SVG viewport */
-  width?: number;
-  /** Height of the SVG viewport */
-  height?: number;
-  /** Padding around content */
-  padding?: number;
-  /** Scale factor */
-  scale?: number;
-  /** Background color */
-  background?: string;
-  /** Font family */
-  fontFamily?: string;
-}
-
-export interface SvgRenderResult {
-  /** Rendered SVG content */
-  svg: string;
-  /** Actual width */
-  width: number;
-  /** Actual height */
-  height: number;
-}
-
-// ===========================================
-// Render Context
-// ===========================================
-
-export interface RenderContext {
-  /** Resolved render options */
-  options: Required<RenderOptions>;
-  /** Theme configuration */
-  theme: ThemeConfig;
-  /** Current nesting depth for indentation */
-  depth: number;
-}
-
-// ===========================================
-// Theme Configuration
-// ===========================================
-
-export interface ThemeColors {
-  /** Primary action color */
-  primary: string;
-  /** Secondary/muted action color */
-  secondary: string;
-  /** Success state color */
-  success: string;
-  /** Warning state color */
-  warning: string;
-  /** Danger/error state color */
-  danger: string;
-  /** Muted/disabled color */
-  muted: string;
-  /** Background color */
-  background: string;
-  /** Foreground/text color */
-  foreground: string;
-  /** Border color */
-  border: string;
-}
-
-export interface ThemeConfig {
-  /** Color palette */
-  colors: ThemeColors;
-  /** Spacing scale (number -> px value) */
-  spacing: Record<number, string>;
-  /** Border radius */
-  radius: string;
-  /** Font family */
-  fontFamily: string;
-  /** Shadow styles */
-  shadows: Record<string, string>;
-}
-
-// ===========================================
-// Default Theme (Wireframe Style - Black/White/Gray)
-// ===========================================
-
-/**
- * Default wireframe theme using black/white/gray palette
- * Follows wireweave design principles for sketch-like appearance
- */
-export const defaultTheme: ThemeConfig = {
-  colors: {
-    // Wireframe uses minimal colors - black/white/gray
-    primary: '#000000',
-    secondary: '#888888',
-    success: '#888888',
-    warning: '#888888',
-    danger: '#888888',
-    muted: '#888888',
-    background: '#FFFFFF',
-    foreground: '#000000',
-    border: '#000000',
-  },
-  spacing: {
-    0: '0px',
-    1: '4px',
-    2: '8px',
-    3: '12px',
-    4: '16px',
-    5: '20px',
-    6: '24px',
-    8: '32px',
-    10: '40px',
-    12: '48px',
-    16: '64px',
-    20: '80px',
-  },
-  radius: '4px',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  shadows: {
-    none: 'none',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.1)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.15)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.2)',
-    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.25)',
-  },
-};
-
-/**
- * Dark theme configuration
- * Inverts colors for dark mode display
- */
-export const darkTheme: ThemeConfig = {
-  ...defaultTheme,
-  colors: {
-    ...defaultTheme.colors,
-    background: '#1A1A1A',
-    foreground: '#FFFFFF',
-    border: '#FFFFFF',
-    primary: '#FFFFFF',
-    muted: '#888888',
-  },
-};
-
-/**
- * Get theme configuration by name
- */
-export function getTheme(name: 'light' | 'dark'): ThemeConfig {
-  return name === 'dark' ? darkTheme : defaultTheme;
-}

package/src/types/index.ts

@@ -1,138 +0,0 @@
-/**
- * AST Type definitions for wireweave
- *
- * Re-exports all types from the AST module for external consumption.
- * This provides a stable public API for type imports.
- */
-
-// Re-export everything from ast/types
-export type {
-  // Source Location
-  Position,
-  SourceLocation,
-
-  // Base
-  BaseNode,
-
-  // Common Props
-  SpacingValue,
-  SpacingProps,
-  WidthValue,
-  HeightValue,
-  SizeProps,
-  JustifyValue,
-  AlignValue,
-  DirectionValue,
-  FlexProps,
-  GridProps,
-  CommonProps,
-
-  // Document
-  WireframeDocument,
-
-  // Layout
-  PageNode,
-  HeaderNode,
-  MainNode,
-  FooterNode,
-  SidebarNode,
-  SectionNode,
-
-  // Grid
-  RowNode,
-  ColNode,
-
-  // Container
-  ShadowValue,
-  CardNode,
-  ModalNode,
-  DrawerPosition,
-  DrawerNode,
-  AccordionNode,
-
-  // Text
-  TextSize,
-  TextWeight,
-  TextAlign,
-  TextNode,
-  TitleLevel,
-  TitleNode,
-  LinkNode,
-
-  // Input
-  InputType,
-  InputNode,
-  TextareaNode,
-  SelectNode,
-  SelectOption,
-  CheckboxNode,
-  RadioNode,
-  SwitchNode,
-  SliderNode,
-
-  // Button
-  ButtonVariant,
-  ButtonSize,
-  ButtonNode,
-
-  // Display
-  ImageNode,
-  PlaceholderNode,
-  AvatarSize,
-  AvatarNode,
-  BadgeVariant,
-  BadgeNode,
-  IconNode,
-
-  // Data
-  TableNode,
-  ListItemNode,
-  ListNode,
-
-  // Feedback
-  AlertVariant,
-  AlertNode,
-  ToastPosition,
-  ToastNode,
-  ProgressNode,
-  SpinnerSize,
-  SpinnerNode,
-
-  // Overlay
-  TooltipPosition,
-  TooltipNode,
-  PopoverNode,
-  DropdownItemNode,
-  DividerNode,
-  DropdownNode,
-
-  // Navigation
-  NavItem,
-  NavNode,
-  TabNode,
-  TabsNode,
-  BreadcrumbItem,
-  BreadcrumbNode,
-
-  // Divider Component
-  DividerComponentNode,
-
-  // Node Type Unions
-  LayoutNode,
-  GridNode,
-  ContainerComponentNode,
-  TextContentNode,
-  InputComponentNode,
-  DisplayNode,
-  DataNode,
-  FeedbackNode,
-  OverlayNode,
-  NavigationNode,
-  ContainerNode,
-  LeafNode,
-  AnyNode,
-  NodeType,
-} from '../ast/types';
-
-// Re-export guards for convenience
-export { isContainerNode, isLeafNode } from '../ast/guards';

package/src/viewport/index.ts

@@ -1,17 +0,0 @@
-/**
- * Viewport module for wireweave
- *
- * Handles viewport sizing, device presets, and scaling
- */
-
-export type { ViewportSize, PreviewWrapperOptions } from './presets';
-export {
-  DEVICE_PRESETS,
-  DEFAULT_VIEWPORT,
-  parseViewportString,
-  resolveViewport,
-  getDevicePresets,
-  isValidDevicePreset,
-  calculateViewportScale,
-  wrapInPreviewContainer,
-} from './presets';

package/src/viewport/presets.ts

@@ -1,181 +0,0 @@
-/**
- * Device viewport presets for wireweave
- *
- * Standard device dimensions for wireframe design
- */
-
-export interface ViewportSize {
-  width: number;
-  height: number;
-  label: string;
-  category: 'desktop' | 'tablet' | 'mobile';
-}
-
-/**
- * Device preset definitions
- */
-export const DEVICE_PRESETS: Record<string, ViewportSize> = {
-  // Desktop
-  'desktop-sm': { width: 1280, height: 800, label: 'Small Laptop', category: 'desktop' },
-  'desktop': { width: 1440, height: 900, label: 'Desktop', category: 'desktop' },
-  'desktop-lg': { width: 1920, height: 1080, label: 'Full HD', category: 'desktop' },
-  'desktop-xl': { width: 2560, height: 1440, label: 'QHD', category: 'desktop' },
-
-  // Tablet
-  'ipad': { width: 1024, height: 768, label: 'iPad (Landscape)', category: 'tablet' },
-  'ipad-portrait': { width: 768, height: 1024, label: 'iPad (Portrait)', category: 'tablet' },
-  'ipad-pro': { width: 1366, height: 1024, label: 'iPad Pro 12.9"', category: 'tablet' },
-  'ipad-pro-portrait': { width: 1024, height: 1366, label: 'iPad Pro 12.9" (Portrait)', category: 'tablet' },
-
-  // Mobile
-  'iphone-se': { width: 375, height: 667, label: 'iPhone SE', category: 'mobile' },
-  'iphone14': { width: 390, height: 844, label: 'iPhone 14', category: 'mobile' },
-  'iphone14-pro': { width: 393, height: 852, label: 'iPhone 14 Pro', category: 'mobile' },
-  'iphone14-pro-max': { width: 430, height: 932, label: 'iPhone 14 Pro Max', category: 'mobile' },
-  'android': { width: 360, height: 800, label: 'Android', category: 'mobile' },
-  'android-lg': { width: 412, height: 915, label: 'Android Large', category: 'mobile' },
-};
-
-/**
- * Default viewport size (desktop)
- */
-export const DEFAULT_VIEWPORT: ViewportSize = DEVICE_PRESETS['desktop'];
-
-/**
- * Parse viewport value (e.g., "1440x900", "1440", or number)
- */
-export function parseViewportString(value: string | number): { width: number; height?: number } | null {
-  // If it's already a number, treat as width only
-  if (typeof value === 'number') {
-    return { width: value };
-  }
-
-  // Format: "1440x900" or "1440"
-  const match = value.match(/^(\d+)(?:x(\d+))?$/);
-  if (!match) return null;
-
-  const width = parseInt(match[1], 10);
-  const height = match[2] ? parseInt(match[2], 10) : undefined;
-
-  return { width, height };
-}
-
-/**
- * Get viewport size from device preset or explicit size
- */
-export function resolveViewport(
-  viewport?: string | number,
-  device?: string
-): ViewportSize {
-  // Device preset takes precedence
-  if (device && DEVICE_PRESETS[device]) {
-    return DEVICE_PRESETS[device];
-  }
-
-  // Parse explicit viewport
-  if (viewport !== undefined) {
-    const parsed = parseViewportString(viewport);
-    if (parsed) {
-      return {
-        width: parsed.width,
-        height: parsed.height || DEFAULT_VIEWPORT.height,
-        label: `${parsed.width}x${parsed.height || DEFAULT_VIEWPORT.height}`,
-        category: parsed.width <= 430 ? 'mobile' : parsed.width <= 1024 ? 'tablet' : 'desktop',
-      };
-    }
-  }
-
-  // Default
-  return DEFAULT_VIEWPORT;
-}
-
-/**
- * Get all available device presets
- */
-export function getDevicePresets(): Record<string, ViewportSize> {
-  return { ...DEVICE_PRESETS };
-}
-
-/**
- * Check if a device preset exists
- */
-export function isValidDevicePreset(device: string): boolean {
-  return device in DEVICE_PRESETS;
-}
-
-/**
- * Calculate scale factor to fit viewport in container
- *
- * @param viewport - The viewport dimensions
- * @param containerWidth - Available container width
- * @param containerHeight - Available container height (optional)
- * @param maxScale - Maximum scale factor (default: 1)
- * @returns Scale factor (0-1 range, or up to maxScale)
- */
-export function calculateViewportScale(
-  viewport: ViewportSize,
-  containerWidth: number,
-  containerHeight?: number,
-  maxScale: number = 1
-): number {
-  const scaleX = containerWidth / viewport.width;
-  const scaleY = containerHeight ? containerHeight / viewport.height : Infinity;
-
-  // Use the smaller scale to fit both dimensions
-  const scale = Math.min(scaleX, scaleY, maxScale);
-
-  // Round to 3 decimal places
-  return Math.round(scale * 1000) / 1000;
-}
-
-/**
- * Options for creating preview wrapper HTML
- */
-export interface PreviewWrapperOptions {
-  /** CSS class prefix (default: 'wf') */
-  prefix?: string;
-  /** Dark mode background */
-  darkMode?: boolean;
-  /** Container width for auto-scaling */
-  containerWidth?: number;
-  /** Container height for auto-scaling */
-  containerHeight?: number;
-  /** Custom scale (overrides auto-calculated scale) */
-  scale?: number;
-}
-
-/**
- * Wrap rendered HTML in a preview container with scaling
- *
- * @param html - The rendered wireframe HTML
- * @param viewport - The viewport size used for rendering
- * @param options - Preview wrapper options
- * @returns HTML string with preview wrapper
- */
-export function wrapInPreviewContainer(
-  html: string,
-  viewport: ViewportSize,
-  options: PreviewWrapperOptions = {}
-): string {
-  const {
-    prefix = 'wf',
-    darkMode = false,
-    containerWidth,
-    containerHeight,
-    scale: customScale,
-  } = options;
-
-  // Calculate scale if container dimensions provided
-  const scale =
-    customScale ??
-    (containerWidth ? calculateViewportScale(viewport, containerWidth, containerHeight) : 1);
-
-  const previewClass = `${prefix}-viewport-preview${darkMode ? ' dark' : ''}`;
-  const wrapperStyle = `transform: scale(${scale}); width: ${viewport.width}px; height: ${viewport.height}px;`;
-
-  return `<div class="${previewClass}" style="width: 100%; min-height: ${Math.round(viewport.height * scale)}px;">
-  <div class="${prefix}-viewport-wrapper" style="${wrapperStyle}">
-${html}
-  </div>
-</div>`;
-}