@sdvf23rvfa43f/stealth-glass 1.3.0

package/dist/chunk-5IRVGRFN.js

@@ -0,0 +1,237 @@
+// design-tokens.ts
+var colors = {
+  /** Backgrounds — Depth layers from deepest to brightest */
+  bg: {
+    void: "#0B0E14",
+    // Layer 0 — Page background (deepest)
+    subtle: "#0D0F13",
+    // Subtle variation
+    surface: "#0E1119",
+    // Layer 2 — Card/tile surface
+    elevated: "#12151B",
+    // Hover states, popovers
+    highlight: "#1A1E26"
+    // Active/selected state
+  },
+  /** Text — 3-level hierarchy */
+  text: {
+    primary: "#EDEDEF",
+    // Headlines, values
+    secondary: "#9A92B1",
+    // Descriptions
+    muted: "#535C6B"
+    // Labels, timestamps
+  },
+  /** Borders — Opacity-based for glass effect */
+  border: {
+    default: "#252C41",
+    subtle: "rgba(255, 255, 255, 0.05)",
+    hover: "rgba(255, 255, 255, 0.10)",
+    active: "rgba(255, 255, 255, 0.15)",
+    /** The inner "cut edge" shadow for depth */
+    inset: "rgba(255, 255, 255, 0.02)",
+    insetHover: "rgba(255, 255, 255, 0.05)"
+  },
+  /** Brand — Primary accent colors */
+  brand: {
+    blue: "#3B82F6",
+    indigo: "#6366F1",
+    purple: "#8B5CF6"
+  },
+  /** Status — Semantic meaning */
+  status: {
+    success: "#10B981",
+    // Emerald
+    warning: "#F59E0B",
+    // Amber
+    danger: "#EF4444",
+    // Red
+    info: "#3B82F6",
+    // Blue
+    away: "#F97316",
+    // Orange
+    busy: "#EF4444"
+    // Red
+  },
+  /** Glows — For box-shadow and filter effects */
+  glow: {
+    blue: "rgba(59, 130, 246, 0.3)",
+    indigo: "rgba(99, 102, 241, 0.3)",
+    success: "rgba(16, 185, 129, 0.3)",
+    warning: "rgba(245, 158, 11, 0.3)",
+    danger: "rgba(239, 68, 68, 0.3)"
+  }
+};
+var typography = {
+  /** Font families */
+  font: {
+    sans: "'Inter', 'Geist', system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
+  },
+  /** HUD Label — for category/section labels */
+  hudLabel: {
+    fontSize: "10px",
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: "0.2em",
+    color: colors.text.muted
+  },
+  /** Data Value — for numbers, IPs, dates, prices */
+  dataValue: {
+    fontFamily: "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
+    fontVariantNumeric: "tabular-nums",
+    letterSpacing: "-0.02em",
+    color: colors.text.primary
+  }
+};
+var radii = {
+  tile: "2rem",
+  // 32px — Bento tiles (outer)
+  inner: "1rem",
+  // 16px — Inner elements
+  button: "9999px",
+  // Pill shape
+  input: "0.75rem"
+  // 12px — Form inputs
+};
+var spacing = {
+  gap: {
+    mobile: "1rem",
+    // 16px — gap-4
+    desktop: "1.5rem"
+    // 24px — gap-6
+  },
+  containerMax: "1600px"
+};
+var motion = {
+  duration: {
+    fast: 150,
+    // Hover micro-interactions
+    normal: 300,
+    // Standard transitions
+    slow: 500,
+    // Page entrance animations
+    cinematic: 700
+    // Hero/showcase animations
+  },
+  easing: {
+    outExpo: "cubic-bezier(0.16, 1, 0.3, 1)",
+    spring: { type: "spring", stiffness: 50, damping: 15, mass: 1 }
+  },
+  /** Motion (framer-motion) page entry animation */
+  staggerContainer: {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.1
+      }
+    }
+  },
+  /** Motion item animation: slide up + fade + blur */
+  staggerItem: {
+    hidden: { opacity: 0, y: 20, filter: "blur(10px)" },
+    show: {
+      opacity: 1,
+      y: 0,
+      filter: "blur(0px)",
+      transition: {
+        type: "spring",
+        stiffness: 50,
+        damping: 15,
+        mass: 1
+      }
+    }
+  }
+};
+var shadows = {
+  /** Tile inner cut-edge (subtle depth) */
+  tileInset: "inset 0 0 0 1px rgba(255,255,255,0.02)",
+  tileInsetHover: "inset 0 0 0 1px rgba(255,255,255,0.05)",
+  /** CTA button glow */
+  ctaGlow: "0 4px 20px rgba(37, 99, 235, 0.3)",
+  ctaGlowHover: "0 6px 25px rgba(37, 99, 235, 0.4)",
+  /** Deploy button intense glow */
+  deployGlow: "0 0 20px rgba(59, 130, 246, 0.4)",
+  deployGlowHover: "0 0 30px rgba(59, 130, 246, 0.6)",
+  /** Status indicator halos */
+  statusOnline: "0 0 8px rgba(52, 211, 153, 0.6)",
+  statusOffline: "0 0 8px rgba(239, 68, 68, 0.4)",
+  /** Slider thumb glow */
+  sliderThumb: "0 0 8px rgba(59, 130, 246, 0.3)",
+  /** Dropdown / popover shadow */
+  dropdown: "0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05)"
+};
+var tw = {
+  /** Glass Tile — the primary bento card */
+  tile: {
+    base: "bg-background border border-white/5 rounded-[2rem] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] backdrop-blur-xl",
+    hover: "hover:border-white/10 hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)] hover:bg-sg-elevated",
+    full: "bg-background border border-white/5 rounded-[2rem] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] backdrop-blur-xl hover:border-white/10 hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)] hover:bg-sg-elevated transition-all duration-300"
+  },
+  /** Inner surface — nested within tiles */
+  inner: {
+    base: "bg-white/[0.02] border border-white/5 rounded-xl",
+    hover: "hover:bg-white/[0.04] hover:border-white/10",
+    full: "bg-white/[0.02] border border-white/5 rounded-xl hover:bg-white/[0.04] hover:border-white/10 transition-all duration-300"
+  },
+  /** HUD Label */
+  label: "text-[10px] font-bold uppercase tracking-[0.2em] text-sg-text-muted",
+  /** Data Value (mono) */
+  dataValue: "font-mono text-white tracking-tight",
+  /** Primary CTA button (T1 · pill) */
+  ctaButton: "rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white border border-white/15 shadow-[0_4px_20px_rgba(37,99,235,0.3),inset_0_1px_0_rgba(255,255,255,0.1)] hover:shadow-[0_6px_30px_rgba(37,99,235,0.45),inset_0_1px_0_rgba(255,255,255,0.15)] hover:brightness-110 hover:scale-[1.03] active:scale-[0.97] tracking-wide transition-all",
+  /** Ghost/Secondary button (T3 · standard) */
+  ghostButton: "rounded-xl bg-sg-highlight/80 backdrop-blur-sm border border-white/[0.06] text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),inset_0_1px_0_rgba(255,255,255,0.03)] hover:bg-white/[0.08] hover:border-white/[0.12] transition-all",
+  /** Input field */
+  input: "h-14 bg-card border border-white/5 rounded-xl text-foreground placeholder:text-sg-text-muted/60 focus:border-blue-500/50 focus:bg-sg-elevated focus:ring-blue-500/20 transition-all",
+  /** Error alert */
+  errorAlert: "bg-red-500/20 border-2 border-red-500/50 rounded-2xl shadow-lg shadow-red-500/20",
+  /** Focus shadow (WCAG AA) */
+  focusShadow: "focus-visible:shadow-[0_0_0_4px_rgba(59,130,246,0.15)]",
+  /** Code block */
+  codeBlock: "bg-background font-mono text-sm text-foreground rounded-xl border border-white/5",
+  inlineCode: "px-1.5 py-0.5 rounded bg-white/[0.04] border border-white/10 text-sm font-mono text-foreground",
+  /** Log viewer */
+  logLine: "flex items-center gap-2 px-3 py-1.5 font-mono text-xs",
+  logLineError: "bg-red-500/[0.03] border-l-2 border-red-500",
+  logLineWarn: "border-l-2 border-amber-500/50",
+  /** Bento Grid container */
+  bentoGrid: "grid gap-4 md:gap-6 max-w-[1600px] mx-auto",
+  /** Page entrance animation */
+  pageEntry: "animate-in fade-in slide-in-from-bottom-8 duration-700"
+};
+var chartTheme = {
+  /** Use these colors in Recharts <Line>, <Bar>, <Area> */
+  series: [
+    colors.brand.blue,
+    colors.brand.indigo,
+    colors.brand.purple,
+    colors.status.success,
+    colors.status.warning
+  ],
+  /** Grid/axis styling */
+  grid: {
+    stroke: "rgba(255, 255, 255, 0.05)",
+    strokeDasharray: "3 3"
+  },
+  /** Axis text */
+  axisText: {
+    fill: colors.text.muted,
+    fontSize: 10,
+    fontFamily: typography.font.mono
+  },
+  /** Tooltip */
+  tooltip: {
+    backgroundColor: colors.bg.elevated,
+    borderColor: colors.border.subtle,
+    borderRadius: 12,
+    textColor: colors.text.primary,
+    labelColor: colors.text.secondary
+  }
+};
+
+export { chartTheme, colors, motion, radii, shadows, spacing, tw, typography };
+//# sourceMappingURL=chunk-5IRVGRFN.js.map
+//# sourceMappingURL=chunk-5IRVGRFN.js.map

package/dist/chunk-5IRVGRFN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../design-tokens.ts"],"names":[],"mappings":"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","file":"chunk-5IRVGRFN.js","sourcesContent":["/* ═══════════════════════════════════════════════════════════════\n   STEALTH GLASS DESIGN SYSTEM — TypeScript Design Tokens\n   ═══════════════════════════════════════════════════════════════\n   \n   HOW TO USE:\n   Import tokens for programmatic access in React components,\n   inline styles, charts (Recharts), canvas, SVG, etc.\n   \n   import { colors, spacing, radii } from '@/theme/design-tokens';\n   ═══════════════════════════════════════════════════════════════ */\n\n// ─── Colors ─────────────────────────────────────────────────\n\nexport const colors = {\n  /** Backgrounds — Depth layers from deepest to brightest */\n  bg: {\n    void:      '#0B0E14',   // Layer 0 — Page background (deepest)\n    subtle:    '#0D0F13',   // Subtle variation\n    surface:   '#0E1119',   // Layer 2 — Card/tile surface\n    elevated:  '#12151B',   // Hover states, popovers\n    highlight: '#1A1E26',   // Active/selected state\n  },\n\n  /** Text — 3-level hierarchy */\n  text: {\n    primary:   '#EDEDEF',   // Headlines, values\n    secondary: '#9A92B1',   // Descriptions\n    muted:     '#535C6B',   // Labels, timestamps\n  },\n\n  /** Borders — Opacity-based for glass effect */\n  border: {\n    default:   '#252C41',\n    subtle:    'rgba(255, 255, 255, 0.05)',\n    hover:     'rgba(255, 255, 255, 0.10)',\n    active:    'rgba(255, 255, 255, 0.15)',\n    /** The inner \"cut edge\" shadow for depth */\n    inset:     'rgba(255, 255, 255, 0.02)',\n    insetHover:'rgba(255, 255, 255, 0.05)',\n  },\n\n  /** Brand — Primary accent colors */\n  brand: {\n    blue:      '#3B82F6',\n    indigo:    '#6366F1',\n    purple:    '#8B5CF6',\n  },\n\n  /** Status — Semantic meaning */\n  status: {\n    success:   '#10B981',   // Emerald\n    warning:   '#F59E0B',   // Amber\n    danger:    '#EF4444',   // Red\n    info:      '#3B82F6',   // Blue\n    away:      '#F97316',   // Orange\n    busy:      '#EF4444',   // Red\n  },\n\n  /** Glows — For box-shadow and filter effects */\n  glow: {\n    blue:      'rgba(59, 130, 246, 0.3)',\n    indigo:    'rgba(99, 102, 241, 0.3)',\n    success:   'rgba(16, 185, 129, 0.3)',\n    warning:   'rgba(245, 158, 11, 0.3)',\n    danger:    'rgba(239, 68, 68, 0.3)',\n  },\n} as const;\n\n\n// ─── Typography ─────────────────────────────────────────────\n\nexport const typography = {\n  /** Font families */\n  font: {\n    sans:  \"'Inter', 'Geist', system-ui, -apple-system, sans-serif\",\n    mono:  \"'JetBrains Mono', 'Fira Code', ui-monospace, monospace\",\n  },\n\n  /** HUD Label — for category/section labels */\n  hudLabel: {\n    fontSize:      '10px',\n    fontWeight:    700,\n    textTransform: 'uppercase' as const,\n    letterSpacing: '0.2em',\n    color:         colors.text.muted,\n  },\n\n  /** Data Value — for numbers, IPs, dates, prices */\n  dataValue: {\n    fontFamily:    \"'JetBrains Mono', 'Fira Code', ui-monospace, monospace\",\n    fontVariantNumeric: 'tabular-nums',\n    letterSpacing: '-0.02em',\n    color:         colors.text.primary,\n  },\n} as const;\n\n\n// ─── Geometry ───────────────────────────────────────────────\n\nexport const radii = {\n  tile:    '2rem',     // 32px — Bento tiles (outer)\n  inner:   '1rem',     // 16px — Inner elements\n  button:  '9999px',   // Pill shape\n  input:   '0.75rem',  // 12px — Form inputs\n} as const;\n\nexport const spacing = {\n  gap: {\n    mobile:  '1rem',     // 16px — gap-4\n    desktop: '1.5rem',   // 24px — gap-6\n  },\n  containerMax: '1600px',\n} as const;\n\n\n// ─── Motion ─────────────────────────────────────────────────\n\nexport const motion = {\n  duration: {\n    fast:      150,       // Hover micro-interactions\n    normal:    300,       // Standard transitions\n    slow:      500,       // Page entrance animations\n    cinematic: 700,       // Hero/showcase animations\n  },\n\n  easing: {\n    outExpo: 'cubic-bezier(0.16, 1, 0.3, 1)',\n    spring:  { type: 'spring', stiffness: 50, damping: 15, mass: 1 },\n  },\n\n  /** Motion (framer-motion) page entry animation */\n  staggerContainer: {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n        delayChildren: 0.1,\n      },\n    },\n  },\n\n  /** Motion item animation: slide up + fade + blur */\n  staggerItem: {\n    hidden: { opacity: 0, y: 20, filter: 'blur(10px)' },\n    show: {\n      opacity: 1,\n      y: 0,\n      filter: 'blur(0px)',\n      transition: {\n        type: 'spring',\n        stiffness: 50,\n        damping: 15,\n        mass: 1,\n      },\n    },\n  },\n} as const;\n\n\n// ─── Shadows ────────────────────────────────────────────────\n\nexport const shadows = {\n  /** Tile inner cut-edge (subtle depth) */\n  tileInset:      'inset 0 0 0 1px rgba(255,255,255,0.02)',\n  tileInsetHover: 'inset 0 0 0 1px rgba(255,255,255,0.05)',\n\n  /** CTA button glow */\n  ctaGlow:        '0 4px 20px rgba(37, 99, 235, 0.3)',\n  ctaGlowHover:   '0 6px 25px rgba(37, 99, 235, 0.4)',\n\n  /** Deploy button intense glow */\n  deployGlow:      '0 0 20px rgba(59, 130, 246, 0.4)',\n  deployGlowHover: '0 0 30px rgba(59, 130, 246, 0.6)',\n\n  /** Status indicator halos */\n  statusOnline:    '0 0 8px rgba(52, 211, 153, 0.6)',\n  statusOffline:   '0 0 8px rgba(239, 68, 68, 0.4)',\n\n  /** Slider thumb glow */\n  sliderThumb:     '0 0 8px rgba(59, 130, 246, 0.3)',\n\n  /** Dropdown / popover shadow */\n  dropdown:        '0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05)',\n} as const;\n\n\n// ─── Composite Tailwind Class Strings ───────────────────────\n// Use these as className={tokens.tile.base} for consistency\n\nexport const tw = {\n  /** Glass Tile — the primary bento card */\n  tile: {\n    base:  'bg-background border border-white/5 rounded-[2rem] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] backdrop-blur-xl',\n    hover: 'hover:border-white/10 hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)] hover:bg-sg-elevated',\n    full:  'bg-background border border-white/5 rounded-[2rem] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] backdrop-blur-xl hover:border-white/10 hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)] hover:bg-sg-elevated transition-all duration-300',\n  },\n\n  /** Inner surface — nested within tiles */\n  inner: {\n    base:  'bg-white/[0.02] border border-white/5 rounded-xl',\n    hover: 'hover:bg-white/[0.04] hover:border-white/10',\n    full:  'bg-white/[0.02] border border-white/5 rounded-xl hover:bg-white/[0.04] hover:border-white/10 transition-all duration-300',\n  },\n\n  /** HUD Label */\n  label: 'text-[10px] font-bold uppercase tracking-[0.2em] text-sg-text-muted',\n\n  /** Data Value (mono) */\n  dataValue: 'font-mono text-white tracking-tight',\n\n  /** Primary CTA button (T1 · pill) */\n  ctaButton: 'rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white border border-white/15 shadow-[0_4px_20px_rgba(37,99,235,0.3),inset_0_1px_0_rgba(255,255,255,0.1)] hover:shadow-[0_6px_30px_rgba(37,99,235,0.45),inset_0_1px_0_rgba(255,255,255,0.15)] hover:brightness-110 hover:scale-[1.03] active:scale-[0.97] tracking-wide transition-all',\n\n  /** Ghost/Secondary button (T3 · standard) */\n  ghostButton: 'rounded-xl bg-sg-highlight/80 backdrop-blur-sm border border-white/[0.06] text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),inset_0_1px_0_rgba(255,255,255,0.03)] hover:bg-white/[0.08] hover:border-white/[0.12] transition-all',\n\n  /** Input field */\n  input: 'h-14 bg-card border border-white/5 rounded-xl text-foreground placeholder:text-sg-text-muted/60 focus:border-blue-500/50 focus:bg-sg-elevated focus:ring-blue-500/20 transition-all',\n\n  /** Error alert */\n  errorAlert: 'bg-red-500/20 border-2 border-red-500/50 rounded-2xl shadow-lg shadow-red-500/20',\n\n  /** Focus shadow (WCAG AA) */\n  focusShadow: 'focus-visible:shadow-[0_0_0_4px_rgba(59,130,246,0.15)]',\n\n  /** Code block */\n  codeBlock: 'bg-background font-mono text-sm text-foreground rounded-xl border border-white/5',\n  inlineCode: 'px-1.5 py-0.5 rounded bg-white/[0.04] border border-white/10 text-sm font-mono text-foreground',\n\n  /** Log viewer */\n  logLine: 'flex items-center gap-2 px-3 py-1.5 font-mono text-xs',\n  logLineError: 'bg-red-500/[0.03] border-l-2 border-red-500',\n  logLineWarn: 'border-l-2 border-amber-500/50',\n\n  /** Bento Grid container */\n  bentoGrid: 'grid gap-4 md:gap-6 max-w-[1600px] mx-auto',\n\n  /** Page entrance animation */\n  pageEntry: 'animate-in fade-in slide-in-from-bottom-8 duration-700',\n} as const;\n\n\n// ─── Chart Theme (Recharts compatible) ──────────────────────\n\nexport const chartTheme = {\n  /** Use these colors in Recharts <Line>, <Bar>, <Area> */\n  series: [\n    colors.brand.blue,\n    colors.brand.indigo,\n    colors.brand.purple,\n    colors.status.success,\n    colors.status.warning,\n  ],\n\n  /** Grid/axis styling */\n  grid: {\n    stroke: 'rgba(255, 255, 255, 0.05)',\n    strokeDasharray: '3 3',\n  },\n\n  /** Axis text */\n  axisText: {\n    fill: colors.text.muted,\n    fontSize: 10,\n    fontFamily: typography.font.mono,\n  },\n\n  /** Tooltip */\n  tooltip: {\n    backgroundColor: colors.bg.elevated,\n    borderColor: colors.border.subtle,\n    borderRadius: 12,\n    textColor: colors.text.primary,\n    labelColor: colors.text.secondary,\n  },\n} as const;"]}