@danxbot/ui 2.9.0 → 3.0.0

package/README.md

@@ -8,10 +8,17 @@ npm install @danxbot/ui
 
 ```tsx
 import { Button, Chat, ThemeMenu } from "@danxbot/ui";
-import "@danxbot/ui/styles.css";
 ```
 
-Requires React 19 and Tailwind CSS 4. MIT licensed.
+```css
+/* your app's Tailwind entry — see Setup, all three lines are required */
+@import "tailwindcss";
+@import "@danxbot/ui/theme.css";
+@import "@danxbot/ui/styles.css";
+```
+
+Requires React 19 and Tailwind CSS 4 **in the consuming build** — the package
+ships no compiled utilities, on purpose. MIT licensed.
 
 ## What is in it
 
@@ -100,26 +107,35 @@ Two stylesheets, and you want both. In your application's Tailwind entry:
 
 ```css
 @import "tailwindcss";
-@import "@danxbot/ui/theme.css";   /* teaches YOUR build bg-surface, text-2xs, ... */
+@import "@danxbot/ui/theme.css";   /* @source + the @theme bridge */
 @import "@danxbot/ui/styles.css";  /* the token values, base layer and component CSS */
 ```
 
-`styles.css` alone is not enough, and the way it falls short is silent.
-It is compiled output, so it carries the token values plus exactly the
-utilities *this library's own components* happen to use. Write `bg-surface`
-in your app and it works; write `bg-accent-subtle` and you get a class that
-resolves to nothing — no build error, no console warning, just a missing
-background. Which utilities happen to work is an accident of our internals,
-which is the worst possible contract to hand anybody.
-
-`theme.css` closes that: it is the `@theme` bridge, extracted from source at
-build time, mapping every semantic token onto Tailwind's namespaces so your own
-build generates the same utilities ours does. It carries no token values and no
-component CSS, so importing both duplicates almost nothing. **Order matters** —
-`styles.css` must come after, because it supplies the values the bridge points at.
-
-Not using Tailwind in your app? Import `styles.css` on its own and use the
-components; the bridge only matters for utilities you write yourself.
+That is the whole contract. There is no layer-order statement to remember and
+no path to configure.
+
+**Your Tailwind build compiles this library's utilities, not ours.**
+`theme.css` carries `@source "./index.js"`, which points your compiler at the
+shipped bundle; the package itself ships zero generated utilities. That is
+deliberate and it is the fix for a real defect: a compiled stylesheet emits into
+`@layer utilities`, which is *the same layer name your build uses*, at equal
+specificity, imported last — so the library used to win every tie. Measured in a
+consuming app at 1440px, `grid grid-cols-1 xl:grid-cols-[1.6fr_1fr]` rendered
+one column and `md:grid-cols-2 xl:grid-cols-3` rendered two. Nothing was
+misused; `xl:` is supposed to beat `md:` because Tailwind *sorts* breakpoints,
+and that guarantee only holds inside one compiler's output. So there is one
+compiler.
+
+`theme.css` also carries the `@theme` bridge, extracted from source at build
+time, mapping every semantic token onto Tailwind's namespaces — without it your
+own `bg-accent-subtle` compiles to nothing, silently. **Order matters**:
+`styles.css` comes after, because it supplies the values the bridge points at.
+
+**Not using Tailwind 4?** Then this package will not style anything: you get the
+tokens, the base layer and the hand-written component CSS, and no utilities at
+all. Components render structurally correct and visually unstyled — loudly, on
+the first screen, rather than as one breakpoint quietly misbehaving. Tailwind 4
+in the consuming build is a requirement, not a recommendation.
 
 Fonts are self-hosted woff2 subsets rather than CDN-loaded, because a blocked
 CDN renders every design in a system font with no error anywhere. They are

package/dist/index.js

@@ -20698,7 +20698,7 @@ function x3({
       "aside",
       {
         className: q(
-          "hidden shrink-0 flex-col border-r border-border-subtle bg-surface lg:flex",
+          "sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface lg:flex",
           "transition-[var(--tx-colors),width] duration-(--dur-slow) ease-emphasis",
           u ? "w-14" : "w-60"
         ),