@portel/photon-core 1.5.0 → 2.1.0

package/dist/design-system/tokens.js

@@ -0,0 +1,413 @@
+/**
+ * Photon Design System - Design Tokens
+ *
+ * Based on:
+ * - Material Design 3 token structure (https://m3.material.io/foundations/design-tokens)
+ * - Apple HIG 8pt grid system (https://developer.apple.com/design/human-interface-guidelines/layout)
+ *
+ * This is the foundation for all Photon UI - both BEAM interface and auto-generated UIs.
+ */
+// =============================================================================
+// SPACING - 8pt Grid System (Apple HIG)
+// =============================================================================
+export const spacing = {
+    // Base unit: 4px (for fine adjustments)
+    '0': '0',
+    '1': '4px', // xs - minimal spacing
+    '2': '8px', // sm - tight spacing
+    '3': '12px', // md - default spacing
+    '4': '16px', // lg - comfortable spacing
+    '5': '20px', // xl - generous spacing
+    '6': '24px', // 2xl - section spacing
+    '8': '32px', // 3xl - large section spacing
+    '10': '40px', // 4xl - hero spacing
+    '12': '48px', // 5xl - page spacing
+};
+// Semantic spacing aliases
+export const spacingAliases = {
+    none: spacing['0'],
+    tight: spacing['1'],
+    compact: spacing['2'],
+    default: spacing['3'],
+    comfortable: spacing['4'],
+    spacious: spacing['6'],
+    section: spacing['8'],
+};
+// =============================================================================
+// TYPOGRAPHY - Material Design 3 Type Scale
+// =============================================================================
+export const fontFamily = {
+    sans: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif',
+    mono: '"SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace',
+};
+export const fontSize = {
+    // Display - for hero/large numbers
+    'display-lg': '57px',
+    'display-md': '45px',
+    'display-sm': '36px',
+    // Headline - for section headers
+    'headline-lg': '32px',
+    'headline-md': '28px',
+    'headline-sm': '24px',
+    // Title - for card titles, list item titles
+    'title-lg': '22px',
+    'title-md': '16px',
+    'title-sm': '14px',
+    // Body - for content
+    'body-lg': '16px',
+    'body-md': '14px',
+    'body-sm': '12px',
+    // Label - for UI labels, buttons, badges
+    'label-lg': '14px',
+    'label-md': '12px',
+    'label-sm': '11px',
+};
+export const lineHeight = {
+    'display-lg': '64px',
+    'display-md': '52px',
+    'display-sm': '44px',
+    'headline-lg': '40px',
+    'headline-md': '36px',
+    'headline-sm': '32px',
+    'title-lg': '28px',
+    'title-md': '24px',
+    'title-sm': '20px',
+    'body-lg': '24px',
+    'body-md': '20px',
+    'body-sm': '16px',
+    'label-lg': '20px',
+    'label-md': '16px',
+    'label-sm': '16px',
+};
+export const fontWeight = {
+    regular: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+};
+// =============================================================================
+// COLORS - Semantic Color System
+// =============================================================================
+// Reference colors (raw values)
+const colorPalette = {
+    // Neutrals (dark theme optimized)
+    neutral: {
+        0: '#000000',
+        5: '#0d0d0d',
+        10: '#1a1a1a',
+        15: '#262626',
+        20: '#333333',
+        30: '#4d4d4d',
+        40: '#666666',
+        50: '#808080',
+        60: '#999999',
+        70: '#b3b3b3',
+        80: '#cccccc',
+        90: '#e6e6e6',
+        95: '#f2f2f2',
+        100: '#ffffff',
+    },
+    // Primary (blue - trust, action)
+    primary: {
+        10: '#001d36',
+        20: '#003258',
+        30: '#00497d',
+        40: '#0061a4',
+        50: '#2c7bc9',
+        60: '#5094e0',
+        70: '#79aef0',
+        80: '#a4c9ff',
+        90: '#d1e4ff',
+        95: '#e9f1ff',
+    },
+    // Success (green)
+    success: {
+        10: '#002106',
+        20: '#003910',
+        30: '#00531a',
+        40: '#006e25',
+        50: '#008a30',
+        60: '#1fa940',
+        70: '#4cc760',
+        80: '#73e380',
+        90: '#98ffa0',
+        95: '#c8ffc8',
+    },
+    // Warning (amber)
+    warning: {
+        10: '#261900',
+        20: '#402d00',
+        30: '#5c4300',
+        40: '#7a5900',
+        50: '#996f00',
+        60: '#b88600',
+        70: '#d89e00',
+        80: '#f9b800',
+        90: '#ffdf9e',
+        95: '#fff0d6',
+    },
+    // Error (red)
+    error: {
+        10: '#410002',
+        20: '#690005',
+        30: '#93000a',
+        40: '#ba1a1a',
+        50: '#de3730',
+        60: '#ff5449',
+        70: '#ff897d',
+        80: '#ffb4ab',
+        90: '#ffdad6',
+        95: '#ffedea',
+    },
+};
+// System colors (semantic tokens - what components use)
+export const colors = {
+    // Surfaces
+    surface: colorPalette.neutral[5],
+    surfaceContainer: colorPalette.neutral[10],
+    surfaceContainerHigh: colorPalette.neutral[15],
+    surfaceContainerHighest: colorPalette.neutral[20],
+    surfaceBright: colorPalette.neutral[95],
+    // Text on surfaces
+    onSurface: colorPalette.neutral[90],
+    onSurfaceVariant: colorPalette.neutral[70],
+    onSurfaceMuted: colorPalette.neutral[50],
+    // Primary
+    primary: colorPalette.primary[70],
+    primaryContainer: colorPalette.primary[30],
+    onPrimary: colorPalette.primary[10],
+    onPrimaryContainer: colorPalette.primary[90],
+    // Success
+    success: colorPalette.success[70],
+    successContainer: colorPalette.success[20],
+    onSuccess: colorPalette.success[10],
+    onSuccessContainer: colorPalette.success[90],
+    // Warning
+    warning: colorPalette.warning[70],
+    warningContainer: colorPalette.warning[20],
+    onWarning: colorPalette.warning[10],
+    onWarningContainer: colorPalette.warning[90],
+    // Error
+    error: colorPalette.error[70],
+    errorContainer: colorPalette.error[20],
+    onError: colorPalette.error[10],
+    onErrorContainer: colorPalette.error[90],
+    // Outline
+    outline: colorPalette.neutral[30],
+    outlineVariant: colorPalette.neutral[20],
+    // Scrim (overlay)
+    scrim: 'rgba(0, 0, 0, 0.5)',
+};
+// =============================================================================
+// ELEVATION - Material Design 3 Shadows
+// =============================================================================
+export const elevation = {
+    '0': 'none',
+    '1': '0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
+    '2': '0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
+    '3': '0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)',
+    '4': '0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)',
+    '5': '0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
+};
+// =============================================================================
+// BORDER RADIUS - Apple HIG inspired
+// =============================================================================
+export const radius = {
+    none: '0',
+    sm: '6px', // Small elements (chips, badges)
+    md: '10px', // Cards, inputs (iOS default)
+    lg: '14px', // Large cards
+    xl: '20px', // Modal, sheet
+    full: '9999px', // Pills, circles
+};
+// =============================================================================
+// MOTION - Transitions
+// =============================================================================
+export const duration = {
+    instant: '0ms',
+    fast: '100ms',
+    normal: '200ms',
+    slow: '300ms',
+    slower: '500ms',
+};
+export const easing = {
+    standard: 'cubic-bezier(0.2, 0, 0, 1)',
+    standardDecelerate: 'cubic-bezier(0, 0, 0, 1)',
+    standardAccelerate: 'cubic-bezier(0.3, 0, 1, 1)',
+    emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
+    emphasizedDecelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
+    emphasizedAccelerate: 'cubic-bezier(0.3, 0, 0.8, 0.15)',
+};
+// =============================================================================
+// INTERACTION - Touch targets (Apple HIG: 44pt minimum)
+// =============================================================================
+export const touchTarget = {
+    min: '44px',
+    comfortable: '48px',
+    spacious: '56px',
+};
+// =============================================================================
+// Z-INDEX - Layering system
+// =============================================================================
+export const zIndex = {
+    base: '0',
+    dropdown: '100',
+    sticky: '200',
+    modal: '300',
+    popover: '400',
+    toast: '500',
+};
+// =============================================================================
+// CSS CUSTOM PROPERTIES GENERATOR
+// =============================================================================
+export function generateTokensCSS() {
+    return `
+/* ==========================================================================
+   Photon Design System - Design Tokens
+   Based on Material Design 3 + Apple HIG
+   ========================================================================== */
+
+:root {
+  /* Spacing (8pt grid) */
+  --space-0: ${spacing['0']};
+  --space-1: ${spacing['1']};
+  --space-2: ${spacing['2']};
+  --space-3: ${spacing['3']};
+  --space-4: ${spacing['4']};
+  --space-5: ${spacing['5']};
+  --space-6: ${spacing['6']};
+  --space-8: ${spacing['8']};
+  --space-10: ${spacing['10']};
+  --space-12: ${spacing['12']};
+
+  /* Typography - Font Family */
+  --font-sans: ${fontFamily.sans};
+  --font-mono: ${fontFamily.mono};
+
+  /* Typography - Font Size */
+  --text-display-lg: ${fontSize['display-lg']};
+  --text-display-md: ${fontSize['display-md']};
+  --text-display-sm: ${fontSize['display-sm']};
+  --text-headline-lg: ${fontSize['headline-lg']};
+  --text-headline-md: ${fontSize['headline-md']};
+  --text-headline-sm: ${fontSize['headline-sm']};
+  --text-title-lg: ${fontSize['title-lg']};
+  --text-title-md: ${fontSize['title-md']};
+  --text-title-sm: ${fontSize['title-sm']};
+  --text-body-lg: ${fontSize['body-lg']};
+  --text-body-md: ${fontSize['body-md']};
+  --text-body-sm: ${fontSize['body-sm']};
+  --text-label-lg: ${fontSize['label-lg']};
+  --text-label-md: ${fontSize['label-md']};
+  --text-label-sm: ${fontSize['label-sm']};
+
+  /* Typography - Line Height */
+  --leading-display-lg: ${lineHeight['display-lg']};
+  --leading-display-md: ${lineHeight['display-md']};
+  --leading-display-sm: ${lineHeight['display-sm']};
+  --leading-headline-lg: ${lineHeight['headline-lg']};
+  --leading-headline-md: ${lineHeight['headline-md']};
+  --leading-headline-sm: ${lineHeight['headline-sm']};
+  --leading-title-lg: ${lineHeight['title-lg']};
+  --leading-title-md: ${lineHeight['title-md']};
+  --leading-title-sm: ${lineHeight['title-sm']};
+  --leading-body-lg: ${lineHeight['body-lg']};
+  --leading-body-md: ${lineHeight['body-md']};
+  --leading-body-sm: ${lineHeight['body-sm']};
+  --leading-label-lg: ${lineHeight['label-lg']};
+  --leading-label-md: ${lineHeight['label-md']};
+  --leading-label-sm: ${lineHeight['label-sm']};
+
+  /* Typography - Font Weight */
+  --weight-regular: ${fontWeight.regular};
+  --weight-medium: ${fontWeight.medium};
+  --weight-semibold: ${fontWeight.semibold};
+  --weight-bold: ${fontWeight.bold};
+
+  /* Colors - Surfaces */
+  --color-surface: ${colors.surface};
+  --color-surface-container: ${colors.surfaceContainer};
+  --color-surface-container-high: ${colors.surfaceContainerHigh};
+  --color-surface-container-highest: ${colors.surfaceContainerHighest};
+  --color-surface-bright: ${colors.surfaceBright};
+
+  /* Colors - Text */
+  --color-on-surface: ${colors.onSurface};
+  --color-on-surface-variant: ${colors.onSurfaceVariant};
+  --color-on-surface-muted: ${colors.onSurfaceMuted};
+
+  /* Colors - Primary */
+  --color-primary: ${colors.primary};
+  --color-primary-container: ${colors.primaryContainer};
+  --color-on-primary: ${colors.onPrimary};
+  --color-on-primary-container: ${colors.onPrimaryContainer};
+
+  /* Colors - Success */
+  --color-success: ${colors.success};
+  --color-success-container: ${colors.successContainer};
+  --color-on-success: ${colors.onSuccess};
+  --color-on-success-container: ${colors.onSuccessContainer};
+
+  /* Colors - Warning */
+  --color-warning: ${colors.warning};
+  --color-warning-container: ${colors.warningContainer};
+  --color-on-warning: ${colors.onWarning};
+  --color-on-warning-container: ${colors.onWarningContainer};
+
+  /* Colors - Error */
+  --color-error: ${colors.error};
+  --color-error-container: ${colors.errorContainer};
+  --color-on-error: ${colors.onError};
+  --color-on-error-container: ${colors.onErrorContainer};
+
+  /* Colors - Outline */
+  --color-outline: ${colors.outline};
+  --color-outline-variant: ${colors.outlineVariant};
+
+  /* Colors - Scrim */
+  --color-scrim: ${colors.scrim};
+
+  /* Elevation */
+  --elevation-0: ${elevation['0']};
+  --elevation-1: ${elevation['1']};
+  --elevation-2: ${elevation['2']};
+  --elevation-3: ${elevation['3']};
+  --elevation-4: ${elevation['4']};
+  --elevation-5: ${elevation['5']};
+
+  /* Border Radius */
+  --radius-none: ${radius.none};
+  --radius-sm: ${radius.sm};
+  --radius-md: ${radius.md};
+  --radius-lg: ${radius.lg};
+  --radius-xl: ${radius.xl};
+  --radius-full: ${radius.full};
+
+  /* Motion */
+  --duration-instant: ${duration.instant};
+  --duration-fast: ${duration.fast};
+  --duration-normal: ${duration.normal};
+  --duration-slow: ${duration.slow};
+  --duration-slower: ${duration.slower};
+
+  --ease-standard: ${easing.standard};
+  --ease-decelerate: ${easing.standardDecelerate};
+  --ease-accelerate: ${easing.standardAccelerate};
+  --ease-emphasized: ${easing.emphasized};
+
+  /* Touch Targets */
+  --touch-min: ${touchTarget.min};
+  --touch-comfortable: ${touchTarget.comfortable};
+  --touch-spacious: ${touchTarget.spacious};
+
+  /* Z-Index */
+  --z-base: ${zIndex.base};
+  --z-dropdown: ${zIndex.dropdown};
+  --z-sticky: ${zIndex.sticky};
+  --z-modal: ${zIndex.modal};
+  --z-popover: ${zIndex.popover};
+  --z-toast: ${zIndex.toast};
+}
+`;
+}
+//# sourceMappingURL=tokens.js.map

package/dist/design-system/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/design-system/tokens.ts"],"names":[],"mappings":"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"}

package/dist/design-system/transaction-ui.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Photon Transaction UI System
+ *
+ * A focused UI system for completing decisions in AI+Human workflows.
+ * Not a general UI framework - purpose-built for the 4 transaction states:
+ *
+ * 1. SELECT  - Pick from options (AI narrowed down, human selects visually)
+ * 2. CONFIRM - Review before action (summary of what will happen)
+ * 3. INPUT   - Fill required details (smart form with validation)
+ * 4. RESULT  - Show outcome (success/error status + receipt)
+ */
+export type TransactionState = 'select' | 'confirm' | 'input' | 'result';
+export interface SelectionItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    image?: string;
+    icon?: string;
+    badge?: string;
+    detail?: string;
+    metadata?: Record<string, any>;
+}
+export interface ConfirmationData {
+    title: string;
+    description?: string;
+    items: Array<{
+        label: string;
+        value: string;
+    }>;
+    warning?: string;
+    actions: {
+        confirm: string;
+        cancel?: string;
+    };
+}
+export interface InputField {
+    name: string;
+    label: string;
+    type: 'text' | 'number' | 'email' | 'password' | 'date' | 'select' | 'textarea';
+    placeholder?: string;
+    hint?: string;
+    required?: boolean;
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    validation?: {
+        pattern?: string;
+        min?: number;
+        max?: number;
+        minLength?: number;
+        maxLength?: number;
+    };
+}
+export interface ResultData {
+    status: 'success' | 'error' | 'pending';
+    title: string;
+    message?: string;
+    details?: Array<{
+        label: string;
+        value: string;
+    }>;
+    actions?: Array<{
+        label: string;
+        action: string;
+    }>;
+}
+export declare function generateTransactionCSS(): string;
+export declare function generateTransactionJS(): string;
+//# sourceMappingURL=transaction-ui.d.ts.map

package/dist/design-system/transaction-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transaction-ui.d.ts","sourceRoot":"","sources":["../../src/design-system/transaction-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AAMD,wBAAgB,sBAAsB,IAAI,MAAM,CAsoB/C;AAMD,wBAAgB,qBAAqB,IAAI,MAAM,CA4T9C"}