@decantr/css 1.0.0

package/README.md

@@ -0,0 +1,134 @@
+# @decantr/css
+
+Framework-agnostic CSS atoms runtime for Decantr projects.
+
+## Installation
+
+```bash
+npm install @decantr/css
+```
+
+## Usage
+
+```js
+import { css } from '@decantr/css';
+
+// In your components
+<div className={css('_flex _col _gap4 _p4')}>
+  <h1 className={css('_heading1')}>Title</h1>
+  <p className={css('_textsm _fgmuted')}>Description</p>
+</div>
+```
+
+## How It Works
+
+The `css()` function:
+1. Parses atom strings (e.g., `'_flex _col _gap4'`)
+2. Resolves each atom to CSS (e.g., `_flex` -> `display:flex`)
+3. Injects the CSS into the DOM via `<style>` tags
+4. Returns the class names for use in your markup
+
+CSS is injected into `@layer d.atoms` for proper cascade control.
+
+## API
+
+### css(...classes)
+
+Process atom strings and inject CSS. Returns space-separated class names.
+
+```js
+css('_flex _col')  // Returns: '_flex _col', injects CSS
+css('_flex', '_col', condition && '_gap4')  // Handles multiple args, falsy values
+```
+
+### define(name, declaration)
+
+Register a custom atom.
+
+```js
+define('_brand', 'color:var(--brand);font-weight:700');
+css('_brand')  // Now works
+```
+
+### extractCSS()
+
+Get all injected CSS as a string (for SSR).
+
+```js
+const cssString = extractCSS();
+// Returns: '@layer d.atoms{._flex{display:flex}...}'
+```
+
+### reset()
+
+Clear all injected styles (for testing).
+
+```js
+reset();
+```
+
+## Atom Reference
+
+### Display
+`_flex`, `_grid`, `_block`, `_inline`, `_none`, `_contents`
+
+### Flexbox
+`_col`, `_row`, `_wrap`, `_nowrap`, `_flex1`, `_grow`, `_shrink0`
+
+### Alignment
+`_aic` (align-items:center), `_jcc` (justify-content:center), `_jcsb` (space-between)
+
+### Spacing
+`_gap{n}`, `_p{n}`, `_m{n}`, `_pt{n}`, `_px{n}`, `_my{n}` where n = 0-96
+
+### Sizing
+`_wfull`, `_hfull`, `_w{n}`, `_h{n}`, `_minw0`, `_maxwfull`
+
+### Typography
+`_textsm`, `_textlg`, `_text2xl`, `_heading1`-`_heading6`, `_fontbold`
+
+### Colors (use CSS variables)
+`_bgprimary`, `_bgsurface`, `_fgmuted`, `_bcborder`
+
+### Responsive Prefixes
+Mobile-first breakpoints: `_sm:` (640px), `_md:` (768px), `_lg:` (1024px), `_xl:` (1280px)
+
+```jsx
+<div className={css('_gc1 _sm:gc2 _lg:gc4')}>
+  {/* 1 col -> 2 cols at 640px -> 4 cols at 1024px */}
+</div>
+```
+
+### Pseudo-class Prefixes
+`_h:` (hover), `_f:` (focus), `_fv:` (focus-visible), `_a:` (active)
+
+```jsx
+<button className={css('_bgprimary _h:bgprimary/80')}>
+  Hover me
+</button>
+```
+
+### Opacity Modifiers
+`_bgprimary/50` -> 50% opacity via `color-mix()`
+
+### Arbitrary Values
+`_w[512px]`, `_p[clamp(1rem,3vw,2rem)]`, `_bg[#1a1a2e]`
+
+## Integration with Decantr
+
+When you scaffold a project with `@decantr/cli`, it generates:
+
+- `src/styles/tokens.css` - Theme tokens (colors, spacing, radii)
+- `src/styles/decorators.css` - Recipe decorator classes
+
+Import these alongside @decantr/css:
+
+```js
+import { css } from '@decantr/css';
+import './styles/tokens.css';
+import './styles/decorators.css';
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Decantr CSS - Main css() function.
+ * Ported from decantr-framework/src/css/index.js
+ */
+/**
+ * Process atom strings and inject CSS.
+ * @param classes - One or more class strings
+ * @returns Space-separated class names
+ */
+declare function css(...classes: (string | undefined | null | false)[]): string;
+/**
+ * Define a custom atom.
+ * @param name - Atom name (e.g., '_myatom')
+ * @param declaration - CSS declaration(s)
+ */
+declare function define(name: string, declaration: string): void;
+
+/**
+ * Decantr CSS Runtime - CSS injection and extraction.
+ * Ported from decantr-framework/src/css/runtime.js
+ */
+/** Responsive breakpoints (mobile-first, min-width) */
+declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+/** Container query breakpoints */
+declare const CQ_WIDTHS: readonly [320, 480, 640, 768, 1024];
+/**
+ * Inject a CSS rule for a class.
+ * @param className - The class name (e.g., '_flex')
+ * @param declaration - CSS declaration(s) (e.g., 'display:flex')
+ * @param escapedName - Pre-escaped class name for special chars
+ */
+declare function inject(className: string, declaration: string, escapedName?: string): void;
+/**
+ * Inject a responsive (breakpoint-wrapped) atom.
+ * @param className - e.g., '_sm:gc3'
+ * @param declaration - CSS declaration(s)
+ * @param bp - breakpoint key (sm|md|lg|xl)
+ */
+declare function injectResponsive(className: string, declaration: string, bp: string): void;
+/**
+ * Inject a pseudo-class atom.
+ * @param className - e.g., '_h:bgprimary'
+ * @param declaration - CSS declaration(s)
+ * @param prefix - 'h'|'f'|'fv'|'a'|'fw'
+ */
+declare function injectPseudo(className: string, declaration: string, prefix: string): void;
+/**
+ * Inject a container query-wrapped atom.
+ * @param className - e.g., '_cq640:gc3'
+ * @param declaration - CSS declaration(s)
+ * @param width - container min-width in px
+ */
+declare function injectContainer(className: string, declaration: string, width: number): void;
+/**
+ * Inject a group/peer state atom.
+ * @param className - e.g., '_gh:fgprimary'
+ * @param declaration - CSS declaration(s)
+ * @param prefix - 'gh'|'gf'|'ga'|'ph'|'pf'|'pa'
+ */
+declare function injectGroupPeer(className: string, declaration: string, prefix: string): void;
+/**
+ * Inject a media query-wrapped atom.
+ * @param className - e.g., '_motionSafe:trans'
+ * @param declaration - CSS declaration(s)
+ * @param query - media query string
+ */
+declare function injectMediaQuery(className: string, declaration: string, query: string): void;
+/**
+ * Extract all injected CSS as a string (for SSR).
+ */
+declare function extractCSS(): string;
+/**
+ * Get set of injected class names.
+ */
+declare function getInjectedClasses(): Set<string>;
+/**
+ * Reset all injected styles (for testing).
+ */
+declare function reset(): void;
+
+/**
+ * Decantr CSS Atoms - Direct atom definitions and algorithmic resolution.
+ * Ported from decantr-framework/src/css/atoms.js
+ */
+/**
+ * Resolve an atom name to its CSS declaration.
+ * @param atom - Atom name (e.g., '_flex', '_gap4', '_p2')
+ * @returns CSS declaration or null if not recognized
+ */
+declare function resolveAtomDecl(atom: string): string | null;
+
+export { BREAKPOINTS, CQ_WIDTHS, css, define, extractCSS, getInjectedClasses, inject, injectContainer, injectGroupPeer, injectMediaQuery, injectPseudo, injectResponsive, reset, resolveAtomDecl };

package/dist/index.js

@@ -0,0 +1,1014 @@
+// src/atoms.ts
+var DIRECT = {
+  // Display
+  block: "display:block",
+  inline: "display:inline",
+  flex: "display:flex",
+  inlineflex: "display:inline-flex",
+  grid: "display:grid",
+  inlinegrid: "display:inline-grid",
+  none: "display:none",
+  contents: "display:contents",
+  // Flexbox direction
+  col: "flex-direction:column",
+  row: "flex-direction:row",
+  colrev: "flex-direction:column-reverse",
+  rowrev: "flex-direction:row-reverse",
+  // Flex wrap
+  wrap: "flex-wrap:wrap",
+  nowrap: "flex-wrap:nowrap",
+  wraprev: "flex-wrap:wrap-reverse",
+  // Flex grow/shrink
+  flex1: "flex:1",
+  flex0: "flex:none",
+  flexauto: "flex:auto",
+  grow: "flex-grow:1",
+  grow0: "flex-grow:0",
+  shrink: "flex-shrink:1",
+  shrink0: "flex-shrink:0",
+  // Align items
+  aic: "align-items:center",
+  aifs: "align-items:flex-start",
+  aife: "align-items:flex-end",
+  aist: "align-items:stretch",
+  aibl: "align-items:baseline",
+  // Justify content
+  jcc: "justify-content:center",
+  jcfs: "justify-content:flex-start",
+  jcfe: "justify-content:flex-end",
+  jcsb: "justify-content:space-between",
+  jcsa: "justify-content:space-around",
+  jcse: "justify-content:space-evenly",
+  // Align self
+  asc: "align-self:center",
+  asfs: "align-self:flex-start",
+  asfe: "align-self:flex-end",
+  asst: "align-self:stretch",
+  // Justify self
+  jsc: "justify-self:center",
+  jsfs: "justify-self:start",
+  jsfe: "justify-self:end",
+  jsst: "justify-self:stretch",
+  // Place items/content
+  pic: "place-items:center",
+  pcc: "place-content:center",
+  // Position
+  rel: "position:relative",
+  abs: "position:absolute",
+  fixed: "position:fixed",
+  sticky: "position:sticky",
+  static: "position:static",
+  // Sizing
+  wfull: "width:100%",
+  hfull: "height:100%",
+  w100: "width:100%",
+  h100: "height:100%",
+  wscreen: "width:100vw",
+  hscreen: "height:100vh",
+  wfit: "width:fit-content",
+  hfit: "height:fit-content",
+  wmin: "width:min-content",
+  hmin: "height:min-content",
+  wmax: "width:max-content",
+  hmax: "height:max-content",
+  wauto: "width:auto",
+  hauto: "height:auto",
+  minw0: "min-width:0",
+  minh0: "min-height:0",
+  maxwfull: "max-width:100%",
+  maxhfull: "max-height:100%",
+  // Overflow
+  overhidden: "overflow:hidden",
+  overauto: "overflow:auto",
+  overscroll: "overflow:scroll",
+  overvis: "overflow:visible",
+  overclip: "overflow:clip",
+  overxhidden: "overflow-x:hidden",
+  overyhidden: "overflow-y:hidden",
+  overxauto: "overflow-x:auto",
+  overyauto: "overflow-y:auto",
+  // Text alignment
+  textl: "text-align:left",
+  textc: "text-align:center",
+  textr: "text-align:right",
+  textj: "text-align:justify",
+  // Vertical alignment
+  vam: "vertical-align:middle",
+  vat: "vertical-align:top",
+  vab: "vertical-align:bottom",
+  vabl: "vertical-align:baseline",
+  // Font weight
+  fontlight: "font-weight:300",
+  fontnormal: "font-weight:400",
+  fontmedium: "font-weight:500",
+  fontsemi: "font-weight:600",
+  fontbold: "font-weight:700",
+  fontextrabold: "font-weight:800",
+  // Font style
+  italic: "font-style:italic",
+  notitalic: "font-style:normal",
+  // Text decoration
+  underline: "text-decoration:underline",
+  linethrough: "text-decoration:line-through",
+  nounderline: "text-decoration:none",
+  // Text transform
+  uppercase: "text-transform:uppercase",
+  lowercase: "text-transform:lowercase",
+  capitalize: "text-transform:capitalize",
+  normalcase: "text-transform:none",
+  // Whitespace
+  nowraptext: "white-space:nowrap",
+  pre: "white-space:pre",
+  prewrap: "white-space:pre-wrap",
+  preline: "white-space:pre-line",
+  breakspaces: "white-space:break-spaces",
+  // Word/text breaking
+  breakword: "overflow-wrap:break-word",
+  breakall: "word-break:break-all",
+  breakkeep: "word-break:keep-all",
+  truncate: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap",
+  // Cursor
+  pointer: "cursor:pointer",
+  cursordefault: "cursor:default",
+  wait: "cursor:wait",
+  cursortext: "cursor:text",
+  move: "cursor:move",
+  notallowed: "cursor:not-allowed",
+  grab: "cursor:grab",
+  grabbing: "cursor:grabbing",
+  // Pointer events
+  ptrall: "pointer-events:all",
+  ptrnone: "pointer-events:none",
+  ptrauto: "pointer-events:auto",
+  // User select
+  selectnone: "user-select:none",
+  selecttext: "user-select:text",
+  selectall: "user-select:all",
+  selectauto: "user-select:auto",
+  // Visibility
+  visible: "visibility:visible",
+  invisible: "visibility:hidden",
+  // Opacity
+  op0: "opacity:0",
+  op25: "opacity:0.25",
+  op50: "opacity:0.5",
+  op75: "opacity:0.75",
+  op100: "opacity:1",
+  // Border style
+  bordernone: "border:none",
+  bordersolid: "border-style:solid",
+  borderdashed: "border-style:dashed",
+  borderdotted: "border-style:dotted",
+  // Border radius
+  rounded: "border-radius:var(--d-radius,0.5rem)",
+  roundedfull: "border-radius:9999px",
+  roundednone: "border-radius:0",
+  roundedsm: "border-radius:0.25rem",
+  roundedlg: "border-radius:0.75rem",
+  roundedxl: "border-radius:1rem",
+  rounded2xl: "border-radius:1.5rem",
+  // Shadows
+  shadow: "box-shadow:var(--d-shadow,0 1px 3px rgba(0,0,0,0.1))",
+  shadowsm: "box-shadow:0 1px 2px rgba(0,0,0,0.05)",
+  shadowmd: "box-shadow:0 4px 6px rgba(0,0,0,0.1)",
+  shadowlg: "box-shadow:0 10px 15px rgba(0,0,0,0.1)",
+  shadowxl: "box-shadow:0 20px 25px rgba(0,0,0,0.1)",
+  shadownone: "box-shadow:none",
+  // Transitions
+  trans: "transition:all 0.15s ease",
+  transnone: "transition:none",
+  transcolors: "transition:color,background-color,border-color 0.15s ease",
+  transopacity: "transition:opacity 0.15s ease",
+  transtransform: "transition:transform 0.15s ease",
+  // Object fit
+  objcover: "object-fit:cover",
+  objcontain: "object-fit:contain",
+  objfill: "object-fit:fill",
+  objnone: "object-fit:none",
+  objscale: "object-fit:scale-down",
+  // Object position
+  objcenter: "object-position:center",
+  objtop: "object-position:top",
+  objbottom: "object-position:bottom",
+  objleft: "object-position:left",
+  objright: "object-position:right",
+  // List style
+  listnone: "list-style:none",
+  listdisc: "list-style-type:disc",
+  listdecimal: "list-style-type:decimal",
+  // Table
+  bordercollapse: "border-collapse:collapse",
+  borderseparate: "border-collapse:separate",
+  tablelayout: "table-layout:fixed",
+  // Aspect ratio
+  aspect11: "aspect-ratio:1/1",
+  aspect169: "aspect-ratio:16/9",
+  aspect43: "aspect-ratio:4/3",
+  aspectvideo: "aspect-ratio:16/9",
+  aspectsquare: "aspect-ratio:1/1",
+  // Z-index
+  z0: "z-index:0",
+  z10: "z-index:10",
+  z20: "z-index:20",
+  z30: "z-index:30",
+  z40: "z-index:40",
+  z50: "z-index:50",
+  zauto: "z-index:auto",
+  zneg: "z-index:-1",
+  // Isolation
+  isolate: "isolation:isolate",
+  isolateauto: "isolation:auto",
+  // Inset
+  inset0: "inset:0",
+  insetauto: "inset:auto",
+  top0: "top:0",
+  right0: "right:0",
+  bottom0: "bottom:0",
+  left0: "left:0",
+  // Appearance
+  appearancenone: "appearance:none",
+  // Outline
+  outlinenone: "outline:none",
+  ring: "outline:2px solid var(--d-primary,#6366f1);outline-offset:2px",
+  ring1: "outline:1px solid var(--d-primary,#6366f1);outline-offset:1px",
+  ring2: "outline:2px solid var(--d-primary,#6366f1);outline-offset:2px",
+  // Container
+  container: "container-type:inline-size",
+  // Background
+  bgcover: "background-size:cover",
+  bgcontain: "background-size:contain",
+  bgcenter: "background-position:center",
+  bgnorepeat: "background-repeat:no-repeat",
+  bgrepeat: "background-repeat:repeat",
+  bgfixed: "background-attachment:fixed",
+  // Will-change
+  willchange: "will-change:transform",
+  willchangeauto: "will-change:auto",
+  // Backface
+  backfacehidden: "backface-visibility:hidden",
+  backfacevisible: "backface-visibility:visible",
+  // Resize
+  resizenone: "resize:none",
+  resizex: "resize:horizontal",
+  resizey: "resize:vertical",
+  resize: "resize:both",
+  // Touch action
+  touchnone: "touch-action:none",
+  touchpan: "touch-action:pan-x pan-y",
+  touchmanip: "touch-action:manipulation",
+  // Scroll behavior
+  scrollsmooth: "scroll-behavior:smooth",
+  scrollauto: "scroll-behavior:auto",
+  // Snap
+  snapx: "scroll-snap-type:x mandatory",
+  snapy: "scroll-snap-type:y mandatory",
+  snapstart: "scroll-snap-align:start",
+  snapcenter: "scroll-snap-align:center",
+  snapend: "scroll-snap-align:end",
+  // SR only
+  sronly: "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0",
+  notsr: "position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal"
+};
+var SPACING_SCALE = {
+  0: "0",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+};
+var TEXT_SCALE = {
+  xs: "font-size:0.75rem;line-height:1rem",
+  sm: "font-size:0.875rem;line-height:1.25rem",
+  base: "font-size:1rem;line-height:1.5rem",
+  lg: "font-size:1.125rem;line-height:1.75rem",
+  xl: "font-size:1.25rem;line-height:1.75rem",
+  "2xl": "font-size:1.5rem;line-height:2rem",
+  "3xl": "font-size:1.875rem;line-height:2.25rem",
+  "4xl": "font-size:2.25rem;line-height:2.5rem",
+  "5xl": "font-size:3rem;line-height:1",
+  "6xl": "font-size:3.75rem;line-height:1"
+};
+var HEADING_SCALE = {
+  "1": "font-size:2.25rem;line-height:2.5rem;font-weight:700",
+  "2": "font-size:1.875rem;line-height:2.25rem;font-weight:700",
+  "3": "font-size:1.5rem;line-height:2rem;font-weight:600",
+  "4": "font-size:1.25rem;line-height:1.75rem;font-weight:600",
+  "5": "font-size:1.125rem;line-height:1.75rem;font-weight:600",
+  "6": "font-size:1rem;line-height:1.5rem;font-weight:600"
+};
+var COLOR_ATOMS = {
+  // Background colors
+  bgprimary: "background:var(--d-primary)",
+  bgsecondary: "background:var(--d-secondary)",
+  bgaccent: "background:var(--d-accent)",
+  bgsurface: "background:var(--d-surface)",
+  bgsurface0: "background:var(--d-surface-0,var(--d-bg))",
+  bgsurface1: "background:var(--d-surface-1,var(--d-surface))",
+  bgsurface2: "background:var(--d-surface-2,var(--d-surface-raised))",
+  bgmuted: "background:var(--d-muted,var(--d-surface))",
+  bgbg: "background:var(--d-bg)",
+  bgtransparent: "background:transparent",
+  bgwhite: "background:#fff",
+  bgblack: "background:#000",
+  bgsuccess: "background:var(--d-success,#22c55e)",
+  bgerror: "background:var(--d-error,#ef4444)",
+  bgwarning: "background:var(--d-warning,#f59e0b)",
+  bginfo: "background:var(--d-info,#3b82f6)",
+  // Foreground/text colors
+  fgprimary: "color:var(--d-primary)",
+  fgsecondary: "color:var(--d-secondary)",
+  fgaccent: "color:var(--d-accent)",
+  fgmuted: "color:var(--d-text-muted,var(--d-muted))",
+  fgtext: "color:var(--d-text)",
+  fgwhite: "color:#fff",
+  fgblack: "color:#000",
+  fginherit: "color:inherit",
+  fgsuccess: "color:var(--d-success,#22c55e)",
+  fgerror: "color:var(--d-error,#ef4444)",
+  fgwarning: "color:var(--d-warning,#f59e0b)",
+  fginfo: "color:var(--d-info,#3b82f6)",
+  // Border colors
+  bcprimary: "border-color:var(--d-primary)",
+  bcsecondary: "border-color:var(--d-secondary)",
+  bcaccent: "border-color:var(--d-accent)",
+  bcborder: "border-color:var(--d-border)",
+  bcmuted: "border-color:var(--d-muted,var(--d-border))",
+  bctransparent: "border-color:transparent"
+};
+var GRID_COLS = {
+  gc1: "grid-template-columns:repeat(1,minmax(0,1fr))",
+  gc2: "grid-template-columns:repeat(2,minmax(0,1fr))",
+  gc3: "grid-template-columns:repeat(3,minmax(0,1fr))",
+  gc4: "grid-template-columns:repeat(4,minmax(0,1fr))",
+  gc5: "grid-template-columns:repeat(5,minmax(0,1fr))",
+  gc6: "grid-template-columns:repeat(6,minmax(0,1fr))",
+  gc7: "grid-template-columns:repeat(7,minmax(0,1fr))",
+  gc8: "grid-template-columns:repeat(8,minmax(0,1fr))",
+  gc9: "grid-template-columns:repeat(9,minmax(0,1fr))",
+  gc10: "grid-template-columns:repeat(10,minmax(0,1fr))",
+  gc11: "grid-template-columns:repeat(11,minmax(0,1fr))",
+  gc12: "grid-template-columns:repeat(12,minmax(0,1fr))"
+};
+var GRID_ROWS = {
+  gr1: "grid-template-rows:repeat(1,minmax(0,1fr))",
+  gr2: "grid-template-rows:repeat(2,minmax(0,1fr))",
+  gr3: "grid-template-rows:repeat(3,minmax(0,1fr))",
+  gr4: "grid-template-rows:repeat(4,minmax(0,1fr))",
+  gr5: "grid-template-rows:repeat(5,minmax(0,1fr))",
+  gr6: "grid-template-rows:repeat(6,minmax(0,1fr))"
+};
+var GRID_SPAN = {
+  span1: "grid-column:span 1/span 1",
+  span2: "grid-column:span 2/span 2",
+  span3: "grid-column:span 3/span 3",
+  span4: "grid-column:span 4/span 4",
+  span5: "grid-column:span 5/span 5",
+  span6: "grid-column:span 6/span 6",
+  span7: "grid-column:span 7/span 7",
+  span8: "grid-column:span 8/span 8",
+  span9: "grid-column:span 9/span 9",
+  span10: "grid-column:span 10/span 10",
+  span11: "grid-column:span 11/span 11",
+  span12: "grid-column:span 12/span 12",
+  spanfull: "grid-column:1/-1",
+  rowspan1: "grid-row:span 1/span 1",
+  rowspan2: "grid-row:span 2/span 2",
+  rowspan3: "grid-row:span 3/span 3",
+  rowspan4: "grid-row:span 4/span 4",
+  rowspan5: "grid-row:span 5/span 5",
+  rowspan6: "grid-row:span 6/span 6",
+  rowspanfull: "grid-row:1/-1"
+};
+function resolveAtomDecl(atom) {
+  const name = atom.startsWith("_") ? atom.slice(1) : atom;
+  if (DIRECT[name]) return DIRECT[name];
+  if (COLOR_ATOMS[name]) return COLOR_ATOMS[name];
+  if (GRID_COLS[name]) return GRID_COLS[name];
+  if (GRID_ROWS[name]) return GRID_ROWS[name];
+  if (GRID_SPAN[name]) return GRID_SPAN[name];
+  if (name.startsWith("text")) {
+    const size = name.slice(4);
+    if (TEXT_SCALE[size]) return TEXT_SCALE[size];
+  }
+  if (name.startsWith("heading")) {
+    const level = name.slice(7);
+    if (HEADING_SCALE[level]) return HEADING_SCALE[level];
+  }
+  const gapMatch = name.match(/^gap(\d+(?:\.\d+)?)$/);
+  if (gapMatch) {
+    const n = parseFloat(gapMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `gap:${value}`;
+  }
+  const gxMatch = name.match(/^gx(\d+(?:\.\d+)?)$/);
+  if (gxMatch) {
+    const n = parseFloat(gxMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `column-gap:${value}`;
+  }
+  const gyMatch = name.match(/^gy(\d+(?:\.\d+)?)$/);
+  if (gyMatch) {
+    const n = parseFloat(gyMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `row-gap:${value}`;
+  }
+  const paddingMatch = name.match(/^p([trblxy]?)(\d+(?:\.\d+)?)$/);
+  if (paddingMatch) {
+    const [, dir, num] = paddingMatch;
+    const n = parseFloat(num);
+    const value = SPACING_SCALE[n];
+    if (value) {
+      if (!dir || dir === "") return `padding:${value}`;
+      if (dir === "t") return `padding-top:${value}`;
+      if (dir === "r") return `padding-right:${value}`;
+      if (dir === "b") return `padding-bottom:${value}`;
+      if (dir === "l") return `padding-left:${value}`;
+      if (dir === "x") return `padding-inline:${value}`;
+      if (dir === "y") return `padding-block:${value}`;
+    }
+  }
+  const marginMatch = name.match(/^m([trblxy]?)(\d+(?:\.\d+)?)$/);
+  if (marginMatch) {
+    const [, dir, num] = marginMatch;
+    const n = parseFloat(num);
+    const value = SPACING_SCALE[n];
+    if (value) {
+      if (!dir || dir === "") return `margin:${value}`;
+      if (dir === "t") return `margin-top:${value}`;
+      if (dir === "r") return `margin-right:${value}`;
+      if (dir === "b") return `margin-bottom:${value}`;
+      if (dir === "l") return `margin-left:${value}`;
+      if (dir === "x") return `margin-inline:${value}`;
+      if (dir === "y") return `margin-block:${value}`;
+    }
+  }
+  const negMarginMatch = name.match(/^-m([trblxy]?)(\d+(?:\.\d+)?)$/);
+  if (negMarginMatch) {
+    const [, dir, num] = negMarginMatch;
+    const n = parseFloat(num);
+    const value = SPACING_SCALE[n];
+    if (value) {
+      const negValue = `-${value}`;
+      if (!dir || dir === "") return `margin:${negValue}`;
+      if (dir === "t") return `margin-top:${negValue}`;
+      if (dir === "r") return `margin-right:${negValue}`;
+      if (dir === "b") return `margin-bottom:${negValue}`;
+      if (dir === "l") return `margin-left:${negValue}`;
+      if (dir === "x") return `margin-inline:${negValue}`;
+      if (dir === "y") return `margin-block:${negValue}`;
+    }
+  }
+  const widthMatch = name.match(/^w(\d+(?:\.\d+)?)$/);
+  if (widthMatch) {
+    const n = parseFloat(widthMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `width:${value}`;
+  }
+  const heightMatch = name.match(/^h(\d+(?:\.\d+)?)$/);
+  if (heightMatch) {
+    const n = parseFloat(heightMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `height:${value}`;
+  }
+  const minwMatch = name.match(/^minw(\d+(?:\.\d+)?)$/);
+  if (minwMatch) {
+    const n = parseFloat(minwMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `min-width:${value}`;
+  }
+  const maxwMatch = name.match(/^maxw(\d+(?:\.\d+)?)$/);
+  if (maxwMatch) {
+    const n = parseFloat(maxwMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `max-width:${value}`;
+  }
+  const minhMatch = name.match(/^minh(\d+(?:\.\d+)?)$/);
+  if (minhMatch) {
+    const n = parseFloat(minhMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `min-height:${value}`;
+  }
+  const maxhMatch = name.match(/^maxh(\d+(?:\.\d+)?)$/);
+  if (maxhMatch) {
+    const n = parseFloat(maxhMatch[1]);
+    const value = SPACING_SCALE[n];
+    if (value) return `max-height:${value}`;
+  }
+  const bwMatch = name.match(/^bw(\d+)$/);
+  if (bwMatch) {
+    const n = parseInt(bwMatch[1], 10);
+    return `border-width:${n}px`;
+  }
+  const radiusMatch = name.match(/^r(\d+)$/);
+  if (radiusMatch) {
+    const n = parseInt(radiusMatch[1], 10);
+    return `border-radius:${n}px`;
+  }
+  const lhMatch = name.match(/^lh(\d+(?:\.\d+)?)$/);
+  if (lhMatch) {
+    return `line-height:${lhMatch[1]}`;
+  }
+  const lsMatch = name.match(/^ls(\d+)$/);
+  if (lsMatch) {
+    const n = parseInt(lsMatch[1], 10);
+    return `letter-spacing:${n * 0.025}em`;
+  }
+  const scaleMatch = name.match(/^scale(\d+)$/);
+  if (scaleMatch) {
+    const n = parseInt(scaleMatch[1], 10);
+    return `transform:scale(${n / 100})`;
+  }
+  const rotateMatch = name.match(/^rotate(-?\d+)$/);
+  if (rotateMatch) {
+    return `transform:rotate(${rotateMatch[1]}deg)`;
+  }
+  const translateXMatch = name.match(/^translatex(-?\d+)$/);
+  if (translateXMatch) {
+    const n = parseInt(translateXMatch[1], 10);
+    const value = SPACING_SCALE[Math.abs(n)] || `${n}px`;
+    return `transform:translateX(${n < 0 ? "-" : ""}${value})`;
+  }
+  const translateYMatch = name.match(/^translatey(-?\d+)$/);
+  if (translateYMatch) {
+    const n = parseInt(translateYMatch[1], 10);
+    const value = SPACING_SCALE[Math.abs(n)] || `${n}px`;
+    return `transform:translateY(${n < 0 ? "-" : ""}${value})`;
+  }
+  const insetMatch = name.match(/^(top|right|bottom|left|inset)(\d+(?:\.\d+)?)$/);
+  if (insetMatch) {
+    const [, prop, num] = insetMatch;
+    const n = parseFloat(num);
+    const value = SPACING_SCALE[n];
+    if (value) return `${prop}:${value}`;
+  }
+  return null;
+}
+
+// src/runtime.ts
+var injected = /* @__PURE__ */ new Set();
+var BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+var BP_ORDER = ["sm", "md", "lg", "xl"];
+var CQ_WIDTHS = [320, 480, 640, 768, 1024];
+var LAYER_ORDER = "@layer d.base,d.theme,d.atoms,d.user;";
+var atomBuffer = [];
+var bpBuffers = {};
+var cqBuffer = [];
+var flushScheduled = false;
+var styleEl = null;
+var layerEl = null;
+var bpEls = null;
+var cqEl = null;
+function scheduleFlush() {
+  if (flushScheduled) return;
+  flushScheduled = true;
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(flushBuffers);
+  } else {
+    Promise.resolve().then(flushBuffers);
+  }
+}
+function flushBuffers() {
+  flushScheduled = false;
+  if (atomBuffer.length) {
+    const el = getStyleElement();
+    if (el) el.textContent = (el.textContent || "") + atomBuffer.join("");
+    atomBuffer = [];
+  }
+  if (Object.keys(bpBuffers).length) {
+    const els = ensureBpElements();
+    if (els) {
+      for (const bp of BP_ORDER) {
+        if (bpBuffers[bp]?.length) {
+          els[bp].textContent = (els[bp].textContent || "") + bpBuffers[bp].join("");
+          bpBuffers[bp] = [];
+        }
+      }
+    }
+    bpBuffers = {};
+  }
+  if (cqBuffer.length) {
+    const el = ensureCqElement();
+    if (el) el.textContent = (el.textContent || "") + cqBuffer.join("");
+    cqBuffer = [];
+  }
+}
+function ensureLayerOrder() {
+  if (layerEl) return;
+  if (typeof document === "undefined") return;
+  layerEl = document.createElement("style");
+  layerEl.setAttribute("data-decantr-layers", "");
+  layerEl.textContent = LAYER_ORDER;
+  document.head.prepend(layerEl);
+}
+function getStyleElement() {
+  if (!styleEl) {
+    if (typeof document === "undefined") return null;
+    ensureLayerOrder();
+    styleEl = document.createElement("style");
+    styleEl.setAttribute("data-decantr", "");
+    document.head.appendChild(styleEl);
+  }
+  return styleEl;
+}
+function ensureBpElements() {
+  if (bpEls) return bpEls;
+  if (typeof document === "undefined") return null;
+  bpEls = {};
+  getStyleElement();
+  for (const bp of BP_ORDER) {
+    const el = document.createElement("style");
+    el.setAttribute(`data-decantr-${bp}`, "");
+    document.head.appendChild(el);
+    bpEls[bp] = el;
+  }
+  return bpEls;
+}
+function ensureCqElement() {
+  if (cqEl) return cqEl;
+  if (typeof document === "undefined") return null;
+  getStyleElement();
+  cqEl = document.createElement("style");
+  cqEl.setAttribute("data-decantr-cq", "");
+  document.head.appendChild(cqEl);
+  return cqEl;
+}
+function inject(className, declaration, escapedName) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const sel = escapedName || className;
+  atomBuffer.push(`@layer d.atoms{.${sel}{${declaration}}}`);
+  scheduleFlush();
+}
+function injectResponsive(className, declaration, bp) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = className.replace(/:/g, "\\:");
+  if (!bpBuffers[bp]) bpBuffers[bp] = [];
+  bpBuffers[bp].push(`@layer d.atoms{@media(min-width:${BREAKPOINTS[bp]}px){.${escaped}{${declaration}}}}`);
+  scheduleFlush();
+}
+function injectPseudo(className, declaration, prefix) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = escapeSelector(className);
+  const PSEUDO_MAP = {
+    h: "hover",
+    f: "focus",
+    fv: "focus-visible",
+    a: "active",
+    fw: "focus-within"
+  };
+  const pseudo = PSEUDO_MAP[prefix];
+  atomBuffer.push(`@layer d.atoms{.${escaped}:${pseudo}{${declaration}}}`);
+  scheduleFlush();
+}
+function injectResponsivePseudo(className, declaration, bp, pseudo) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = escapeSelector(className);
+  if (!bpBuffers[bp]) bpBuffers[bp] = [];
+  bpBuffers[bp].push(`@layer d.atoms{@media(min-width:${BREAKPOINTS[bp]}px){.${escaped}:${pseudo}{${declaration}}}}`);
+  scheduleFlush();
+}
+function injectContainer(className, declaration, width) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = className.replace(/:/g, "\\:");
+  cqBuffer.push(`@layer d.atoms{@container(min-width:${width}px){.${escaped}{${declaration}}}}`);
+  scheduleFlush();
+}
+function injectGroupPeer(className, declaration, prefix) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = escapeSelector(className);
+  const GP_STATE = {
+    gh: ["group", "hover"],
+    gf: ["group", "focus-within"],
+    ga: ["group", "active"],
+    ph: ["peer", "hover"],
+    pf: ["peer", "focus"],
+    pa: ["peer", "active"]
+  };
+  const [kind, state] = GP_STATE[prefix];
+  const combinator = kind === "group" ? " " : " ~ ";
+  atomBuffer.push(`@layer d.atoms{.d-${kind}:${state}${combinator}.${escaped}{${declaration}}}`);
+  scheduleFlush();
+}
+function injectMediaQuery(className, declaration, query) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = className.replace(/:/g, "\\:");
+  atomBuffer.push(`@layer d.atoms{@media${query}{.${escaped}{${declaration}}}}`);
+  scheduleFlush();
+}
+function escapeSelector(className) {
+  return className.replace(/:/g, "\\:").replace(/\//g, "\\/").replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/#/g, "\\#").replace(/%/g, "\\%").replace(/\(/g, "\\(").replace(/\)/g, "\\)").replace(/,/g, "\\,").replace(/\+/g, "\\+");
+}
+function extractCSS() {
+  flushBuffers();
+  let css2 = layerEl ? layerEl.textContent || "" : "";
+  css2 += styleEl ? styleEl.textContent || "" : "";
+  if (bpEls) {
+    for (const bp of BP_ORDER) {
+      if (bpEls[bp]) css2 += bpEls[bp].textContent || "";
+    }
+  }
+  if (cqEl) css2 += cqEl.textContent || "";
+  return css2;
+}
+function getInjectedClasses() {
+  return new Set(injected);
+}
+function reset() {
+  injected.clear();
+  atomBuffer = [];
+  bpBuffers = {};
+  cqBuffer = [];
+  flushScheduled = false;
+  if (layerEl) layerEl.textContent = LAYER_ORDER;
+  if (styleEl) styleEl.textContent = "";
+  if (bpEls) {
+    for (const bp of BP_ORDER) {
+      if (bpEls[bp]) bpEls[bp].textContent = "";
+    }
+  }
+  if (cqEl) cqEl.textContent = "";
+}
+
+// src/css.ts
+var customAtoms = /* @__PURE__ */ new Map();
+var BP_RE = /^_(sm|md|lg|xl):(.+)$/;
+var CQ_RE = /^_cq(\d+):(.+)$/;
+var GP_RE = /^_(gh|gf|ga|ph|pf|pa):(.+)$/;
+var PSEUDO_RE = /^_(h|f|fv|a|fw):(.+)$/;
+var MOTION_RE = /^_(motionSafe|motionReduce):(.+)$/;
+var ALPHA_RE = /^(_[a-zA-Z0-9]+)\/(\d+)$/;
+var ARB_RE = /^_([a-zA-Z]+)\[([^\]]+)\]$/;
+var MOTION_QUERIES = {
+  motionSafe: "(prefers-reduced-motion: no-preference)",
+  motionReduce: "(prefers-reduced-motion: reduce)"
+};
+var PSEUDO_NAMES = {
+  h: "hover",
+  f: "focus",
+  fv: "focus-visible",
+  a: "active",
+  fw: "focus-within"
+};
+var CQ_SET = new Set(CQ_WIDTHS);
+var ARB_PROPS = {
+  w: "width",
+  h: "height",
+  mw: "max-width",
+  mh: "max-height",
+  minw: "min-width",
+  minh: "min-height",
+  p: "padding",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  px: "padding-inline",
+  py: "padding-block",
+  m: "margin",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  mx: "margin-inline",
+  my: "margin-block",
+  gap: "gap",
+  gx: "column-gap",
+  gy: "row-gap",
+  t: "font-size",
+  fs: "font-size",
+  lh: "line-height",
+  fw: "font-weight",
+  ls: "letter-spacing",
+  r: "border-radius",
+  bg: "background",
+  fg: "color",
+  bc: "border-color",
+  bw: "border-width",
+  bt: "border-top",
+  bb: "border-bottom",
+  br: "border-right",
+  bl: "border-left",
+  z: "z-index",
+  op: "opacity",
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
+  shadow: "box-shadow",
+  bf: "backdrop-filter",
+  outline: "outline",
+  trans: "transition",
+  object: "object-fit",
+  gc: "grid-template-columns",
+  gr: "grid-template-rows"
+};
+function sanitizeArbValue(val) {
+  let safe = val.replace(/[{}<>;]/g, "");
+  safe = safe.replace(/url\s*\(/gi, "");
+  return safe;
+}
+function resolveAtom(atomPart) {
+  const custom = customAtoms.get(atomPart);
+  if (custom) return { className: atomPart, decl: custom };
+  const decl = resolveAtomDecl(atomPart);
+  if (decl) return { className: atomPart, decl };
+  const alphaMatch = atomPart.match(ALPHA_RE);
+  if (alphaMatch) {
+    const [, base, alphaStr] = alphaMatch;
+    const baseDecl = customAtoms.get(base) || resolveAtomDecl(base);
+    if (baseDecl) {
+      const alpha = Number(alphaStr);
+      if (alpha >= 0 && alpha <= 100) {
+        const colorMatch = baseDecl.match(/^(background|color|border-color):(var\(--[^)]+\))$/);
+        if (colorMatch) {
+          const [, prop, varRef] = colorMatch;
+          return {
+            className: atomPart,
+            decl: `${prop}:color-mix(in srgb,${varRef} ${alpha}%,transparent)`
+          };
+        }
+      }
+    }
+    return null;
+  }
+  const arbMatch = atomPart.match(ARB_RE);
+  if (arbMatch) {
+    const [, propPrefix, rawValue] = arbMatch;
+    const cssProp = ARB_PROPS[propPrefix] || ARB_PROPS[propPrefix.toLowerCase()];
+    if (cssProp) {
+      const value = sanitizeArbValue(rawValue.replace(/_/g, " "));
+      if (!value) return null;
+      return { className: atomPart, decl: `${cssProp}:${value}` };
+    }
+    return null;
+  }
+  return null;
+}
+function escapeClass(cls) {
+  return cls.replace(/:/g, "\\:").replace(/\//g, "\\/").replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/#/g, "\\#").replace(/%/g, "\\%").replace(/\(/g, "\\(").replace(/\)/g, "\\)").replace(/,/g, "\\,").replace(/\+/g, "\\+");
+}
+function css(...classes) {
+  const result = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (!cls) continue;
+    const parts = cls.split(/\s+/);
+    for (const part of parts) {
+      if (!part) continue;
+      if (part === "_group") {
+        result.push("d-group");
+        continue;
+      }
+      if (part === "_peer") {
+        result.push("d-peer");
+        continue;
+      }
+      if (part === "_prose") {
+        result.push("d-prose");
+        continue;
+      }
+      if (part === "_divideY") {
+        result.push("d-divide-y");
+        continue;
+      }
+      if (part === "_divideX") {
+        result.push("d-divide-x");
+        continue;
+      }
+      const motionMatch = part.match(MOTION_RE);
+      if (motionMatch) {
+        const [, motionPrefix, innerAtom] = motionMatch;
+        const resolved2 = resolveAtom(`_${innerAtom}`);
+        if (resolved2) {
+          injectMediaQuery(part, resolved2.decl, MOTION_QUERIES[motionPrefix]);
+        }
+        result.push(part);
+        continue;
+      }
+      const bpMatch = part.match(BP_RE);
+      if (bpMatch) {
+        const [, bp, innerAtom] = bpMatch;
+        const pseudoInner = innerAtom.match(/^(h|f|fv|a|fw):(.+)$/);
+        if (pseudoInner) {
+          const [, pseudoPrefix, atomName] = pseudoInner;
+          const resolved3 = resolveAtom(`_${atomName}`);
+          if (resolved3) {
+            injectResponsivePseudo(part, resolved3.decl, bp, PSEUDO_NAMES[pseudoPrefix]);
+          }
+          result.push(part);
+          continue;
+        }
+        const resolved2 = resolveAtom(`_${innerAtom}`);
+        if (resolved2) {
+          injectResponsive(part, resolved2.decl, bp);
+        }
+        result.push(part);
+        continue;
+      }
+      const cqMatch = part.match(CQ_RE);
+      if (cqMatch) {
+        const width = Number(cqMatch[1]);
+        const innerAtom = cqMatch[2];
+        if (CQ_SET.has(width)) {
+          const resolved2 = resolveAtom(`_${innerAtom}`);
+          if (resolved2) {
+            injectContainer(part, resolved2.decl, width);
+          }
+        }
+        result.push(part);
+        continue;
+      }
+      const gpMatch = part.match(GP_RE);
+      if (gpMatch) {
+        const [, prefix, atomName] = gpMatch;
+        const resolved2 = resolveAtom(`_${atomName}`);
+        if (resolved2) {
+          injectGroupPeer(part, resolved2.decl, prefix);
+        }
+        result.push(part);
+        continue;
+      }
+      const pseudoMatch = part.match(PSEUDO_RE);
+      if (pseudoMatch) {
+        const [, prefix, innerAtom] = pseudoMatch;
+        const resolved2 = resolveAtom(`_${innerAtom}`);
+        if (resolved2) {
+          injectPseudo(part, resolved2.decl, prefix);
+        }
+        result.push(part);
+        continue;
+      }
+      const resolved = resolveAtom(part);
+      if (resolved) {
+        const needsEscape = /[/\[\]#%(),+]/.test(resolved.className);
+        inject(resolved.className, resolved.decl, needsEscape ? escapeClass(resolved.className) : void 0);
+        result.push(part);
+      } else {
+        result.push(part);
+      }
+    }
+  }
+  return result.join(" ");
+}
+function define(name, declaration) {
+  customAtoms.set(name, declaration);
+}
+export {
+  BREAKPOINTS,
+  CQ_WIDTHS,
+  css,
+  define,
+  extractCSS,
+  getInjectedClasses,
+  inject,
+  injectContainer,
+  injectGroupPeer,
+  injectMediaQuery,
+  injectPseudo,
+  injectResponsive,
+  reset,
+  resolveAtomDecl
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@decantr/css",
+  "version": "1.0.0",
+  "description": "Framework-agnostic CSS atoms runtime for Decantr projects",
+  "author": "Decantr",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/decantr/decantr-monorepo",
+    "directory": "packages/css"
+  },
+  "homepage": "https://github.com/decantr/decantr-monorepo/tree/main/packages/css",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "decantr",
+    "css",
+    "atoms",
+    "utility-css"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "jsdom": "^26.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^3.0.0"
+  }
+}