devglide 0.1.1

package/src/packages/design-tokens/dist/tokens.js

@@ -0,0 +1,386 @@
+/* @devglide/design-tokens v2.0 — generated, do not edit */
+export const tokens = {
+  "primitive": {
+    "neutral": {
+      "0": "#0d1117",
+      "1": "#161b22",
+      "2": "#1c2128",
+      "3": "#22272e",
+      "4": "#2d333b",
+      "5": "#353b44",
+      "6": "#444c56",
+      "7": "#545d68",
+      "8": "#636e7b",
+      "9": "#768390",
+      "10": "#8b949e",
+      "11": "#adbac7",
+      "12": "#cdd9e5"
+    },
+    "green": {
+      "1": "#0d1f12",
+      "2": "#1a3d1e",
+      "3": "#1f6328",
+      "4": "#2ea043",
+      "5": "#3fb950",
+      "6": "#56d364",
+      "7": "#7ee787",
+      "8": "#a0f0a8",
+      "9": "#b7f5bd"
+    },
+    "red": {
+      "1": "#3d0d0d",
+      "2": "#6e1616",
+      "3": "#a82020",
+      "4": "#d32f2f",
+      "5": "#ff3333",
+      "6": "#ff6b6b"
+    },
+    "amber": {
+      "1": "#3d2600",
+      "2": "#6e4400",
+      "3": "#9e6a03",
+      "4": "#d29922",
+      "5": "#e3b341",
+      "6": "#f0c84d"
+    },
+    "blue": {
+      "1": "#0d2240",
+      "2": "#1a3d6e",
+      "3": "#2f73b8",
+      "4": "#58a6ff",
+      "5": "#79c0ff"
+    }
+  },
+  "color": {
+    "bg": {
+      "base": "#1c2128",
+      "surface": "#22272e",
+      "raised": "#2d333b",
+      "overlay": "#353b44",
+      "sunken": "#161b22",
+      "invert": "#adbac7"
+    },
+    "border": {
+      "subtle": "#2d333b",
+      "default": "#373e47",
+      "strong": "#444c56",
+      "accent": "#4d5560"
+    },
+    "text": {
+      "primary": "#adbac7",
+      "secondary": "#768390",
+      "muted": "#636e7b",
+      "accent": "#7ee787",
+      "inverse": "#1c2128",
+      "link": "#58a6ff"
+    },
+    "accent": {
+      "subtle": "#0d1f12",
+      "dim": "#1a3d1e",
+      "muted": "#2ea043",
+      "default": "#7ee787",
+      "bright": "#a0f0a8",
+      "contrast": "#1c2128"
+    },
+    "state": {
+      "idle": "#7ee787",
+      "active": "#56d364",
+      "recording": "#ff1500",
+      "processing": "#e3b341",
+      "success": "#4ade80",
+      "error": "#ff3333",
+      "warning": "#d29922",
+      "info": "#58a6ff"
+    }
+  },
+  "font": {
+    "mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+    "ui": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "display": "'Inter Variable', 'Inter', system-ui, sans-serif"
+  },
+  "fontSize": {
+    "xs": "clamp(9px, calc(9px + 4 * (100vw - 720px) / 1840), 13px)",
+    "sm": "clamp(11px, calc(11px + 5 * (100vw - 720px) / 1840), 16px)",
+    "md": "clamp(12px, calc(12px + 7 * (100vw - 720px) / 1840), 19px)",
+    "lg": "clamp(15px, calc(15px + 10 * (100vw - 720px) / 1840), 25px)",
+    "xl": "clamp(19px, calc(19px + 14 * (100vw - 720px) / 1840), 33px)",
+    "2xl": "clamp(27px, calc(27px + 18 * (100vw - 720px) / 1840), 45px)",
+    "3xl": "clamp(35px, calc(35px + 28 * (100vw - 720px) / 1840), 63px)"
+  },
+  "letterSpacing": {
+    "tight": "0",
+    "normal": "0.05em",
+    "wide": "0.12em",
+    "wider": "0.2em"
+  },
+  "lineHeight": {
+    "tight": "1.1",
+    "normal": "1.4",
+    "loose": "1.7"
+  },
+  "space": {
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "20": "80px",
+    "24": "96px",
+    "px": "1px"
+  },
+  "radius": {
+    "none": "0",
+    "xs": "2px",
+    "sm": "4px",
+    "md": "6px",
+    "lg": "8px",
+    "xl": "12px",
+    "full": "9999px"
+  },
+  "clip": {
+    "sm": "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))",
+    "md": "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))",
+    "lg": "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))",
+    "xl": "polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px))"
+  },
+  "shadow": {
+    "sm": "0 1px 3px rgba(0,0,0,0.4)",
+    "md": "0 2px 8px rgba(0,0,0,0.5)",
+    "lg": "0 4px 16px rgba(0,0,0,0.6)",
+    "xl": "0 8px 32px rgba(0,0,0,0.7)"
+  },
+  "glow": {
+    "accent": "0 0 8px rgba(126,231,135,0.4)",
+    "accent-strong": "0 0 16px rgba(126,231,135,0.7)",
+    "error": "0 0 8px rgba(255,51,51,0.6)",
+    "success": "0 0 8px rgba(74,222,128,0.4)",
+    "processing": "0 0 8px rgba(227,179,65,0.4)"
+  },
+  "opacity": {
+    "5": "0.05",
+    "10": "0.1",
+    "20": "0.2",
+    "40": "0.4",
+    "60": "0.6",
+    "80": "0.8"
+  },
+  "duration": {
+    "fast": "150ms",
+    "base": "250ms",
+    "slow": "400ms",
+    "slower": "600ms"
+  },
+  "easing": {
+    "default": "ease",
+    "in": "ease-in",
+    "out": "ease-out",
+    "linear": "linear",
+    "spring": "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.058, 1.066 24%, 1.058, 1.037 31%, 0.99 38%, 0.977 42%, 0.975, 0.978 48.9%, 1)",
+    "spring-bouncy": "linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1.006 30.7%, 1.119 34.8%, 1.17 38.4%, 1.177, 1.152 44.4%, 1.029 53%, 0.988 57.5%, 0.984, 0.989 63.2%, 1.006 69.3%, 1.012 75.4%, 1.007, 1)"
+  },
+  "focus": {
+    "ring-width": "2px",
+    "ring-offset": "2px",
+    "ring-color": "#7ee787"
+  },
+  "zIndex": {
+    "base": "0",
+    "raised": "10",
+    "overlay": "100",
+    "modal": "200",
+    "toast": "300"
+  },
+  "breakpoint": {
+    "sm": "640px",
+    "md": "1024px",
+    "lg": "1440px",
+    "xl": "1920px",
+    "2xl": "2560px"
+  },
+  "maxWidth": {
+    "prose": "65ch",
+    "sm": "720px",
+    "md": "960px",
+    "lg": "1200px",
+    "xl": "1440px"
+  }
+};
+
+// Flat map of CSS variable name -> value
+export const cssVars = Object.fromEntries([
+  ['--df-primitive-neutral-0', "#0d1117"],
+  ['--df-primitive-neutral-1', "#161b22"],
+  ['--df-primitive-neutral-2', "#1c2128"],
+  ['--df-primitive-neutral-3', "#22272e"],
+  ['--df-primitive-neutral-4', "#2d333b"],
+  ['--df-primitive-neutral-5', "#353b44"],
+  ['--df-primitive-neutral-6', "#444c56"],
+  ['--df-primitive-neutral-7', "#545d68"],
+  ['--df-primitive-neutral-8', "#636e7b"],
+  ['--df-primitive-neutral-9', "#768390"],
+  ['--df-primitive-neutral-10', "#8b949e"],
+  ['--df-primitive-neutral-11', "#adbac7"],
+  ['--df-primitive-neutral-12', "#cdd9e5"],
+  ['--df-primitive-green-1', "#0d1f12"],
+  ['--df-primitive-green-2', "#1a3d1e"],
+  ['--df-primitive-green-3', "#1f6328"],
+  ['--df-primitive-green-4', "#2ea043"],
+  ['--df-primitive-green-5', "#3fb950"],
+  ['--df-primitive-green-6', "#56d364"],
+  ['--df-primitive-green-7', "#7ee787"],
+  ['--df-primitive-green-8', "#a0f0a8"],
+  ['--df-primitive-green-9', "#b7f5bd"],
+  ['--df-primitive-red-1', "#3d0d0d"],
+  ['--df-primitive-red-2', "#6e1616"],
+  ['--df-primitive-red-3', "#a82020"],
+  ['--df-primitive-red-4', "#d32f2f"],
+  ['--df-primitive-red-5', "#ff3333"],
+  ['--df-primitive-red-6', "#ff6b6b"],
+  ['--df-primitive-amber-1', "#3d2600"],
+  ['--df-primitive-amber-2', "#6e4400"],
+  ['--df-primitive-amber-3', "#9e6a03"],
+  ['--df-primitive-amber-4', "#d29922"],
+  ['--df-primitive-amber-5', "#e3b341"],
+  ['--df-primitive-amber-6', "#f0c84d"],
+  ['--df-primitive-blue-1', "#0d2240"],
+  ['--df-primitive-blue-2', "#1a3d6e"],
+  ['--df-primitive-blue-3', "#2f73b8"],
+  ['--df-primitive-blue-4', "#58a6ff"],
+  ['--df-primitive-blue-5', "#79c0ff"],
+  ['--df-color-bg-base', "#1c2128"],
+  ['--df-color-bg-surface', "#22272e"],
+  ['--df-color-bg-raised', "#2d333b"],
+  ['--df-color-bg-overlay', "#353b44"],
+  ['--df-color-bg-sunken', "#161b22"],
+  ['--df-color-bg-invert', "#adbac7"],
+  ['--df-color-border-subtle', "#2d333b"],
+  ['--df-color-border-default', "#373e47"],
+  ['--df-color-border-strong', "#444c56"],
+  ['--df-color-border-accent', "#4d5560"],
+  ['--df-color-text-primary', "#adbac7"],
+  ['--df-color-text-secondary', "#768390"],
+  ['--df-color-text-muted', "#636e7b"],
+  ['--df-color-text-accent', "#7ee787"],
+  ['--df-color-text-inverse', "#1c2128"],
+  ['--df-color-text-link', "#58a6ff"],
+  ['--df-color-accent-subtle', "#0d1f12"],
+  ['--df-color-accent-dim', "#1a3d1e"],
+  ['--df-color-accent-muted', "#2ea043"],
+  ['--df-color-accent-default', "#7ee787"],
+  ['--df-color-accent-bright', "#a0f0a8"],
+  ['--df-color-accent-contrast', "#1c2128"],
+  ['--df-color-state-idle', "#7ee787"],
+  ['--df-color-state-active', "#56d364"],
+  ['--df-color-state-recording', "#ff1500"],
+  ['--df-color-state-processing', "#e3b341"],
+  ['--df-color-state-success', "#4ade80"],
+  ['--df-color-state-error', "#ff3333"],
+  ['--df-color-state-warning', "#d29922"],
+  ['--df-color-state-info', "#58a6ff"],
+  ['--df-font-mono', "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace"],
+  ['--df-font-ui', "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"],
+  ['--df-font-display', "'Inter Variable', 'Inter', system-ui, sans-serif"],
+  ['--df-font-size-xs', "clamp(9px, calc(9px + 4 * (100vw - 720px) / 1840), 13px)"],
+  ['--df-font-size-sm', "clamp(11px, calc(11px + 5 * (100vw - 720px) / 1840), 16px)"],
+  ['--df-font-size-md', "clamp(12px, calc(12px + 7 * (100vw - 720px) / 1840), 19px)"],
+  ['--df-font-size-lg', "clamp(15px, calc(15px + 10 * (100vw - 720px) / 1840), 25px)"],
+  ['--df-font-size-xl', "clamp(19px, calc(19px + 14 * (100vw - 720px) / 1840), 33px)"],
+  ['--df-font-size-2xl', "clamp(27px, calc(27px + 18 * (100vw - 720px) / 1840), 45px)"],
+  ['--df-font-size-3xl', "clamp(35px, calc(35px + 28 * (100vw - 720px) / 1840), 63px)"],
+  ['--df-letter-spacing-tight', "0"],
+  ['--df-letter-spacing-normal', "0.05em"],
+  ['--df-letter-spacing-wide', "0.12em"],
+  ['--df-letter-spacing-wider', "0.2em"],
+  ['--df-line-height-tight', "1.1"],
+  ['--df-line-height-normal', "1.4"],
+  ['--df-line-height-loose', "1.7"],
+  ['--df-space-1', "4px"],
+  ['--df-space-2', "8px"],
+  ['--df-space-3', "12px"],
+  ['--df-space-4', "16px"],
+  ['--df-space-5', "20px"],
+  ['--df-space-6', "24px"],
+  ['--df-space-8', "32px"],
+  ['--df-space-10', "40px"],
+  ['--df-space-12', "48px"],
+  ['--df-space-16', "64px"],
+  ['--df-space-20', "80px"],
+  ['--df-space-24', "96px"],
+  ['--df-space-px', "1px"],
+  ['--df-radius-none', "0"],
+  ['--df-radius-xs', "2px"],
+  ['--df-radius-sm', "4px"],
+  ['--df-radius-md', "6px"],
+  ['--df-radius-lg', "8px"],
+  ['--df-radius-xl', "12px"],
+  ['--df-radius-full', "9999px"],
+  ['--df-clip-sm', "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))"],
+  ['--df-clip-md', "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))"],
+  ['--df-clip-lg', "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))"],
+  ['--df-clip-xl', "polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px))"],
+  ['--df-shadow-sm', "0 1px 3px rgba(0,0,0,0.4)"],
+  ['--df-shadow-md', "0 2px 8px rgba(0,0,0,0.5)"],
+  ['--df-shadow-lg', "0 4px 16px rgba(0,0,0,0.6)"],
+  ['--df-shadow-xl', "0 8px 32px rgba(0,0,0,0.7)"],
+  ['--df-glow-accent', "0 0 8px rgba(126,231,135,0.4)"],
+  ['--df-glow-accent-strong', "0 0 16px rgba(126,231,135,0.7)"],
+  ['--df-glow-error', "0 0 8px rgba(255,51,51,0.6)"],
+  ['--df-glow-success', "0 0 8px rgba(74,222,128,0.4)"],
+  ['--df-glow-processing', "0 0 8px rgba(227,179,65,0.4)"],
+  ['--df-opacity-5', "0.05"],
+  ['--df-opacity-10', "0.1"],
+  ['--df-opacity-20', "0.2"],
+  ['--df-opacity-40', "0.4"],
+  ['--df-opacity-60', "0.6"],
+  ['--df-opacity-80', "0.8"],
+  ['--df-duration-fast', "150ms"],
+  ['--df-duration-base', "250ms"],
+  ['--df-duration-slow', "400ms"],
+  ['--df-duration-slower', "600ms"],
+  ['--df-easing-default', "ease"],
+  ['--df-easing-in', "ease-in"],
+  ['--df-easing-out', "ease-out"],
+  ['--df-easing-linear', "linear"],
+  ['--df-easing-spring', "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.058, 1.066 24%, 1.058, 1.037 31%, 0.99 38%, 0.977 42%, 0.975, 0.978 48.9%, 1)"],
+  ['--df-easing-spring-bouncy', "linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1.006 30.7%, 1.119 34.8%, 1.17 38.4%, 1.177, 1.152 44.4%, 1.029 53%, 0.988 57.5%, 0.984, 0.989 63.2%, 1.006 69.3%, 1.012 75.4%, 1.007, 1)"],
+  ['--df-focus-ring-width', "2px"],
+  ['--df-focus-ring-offset', "2px"],
+  ['--df-focus-ring-color', "#7ee787"],
+  ['--df-z-index-base', "0"],
+  ['--df-z-index-raised', "10"],
+  ['--df-z-index-overlay', "100"],
+  ['--df-z-index-modal', "200"],
+  ['--df-z-index-toast', "300"],
+  ['--df-breakpoint-sm', "640px"],
+  ['--df-breakpoint-md', "1024px"],
+  ['--df-breakpoint-lg', "1440px"],
+  ['--df-breakpoint-xl', "1920px"],
+  ['--df-breakpoint-2xl', "2560px"],
+  ['--df-max-width-prose', "65ch"],
+  ['--df-max-width-sm', "720px"],
+  ['--df-max-width-md', "960px"],
+  ['--df-max-width-lg', "1200px"],
+  ['--df-max-width-xl', "1440px"],
+]);
+
+// Convenience re-exports
+export const primitives = tokens.primitive;
+export const colors     = tokens.color;
+export const fonts      = tokens.font;
+export const fontSizes  = tokens.fontSize;
+export const spacing    = tokens.space;
+export const radii      = tokens.radius;
+export const clips      = tokens.clip;
+export const shadows    = tokens.shadow;
+export const glows      = tokens.glow;
+export const opacities  = tokens.opacity;
+export const durations  = tokens.duration;
+export const easings    = tokens.easing;
+export const focusRing    = tokens.focus;
+export const breakpoints  = tokens.breakpoint;
+export const maxWidths    = tokens.maxWidth;

package/src/packages/design-tokens/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@devglide/design-tokens",
+  "version": "0.1.0",
+  "description": "Devglide design token system — NGE/NERV aesthetic",
+  "type": "module",
+  "main": "./dist/tokens.js",
+  "types": "./dist/tokens.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/tokens.js",
+      "types": "./dist/tokens.d.ts"
+    },
+    "./css": "./dist/tokens.css",
+    "./tailwind": "./dist/tailwind-preset.js"
+  },
+  "files": [
+    "dist/",
+    "demo/",
+    "tokens.json",
+    "STYLEGUIDE.md"
+  ],
+  "scripts": {
+    "build": "node build.js"
+  }
+}

package/src/packages/design-tokens/tokens.json

@@ -0,0 +1,228 @@
+{
+  "primitive": {
+    "neutral": {
+      "0":  "#0d1117",
+      "1":  "#161b22",
+      "2":  "#1c2128",
+      "3":  "#22272e",
+      "4":  "#2d333b",
+      "5":  "#353b44",
+      "6":  "#444c56",
+      "7":  "#545d68",
+      "8":  "#636e7b",
+      "9":  "#768390",
+      "10": "#8b949e",
+      "11": "#adbac7",
+      "12": "#cdd9e5"
+    },
+    "green": {
+      "1": "#0d1f12",
+      "2": "#1a3d1e",
+      "3": "#1f6328",
+      "4": "#2ea043",
+      "5": "#3fb950",
+      "6": "#56d364",
+      "7": "#7ee787",
+      "8": "#a0f0a8",
+      "9": "#b7f5bd"
+    },
+    "red": {
+      "1": "#3d0d0d",
+      "2": "#6e1616",
+      "3": "#a82020",
+      "4": "#d32f2f",
+      "5": "#ff3333",
+      "6": "#ff6b6b"
+    },
+    "amber": {
+      "1": "#3d2600",
+      "2": "#6e4400",
+      "3": "#9e6a03",
+      "4": "#d29922",
+      "5": "#e3b341",
+      "6": "#f0c84d"
+    },
+    "blue": {
+      "1": "#0d2240",
+      "2": "#1a3d6e",
+      "3": "#2f73b8",
+      "4": "#58a6ff",
+      "5": "#79c0ff"
+    }
+  },
+
+  "color": {
+    "bg": {
+      "base":    "#1c2128",
+      "surface": "#22272e",
+      "raised":  "#2d333b",
+      "overlay": "#353b44",
+      "sunken":  "#161b22",
+      "invert":  "#adbac7"
+    },
+    "border": {
+      "subtle":  "#2d333b",
+      "default": "#373e47",
+      "strong":  "#444c56",
+      "accent":  "#4d5560"
+    },
+    "text": {
+      "primary":   "#adbac7",
+      "secondary": "#768390",
+      "muted":     "#636e7b",
+      "accent":    "#7ee787",
+      "inverse":   "#1c2128",
+      "link":      "#58a6ff"
+    },
+    "accent": {
+      "subtle":   "#0d1f12",
+      "dim":      "#1a3d1e",
+      "muted":    "#2ea043",
+      "default":  "#7ee787",
+      "bright":   "#a0f0a8",
+      "contrast": "#1c2128"
+    },
+    "state": {
+      "idle":       "#7ee787",
+      "active":     "#56d364",
+      "recording":  "#ff1500",
+      "processing": "#e3b341",
+      "success":    "#4ade80",
+      "error":      "#ff3333",
+      "warning":    "#d29922",
+      "info":       "#58a6ff"
+    }
+  },
+
+  "font": {
+    "mono":    "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+    "ui":      "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "display": "'Inter Variable', 'Inter', system-ui, sans-serif"
+  },
+
+  "fontSize": {
+    "xs":  "clamp(9px, calc(9px + 4 * (100vw - 720px) / 1840), 13px)",
+    "sm":  "clamp(11px, calc(11px + 5 * (100vw - 720px) / 1840), 16px)",
+    "md":  "clamp(12px, calc(12px + 7 * (100vw - 720px) / 1840), 19px)",
+    "lg":  "clamp(15px, calc(15px + 10 * (100vw - 720px) / 1840), 25px)",
+    "xl":  "clamp(19px, calc(19px + 14 * (100vw - 720px) / 1840), 33px)",
+    "2xl": "clamp(27px, calc(27px + 18 * (100vw - 720px) / 1840), 45px)",
+    "3xl": "clamp(35px, calc(35px + 28 * (100vw - 720px) / 1840), 63px)"
+  },
+
+  "letterSpacing": {
+    "tight":  "0",
+    "normal": "0.05em",
+    "wide":   "0.12em",
+    "wider":  "0.2em"
+  },
+
+  "lineHeight": {
+    "tight":  "1.1",
+    "normal": "1.4",
+    "loose":  "1.7"
+  },
+
+  "space": {
+    "px": "1px",
+    "1":  "4px",
+    "2":  "8px",
+    "3":  "12px",
+    "4":  "16px",
+    "5":  "20px",
+    "6":  "24px",
+    "8":  "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "20": "80px",
+    "24": "96px"
+  },
+
+  "radius": {
+    "none": "0",
+    "xs":   "2px",
+    "sm":   "4px",
+    "md":   "6px",
+    "lg":   "8px",
+    "xl":   "12px",
+    "full": "9999px"
+  },
+
+  "clip": {
+    "sm": "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))",
+    "md": "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))",
+    "lg": "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))",
+    "xl": "polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px))"
+  },
+
+  "shadow": {
+    "sm": "0 1px 3px rgba(0,0,0,0.4)",
+    "md": "0 2px 8px rgba(0,0,0,0.5)",
+    "lg": "0 4px 16px rgba(0,0,0,0.6)",
+    "xl": "0 8px 32px rgba(0,0,0,0.7)"
+  },
+
+  "glow": {
+    "accent":        "0 0 8px rgba(126,231,135,0.4)",
+    "accent-strong": "0 0 16px rgba(126,231,135,0.7)",
+    "error":         "0 0 8px rgba(255,51,51,0.6)",
+    "success":       "0 0 8px rgba(74,222,128,0.4)",
+    "processing":    "0 0 8px rgba(227,179,65,0.4)"
+  },
+
+  "opacity": {
+    "5":  "0.05",
+    "10": "0.1",
+    "20": "0.2",
+    "40": "0.4",
+    "60": "0.6",
+    "80": "0.8"
+  },
+
+  "duration": {
+    "fast":   "150ms",
+    "base":   "250ms",
+    "slow":   "400ms",
+    "slower": "600ms"
+  },
+
+  "easing": {
+    "default": "ease",
+    "in":      "ease-in",
+    "out":     "ease-out",
+    "linear":  "linear",
+    "spring":  "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.058, 1.066 24%, 1.058, 1.037 31%, 0.99 38%, 0.977 42%, 0.975, 0.978 48.9%, 1)",
+    "spring-bouncy": "linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1.006 30.7%, 1.119 34.8%, 1.17 38.4%, 1.177, 1.152 44.4%, 1.029 53%, 0.988 57.5%, 0.984, 0.989 63.2%, 1.006 69.3%, 1.012 75.4%, 1.007, 1)"
+  },
+
+  "focus": {
+    "ring-width":  "2px",
+    "ring-offset": "2px",
+    "ring-color":  "#7ee787"
+  },
+
+  "zIndex": {
+    "base":    "0",
+    "raised":  "10",
+    "overlay": "100",
+    "modal":   "200",
+    "toast":   "300"
+  },
+
+  "breakpoint": {
+    "sm":  "640px",
+    "md":  "1024px",
+    "lg":  "1440px",
+    "xl":  "1920px",
+    "2xl": "2560px"
+  },
+
+  "maxWidth": {
+    "prose": "65ch",
+    "sm":    "720px",
+    "md":    "960px",
+    "lg":    "1200px",
+    "xl":    "1440px"
+  }
+}

package/src/packages/devtools-middleware.ts

@@ -0,0 +1,22 @@
+/**
+ * Devglide devtools script sources — provides inlined console-sniffer
+ * and scenario-runner JS for embedding in devtools endpoints.
+ */
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Read script sources once at startup
+let snifferSource: string = '';
+let runnerSource: string = '';
+try {
+  snifferSource = readFileSync(path.join(__dirname, '../apps/log/public/console-sniffer.js'), 'utf-8');
+} catch {}
+try {
+  runnerSource = readFileSync(path.join(__dirname, '../apps/test/public/scenario-runner.js'), 'utf-8');
+} catch {}
+
+export { snifferSource, runnerSource };