deskforge 1.0.0

package/packages/theme/dist/tokens.js

@@ -0,0 +1,127 @@
+"use strict";
+// tokens.ts
+// Design tokens are named values for colors, spacing,
+// typography, shadows, and motion.
+// Using tokens instead of hardcoded values means
+// changing the theme updates the entire app instantly.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultLightTokens = exports.defaultDarkTokens = void 0;
+// ─── DEFAULT TOKENS ──────────────────────────────────────
+// Default dark theme tokens
+// Used when no custom theme is provided
+const defaultDarkTokens = {
+    colors: {
+        primary: '#0077ff',
+        secondary: '#00c6ff',
+        accent: '#ff6b00',
+        success: '#00dd88',
+        warning: '#ffaa00',
+        danger: '#ff4444',
+        info: '#00aaff',
+        background: '#0a0a1a',
+        surface: '#111128',
+        surfaceAlt: '#1a1a35',
+        border: '#2a2a45',
+        overlay: 'rgba(0,0,0,0.5)',
+        text: '#ffffff',
+        textMuted: '#8888aa',
+        textDisabled: '#555577',
+        white: '#ffffff',
+        black: '#000000',
+        transparent: 'transparent',
+    },
+    typography: {
+        fonts: {
+            heading: 'Sora',
+            body: 'DM Sans',
+            mono: 'JetBrains Mono',
+        },
+        sizes: {
+            xs: 10,
+            sm: 12,
+            md: 14,
+            lg: 16,
+            xl: 20,
+            '2xl': 24,
+            '3xl': 32,
+            '4xl': 48,
+        },
+        weights: {
+            light: 300,
+            regular: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+            black: 900,
+        },
+        lineHeights: {
+            tight: 1.2,
+            normal: 1.5,
+            loose: 1.8,
+        },
+    },
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 24,
+        xl: 32,
+        '2xl': 48,
+        '3xl': 64,
+    },
+    radius: {
+        none: 0,
+        sm: 4,
+        md: 8,
+        lg: 12,
+        xl: 16,
+        full: 9999,
+    },
+    shadows: {
+        none: 'none',
+        sm: '0 1px 3px rgba(0,0,0,0.2)',
+        md: '0 4px 12px rgba(0,0,0,0.3)',
+        lg: '0 8px 24px rgba(0,0,0,0.4)',
+        xl: '0 16px 48px rgba(0,0,0,0.5)',
+    },
+    motion: {
+        duration: {
+            instant: 80,
+            fast: 150,
+            normal: 250,
+            slow: 400,
+        },
+        easing: {
+            standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+            enter: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+            exit: 'cubic-bezier(0.4, 0.0, 1.0, 1)',
+            spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+        },
+        respectReduceMotion: true,
+    },
+    breakpoints: {
+        sm: 480,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        '2xl': 1536,
+    },
+};
+exports.defaultDarkTokens = defaultDarkTokens;
+// Default light theme tokens
+const defaultLightTokens = {
+    ...defaultDarkTokens,
+    colors: {
+        ...defaultDarkTokens.colors,
+        background: '#f8f9fc',
+        surface: '#ffffff',
+        surfaceAlt: '#f0f2f8',
+        border: '#e2e8f0',
+        overlay: 'rgba(0,0,0,0.3)',
+        text: '#0d0d1a',
+        textMuted: '#6b7280',
+        textDisabled: '#9ca3af',
+    },
+};
+exports.defaultLightTokens = defaultLightTokens;
+//# sourceMappingURL=tokens.js.map

package/packages/theme/dist/tokens.js.map

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

package/packages/theme/dist/variant.d.ts

@@ -0,0 +1,17 @@
+import type { DFStyle } from './style';
+interface VariantConfig<V extends Record<string, Record<string, DFStyle>>> {
+    base: DFStyle;
+    variants: V;
+    defaultVariants: {
+        [K in keyof V]?: keyof V[K];
+    };
+}
+interface DFVariant<V extends Record<string, Record<string, DFStyle>>> {
+    (selected?: {
+        [K in keyof V]?: keyof V[K];
+    }): DFStyle;
+}
+declare function Variant<V extends Record<string, Record<string, DFStyle>>>(config: VariantConfig<V>): DFVariant<V>;
+export type { VariantConfig, DFVariant };
+export { Variant };
+//# sourceMappingURL=variant.d.ts.map

package/packages/theme/dist/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../src/variant.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAItC,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvE,IAAI,EAAE,OAAO,CAAA;IAIb,QAAQ,EAAE,CAAC,CAAA;IAGX,eAAe,EAAE;SACd,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAA;CACF;AAGD,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEnE,CAAC,QAAQ,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAAE,GAAG,OAAO,CAAA;CACtD;AAKD,iBAAS,OAAO,CACd,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAEjD,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GACvB,SAAS,CAAC,CAAC,CAAC,CA0Bd;AAED,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/packages/theme/dist/variant.js

@@ -0,0 +1,35 @@
+"use strict";
+// variant.ts
+// Variants let you define multiple style versions
+// of the same component.
+// e.g. Button has variants: filled, outline, ghost
+// e.g. Card has variants: default, success, danger
+// Define variants once — use by name everywhere.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variant = Variant;
+const style_1 = require("./style");
+// Creates a variant system for a component
+// Returns a function — call it with variant selections
+// to get the merged final style
+function Variant(config) {
+    // Returns merged style for given variant selections
+    return function (selected) {
+        let result = { ...config.base };
+        // Merge in each selected variant
+        const selections = { ...config.defaultVariants, ...selected };
+        Object.keys(selections).forEach(groupKey => {
+            const variantKey = selections[groupKey];
+            if (!variantKey)
+                return;
+            const group = config.variants[groupKey];
+            if (!group)
+                return;
+            const variantStyle = group[variantKey];
+            if (!variantStyle)
+                return;
+            result = (0, style_1.mergeStyles)(result, variantStyle);
+        });
+        return result;
+    };
+}
+//# sourceMappingURL=variant.js.map

package/packages/theme/dist/variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.js","sourceRoot":"","sources":["../src/variant.ts"],"names":[],"mappings":";AAAA,aAAa;AACb,kDAAkD;AAClD,yBAAyB;AACzB,mDAAmD;AACnD,mDAAmD;AACnD,iDAAiD;;AA8DxC,0BAAO;AA3DhB,mCAAsC;AAuBtC,2CAA2C;AAC3C,uDAAuD;AACvD,gCAAgC;AAChC,SAAS,OAAO,CAGd,MAAwB;IAExB,oDAAoD;IACpD,OAAO,UACL,QAA0C;QAE1C,IAAI,MAAM,GAAY,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,CAAA;QAExC,iCAAiC;QACjC,MAAM,UAAU,GAAG,EAAE,GAAG,MAAM,CAAC,eAAe,EAAE,GAAG,QAAQ,EAAE,CAAA;QAE7D,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACzC,MAAM,UAAU,GAAG,UAAU,CAAC,QAAmB,CAAC,CAAA;YAElD,IAAI,CAAC,UAAU;gBAAE,OAAM;YAEvB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;YACvC,IAAI,CAAC,KAAK;gBAAE,OAAM;YAElB,MAAM,YAAY,GAAG,KAAK,CAAC,UAAoB,CAAC,CAAA;YAChD,IAAI,CAAC,YAAY;gBAAE,OAAM;YAEzB,MAAM,GAAG,IAAA,mBAAW,EAAC,MAAM,EAAE,YAAY,CAAC,CAAA;QAC5C,CAAC,CAAC,CAAA;QAEF,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;AACH,CAAC"}

package/packages/theme/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@deskforge/theme",
+  "version": "1.0.0",
+  "description": "DeskForge theme system — tokens, styles, animations",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "check": "tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deskforge/deskforge.git"
+  },
+  "bugs": {
+    "url": "https://github.com/deskforge/deskforge/issues"
+  },
+  "homepage": "https://github.com/deskforge/deskforge#readme"
+}

package/packages/theme/src/animate.ts

@@ -0,0 +1,207 @@
+// animate.ts
+// Built-in animation presets for DeskForge components.
+// All animations are rendered by Skia at 120Hz.
+// Developer uses these — never writes raw animation code.
+
+import type { DFStyle } from './style'
+
+// Configuration for one animation
+interface AnimationConfig {
+  duration:  number        // milliseconds
+  delay?:    number        // delay before starting
+  easing?:   string        // easing function name
+  from:      Partial<DFStyle>  // starting style
+  to:        Partial<DFStyle>  // ending style
+  repeat?:   number | 'infinite'  // how many times to repeat
+}
+
+// Creates a fade in animation
+function fadeIn(options?: {
+  duration?: number
+  delay?:    number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 250,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeOut',
+    from:     { opacity: 0 },
+    to:       { opacity: 1 },
+  }
+}
+
+// Creates a fade out animation
+function fadeOut(options?: {
+  duration?: number
+  delay?:    number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 200,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeIn',
+    from:     { opacity: 1 },
+    to:       { opacity: 0 },
+  }
+}
+
+// Slides in from below
+function slideUp(options?: {
+  duration?: number
+  delay?:    number
+  distance?: number
+}): AnimationConfig {
+  const distance = options?.distance ?? 24
+  return {
+    duration: options?.duration ?? 300,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeOut',
+    from:     { opacity: 0, translateY: distance },
+    to:       { opacity: 1, translateY: 0 },
+  }
+}
+
+// Slides in from above
+function slideDown(options?: {
+  duration?: number
+  delay?:    number
+  distance?: number
+}): AnimationConfig {
+  const distance = options?.distance ?? 24
+  return {
+    duration: options?.duration ?? 300,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeOut',
+    from:     { opacity: 0, translateY: -distance },
+    to:       { opacity: 1, translateY: 0 },
+  }
+}
+
+// Slides in from the right
+function slideLeft(options?: {
+  duration?: number
+  delay?:    number
+  distance?: number
+}): AnimationConfig {
+  const distance = options?.distance ?? 32
+  return {
+    duration: options?.duration ?? 300,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeOut',
+    from:     { opacity: 0, translateX: distance },
+    to:       { opacity: 1, translateX: 0 },
+  }
+}
+
+// Slides in from the left
+function slideRight(options?: {
+  duration?: number
+  delay?:    number
+  distance?: number
+}): AnimationConfig {
+  const distance = options?.distance ?? 32
+  return {
+    duration: options?.duration ?? 300,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeOut',
+    from:     { opacity: 0, translateX: -distance },
+    to:       { opacity: 1, translateX: 0 },
+  }
+}
+
+// Scales in from smaller
+function scaleIn(options?: {
+  duration?: number
+  delay?:    number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 250,
+    delay:    options?.delay    ?? 0,
+    easing:   'spring',
+    from:     { opacity: 0, scale: 0.8 },
+    to:       { opacity: 1, scale: 1   },
+  }
+}
+
+// Scales out to smaller
+function scaleOut(options?: {
+  duration?: number
+  delay?:    number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 200,
+    delay:    options?.delay    ?? 0,
+    easing:   'easeIn',
+    from:     { opacity: 1, scale: 1   },
+    to:       { opacity: 0, scale: 0.8 },
+  }
+}
+
+// Pulses — scales up and back repeatedly
+function pulse(options?: {
+  duration?: number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 1000,
+    easing:   'easeInOut',
+    from:     { scale: 1.0 },
+    to:       { scale: 1.05 },
+    repeat:   'infinite',
+  }
+}
+
+// Shakes horizontally — good for error feedback
+function shake(options?: {
+  duration?: number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 400,
+    easing:   'easeInOut',
+    from:     { translateX: -8 },
+    to:       { translateX:  8 },
+    repeat:   3,
+  }
+}
+
+// Spins — full rotation
+function spin(options?: {
+  duration?: number
+}): AnimationConfig {
+  return {
+    duration: options?.duration ?? 1000,
+    easing:   'linear',
+    from:     { rotate: 0   },
+    to:       { rotate: 360 },
+    repeat:   'infinite',
+  }
+}
+
+// Creates a fully custom animation
+function custom(config: AnimationConfig): AnimationConfig {
+  return config
+}
+
+// All animations in one object
+const Animate = {
+  fadeIn,
+  fadeOut,
+  slideUp,
+  slideDown,
+  slideLeft,
+  slideRight,
+  scaleIn,
+  scaleOut,
+  pulse,
+  shake,
+  spin,
+  custom,
+}
+
+export type { AnimationConfig }
+export {
+  Animate,
+  fadeIn, fadeOut,
+  slideUp, slideDown,
+  slideLeft, slideRight,
+  scaleIn, scaleOut,
+  pulse, shake, spin,
+  custom,
+}

package/packages/theme/src/index.ts

@@ -0,0 +1,21 @@
+// index.ts
+// Public door into the theme package.
+// All other packages import theme tools from here.
+
+// Design tokens — colors, spacing, typography etc.
+export * from './tokens'
+
+// Theme manager — active theme, switching, listening
+export * from './theme'
+
+// Style objects with interactive states
+export * from './style'
+
+// Reusable named style collections
+export * from './stylesheet'
+
+// Built-in animation presets
+export * from './animate'
+
+// Component variant systems
+export * from './variant'

package/packages/theme/src/style.ts

@@ -0,0 +1,109 @@
+// style.ts
+// The Style() function creates a style object with
+// support for hover, active, focus, disabled states
+// and smooth transitions between them.
+// All rendered by Skia — no CSS involved.
+
+// Base style properties
+// These map directly to Skia draw calls
+interface BaseStyle {
+  // Dimensions
+  width?:         number | string
+  height?:        number | string
+  minWidth?:      number
+  maxWidth?:      number
+  minHeight?:     number
+  maxHeight?:     number
+
+  // Spacing
+  padding?:       number | [number, number] | [number, number, number, number]
+  margin?:        number | [number, number] | [number, number, number, number]
+
+  // Appearance
+  background?:    string  // color or token name
+  color?:         string  // text color or token name
+  opacity?:       number  // 0 to 1
+  radius?:        number | string  // border radius or token
+  border?:        string  // e.g. '1px solid #ccc'
+  shadow?:        string  // shadow token or custom
+
+  // Typography
+  fontSize?:      number | string  // size or token name
+  fontWeight?:    number | string  // weight or token name
+  fontFamily?:    string
+  lineHeight?:    number
+  letterSpacing?: number
+  textAlign?:     'left' | 'center' | 'right'
+
+  // Layout
+  flex?:          number
+  gap?:           number | string
+  align?:         'start' | 'center' | 'end' | 'stretch'
+  justify?:       'start' | 'center' | 'end' |
+                  'space-between' | 'space-around'
+
+  // Transform
+  scale?:         number
+  rotate?:        number
+  translateX?:    number
+  translateY?:    number
+
+  // Cursor
+  cursor?:        'pointer' | 'default' | 'text' | 'not-allowed'
+
+  // Responsive styles per breakpoint
+  responsive?: {
+    sm?: Partial<BaseStyle>
+    md?: Partial<BaseStyle>
+    lg?: Partial<BaseStyle>
+    xl?: Partial<BaseStyle>
+  }
+}
+
+// A complete style with interactive states
+interface DFStyle extends BaseStyle {
+  // State-specific overrides
+  hover?:    Partial<BaseStyle>  // when mouse is over
+  active?:   Partial<BaseStyle>  // when pressed
+  focus?:    Partial<BaseStyle>  // when focused
+  disabled?: Partial<BaseStyle>  // when disabled
+
+  // Theme-specific overrides
+  dark?:     Partial<BaseStyle>  // dark mode only
+  light?:    Partial<BaseStyle>  // light mode only
+
+  // Animation settings
+  transition?: {
+    duration?: number  // milliseconds
+    easing?:   string  // easing function name
+  }
+}
+
+// Creates a DFStyle object
+// Validates and normalises the style
+function Style(style: DFStyle): DFStyle {
+  return { ...style }
+}
+
+// Merges two styles together
+// Second style overrides first
+function mergeStyles(
+  base:     DFStyle,
+  override: Partial<DFStyle>
+): DFStyle {
+  return { ...base, ...override }
+}
+
+// Returns the style for a specific interactive state
+// e.g. getStateStyle(style, 'hover') for hover state
+function getStateStyle(
+  style: DFStyle,
+  state: 'hover' | 'active' | 'focus' | 'disabled'
+): DFStyle {
+  const stateOverride = style[state]
+  if (!stateOverride) return style
+  return mergeStyles(style, stateOverride)
+}
+
+export type { BaseStyle, DFStyle }
+export { Style, mergeStyles, getStateStyle }

package/packages/theme/src/stylesheet.ts

@@ -0,0 +1,40 @@
+// stylesheet.ts
+// StyleSheet creates a named collection of reusable styles.
+// Like CSS classes but typed JavaScript objects.
+// Define once, use anywhere, fully type-safe.
+
+import type { DFStyle } from './style'
+
+// A map of name to style
+// e.g. { container: Style({...}), heading: Style({...}) }
+type StyleMap = Record<string, DFStyle>
+
+// The object returned by StyleSheet()
+// Same shape as input but frozen — prevents accidental mutation
+type DFStyleSheet<T extends StyleMap> = Readonly<T>
+
+// Creates a frozen collection of named styles
+// T is inferred from the input — each key is fully typed
+function StyleSheet<T extends StyleMap>(
+  styles: T
+): DFStyleSheet<T> {
+  // Freeze to prevent accidental mutation
+  return Object.freeze({ ...styles }) as DFStyleSheet<T>
+}
+
+// Combines multiple stylesheets into one
+function mergeStyleSheets<
+  A extends StyleMap,
+  B extends StyleMap
+>(
+  a: DFStyleSheet<A>,
+  b: DFStyleSheet<B>
+): DFStyleSheet<A & B> {
+  return Object.freeze({
+    ...a,
+    ...b,
+  }) as DFStyleSheet<A & B>
+}
+
+export type { StyleMap, DFStyleSheet }
+export { StyleSheet, mergeStyleSheets }