@epicbagel/saas-kit 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -20,6 +20,16 @@
     "access": "public"
   },
   "exports": {
+    "./primitives/action-dock": {
+      "import": {
+        "types": "./dist/primitives/action-dock.d.ts",
+        "default": "./dist/primitives/action-dock.js"
+      },
+      "require": {
+        "types": "./dist/primitives/action-dock.d.cts",
+        "default": "./dist/primitives/action-dock.cjs"
+      }
+    },
     "./primitives/activity-feed": {
       "import": {
         "types": "./dist/primitives/activity-feed.d.ts",
@@ -160,6 +170,16 @@
         "default": "./dist/primitives/browser-preview.cjs"
       }
     },
+    "./primitives/bubble": {
+      "import": {
+        "types": "./dist/primitives/bubble.d.ts",
+        "default": "./dist/primitives/bubble.js"
+      },
+      "require": {
+        "types": "./dist/primitives/bubble.d.cts",
+        "default": "./dist/primitives/bubble.cjs"
+      }
+    },
     "./primitives/button": {
       "import": {
         "types": "./dist/primitives/button.d.ts",
@@ -210,6 +230,16 @@
         "default": "./dist/primitives/card.cjs"
       }
     },
+    "./primitives/chat": {
+      "import": {
+        "types": "./dist/primitives/chat.d.ts",
+        "default": "./dist/primitives/chat.js"
+      },
+      "require": {
+        "types": "./dist/primitives/chat.d.cts",
+        "default": "./dist/primitives/chat.cjs"
+      }
+    },
     "./primitives/checkbox": {
       "import": {
         "types": "./dist/primitives/checkbox.d.ts",
@@ -540,6 +570,16 @@
         "default": "./dist/primitives/inline-code.cjs"
       }
     },
+    "./primitives/input-group": {
+      "import": {
+        "types": "./dist/primitives/input-group.d.ts",
+        "default": "./dist/primitives/input-group.js"
+      },
+      "require": {
+        "types": "./dist/primitives/input-group.d.cts",
+        "default": "./dist/primitives/input-group.cjs"
+      }
+    },
     "./primitives/input": {
       "import": {
         "types": "./dist/primitives/input.d.ts",
@@ -570,6 +610,16 @@
         "default": "./dist/primitives/interactive-card.cjs"
       }
     },
+    "./primitives/item": {
+      "import": {
+        "types": "./dist/primitives/item.d.ts",
+        "default": "./dist/primitives/item.js"
+      },
+      "require": {
+        "types": "./dist/primitives/item.d.cts",
+        "default": "./dist/primitives/item.cjs"
+      }
+    },
     "./primitives/label": {
       "import": {
         "types": "./dist/primitives/label.d.ts",
@@ -580,6 +630,16 @@
         "default": "./dist/primitives/label.cjs"
       }
     },
+    "./primitives/lazy-markdown": {
+      "import": {
+        "types": "./dist/primitives/lazy-markdown.d.ts",
+        "default": "./dist/primitives/lazy-markdown.js"
+      },
+      "require": {
+        "types": "./dist/primitives/lazy-markdown.d.cts",
+        "default": "./dist/primitives/lazy-markdown.cjs"
+      }
+    },
     "./primitives/line-break": {
       "import": {
         "types": "./dist/primitives/line-break.d.ts",
@@ -620,6 +680,36 @@
         "default": "./dist/primitives/loading.cjs"
       }
     },
+    "./primitives/markdown": {
+      "import": {
+        "types": "./dist/primitives/markdown.d.ts",
+        "default": "./dist/primitives/markdown.js"
+      },
+      "require": {
+        "types": "./dist/primitives/markdown.d.cts",
+        "default": "./dist/primitives/markdown.cjs"
+      }
+    },
+    "./primitives/marker": {
+      "import": {
+        "types": "./dist/primitives/marker.d.ts",
+        "default": "./dist/primitives/marker.js"
+      },
+      "require": {
+        "types": "./dist/primitives/marker.d.cts",
+        "default": "./dist/primitives/marker.cjs"
+      }
+    },
+    "./primitives/message-scroller": {
+      "import": {
+        "types": "./dist/primitives/message-scroller.d.ts",
+        "default": "./dist/primitives/message-scroller.js"
+      },
+      "require": {
+        "types": "./dist/primitives/message-scroller.d.cts",
+        "default": "./dist/primitives/message-scroller.cjs"
+      }
+    },
     "./primitives/message": {
       "import": {
         "types": "./dist/primitives/message.d.ts",
@@ -900,6 +990,16 @@
         "default": "./dist/primitives/spacer.cjs"
       }
     },
+    "./primitives/spinner": {
+      "import": {
+        "types": "./dist/primitives/spinner.d.ts",
+        "default": "./dist/primitives/spinner.js"
+      },
+      "require": {
+        "types": "./dist/primitives/spinner.d.cts",
+        "default": "./dist/primitives/spinner.cjs"
+      }
+    },
     "./primitives/split-action-button": {
       "import": {
         "types": "./dist/primitives/split-action-button.d.ts",
@@ -960,6 +1060,16 @@
         "default": "./dist/primitives/status-panel.cjs"
       }
     },
+    "./primitives/suggestion": {
+      "import": {
+        "types": "./dist/primitives/suggestion.d.ts",
+        "default": "./dist/primitives/suggestion.js"
+      },
+      "require": {
+        "types": "./dist/primitives/suggestion.d.cts",
+        "default": "./dist/primitives/suggestion.cjs"
+      }
+    },
     "./primitives/switch-field": {
       "import": {
         "types": "./dist/primitives/switch-field.d.ts",
@@ -1070,6 +1180,16 @@
         "default": "./dist/primitives/tooltip.cjs"
       }
     },
+    "./primitives/trace": {
+      "import": {
+        "types": "./dist/primitives/trace.d.ts",
+        "default": "./dist/primitives/trace.js"
+      },
+      "require": {
+        "types": "./dist/primitives/trace.d.cts",
+        "default": "./dist/primitives/trace.cjs"
+      }
+    },
     "./primitives/voice-dictation-button": {
       "import": {
         "types": "./dist/primitives/voice-dictation-button.d.ts",
@@ -1177,7 +1297,7 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-icons": "^5.0.0",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.3.0"
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.14",
@@ -1200,6 +1320,7 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -1208,7 +1329,9 @@
     "libphonenumber-js": "^1.11.0",
     "radix-ui": "^1.6.0",
     "react-day-picker": "^9.7.0",
+    "react-markdown": "^10.1.0",
     "react-responsive": "^10.0.1",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.4.0",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2"

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.css

@@ -1,3 +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/utilities.css

@@ -1,6 +1,7 @@
 /* Palette-free utilities and component classes: shadcn's data-* variants,
- * no-scrollbar, scroll-fade and shimmer; the cn-attachment and cn-message
- * classes; and the kit's keyframes. Defines no palette and no @source.
+ * no-scrollbar, scroll-fade and shimmer; the cn-attachment, cn-bubble,
+ * cn-marker, cn-message and cn-message-scroller classes; and the kit's
+ * keyframes. Defines no palette and no @source.
  * The component classes @apply the semantic colours (bg-muted,
  * text-muted-foreground, ring-ring, …), so the host's @theme must define
  * them — tokens.css does. */

package/dist/{chunk-UGF2K6NR.js → chunk-HRLP4BHJ.js}

@@ -5,18 +5,18 @@ import {
 import {
   LoadMoreButton
 } from "./chunk-J3GQXM37.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "./chunk-ZRLUUZHK.js";
 import {
   FilterBar
 } from "./chunk-MLHNYRFX.js";
 import {
   Heading
 } from "./chunk-H2O6NMLZ.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
 import {
   BoardColumnComponent,
   MobileBoardView

package/dist/{chunk-RWWOFWLP.cjs → chunk-IH3COANJ.cjs}

@@ -7,16 +7,16 @@ var _chunkPNWNU6JWcjs = require('./chunk-PNWNU6JW.cjs');
 var _chunkFNDBM67Kcjs = require('./chunk-FNDBM67K.cjs');
 
 
+var _chunkSGW4FWBXcjs = require('./chunk-SGW4FWBX.cjs');
 
 
+var _chunkLELBCBDTcjs = require('./chunk-LELBCBDT.cjs');
 
-var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');
 
 
-var _chunkSGW4FWBXcjs = require('./chunk-SGW4FWBX.cjs');
 
 
-var _chunkLELBCBDTcjs = require('./chunk-LELBCBDT.cjs');
+var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');