@decantr/css 1.0.3 → 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Decantr AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Decantr CSS Atoms - Direct atom definitions and algorithmic resolution.
+ */
+/**
+ * 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;
+
 /**
  * Decantr CSS - Main css() function.
  */
@@ -40,6 +50,14 @@ declare function inject(className: string, declaration: string, escapedName?: st
  * @param bp - breakpoint key (sm|md|lg|xl)
  */
 declare function injectResponsive(className: string, declaration: string, bp: string): void;
+/**
+ * Inject a max-width responsive atom.
+ * @param className - e.g., '_mdmax:none' (hide below md)
+ * @param declaration - CSS declaration(s)
+ * @param bp - breakpoint key (sm|md|lg|xl). The max-width query is (breakpoint - 0.02)px
+ *             so it doesn't overlap with the matching min-width variant.
+ */
+declare function injectResponsiveMax(className: string, declaration: string, bp: string): void;
 /**
  * Inject a pseudo-class atom.
  * @param className - e.g., '_h:bgprimary'
@@ -47,6 +65,22 @@ declare function injectResponsive(className: string, declaration: string, bp: st
  * @param prefix - 'h'|'f'|'fv'|'a'|'fw'
  */
 declare function injectPseudo(className: string, declaration: string, prefix: string): void;
+/**
+ * Inject a responsive + pseudo-class atom.
+ * @param className - e.g., '_sm:h:bgprimary'
+ * @param declaration - CSS declaration(s)
+ * @param bp - breakpoint key
+ * @param pseudo - pseudo-class name
+ */
+declare function injectResponsivePseudo(className: string, declaration: string, bp: string, pseudo: string): void;
+/**
+ * Inject a max-width responsive + pseudo-class atom.
+ * @param className - e.g., '_mdmax:h:fgmuted'
+ * @param declaration - CSS declaration(s)
+ * @param bp - breakpoint key (sm|md|lg|xl)
+ * @param pseudo - pseudo-class name
+ */
+declare function injectResponsiveMaxPseudo(className: string, declaration: string, bp: string, pseudo: string): void;
 /**
  * Inject a container query-wrapped atom.
  * @param className - e.g., '_cq640:gc3'
@@ -81,19 +115,9 @@ declare function getInjectedClasses(): string[];
  */
 declare function reset(): void;
 
-/**
- * Decantr CSS Atoms - Direct atom definitions and algorithmic resolution.
- */
-/**
- * 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;
-
 declare function getAnimations(): boolean;
 declare function setAnimations(v: boolean): void;
 declare function getTheme(): string | null;
 declare function setTheme(id: string | null): void;
 
-export { BREAKPOINTS, CQ_WIDTHS, css, define, extractCSS, getAnimations, getInjectedClasses, getTheme, inject, injectContainer, injectGroupPeer, injectMediaQuery, injectPseudo, injectResponsive, reset, resolveAtomDecl, setAnimations, setTheme };
+export { BREAKPOINTS, CQ_WIDTHS, css, define, extractCSS, getAnimations, getInjectedClasses, getTheme, inject, injectContainer, injectGroupPeer, injectMediaQuery, injectPseudo, injectResponsive, injectResponsiveMax, injectResponsiveMaxPseudo, injectResponsivePseudo, reset, resolveAtomDecl, setAnimations, setTheme };

package/dist/index.js

@@ -61,6 +61,11 @@ var DIRECT = {
   // Sizing
   wfull: "width:100%",
   hfull: "height:100%",
+  // Hyphenated aliases — DECANTR.md examples used `_w-full` / `_h-full`
+  // historically; cold-LLM scaffolds fall back to the doc-spelling. Accept
+  // both so the doc and runtime can never silently disagree.
+  "w-full": "width:100%",
+  "h-full": "height:100%",
   w100: "width:100%",
   h100: "height:100%",
   wscreen: "width:100vw",
@@ -79,6 +84,20 @@ var DIRECT = {
   maxhfull: "max-height:100%",
   mw640: "max-width:40rem",
   mw480: "max-width:30rem",
+  // Item alignment aliases — DECANTR.md examples used `_items-center` /
+  // `_items-start` etc. (Tailwind-style); accept both alongside the
+  // canonical `_aic` / `_aifs` etc. so doc-driven AI scaffolds resolve.
+  "items-center": "align-items:center",
+  "items-start": "align-items:flex-start",
+  "items-end": "align-items:flex-end",
+  "items-stretch": "align-items:stretch",
+  "items-baseline": "align-items:baseline",
+  "justify-center": "justify-content:center",
+  "justify-start": "justify-content:flex-start",
+  "justify-end": "justify-content:flex-end",
+  "justify-between": "justify-content:space-between",
+  "justify-around": "justify-content:space-around",
+  "justify-evenly": "justify-content:space-evenly",
   // Overflow
   overhidden: "overflow:hidden",
   overauto: "overflow:auto",
@@ -484,6 +503,17 @@ function resolveAtomDecl(atom) {
       if (dir === "y") return `margin-block:${value}`;
     }
   }
+  const marginAutoMatch = name.match(/^m([trblxy]?)auto$/);
+  if (marginAutoMatch) {
+    const [, dir] = marginAutoMatch;
+    if (!dir || dir === "") return `margin:auto`;
+    if (dir === "t") return `margin-top:auto`;
+    if (dir === "r") return `margin-right:auto`;
+    if (dir === "b") return `margin-bottom:auto`;
+    if (dir === "l") return `margin-left:auto`;
+    if (dir === "x") return `margin-inline:auto`;
+    if (dir === "y") return `margin-block:auto`;
+  }
   const negMarginMatch = name.match(/^-m([trblxy]?)(\d+(?:\.\d+)?)$/);
   if (negMarginMatch) {
     const [, dir, num] = negMarginMatch;
@@ -590,6 +620,7 @@ function resolveAtomDecl(atom) {
 var injected = /* @__PURE__ */ new Set();
 var BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
 var BP_ORDER = ["sm", "md", "lg", "xl"];
+var BP_MAX_ORDER = ["xlmax", "lgmax", "mdmax", "smmax"];
 var CQ_WIDTHS = [320, 480, 640, 768, 1024];
 var LAYER_ORDER = "@layer d.base,d.theme,d.atoms,d.user;";
 var atomBuffer = [];
@@ -625,6 +656,12 @@ function flushBuffers() {
           bpBuffers[bp] = [];
         }
       }
+      for (const bp of BP_MAX_ORDER) {
+        if (bpBuffers[bp]?.length) {
+          els[bp].textContent = (els[bp].textContent || "") + bpBuffers[bp].join("");
+          bpBuffers[bp] = [];
+        }
+      }
     }
     bpBuffers = {};
   }
@@ -663,6 +700,12 @@ function ensureBpElements() {
     document.head.appendChild(el);
     bpEls[bp] = el;
   }
+  for (const bp of BP_MAX_ORDER) {
+    const el = document.createElement("style");
+    el.setAttribute(`data-decantr-${bp}`, "");
+    document.head.appendChild(el);
+    bpEls[bp] = el;
+  }
   return bpEls;
 }
 function ensureCqElement() {
@@ -688,7 +731,20 @@ function injectResponsive(className, declaration, bp) {
   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}}}}`);
+  bpBuffers[bp].push(
+    `@layer d.atoms{@media(min-width:${BREAKPOINTS[bp]}px){.${escaped}{${declaration}}}}`
+  );
+  scheduleFlush();
+}
+function injectResponsiveMax(className, declaration, bp) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = className.replace(/:/g, "\\:");
+  const key = `${bp}max`;
+  if (!bpBuffers[key]) bpBuffers[key] = [];
+  const maxPx = BREAKPOINTS[bp] - 0.02;
+  bpBuffers[key].push(`@layer d.atoms{@media(max-width:${maxPx}px){.${escaped}{${declaration}}}}`);
   scheduleFlush();
 }
 function injectPseudo(className, declaration, prefix) {
@@ -713,7 +769,22 @@ function injectResponsivePseudo(className, declaration, bp, pseudo) {
   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}}}}`);
+  bpBuffers[bp].push(
+    `@layer d.atoms{@media(min-width:${BREAKPOINTS[bp]}px){.${escaped}:${pseudo}{${declaration}}}}`
+  );
+  scheduleFlush();
+}
+function injectResponsiveMaxPseudo(className, declaration, bp, pseudo) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === "undefined") return;
+  const escaped = escapeSelector(className);
+  const key = `${bp}max`;
+  if (!bpBuffers[key]) bpBuffers[key] = [];
+  const maxPx = BREAKPOINTS[bp] - 0.02;
+  bpBuffers[key].push(
+    `@layer d.atoms{@media(max-width:${maxPx}px){.${escaped}:${pseudo}{${declaration}}}}`
+  );
   scheduleFlush();
 }
 function injectContainer(className, declaration, width) {
@@ -761,6 +832,9 @@ function extractCSS() {
     for (const bp of BP_ORDER) {
       if (bpEls[bp]) css2 += bpEls[bp].textContent || "";
     }
+    for (const bp of BP_MAX_ORDER) {
+      if (bpEls[bp]) css2 += bpEls[bp].textContent || "";
+    }
   }
   if (cqEl) css2 += cqEl.textContent || "";
   return css2;
@@ -780,6 +854,9 @@ function reset() {
     for (const bp of BP_ORDER) {
       if (bpEls[bp]) bpEls[bp].textContent = "";
     }
+    for (const bp of BP_MAX_ORDER) {
+      if (bpEls[bp]) bpEls[bp].textContent = "";
+    }
   }
   if (cqEl) cqEl.textContent = "";
 }
@@ -787,6 +864,7 @@ function reset() {
 // src/css.ts
 var customAtoms = /* @__PURE__ */ new Map();
 var BP_RE = /^_(sm|md|lg|xl):(.+)$/;
+var BP_MAX_RE = /^_(sm|md|lg|xl)max:(.+)$/;
 var CQ_RE = /^_cq(\d+):(.+)$/;
 var GP_RE = /^_(gh|gf|ga|ph|pf|pa):(.+)$/;
 var PSEUDO_RE = /^_(h|f|fv|a|fw):(.+)$/;
@@ -810,6 +888,8 @@ var ARB_PROPS = {
   h: "height",
   mw: "max-width",
   mh: "max-height",
+  maxw: "max-width",
+  maxh: "max-height",
   minw: "min-width",
   minh: "min-height",
   p: "padding",
@@ -834,7 +914,10 @@ var ARB_PROPS = {
   lh: "line-height",
   fw: "font-weight",
   ls: "letter-spacing",
+  leading: "line-height",
+  tracking: "letter-spacing",
   r: "border-radius",
+  rounded: "border-radius",
   bg: "background",
   fg: "color",
   bc: "border-color",
@@ -843,6 +926,7 @@ var ARB_PROPS = {
   bb: "border-bottom",
   br: "border-right",
   bl: "border-left",
+  border: "border",
   z: "z-index",
   op: "opacity",
   top: "top",
@@ -856,7 +940,28 @@ var ARB_PROPS = {
   trans: "transition",
   object: "object-fit",
   gc: "grid-template-columns",
-  gr: "grid-template-rows"
+  gr: "grid-template-rows",
+  // Additional content-observed bracket atoms (P0-3 expansion). The v1
+  // harness report flagged the page-pack Surface emitting atoms the
+  // runtime didn't resolve; same class of silent-failure applies when
+  // pattern JSONs use prefixes not in this map. These additions cover
+  // every bracket prefix observed across the 209 archetype + 80+ pattern
+  // JSONs in decantr-content.
+  overflow: "overflow",
+  pointer: "pointer-events",
+  text: "text-align",
+  whitespace: "white-space",
+  items: "align-items",
+  justify: "justify-content",
+  aspect: "aspect-ratio",
+  snap: "scroll-snap-type",
+  // Note: 'scale' intentionally omitted — use the numeric `_scale95` /
+  // `_scale100` / `_scale105` atoms. Bracket form would need value wrapping
+  // (`scale(1.05)` vs `1.05`) which the generic emitter can't do.
+  display: "display",
+  position: "position",
+  pos: "position",
+  cursor: "cursor"
 };
 function sanitizeArbValue(val) {
   let safe = val.replace(/[{}<>;]/g, "");
@@ -941,6 +1046,26 @@ function css(...classes) {
         result.push(part);
         continue;
       }
+      const bpMaxMatch = part.match(BP_MAX_RE);
+      if (bpMaxMatch) {
+        const [, bp, innerAtom] = bpMaxMatch;
+        const pseudoInner = innerAtom.match(/^(h|f|fv|a|fw):(.+)$/);
+        if (pseudoInner) {
+          const [, pseudoPrefix, atomName] = pseudoInner;
+          const resolved3 = resolveAtom(`_${atomName}`);
+          if (resolved3) {
+            injectResponsiveMaxPseudo(part, resolved3.decl, bp, PSEUDO_NAMES[pseudoPrefix]);
+          }
+          result.push(part);
+          continue;
+        }
+        const resolved2 = resolveAtom(`_${innerAtom}`);
+        if (resolved2) {
+          injectResponsiveMax(part, resolved2.decl, bp);
+        }
+        result.push(part);
+        continue;
+      }
       const bpMatch = part.match(BP_RE);
       if (bpMatch) {
         const [, bp, innerAtom] = bpMatch;
@@ -996,8 +1121,12 @@ function css(...classes) {
       }
       const resolved = resolveAtom(part);
       if (resolved) {
-        const needsEscape = /[/\[\]#%(),+]/.test(resolved.className);
-        inject(resolved.className, resolved.decl, needsEscape ? escapeClass(resolved.className) : void 0);
+        const needsEscape = /[/[\]#%(),+]/.test(resolved.className);
+        inject(
+          resolved.className,
+          resolved.decl,
+          needsEscape ? escapeClass(resolved.className) : void 0
+        );
         result.push(part);
       } else {
         result.push(part);
@@ -1040,6 +1169,9 @@ export {
   injectMediaQuery,
   injectPseudo,
   injectResponsive,
+  injectResponsiveMax,
+  injectResponsiveMaxPseudo,
+  injectResponsivePseudo,
   reset,
   resolveAtomDecl,
   setAnimations,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decantr/css",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Framework-agnostic CSS atom runtime for Decantr projects",
   "author": "Decantr AI",
   "bugs": {
@@ -27,12 +27,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --dts",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "tsc --noEmit"
-  },
   "keywords": [
     "decantr",
     "css",
@@ -46,5 +40,12 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit",
+    "preversion": "pnpm build && pnpm test"
   }
-}
+}