@ash-cloud/ash-ui 0.0.1

package/dist/design-tokens.cjs

@@ -0,0 +1,275 @@
+'use strict';
+
+// src/design-tokens.ts
+var colors = {
+  // Primary accent color (lime green)
+  accent: {
+    DEFAULT: "#ccff00",
+    50: "#f8ffe5",
+    100: "#eeffb8",
+    200: "#e0ff85",
+    300: "#d4ff52",
+    400: "#ccff00",
+    500: "#b8e600",
+    600: "#99cc00",
+    700: "#739900",
+    800: "#4d6600",
+    900: "#263300"
+  },
+  // Surface colors (dark theme)
+  surface: {
+    dark: "#0a0a0a",
+    darker: "#050505",
+    card: "#0c0c0c",
+    elevated: "#111111"
+  },
+  // Text colors
+  text: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.7)",
+    muted: "rgba(255, 255, 255, 0.5)",
+    disabled: "rgba(255, 255, 255, 0.3)"
+  },
+  // Border colors
+  border: {
+    DEFAULT: "rgba(255, 255, 255, 0.1)",
+    hover: "rgba(255, 255, 255, 0.2)",
+    accent: "rgba(204, 255, 0, 0.3)",
+    accentHover: "rgba(204, 255, 0, 0.5)"
+  },
+  // Status colors
+  status: {
+    success: "#10b981",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  // User message background
+  user: {
+    bg: "rgba(204, 255, 0, 0.1)",
+    border: "rgba(204, 255, 0, 0.2)"
+  },
+  // Assistant message background
+  assistant: {
+    bg: "rgba(255, 255, 255, 0.05)",
+    border: "rgba(255, 255, 255, 0.1)"
+  }
+};
+var spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "32px",
+  "3xl": "48px"
+};
+var borderRadius = {
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "20px",
+  "2xl": "24px",
+  full: "9999px"
+};
+var shadows = {
+  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.4)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.5)",
+  xl: "0 20px 25px rgba(0, 0, 0, 0.6)",
+  glow: {
+    sm: "0 0 10px rgba(204, 255, 0, 0.2)",
+    md: "0 0 20px rgba(204, 255, 0, 0.3)",
+    lg: "0 0 30px rgba(204, 255, 0, 0.5)"
+  },
+  panel: "0 25px 50px rgba(0, 0, 0, 0.5)"
+};
+var typography = {
+  fontFamily: {
+    sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px"
+  },
+  lineHeight: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75"
+  }
+};
+var keyframes = {
+  slideUp: {
+    from: { opacity: "0", transform: "translateY(20px)" },
+    to: { opacity: "1", transform: "translateY(0)" }
+  },
+  fadeIn: {
+    from: { opacity: "0", transform: "translateY(10px)" },
+    to: { opacity: "1", transform: "translateY(0)" }
+  },
+  blink: {
+    "0%, 50%": { opacity: "1" },
+    "51%, 100%": { opacity: "0" }
+  },
+  bounce: {
+    "0%, 80%, 100%": { transform: "scale(0)" },
+    "40%": { transform: "scale(1)" }
+  },
+  pulse: {
+    "0%, 100%": { opacity: "1" },
+    "50%": { opacity: "0.5" }
+  },
+  glowPulse: {
+    "0%, 100%": { boxShadow: "0 0 20px rgba(204, 255, 0, 0.3)" },
+    "50%": { boxShadow: "0 0 40px rgba(204, 255, 0, 0.5)" }
+  }
+};
+var keyframesCss = {
+  slideUp: `
+    @keyframes ash-slide-up {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `,
+  fadeIn: `
+    @keyframes ash-fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `,
+  blink: `
+    @keyframes ash-blink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+  `,
+  bounce: `
+    @keyframes ash-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+  `,
+  pulse: `
+    @keyframes ash-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+  `,
+  glowPulse: `
+    @keyframes ash-glow-pulse {
+      0%, 100% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.3); }
+      50% { box-shadow: 0 0 40px rgba(204, 255, 0, 0.5); }
+    }
+  `
+};
+var allKeyframesCss = Object.values(keyframesCss).join("\n");
+var transitions = {
+  fast: "150ms ease-out",
+  normal: "300ms ease-out",
+  slow: "500ms ease-out",
+  spring: "400ms cubic-bezier(0.16, 1, 0.3, 1)"
+};
+var zIndex = {
+  base: 0,
+  dropdown: 100,
+  modal: 200,
+  tooltip: 300,
+  widget: 999999
+};
+var widget = {
+  launcher: {
+    size: "60px",
+    iconSize: "28px"
+  },
+  panel: {
+    width: "400px",
+    height: "600px",
+    maxHeight: "80vh"
+  },
+  header: {
+    height: "60px"
+  },
+  input: {
+    minHeight: "60px",
+    maxHeight: "150px"
+  },
+  message: {
+    maxWidth: "85%",
+    avatarSize: "32px"
+  },
+  gap: "20px"
+  // Gap from edge of screen
+};
+function tokensToCssVariables(prefix = "ash") {
+  const vars = {};
+  vars[`--${prefix}-accent`] = colors.accent.DEFAULT;
+  Object.entries(colors.accent).forEach(([key, value]) => {
+    if (key !== "DEFAULT") vars[`--${prefix}-accent-${key}`] = value;
+  });
+  Object.entries(colors.surface).forEach(([key, value]) => {
+    vars[`--${prefix}-surface-${key}`] = value;
+  });
+  Object.entries(colors.text).forEach(([key, value]) => {
+    vars[`--${prefix}-text-${key}`] = value;
+  });
+  Object.entries(colors.border).forEach(([key, value]) => {
+    if (key !== "DEFAULT") vars[`--${prefix}-border-${key}`] = value;
+    else vars[`--${prefix}-border`] = value;
+  });
+  return vars;
+}
+var inlineStyles = {
+  // Glass panel effect
+  glassPanel: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backdropFilter: "blur(24px)",
+    WebkitBackdropFilter: "blur(24px)",
+    border: `1px solid ${colors.border.DEFAULT}`
+  },
+  // Accent button
+  accentButton: {
+    backgroundColor: colors.accent.DEFAULT,
+    color: "#000000",
+    border: `1px solid ${colors.accent.DEFAULT}`,
+    boxShadow: shadows.glow.md
+  },
+  // Ghost button
+  ghostButton: {
+    backgroundColor: "transparent",
+    color: colors.text.secondary,
+    border: "1px solid transparent"
+  },
+  // User message bubble
+  userMessage: {
+    backgroundColor: colors.user.bg,
+    border: `1px solid ${colors.user.border}`,
+    borderRadius: borderRadius.lg
+  },
+  // Assistant message bubble
+  assistantMessage: {
+    backgroundColor: colors.assistant.bg,
+    border: `1px solid ${colors.assistant.border}`,
+    borderRadius: borderRadius.lg
+  }
+};
+
+exports.allKeyframesCss = allKeyframesCss;
+exports.borderRadius = borderRadius;
+exports.colors = colors;
+exports.inlineStyles = inlineStyles;
+exports.keyframes = keyframes;
+exports.keyframesCss = keyframesCss;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.tokensToCssVariables = tokensToCssVariables;
+exports.transitions = transitions;
+exports.typography = typography;
+exports.widget = widget;
+exports.zIndex = zIndex;
+//# sourceMappingURL=design-tokens.cjs.map
+//# sourceMappingURL=design-tokens.cjs.map

package/dist/design-tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-tokens.ts"],"names":[],"mappings":"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","file":"design-tokens.cjs","sourcesContent":["/**\n * ASH UI Design Tokens\n *\n * Single source of truth for colors, spacing, animations, and other design values.\n * Used by both ash-ui components (via Tailwind/CSS) and the embed widget (via inline styles).\n *\n * @example\n * ```ts\n * import { colors, animations, shadows } from '@ash-cloud/ash-ui/tokens';\n *\n * // In embed widget (inline styles)\n * const style = { backgroundColor: colors.surface.dark };\n *\n * // In Tailwind config\n * module.exports = {\n *   theme: {\n *     extend: {\n *       colors: colors,\n *     }\n *   }\n * };\n * ```\n */\n\n// =============================================================================\n// Colors\n// =============================================================================\n\nexport const colors = {\n  // Primary accent color (lime green)\n  accent: {\n    DEFAULT: '#ccff00',\n    50: '#f8ffe5',\n    100: '#eeffb8',\n    200: '#e0ff85',\n    300: '#d4ff52',\n    400: '#ccff00',\n    500: '#b8e600',\n    600: '#99cc00',\n    700: '#739900',\n    800: '#4d6600',\n    900: '#263300',\n  },\n\n  // Surface colors (dark theme)\n  surface: {\n    dark: '#0a0a0a',\n    darker: '#050505',\n    card: '#0c0c0c',\n    elevated: '#111111',\n  },\n\n  // Text colors\n  text: {\n    primary: '#ffffff',\n    secondary: 'rgba(255, 255, 255, 0.7)',\n    muted: 'rgba(255, 255, 255, 0.5)',\n    disabled: 'rgba(255, 255, 255, 0.3)',\n  },\n\n  // Border colors\n  border: {\n    DEFAULT: 'rgba(255, 255, 255, 0.1)',\n    hover: 'rgba(255, 255, 255, 0.2)',\n    accent: 'rgba(204, 255, 0, 0.3)',\n    accentHover: 'rgba(204, 255, 0, 0.5)',\n  },\n\n  // Status colors\n  status: {\n    success: '#10b981',\n    warning: '#eab308',\n    error: '#ef4444',\n    info: '#3b82f6',\n  },\n\n  // User message background\n  user: {\n    bg: 'rgba(204, 255, 0, 0.1)',\n    border: 'rgba(204, 255, 0, 0.2)',\n  },\n\n  // Assistant message background\n  assistant: {\n    bg: 'rgba(255, 255, 255, 0.05)',\n    border: 'rgba(255, 255, 255, 0.1)',\n  },\n} as const;\n\n// =============================================================================\n// Spacing\n// =============================================================================\n\nexport const spacing = {\n  xs: '4px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  xl: '24px',\n  '2xl': '32px',\n  '3xl': '48px',\n} as const;\n\n// =============================================================================\n// Border Radius\n// =============================================================================\n\nexport const borderRadius = {\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  xl: '20px',\n  '2xl': '24px',\n  full: '9999px',\n} as const;\n\n// =============================================================================\n// Shadows\n// =============================================================================\n\nexport const shadows = {\n  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 6px rgba(0, 0, 0, 0.4)',\n  lg: '0 10px 15px rgba(0, 0, 0, 0.5)',\n  xl: '0 20px 25px rgba(0, 0, 0, 0.6)',\n  glow: {\n    sm: '0 0 10px rgba(204, 255, 0, 0.2)',\n    md: '0 0 20px rgba(204, 255, 0, 0.3)',\n    lg: '0 0 30px rgba(204, 255, 0, 0.5)',\n  },\n  panel: '0 25px 50px rgba(0, 0, 0, 0.5)',\n} as const;\n\n// =============================================================================\n// Typography\n// =============================================================================\n\nexport const typography = {\n  fontFamily: {\n    sans: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    mono: 'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace',\n  },\n  fontSize: {\n    xs: '12px',\n    sm: '14px',\n    base: '16px',\n    lg: '18px',\n    xl: '20px',\n    '2xl': '24px',\n  },\n  lineHeight: {\n    tight: '1.25',\n    normal: '1.5',\n    relaxed: '1.75',\n  },\n} as const;\n\n// =============================================================================\n// Animations - Keyframes as objects for inline style injection\n// =============================================================================\n\nexport const keyframes = {\n  slideUp: {\n    from: { opacity: '0', transform: 'translateY(20px)' },\n    to: { opacity: '1', transform: 'translateY(0)' },\n  },\n  fadeIn: {\n    from: { opacity: '0', transform: 'translateY(10px)' },\n    to: { opacity: '1', transform: 'translateY(0)' },\n  },\n  blink: {\n    '0%, 50%': { opacity: '1' },\n    '51%, 100%': { opacity: '0' },\n  },\n  bounce: {\n    '0%, 80%, 100%': { transform: 'scale(0)' },\n    '40%': { transform: 'scale(1)' },\n  },\n  pulse: {\n    '0%, 100%': { opacity: '1' },\n    '50%': { opacity: '0.5' },\n  },\n  glowPulse: {\n    '0%, 100%': { boxShadow: '0 0 20px rgba(204, 255, 0, 0.3)' },\n    '50%': { boxShadow: '0 0 40px rgba(204, 255, 0, 0.5)' },\n  },\n} as const;\n\n// CSS keyframe strings for injection into style tags\nexport const keyframesCss = {\n  slideUp: `\n    @keyframes ash-slide-up {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  `,\n  fadeIn: `\n    @keyframes ash-fade-in {\n      from { opacity: 0; transform: translateY(10px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  `,\n  blink: `\n    @keyframes ash-blink {\n      0%, 50% { opacity: 1; }\n      51%, 100% { opacity: 0; }\n    }\n  `,\n  bounce: `\n    @keyframes ash-bounce {\n      0%, 80%, 100% { transform: scale(0); }\n      40% { transform: scale(1); }\n    }\n  `,\n  pulse: `\n    @keyframes ash-pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  `,\n  glowPulse: `\n    @keyframes ash-glow-pulse {\n      0%, 100% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.3); }\n      50% { box-shadow: 0 0 40px rgba(204, 255, 0, 0.5); }\n    }\n  `,\n} as const;\n\n// All keyframes combined for easy injection\nexport const allKeyframesCss = Object.values(keyframesCss).join('\\n');\n\n// =============================================================================\n// Transitions\n// =============================================================================\n\nexport const transitions = {\n  fast: '150ms ease-out',\n  normal: '300ms ease-out',\n  slow: '500ms ease-out',\n  spring: '400ms cubic-bezier(0.16, 1, 0.3, 1)',\n} as const;\n\n// =============================================================================\n// Z-Index Scale\n// =============================================================================\n\nexport const zIndex = {\n  base: 0,\n  dropdown: 100,\n  modal: 200,\n  tooltip: 300,\n  widget: 999999,\n} as const;\n\n// =============================================================================\n// Widget-Specific Dimensions\n// =============================================================================\n\nexport const widget = {\n  launcher: {\n    size: '60px',\n    iconSize: '28px',\n  },\n  panel: {\n    width: '400px',\n    height: '600px',\n    maxHeight: '80vh',\n  },\n  header: {\n    height: '60px',\n  },\n  input: {\n    minHeight: '60px',\n    maxHeight: '150px',\n  },\n  message: {\n    maxWidth: '85%',\n    avatarSize: '32px',\n  },\n  gap: '20px', // Gap from edge of screen\n} as const;\n\n// =============================================================================\n// Helper: Convert tokens to CSS variables\n// =============================================================================\n\nexport function tokensToCssVariables(prefix = 'ash'): Record<string, string> {\n  const vars: Record<string, string> = {};\n\n  // Colors\n  vars[`--${prefix}-accent`] = colors.accent.DEFAULT;\n  Object.entries(colors.accent).forEach(([key, value]) => {\n    if (key !== 'DEFAULT') vars[`--${prefix}-accent-${key}`] = value;\n  });\n\n  Object.entries(colors.surface).forEach(([key, value]) => {\n    vars[`--${prefix}-surface-${key}`] = value;\n  });\n\n  Object.entries(colors.text).forEach(([key, value]) => {\n    vars[`--${prefix}-text-${key}`] = value;\n  });\n\n  Object.entries(colors.border).forEach(([key, value]) => {\n    if (key !== 'DEFAULT') vars[`--${prefix}-border-${key}`] = value;\n    else vars[`--${prefix}-border`] = value;\n  });\n\n  return vars;\n}\n\n// =============================================================================\n// Helper: Generate inline styles from token names\n// =============================================================================\n\nexport const inlineStyles = {\n  // Glass panel effect\n  glassPanel: {\n    backgroundColor: 'rgba(255, 255, 255, 0.05)',\n    backdropFilter: 'blur(24px)',\n    WebkitBackdropFilter: 'blur(24px)',\n    border: `1px solid ${colors.border.DEFAULT}`,\n  },\n\n  // Accent button\n  accentButton: {\n    backgroundColor: colors.accent.DEFAULT,\n    color: '#000000',\n    border: `1px solid ${colors.accent.DEFAULT}`,\n    boxShadow: shadows.glow.md,\n  },\n\n  // Ghost button\n  ghostButton: {\n    backgroundColor: 'transparent',\n    color: colors.text.secondary,\n    border: '1px solid transparent',\n  },\n\n  // User message bubble\n  userMessage: {\n    backgroundColor: colors.user.bg,\n    border: `1px solid ${colors.user.border}`,\n    borderRadius: borderRadius.lg,\n  },\n\n  // Assistant message bubble\n  assistantMessage: {\n    backgroundColor: colors.assistant.bg,\n    border: `1px solid ${colors.assistant.border}`,\n    borderRadius: borderRadius.lg,\n  },\n} as const;\n\n// =============================================================================\n// Type exports\n// =============================================================================\n\nexport type Colors = typeof colors;\nexport type Spacing = typeof spacing;\nexport type BorderRadius = typeof borderRadius;\nexport type Shadows = typeof shadows;\nexport type Typography = typeof typography;\nexport type Keyframes = typeof keyframes;\nexport type Transitions = typeof transitions;\nexport type ZIndex = typeof zIndex;\nexport type Widget = typeof widget;\n"]}

package/dist/design-tokens.d.cts

@@ -0,0 +1,258 @@
+/**
+ * ASH UI Design Tokens
+ *
+ * Single source of truth for colors, spacing, animations, and other design values.
+ * Used by both ash-ui components (via Tailwind/CSS) and the embed widget (via inline styles).
+ *
+ * @example
+ * ```ts
+ * import { colors, animations, shadows } from '@ash-cloud/ash-ui/tokens';
+ *
+ * // In embed widget (inline styles)
+ * const style = { backgroundColor: colors.surface.dark };
+ *
+ * // In Tailwind config
+ * module.exports = {
+ *   theme: {
+ *     extend: {
+ *       colors: colors,
+ *     }
+ *   }
+ * };
+ * ```
+ */
+declare const colors: {
+    readonly accent: {
+        readonly DEFAULT: "#ccff00";
+        readonly 50: "#f8ffe5";
+        readonly 100: "#eeffb8";
+        readonly 200: "#e0ff85";
+        readonly 300: "#d4ff52";
+        readonly 400: "#ccff00";
+        readonly 500: "#b8e600";
+        readonly 600: "#99cc00";
+        readonly 700: "#739900";
+        readonly 800: "#4d6600";
+        readonly 900: "#263300";
+    };
+    readonly surface: {
+        readonly dark: "#0a0a0a";
+        readonly darker: "#050505";
+        readonly card: "#0c0c0c";
+        readonly elevated: "#111111";
+    };
+    readonly text: {
+        readonly primary: "#ffffff";
+        readonly secondary: "rgba(255, 255, 255, 0.7)";
+        readonly muted: "rgba(255, 255, 255, 0.5)";
+        readonly disabled: "rgba(255, 255, 255, 0.3)";
+    };
+    readonly border: {
+        readonly DEFAULT: "rgba(255, 255, 255, 0.1)";
+        readonly hover: "rgba(255, 255, 255, 0.2)";
+        readonly accent: "rgba(204, 255, 0, 0.3)";
+        readonly accentHover: "rgba(204, 255, 0, 0.5)";
+    };
+    readonly status: {
+        readonly success: "#10b981";
+        readonly warning: "#eab308";
+        readonly error: "#ef4444";
+        readonly info: "#3b82f6";
+    };
+    readonly user: {
+        readonly bg: "rgba(204, 255, 0, 0.1)";
+        readonly border: "rgba(204, 255, 0, 0.2)";
+    };
+    readonly assistant: {
+        readonly bg: "rgba(255, 255, 255, 0.05)";
+        readonly border: "rgba(255, 255, 255, 0.1)";
+    };
+};
+declare const spacing: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+    readonly xl: "24px";
+    readonly '2xl': "32px";
+    readonly '3xl': "48px";
+};
+declare const borderRadius: {
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+    readonly xl: "20px";
+    readonly '2xl': "24px";
+    readonly full: "9999px";
+};
+declare const shadows: {
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)";
+    readonly md: "0 4px 6px rgba(0, 0, 0, 0.4)";
+    readonly lg: "0 10px 15px rgba(0, 0, 0, 0.5)";
+    readonly xl: "0 20px 25px rgba(0, 0, 0, 0.6)";
+    readonly glow: {
+        readonly sm: "0 0 10px rgba(204, 255, 0, 0.2)";
+        readonly md: "0 0 20px rgba(204, 255, 0, 0.3)";
+        readonly lg: "0 0 30px rgba(204, 255, 0, 0.5)";
+    };
+    readonly panel: "0 25px 50px rgba(0, 0, 0, 0.5)";
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
+        readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly base: "16px";
+        readonly lg: "18px";
+        readonly xl: "20px";
+        readonly '2xl': "24px";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.75";
+    };
+};
+declare const keyframes: {
+    readonly slideUp: {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "translateY(20px)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly fadeIn: {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "translateY(10px)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly blink: {
+        readonly '0%, 50%': {
+            readonly opacity: "1";
+        };
+        readonly '51%, 100%': {
+            readonly opacity: "0";
+        };
+    };
+    readonly bounce: {
+        readonly '0%, 80%, 100%': {
+            readonly transform: "scale(0)";
+        };
+        readonly '40%': {
+            readonly transform: "scale(1)";
+        };
+    };
+    readonly pulse: {
+        readonly '0%, 100%': {
+            readonly opacity: "1";
+        };
+        readonly '50%': {
+            readonly opacity: "0.5";
+        };
+    };
+    readonly glowPulse: {
+        readonly '0%, 100%': {
+            readonly boxShadow: "0 0 20px rgba(204, 255, 0, 0.3)";
+        };
+        readonly '50%': {
+            readonly boxShadow: "0 0 40px rgba(204, 255, 0, 0.5)";
+        };
+    };
+};
+declare const keyframesCss: {
+    readonly slideUp: "\n    @keyframes ash-slide-up {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  ";
+    readonly fadeIn: "\n    @keyframes ash-fade-in {\n      from { opacity: 0; transform: translateY(10px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  ";
+    readonly blink: "\n    @keyframes ash-blink {\n      0%, 50% { opacity: 1; }\n      51%, 100% { opacity: 0; }\n    }\n  ";
+    readonly bounce: "\n    @keyframes ash-bounce {\n      0%, 80%, 100% { transform: scale(0); }\n      40% { transform: scale(1); }\n    }\n  ";
+    readonly pulse: "\n    @keyframes ash-pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ";
+    readonly glowPulse: "\n    @keyframes ash-glow-pulse {\n      0%, 100% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.3); }\n      50% { box-shadow: 0 0 40px rgba(204, 255, 0, 0.5); }\n    }\n  ";
+};
+declare const allKeyframesCss: string;
+declare const transitions: {
+    readonly fast: "150ms ease-out";
+    readonly normal: "300ms ease-out";
+    readonly slow: "500ms ease-out";
+    readonly spring: "400ms cubic-bezier(0.16, 1, 0.3, 1)";
+};
+declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 100;
+    readonly modal: 200;
+    readonly tooltip: 300;
+    readonly widget: 999999;
+};
+declare const widget: {
+    readonly launcher: {
+        readonly size: "60px";
+        readonly iconSize: "28px";
+    };
+    readonly panel: {
+        readonly width: "400px";
+        readonly height: "600px";
+        readonly maxHeight: "80vh";
+    };
+    readonly header: {
+        readonly height: "60px";
+    };
+    readonly input: {
+        readonly minHeight: "60px";
+        readonly maxHeight: "150px";
+    };
+    readonly message: {
+        readonly maxWidth: "85%";
+        readonly avatarSize: "32px";
+    };
+    readonly gap: "20px";
+};
+declare function tokensToCssVariables(prefix?: string): Record<string, string>;
+declare const inlineStyles: {
+    readonly glassPanel: {
+        readonly backgroundColor: "rgba(255, 255, 255, 0.05)";
+        readonly backdropFilter: "blur(24px)";
+        readonly WebkitBackdropFilter: "blur(24px)";
+        readonly border: "1px solid rgba(255, 255, 255, 0.1)";
+    };
+    readonly accentButton: {
+        readonly backgroundColor: "#ccff00";
+        readonly color: "#000000";
+        readonly border: "1px solid #ccff00";
+        readonly boxShadow: "0 0 20px rgba(204, 255, 0, 0.3)";
+    };
+    readonly ghostButton: {
+        readonly backgroundColor: "transparent";
+        readonly color: "rgba(255, 255, 255, 0.7)";
+        readonly border: "1px solid transparent";
+    };
+    readonly userMessage: {
+        readonly backgroundColor: "rgba(204, 255, 0, 0.1)";
+        readonly border: "1px solid rgba(204, 255, 0, 0.2)";
+        readonly borderRadius: "16px";
+    };
+    readonly assistantMessage: {
+        readonly backgroundColor: "rgba(255, 255, 255, 0.05)";
+        readonly border: "1px solid rgba(255, 255, 255, 0.1)";
+        readonly borderRadius: "16px";
+    };
+};
+type Colors = typeof colors;
+type Spacing = typeof spacing;
+type BorderRadius = typeof borderRadius;
+type Shadows = typeof shadows;
+type Typography = typeof typography;
+type Keyframes = typeof keyframes;
+type Transitions = typeof transitions;
+type ZIndex = typeof zIndex;
+type Widget = typeof widget;
+
+export { type BorderRadius, type Colors, type Keyframes, type Shadows, type Spacing, type Transitions, type Typography, type Widget, type ZIndex, allKeyframesCss, borderRadius, colors, inlineStyles, keyframes, keyframesCss, shadows, spacing, tokensToCssVariables, transitions, typography, widget, zIndex };