@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/src/styles/components/attachment.css

@@ -0,0 +1,61 @@
+/* Attachment — shadcn's cn-attachment classes (registry/styles/style-sera.css),
+ * as @apply rules over the kit's semantic tokens so they follow the active
+ * palette. Part of utilities.css. */
+@layer components {
+  /* MARK: Attachment */
+  .cn-attachment {
+    @apply rounded-none w-fit focus-within:ring-1 focus-within:ring-ring/30;
+  }
+
+  .cn-attachment-orientation-horizontal {
+    @apply min-w-40;
+  }
+
+  .cn-attachment-orientation-vertical {
+    @apply w-24 has-data-[slot=attachment-content]:w-30;
+  }
+
+  .cn-attachment-size-default {
+    @apply gap-2 has-data-[slot=attachment-content]:px-3 has-data-[slot=attachment-content]:py-2.5 has-data-[slot=attachment-media]:p-2.5 text-sm;
+  }
+
+  .cn-attachment-size-sm {
+    @apply gap-2.5 has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 text-xs;
+  }
+
+  .cn-attachment-size-xs {
+    @apply gap-1.5 has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 text-xs rounded-none;
+  }
+
+  .cn-attachment-media {
+    @apply bg-muted text-foreground w-10 rounded-none group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-none [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 group-data-[orientation=vertical]/attachment:w-full group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6!;
+  }
+
+  .cn-attachment-media-variant-image {
+    @apply opacity-60 group-data-[state=idle]/attachment:opacity-100 group-data-[state=done]/attachment:opacity-100;
+  }
+
+  .cn-attachment-content {
+    @apply leading-tight group-data-[orientation=vertical]/attachment:px-1;
+  }
+
+  .cn-attachment-title {
+    @apply font-medium;
+  }
+
+  .cn-attachment-description {
+    @apply mt-0.5 text-xs;
+  }
+
+  .cn-attachment-actions {
+    @apply group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 relative z-20 group-data-[orientation=vertical]/attachment:gap-1;
+  }
+
+  .cn-attachment-group {
+    @apply gap-3 scroll-px-1 py-1;
+  }
+
+  .cn-attachment-trigger {
+    @apply absolute inset-0 z-10 outline-none;
+  }
+}

package/src/styles/components/bubble.css

@@ -0,0 +1,81 @@
+/* Bubble — shadcn's cn-bubble classes (registry item "bubble", style
+ * radix-sera, registry/styles/style-sera.css, vendored 2026-06-29; colours
+ * and radii re-checked against the radix-nova / radix-vega items,
+ * https://ui.shadcn.com/r/styles/radix-vega/bubble.json, 2026-10-26), as
+ * @apply rules over the kit's semantic tokens so they follow the active
+ * palette. Part of utilities.css.
+ *
+ * Radii are vega's (the same as nova's), not sera's square corners: the
+ * content is rounded-xl and the reactions pill rounded-full, so a bubble
+ * follows --radius as the kit's buttons do. The ghost variant stays
+ * rounded-none, as in every style.
+ *
+ * Upstream mixes colours from the palette variables (var(--primary),
+ * var(--secondary)…), which hold whole colours in shadcn. The kit's palette
+ * variables are bare `H S% L%` triplets, so color-mix() and
+ * oklch(from …) over them are invalid and the browser drops the whole
+ * declaration: the tinted bubble had no background and the hover tints did
+ * nothing. Every colour function here reads the --color-* tokens instead,
+ * which are complete hsl() colours in every palette. */
+@layer components {
+  /* MARK: Bubble */
+  .cn-bubble {
+    @apply gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end;
+  }
+
+  .cn-bubble-content {
+    @apply rounded-xl border border-transparent px-4 py-3 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-2 [button,a]:focus-visible:ring-ring/30 group-data-[align=end]/bubble:self-end;
+  }
+
+  .cn-bubble-variant-default {
+    @apply *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80;
+  }
+
+  .cn-bubble-variant-secondary {
+    @apply *:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--color-secondary),var(--color-foreground)_5%)];
+  }
+
+  .cn-bubble-variant-muted {
+    @apply *:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--color-muted),var(--color-foreground)_5%)];
+  }
+
+  .cn-bubble-variant-tinted {
+    @apply *:data-[slot=bubble-content]:bg-[oklch(from_var(--color-primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--color-primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--color-primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--color-primary)_0.35_calc(c*0.5)_h)];
+  }
+
+  .cn-bubble-variant-outline {
+    @apply *:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30;
+  }
+
+  .cn-bubble-variant-ghost {
+    @apply *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none;
+  }
+
+  .cn-bubble-variant-destructive {
+    @apply *:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30;
+  }
+
+  .cn-bubble-reactions {
+    @apply rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-2 py-0.5 has-[button]:p-0 text-sm;
+  }
+
+  .cn-bubble-reactions-side-top {
+    @apply top-0 -translate-y-3/4;
+  }
+
+  .cn-bubble-reactions-side-bottom {
+    @apply bottom-0 translate-y-3/4;
+  }
+
+  .cn-bubble-reactions-align-start {
+    @apply left-3;
+  }
+
+  .cn-bubble-reactions-align-end {
+    @apply right-3;
+  }
+
+  .cn-bubble-group {
+    @apply gap-2;
+  }
+}

package/src/styles/components/marker.css

@@ -0,0 +1,27 @@
+/* Marker — shadcn's cn-marker classes (registry item "marker", style
+ * radix-sera, https://ui.shadcn.com/r/styles/radix-sera/marker.json and
+ * registry/styles/style-sera.css), vendored 2026-06-29 and moved into the
+ * public kit 2026-10-26, as @apply rules over the kit's semantic tokens so
+ * they follow the active palette. Part of utilities.css. */
+@layer components {
+  /* MARK: Marker */
+  .cn-marker {
+    @apply gap-2 text-xs text-muted-foreground [a]:hover:text-foreground [a]:underline-offset-3 [a]:underline [&_svg:not([class*='size-'])]:size-4 min-h-4 text-left uppercase tracking-wide;
+  }
+
+  .cn-marker-variant-separator {
+    @apply before:h-px before:min-w-0 before:flex-1 before:bg-border after:h-px after:min-w-0 after:flex-1 after:bg-border before:mr-1 after:ml-1;
+  }
+
+  .cn-marker-variant-border {
+    @apply border-b border-border pb-2;
+  }
+
+  .cn-marker-icon {
+    @apply size-4 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .cn-marker-content {
+    @apply group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:hover:text-foreground *:[a]:underline *:[a]:underline-offset-3;
+  }
+}

package/src/styles/components/message-scroller.css

@@ -0,0 +1,11 @@
+/* Message scroller — shadcn's cn-message-scroller classes (registry item
+ * "message-scroller", style radix-sera,
+ * https://ui.shadcn.com/r/styles/radix-sera/message-scroller.json and
+ * registry/styles/style-sera.css), synced 2026-10-26 against @shadcn/react
+ * 0.3.1. Part of utilities.css. */
+@layer components {
+  /* MARK: Message Scroller */
+  .cn-message-scroller-content {
+    @apply gap-8;
+  }
+}

package/src/styles/components/message.css

@@ -0,0 +1,29 @@
+/* Message — shadcn's cn-message classes (registry/styles/style-sera.css),
+ * as @apply rules over the kit's semantic tokens so they follow the active
+ * palette. Part of utilities.css. */
+@layer components {
+  /* MARK: Message */
+  .cn-message {
+    @apply text-sm gap-2;
+  }
+
+  .cn-message-avatar {
+    @apply min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8;
+  }
+
+  .cn-message-content {
+    @apply gap-2.5 group-data-[align=end]/message:*:data-slot:self-end;
+  }
+
+  .cn-message-header {
+    @apply text-xs font-medium text-muted-foreground px-4 group-has-data-[variant=ghost]/message:px-0 uppercase tracking-wide;
+  }
+
+  .cn-message-footer {
+    @apply text-xs font-medium text-muted-foreground px-4 group-has-data-[variant=ghost]/message:px-0 uppercase tracking-wide;
+  }
+
+  .cn-message-group {
+    @apply gap-2;
+  }
+}

package/src/styles/components.css

@@ -0,0 +1,6 @@
+/* Public component classes, one file per item. Part of utilities.css. */
+@import "./components/attachment.css";
+@import "./components/bubble.css";
+@import "./components/marker.css";
+@import "./components/message.css";
+@import "./components/message-scroller.css";

package/src/styles/globals.css

@@ -0,0 +1,10 @@
+/* The complete kit stylesheet, for an app with no Tailwind entry of its own.
+ *
+ * An app that already imports Tailwind imports the three entry points
+ * below instead (see tokens.css). Importing this file AND Tailwind again
+ * would emit the preflight twice. */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./tokens.css";
+@import "./utilities.css";
+@import "./source.css";

package/src/styles/keyframes.css

@@ -0,0 +1,26 @@
+/* The kit's animations: accordion open/close plus three small motion
+ * tokens (soft-rise, soft-pop, pulse-once). Part of utilities.css. The
+ * accordion keyframes these tokens name are defined in shadcn.css. */
+@theme {
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-soft-rise: soft-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
+  --animate-soft-pop: soft-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+  --animate-pulse-once: pulse-once 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1;
+}
+
+/* Signature reveal — fade + 6px rise. */
+@keyframes soft-rise {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+/* Micro-celebration — slight scale 0.97 → 1. */
+@keyframes soft-pop {
+  from { opacity: 0; transform: scale(0.97); }
+  to { opacity: 1; transform: scale(1); }
+}
+/* Single attention pulse — emit a soft ring once. */
+@keyframes pulse-once {
+  0% { box-shadow: 0 0 0 0 hsl(var(--foreground) / 0.18); }
+  100% { box-shadow: 0 0 0 12px hsl(var(--foreground) / 0); }
+}

package/src/styles/palette.gen.css

@@ -0,0 +1,150 @@
+/* GENERATED FILE — do not edit.
+ * Source: src/lib/neutral-theme.ts · Regenerate: pnpm gen:themes
+ *
+ * The neutral palette: light on :root, dark when the root carries the
+ * `.dark` class. It sits in `@layer base`, so any unlayered palette rule
+ * or a host's own :root overrides wins on layer order alone. Imported by
+ * tokens.css; every --color-* alias and the radius scale are re-declared
+ * alongside the tokens they read.
+ */
+@layer base {
+  :root {
+    --radius: 0rem;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 0%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 0%;
+    --primary: 0 0% 0%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 0%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 40%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 357.5 79.2% 47.1%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 0%;
+    --chart-1: 0 0% 20%;
+    --chart-2: 0 0% 30.2%;
+    --chart-3: 0 0% 40%;
+    --chart-4: 0 0% 50.2%;
+    --chart-5: 0 0% 60%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 0%;
+    --sidebar-primary: 0 0% 0%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 96.1%;
+    --sidebar-accent-foreground: 0 0% 0%;
+    --sidebar-border: 0 0% 89.8%;
+    --sidebar-ring: 0 0% 89.8%;
+    --sidebar: 0 0% 98%;
+    /* Tailwind-facing aliases — see neutral-theme.ts */
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-sidebar: hsl(var(--sidebar-background));
+    --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+    --color-sidebar-primary: hsl(var(--sidebar-primary));
+    --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+    --color-sidebar-accent: hsl(var(--sidebar-accent));
+    --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+    --color-sidebar-border: hsl(var(--sidebar-border));
+    --color-sidebar-ring: hsl(var(--sidebar-ring));
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+  }
+
+  :root:where(.dark) {
+    --radius: 0rem;
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 10.2%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 10.2%;
+    --muted-foreground: 0 0% 60%;
+    --accent: 0 0% 10.2%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 357.5 79.2% 47.1%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 20%;
+    --input: 0 0% 20%;
+    --ring: 0 0% 100%;
+    --chart-1: 0 0% 80%;
+    --chart-2: 0 0% 70.2%;
+    --chart-3: 0 0% 60%;
+    --chart-4: 0 0% 50.2%;
+    --chart-5: 0 0% 40%;
+    --sidebar-background: 0 0% 5.1%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 0 0% 0%;
+    --sidebar-accent: 0 0% 10.2%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 0 0% 20%;
+    --sidebar-ring: 0 0% 20%;
+    --sidebar: 0 0% 5.1%;
+    /* Tailwind-facing aliases — see neutral-theme.ts */
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-sidebar: hsl(var(--sidebar-background));
+    --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+    --color-sidebar-primary: hsl(var(--sidebar-primary));
+    --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+    --color-sidebar-accent: hsl(var(--sidebar-accent));
+    --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+    --color-sidebar-border: hsl(var(--sidebar-border));
+    --color-sidebar-ring: hsl(var(--sidebar-ring));
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+  }
+}