@proveanything/smartlinks 2.0.11 → 2.0.13

package/dist/docs/css-baseline.md

@@ -0,0 +1,133 @@
+# SmartLinks CSS baseline (`sl-baseline`)
+
+> **Status: SHIPPED — `v1`, frozen.** The SDK ships `@proveanything/smartlinks/baseline.css`
+> (+ `baseline.classes.json`); the Portal/Hub serve it and apps opt in via
+> `meta.cssBaseline: "v1"`. `v1` is frozen: an existing `sl-*` rule's meaning never changes;
+> new capability ships as `v2` alongside. Supersedes the earlier "shared Tailwind base" idea —
+> that approach (sharing raw generated Tailwind) was too large and could never safely change;
+> this is the version that survives being frozen for years.
+
+A small, **frozen, namespaced** set of structural CSS helpers the platform guarantees are
+present, so any sub-app — and any AI/markdown/dynamic content renderer inside one — can rely
+on them. It is **mechanics, not aesthetics**: layout, spacing, sizing, type scale,
+responsive flow, radius/border/shadow, and a little motion. It never defines colours, fonts,
+or components — those are brand data and per-app.
+
+It is the CSS sibling of the JS shared-dependency contract, and like that contract **the SDK
+is the source of truth**: the SDK authors and ships the baseline; hosts and apps consume it.
+
+## Why this shape (and not the alternatives)
+
+- **Small + frozen** → maintainable for years. A 60–120-rule hand-authored contract can be
+  honoured indefinitely; a giant generated Tailwind sheet can't.
+- **Namespaced (`sl-`)** → zero collision with an app's own Tailwind (`flex`, `p-4`) or the
+  host. Apps use `sl-*` for the guaranteed floor *and* their own utilities side by side. This
+  is what removes the cascade/coexistence fragility.
+- **A stable contract, decoupled from Tailwind underneath** → the SDK may build it with
+  Tailwind 4/5/6 internally, but apps target `sl-*`, so Tailwind upgrades are free.
+- **Teachable** → ~100 stable primitives can be put in an AI prompt; the full Tailwind
+  surface cannot. Dynamic/AI content gets a guaranteed floor instead of hand-rolling CSS.
+- **A floor, not a ceiling** → opt-in, additive; apps are free to ignore it or write their
+  own CSS. It just guarantees a consistent structural baseline when they want it.
+
+## Responsive: container-query-backed, breakpoint-named
+
+Apps render **both** as containers (in the host document) and as iframes. Plain viewport
+`@media` is inconsistent across those — in an iframe it sees the iframe size (usually right),
+in a container it sees the *host* viewport (wrong for a sub-region). So the responsive
+primitives are **container-query based** (`@container`), exposed with familiar breakpoint
+names so authors/AI still think "phone / tablet / desktop":
+
+- The app's mount root is a **container context** (`sl-container`, i.e. `container-type:
+  inline-size`) — set by the host on container mounts and by the app root in iframe mode.
+- `sl-md-grid-2` then means "when **my** box is ≥ tablet width", correct in both embed modes.
+- Breakpoints (container widths): `sm` ≥ 480px, `md` ≥ 768px, `lg` ≥ 1024px.
+
+This is the "works well on mobile / tablet / desktop" house opinion, done correctly for an
+embed-first platform.
+
+## The v1 surface (frozen)
+
+All names `sl-`-prefixed. Responsive variants exist only for the layout-flow primitives
+marked ✦ (as `sl-{sm|md|lg}-<name>`), to keep the set teachable and small.
+
+**Reset & a11y**
+`sl-reset` (border-box + margin:0 on self/descendants) · `sl-media` (max-width:100%,
+height:auto) · `sl-focus` (keyboard-only focus ring) · `sl-sr-only` · `sl-container`
+(responsive container context)
+
+**Display ✦** `sl-block` · `sl-inline-block` · `sl-inline` · `sl-flex` · `sl-inline-flex` ·
+`sl-grid` · `sl-hidden`
+
+**Flex ✦(direction)** `sl-flex-row` · `sl-flex-col` · `sl-flex-wrap` · `sl-flex-nowrap` ·
+`sl-items-{start,center,end,stretch,baseline}` · `sl-justify-{start,center,end,between,around}`
+· `sl-flex-1` · `sl-flex-auto` · `sl-grow-0` · `sl-shrink-0`
+
+**Grid ✦(columns)** `sl-grid-{2,3,4}` (collapse to 1 col below `sm`) · `sl-grid-auto`
+(auto-fit minmax) · `sl-col-span-full`
+
+**Spacing** — curated 8-step scale `0,1,2,3,4,5,6,7` ≈ `0, .25, .5, .75, 1, 1.5, 2, 3 rem`.
+Logical properties (RTL-safe): `sl-gap-{0..7}` · `sl-p-{0..7}` · `sl-px-{0..7}` ·
+`sl-py-{0..7}` · `sl-ps-{0..7}` / `sl-pe-{0..7}` (inline start/end) · `sl-m-{0..7}` ·
+`sl-mx-auto` · `sl-mt-{0..7}` · `sl-mb-{0..7}`
+
+**Sizing** `sl-w-full` · `sl-h-full` · `sl-min-w-0` · `sl-max-w-{reading(42rem),prose(65ch),
+page(72rem)}` · `sl-aspect-{square,wide(16/9)}`
+
+**Typography** — static rem scale (predictable in any embed; use the responsive `✦` align
+and per-breakpoint sizing where you want type to change). `sl-text-{xs,sm,base,lg,xl,2xl,3xl,
+4xl}` · `sl-font-{normal,medium,semibold,bold}` · `sl-leading-{tight,normal,relaxed}` ·
+`sl-tracking-{tight,normal}` · `sl-text-{left,center,right}` ✦(align) · `sl-truncate` ·
+`sl-line-clamp-{2,3}` · `sl-balance` (text-wrap:balance) · `sl-pretty`
+
+**Radius / border / shadow** — neutral mechanics only (no brand colour). `sl-rounded-{sm,md,
+lg,xl,full}` · `sl-border` / `sl-border-0` (colour = `--sl-border`, a subtle
+`color-mix(currentColor 14%, transparent)` default, overridable) · `sl-shadow-{sm,md,lg}`
+(neutral)
+
+**Object-fit / overflow** `sl-cover` · `sl-contain` · `sl-overflow-hidden` · `sl-overflow-auto`
+
+**Position & layering** `sl-relative` · `sl-absolute` · `sl-sticky` · `sl-inset-0` ·
+`sl-z-{base,raised,overlay}` (named levels — a house layering convention so apps don't fight
+over z-index)
+
+**Motion** (small, reduced-motion-safe; keyframes are `sl-`-namespaced) `sl-transition`
+(standard ease/duration) · `sl-reveal` (fade-up on view) · `sl-hover-lift` · all motion is
+**disabled under `prefers-reduced-motion`**. Rich motion vocabularies stay per-app (and may
+become a separate versioned motion contract later if several apps want to share one).
+
+### Explicitly NOT in the baseline (non-goals)
+- **No colours** — brand data, delivered via CSS variables / theme params.
+- **No fonts** — per-app; the baseline sets a *scale*, never a family.
+- **No components** — no buttons/cards/nav; those are per-app aesthetics.
+- **No full utility surface** — anything bespoke ships in the app's own scoped CSS.
+
+## Delivery — one SDK source, two paths
+
+The SDK ships the compiled baseline as `@proveanything/smartlinks/baseline.css` (+ the
+machine-readable class list for the doctor). One authored source; two delivery mechanisms:
+
+| Embed mode | How the app gets it |
+|---|---|
+| **Container (ESM/UMD)** — same document as host | Host has already loaded `baseline.css`; the app **ships nothing** and just uses `sl-*`. Declares `meta.cssBaseline: "v1"`. |
+| **Iframe** — its own document | The app **imports the SDK's `baseline.css`** into its own document (it inherits nothing, exactly like it must carry its own modules). Byte-identical to the host copy. |
+
+Cascade: baseline loads first; app CSS after → app rules win ties. `sl-*` never collides with
+app utilities regardless.
+
+## SDK / build support (kept minimal — no CSS surgery)
+- The SDK **exports `baseline.css`** (and `baseline.classes.json`), built in the SDK's own
+  build so the file and the class list can't drift.
+- Manifest field **`meta.cssBaseline: "v1"`** — declares reliance so the host can guarantee
+  it's present.
+- `smartlinks-doctor`: warn if an app declares `cssBaseline` but uses an `sl-*` class outside
+  the declared version (the useful invariant — spirit of the JS import check). No subtraction
+  tooling needed: `sl-*` is a fixed vocabulary apps just use.
+
+## Versioning & freeze
+- `v1` is **frozen**: an existing `sl-*` class's meaning/output never changes in place.
+- New capability ships as `v2` **alongside** `v1` (both served), never a silent mutation.
+- Tailwind (or whatever builds it) may be upgraded underneath as long as the `sl-*` contract
+  keeps its meaning.
+- Governance: additions to the surface go through review (it's a decades-long contract);
+  err toward *stable and generous* over minimal, since the AI builders target it.

package/dist/docs/host-dependency-contract.md

@@ -32,7 +32,8 @@ export default defineConfig({
         'react', 'react-dom', 'react/jsx-runtime',
         '@proveanything/smartlinks',
         'react-router-dom', '@tanstack/react-query',
-        'lucide-react', 'date-fns', 'liquidjs', 'marked', 'class-variance-authority',
+        'lucide-react', 'date-fns', 'liquidjs', 'marked', 'dompurify', 'clsx', 'tailwind-merge',
+        'class-variance-authority',
         '@radix-ui/react-slot', '@radix-ui/react-dialog', '@radix-ui/react-popover',
         '@radix-ui/react-tooltip', '@radix-ui/react-tabs', '@radix-ui/react-accordion',
         '@radix-ui/react-select', '@radix-ui/react-scroll-area', '@radix-ui/react-label',
@@ -44,7 +45,8 @@ export default defineConfig({
           '@proveanything/smartlinks': 'SL',
           'react-router-dom': 'ReactRouterDOM', '@tanstack/react-query': 'ReactQuery',
           'lucide-react': 'LucideReact', 'date-fns': 'dateFns', 'liquidjs': 'LiquidJS',
-          'marked': 'marked', 'class-variance-authority': 'CVA',
+          'marked': 'marked', 'dompurify': 'DOMPurify', 'clsx': 'clsx',
+          'tailwind-merge': 'tailwindMerge', 'class-variance-authority': 'CVA',
           '@radix-ui/react-slot': 'RadixSlot', '@radix-ui/react-dialog': 'RadixDialog',
           '@radix-ui/react-popover': 'RadixPopover', '@radix-ui/react-tooltip': 'RadixTooltip',
           '@radix-ui/react-tabs': 'RadixTabs', '@radix-ui/react-accordion': 'RadixAccordion',
@@ -72,6 +74,9 @@ export default defineConfig({
 | `date-fns` | `dateFns` | 4.4 |
 | `liquidjs` | `LiquidJS` | 10.27+ |
 | `marked` | `marked` | 12+ |
+| `dompurify` | `DOMPurify` | 3+ |
+| `clsx` | `clsx` | 2+ |
+| `tailwind-merge` | `tailwindMerge` | 3+ |
 | `class-variance-authority` | `CVA` | 0.7 |
 | `@radix-ui/react-slot` | `RadixSlot` | 1.2.4 |
 | `@radix-ui/react-dialog` | `RadixDialog` | 1.1.23 |
@@ -86,10 +91,15 @@ export default defineConfig({
 | `@radix-ui/react-progress` | `RadixProgress` | 1.1.8 |
 | `@radix-ui/react-avatar` | `RadixAvatar` | 1.1.11 |
 
-`liquidjs` and `marked` are **host-provided** — externalise them, don't ship a second copy
-(frequently missed). `marked` is new in **contract v6**: the portal and hub render markdown in the
-container, so an app should use the host's renderer rather than bundling its own. `marked` does not
-sanitise HTML — if you render untrusted markdown, sanitise the output (e.g. DOMPurify) yourself.
+`liquidjs`, `marked`, `dompurify`, `clsx` and `tailwind-merge` are **host-provided** — externalise
+them, don't ship a second copy (frequently missed). `marked` arrived in **v6**; `dompurify`, `clsx`
+and `tailwind-merge` in **v7**. The portal and hub render markdown in the container, so use the
+host's `marked` rather than bundling your own. `marked` does not sanitise HTML — pair it with the
+shared `dompurify`: `el.innerHTML = DOMPurify.sanitize(marked.parse(md))`. `window.DOMPurify` is the
+**configured instance** (callable, `.sanitize()`), so `import DOMPurify from 'dompurify'` behaves
+exactly like a bundled default import. `clsx` + `tailwind-merge` are the standard `cn()` pair
+(`import { clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'`) — keep your local `cn()`
+helper if you like, it just stops paying the bundle cost.
 
 ## Backwards compatibility
 
@@ -111,11 +121,18 @@ Bundles ship their own compiled CSS, so the host's Tailwind version is irrelevan
 micro-app can stay on **Tailwind 3 indefinitely**, or adopt Tailwind 4 — its choice. (The starter
 app ships the Tailwind 4 CSS-first layout as the default; see its README.)
 
+> **CSS baseline (`sl-baseline` v1):** the CSS sibling of this JS contract, but deliberately
+> **not** a shared Tailwind dump. It's a small, frozen, `sl-`-namespaced set of structural
+> helpers (layout, spacing, responsive flow, type scale, motion — no colours, fonts, or
+> components) the SDK ships (`@proveanything/smartlinks/baseline.css`) and the host serves.
+> Opt-in via `meta.cssBaseline: "v1"`. See [css-baseline.md](css-baseline.md).
+
 ## The R5 host stack (reference)
 
 React **19.3** · Vite **8.3** · react-router-dom **7.18** · Tailwind **4.3** (CSS-first) ·
 TypeScript **6.0** · ESLint **10.11** · `@proveanything/smartlinks` **2.0.5** ·
-`@proveanything/smartlinks-utils-ui` **1.16.4** · liquidjs **10.29** · marked **12+**.
+`@proveanything/smartlinks-utils-ui` **1.16.4** · liquidjs **10.29** · marked **12+** ·
+dompurify **3+** · clsx **2+** · tailwind-merge **3+**.
 
 > **TypeScript 7** (the native/Go compiler) is **deliberately deferred** — tooling hasn't settled.
 > Target **TS 6** for R5; it compiles existing code with no source changes.
@@ -142,8 +159,8 @@ never drift:
 
 ```ts
 import {
-  SHARED_DEPENDENCY_CONTRACT_VERSION, // 'v6'
-  SHARED_DEPENDENCIES,                // [{ specifier, globalName, minVersion, importMapPath }, …] (26)
+  SHARED_DEPENDENCY_CONTRACT_VERSION, // 'v7'
+  SHARED_DEPENDENCIES,                // [{ specifier, globalName, minVersion, importMapPath }, …] (29)
   SHARED_DEPENDENCY_SPECIFIERS,       // bare specifiers — drop straight into a bundler `external` list
   getHostSharedDependencies,          // what the live host advertises at runtime, or null
 } from '@proveanything/smartlinks'

package/dist/docs/overview.md

@@ -63,6 +63,7 @@ The SmartLinks SDK (`@proveanything/smartlinks`) includes comprehensive document
 | **Agent Tools** | `docs/agent-tools.md` | Exposing your app's actions to the SmartLinks agent — an MCP facade over server functions; **opt-in per app, additive, no migration**; complements `app.admin.json` (functions serve/adapt it, don't replace it); live loop staged |
 | **Deploying & Registering** | `docs/deploying-apps.md` | Getting your app into the platform: fast dev publish, channels, deploy keys, registering releases |
 | **Host Dependency Contract (R5)** | `docs/host-dependency-contract.md` | The libraries the host provides (React 19, Router 7, Radix, liquidjs, …), the externalise-don't-bundle rule + Vite config, and React-18 backwards-compat |
+| **CSS Baseline** (`sl-baseline` v1) | `docs/css-baseline.md` | A small, frozen, `sl-`-namespaced set of structural helpers (layout, spacing, responsive flow, type scale, motion) the SDK ships (`@proveanything/smartlinks/baseline.css`) and the host guarantees — a teachable floor for apps + AI content. No colours/fonts/components. Opt-in via `meta.cssBaseline` |
 | **Deep Linking** | `docs/deep-link-discovery.md` | URL state management, navigable states, portal menus, AI nav |
 | **Portal Back Button** | `docs/portal-back-button.md` | Hierarchy-aware "up" navigation inside embedded apps |
 | **Portal Request Action** | `docs/portal-request-action.md` | Triggering portal built-in actions (__qrScanner, __share, __logout, etc.) from sub-apps |

package/dist/openapi.yaml

@@ -17957,6 +17957,8 @@ components:
             - dual
         sharedDependencies:
           type: string
+        cssBaseline:
+          type: string
         globals:
           type: object
           additionalProperties:

package/dist/shared-dependencies.d.ts

@@ -1,5 +1,5 @@
 /** Current contract revision. Bumped when the entry list or host versions change. */
-export declare const SHARED_DEPENDENCY_CONTRACT_VERSION: "v6";
+export declare const SHARED_DEPENDENCY_CONTRACT_VERSION: "v7";
 export interface SharedDependency {
     /** Bare import specifier the app writes, e.g. `react-dom/client`. */
     specifier: string;
@@ -13,8 +13,8 @@ export interface SharedDependency {
 /**
  * Canonical import-map path for a specifier: drop the leading `@` scope marker and
  * turn every `/` into `-`.
- *   'react-dom/client'      -> '/sl-shared/v6/react-dom-client.js'
- *   '@radix-ui/react-slot'  -> '/sl-shared/v6/radix-ui-react-slot.js'
+ *   'react-dom/client'      -> '/sl-shared/v7/react-dom-client.js'
+ *   '@radix-ui/react-slot'  -> '/sl-shared/v7/radix-ui-react-slot.js'
  * Hosts MUST serve shims at these paths so the map the SDK advertises resolves.
  */
 export declare function importMapPathFor(specifier: string, version?: string): string;

package/dist/shared-dependencies.js

@@ -11,22 +11,24 @@
 //
 // See docs/host-dependency-contract.md.
 /** Current contract revision. Bumped when the entry list or host versions change. */
-export const SHARED_DEPENDENCY_CONTRACT_VERSION = 'v6';
+export const SHARED_DEPENDENCY_CONTRACT_VERSION = 'v7';
 /**
  * Canonical import-map path for a specifier: drop the leading `@` scope marker and
  * turn every `/` into `-`.
- *   'react-dom/client'      -> '/sl-shared/v6/react-dom-client.js'
- *   '@radix-ui/react-slot'  -> '/sl-shared/v6/radix-ui-react-slot.js'
+ *   'react-dom/client'      -> '/sl-shared/v7/react-dom-client.js'
+ *   '@radix-ui/react-slot'  -> '/sl-shared/v7/radix-ui-react-slot.js'
  * Hosts MUST serve shims at these paths so the map the SDK advertises resolves.
  */
 export function importMapPathFor(specifier, version = SHARED_DEPENDENCY_CONTRACT_VERSION) {
     const slug = specifier.replace(/^@/, '').replace(/\//g, '-');
     return `/sl-shared/${version}/${slug}.js`;
 }
-// The 26-entry v6 contract: the v5 set plus `marked` (host-provided markdown
-// renderer, so apps stop bundling their own ~30KB copy — portal & hub render it in
-// the container). minVersion follows the R5 host baseline (React 19, Router 7.18.4
-// security floor, LiquidJS 10.27+, current Radix majors).
+// The 29-entry v7 contract: the v6 set plus `dompurify` (HTML sanitizer — pairs with
+// the shared `marked` so output apps sanitize instead of each bundling their own),
+// `clsx` + `tailwind-merge` (the standard `cn()` pair the portal/hub already ship, now
+// exposed to apps). All small, version-stable, ubiquitous — apps stop bundling copies.
+// minVersion follows the R5 host baseline (React 19, Router 7.18.4 security floor,
+// LiquidJS 10.27+, current Radix majors).
 const CONTRACT = [
     { specifier: 'react', globalName: 'React', minVersion: '19.0.0' },
     { specifier: 'react-dom', globalName: 'ReactDOM', minVersion: '19.0.0' },
@@ -41,6 +43,12 @@ const CONTRACT = [
     { specifier: 'date-fns', globalName: 'dateFns', minVersion: '4.0.0' },
     { specifier: 'liquidjs', globalName: 'LiquidJS', minVersion: '10.27.0' },
     { specifier: 'marked', globalName: 'marked', minVersion: '12.0.0' },
+    // `window.DOMPurify` is the CONFIGURED instance (callable, `.sanitize()`), exactly as
+    // dompurify's own UMD build exposes it — so `import DOMPurify from 'dompurify'`
+    // resolves to the same instance a bundled default import would.
+    { specifier: 'dompurify', globalName: 'DOMPurify', minVersion: '3.0.0' },
+    { specifier: 'clsx', globalName: 'clsx', minVersion: '2.0.0' },
+    { specifier: 'tailwind-merge', globalName: 'tailwindMerge', minVersion: '3.0.0' },
     { specifier: 'class-variance-authority', globalName: 'CVA', minVersion: '0.7.0' },
     { specifier: '@radix-ui/react-slot', globalName: 'RadixSlot', minVersion: '1.2.0' },
     { specifier: '@radix-ui/react-dialog', globalName: 'RadixDialog', minVersion: '1.1.0' },

package/dist/types/appManifest.d.ts

@@ -417,11 +417,18 @@ export interface AppManifest {
          */
         moduleFormat?: 'umd' | 'esm' | 'dual';
         /**
-         * Shared-dependency contract version this bundle was built against, e.g. `"v6"`
+         * Shared-dependency contract version this bundle was built against, e.g. `"v7"`
          * (see `SHARED_DEPENDENCY_CONTRACT_VERSION`). The host uses it to select a
          * compatible import map for the ESM load path.
          */
         sharedDependencies?: string;
+        /**
+         * The SmartLinks CSS baseline this bundle relies on, e.g. `"v1"`. A small, frozen,
+         * `sl-`-namespaced set of structural helpers the SDK ships and the host guarantees
+         * present. Container apps declare it and ship nothing; iframe apps import
+         * `@proveanything/smartlinks/baseline.css`. Opt-in and additive. See docs/css-baseline.md.
+         */
+        cssBaseline?: string;
         /**
          * Per-app namespaced UMD globals (R4.7+), e.g. `{ widgets: "MyAppWidgets" }`.
          * UMD-only: ESM bundles expose their exports through the module namespace and

package/docs/API_SUMMARY.md

@@ -1,6 +1,6 @@
 # Smartlinks API Summary
 
-Version: 2.0.11  |  Generated: 2026-09-21T19:28:09.956Z
+Version: 2.0.13  |  Generated: 2026-09-22T11:06:35.662Z
 
 This is a concise summary of all available API functions and types.
 
@@ -2182,6 +2182,7 @@ interface AppManifest {
   appId: string;
   moduleFormat?: 'umd' | 'esm' | 'dual';
   sharedDependencies?: string;
+  cssBaseline?: string;
   globals?: Record<string, string>;
   seo?: {
   strategy?: 'executor' | string;