@proveanything/smartlinks 2.0.12 → 2.0.13

package/dist/baseline.classes.json

@@ -0,0 +1,209 @@
+{
+  "version": "v1",
+  "classes": [
+    "sl-absolute",
+    "sl-aspect-square",
+    "sl-aspect-wide",
+    "sl-balance",
+    "sl-block",
+    "sl-border",
+    "sl-border-0",
+    "sl-col-span-full",
+    "sl-contain",
+    "sl-container",
+    "sl-cover",
+    "sl-flex",
+    "sl-flex-1",
+    "sl-flex-auto",
+    "sl-flex-col",
+    "sl-flex-nowrap",
+    "sl-flex-row",
+    "sl-flex-wrap",
+    "sl-focus",
+    "sl-font-bold",
+    "sl-font-medium",
+    "sl-font-normal",
+    "sl-font-semibold",
+    "sl-gap-0",
+    "sl-gap-1",
+    "sl-gap-2",
+    "sl-gap-3",
+    "sl-gap-4",
+    "sl-gap-5",
+    "sl-gap-6",
+    "sl-gap-7",
+    "sl-grid",
+    "sl-grid-2",
+    "sl-grid-3",
+    "sl-grid-4",
+    "sl-grid-auto",
+    "sl-grow-0",
+    "sl-h-full",
+    "sl-hidden",
+    "sl-hover-lift",
+    "sl-inline",
+    "sl-inline-block",
+    "sl-inline-flex",
+    "sl-inset-0",
+    "sl-items-baseline",
+    "sl-items-center",
+    "sl-items-end",
+    "sl-items-start",
+    "sl-items-stretch",
+    "sl-justify-around",
+    "sl-justify-between",
+    "sl-justify-center",
+    "sl-justify-end",
+    "sl-justify-start",
+    "sl-leading-normal",
+    "sl-leading-relaxed",
+    "sl-leading-tight",
+    "sl-lg-block",
+    "sl-lg-flex",
+    "sl-lg-flex-col",
+    "sl-lg-flex-row",
+    "sl-lg-grid",
+    "sl-lg-grid-2",
+    "sl-lg-grid-3",
+    "sl-lg-grid-4",
+    "sl-lg-hidden",
+    "sl-lg-inline-flex",
+    "sl-lg-text-center",
+    "sl-lg-text-left",
+    "sl-lg-text-right",
+    "sl-line-clamp-2",
+    "sl-line-clamp-3",
+    "sl-m-0",
+    "sl-m-1",
+    "sl-m-2",
+    "sl-m-3",
+    "sl-m-4",
+    "sl-m-5",
+    "sl-m-6",
+    "sl-m-7",
+    "sl-max-w-page",
+    "sl-max-w-prose",
+    "sl-max-w-reading",
+    "sl-mb-0",
+    "sl-mb-1",
+    "sl-mb-2",
+    "sl-mb-3",
+    "sl-mb-4",
+    "sl-mb-5",
+    "sl-mb-6",
+    "sl-mb-7",
+    "sl-md-block",
+    "sl-md-flex",
+    "sl-md-flex-col",
+    "sl-md-flex-row",
+    "sl-md-grid",
+    "sl-md-grid-2",
+    "sl-md-grid-3",
+    "sl-md-grid-4",
+    "sl-md-hidden",
+    "sl-md-inline-flex",
+    "sl-md-text-center",
+    "sl-md-text-left",
+    "sl-md-text-right",
+    "sl-media",
+    "sl-min-w-0",
+    "sl-mt-0",
+    "sl-mt-1",
+    "sl-mt-2",
+    "sl-mt-3",
+    "sl-mt-4",
+    "sl-mt-5",
+    "sl-mt-6",
+    "sl-mt-7",
+    "sl-mx-auto",
+    "sl-overflow-auto",
+    "sl-overflow-hidden",
+    "sl-p-0",
+    "sl-p-1",
+    "sl-p-2",
+    "sl-p-3",
+    "sl-p-4",
+    "sl-p-5",
+    "sl-p-6",
+    "sl-p-7",
+    "sl-pe-0",
+    "sl-pe-1",
+    "sl-pe-2",
+    "sl-pe-3",
+    "sl-pe-4",
+    "sl-pe-5",
+    "sl-pe-6",
+    "sl-pe-7",
+    "sl-pretty",
+    "sl-ps-0",
+    "sl-ps-1",
+    "sl-ps-2",
+    "sl-ps-3",
+    "sl-ps-4",
+    "sl-ps-5",
+    "sl-ps-6",
+    "sl-ps-7",
+    "sl-px-0",
+    "sl-px-1",
+    "sl-px-2",
+    "sl-px-3",
+    "sl-px-4",
+    "sl-px-5",
+    "sl-px-6",
+    "sl-px-7",
+    "sl-py-0",
+    "sl-py-1",
+    "sl-py-2",
+    "sl-py-3",
+    "sl-py-4",
+    "sl-py-5",
+    "sl-py-6",
+    "sl-py-7",
+    "sl-relative",
+    "sl-reset",
+    "sl-reveal",
+    "sl-rounded-full",
+    "sl-rounded-lg",
+    "sl-rounded-md",
+    "sl-rounded-sm",
+    "sl-rounded-xl",
+    "sl-shadow-lg",
+    "sl-shadow-md",
+    "sl-shadow-sm",
+    "sl-shrink-0",
+    "sl-sm-block",
+    "sl-sm-flex",
+    "sl-sm-flex-col",
+    "sl-sm-flex-row",
+    "sl-sm-grid",
+    "sl-sm-grid-2",
+    "sl-sm-grid-3",
+    "sl-sm-grid-4",
+    "sl-sm-hidden",
+    "sl-sm-inline-flex",
+    "sl-sm-text-center",
+    "sl-sm-text-left",
+    "sl-sm-text-right",
+    "sl-sr-only",
+    "sl-sticky",
+    "sl-text-2xl",
+    "sl-text-3xl",
+    "sl-text-4xl",
+    "sl-text-base",
+    "sl-text-center",
+    "sl-text-left",
+    "sl-text-lg",
+    "sl-text-right",
+    "sl-text-sm",
+    "sl-text-xl",
+    "sl-text-xs",
+    "sl-tracking-normal",
+    "sl-tracking-tight",
+    "sl-transition",
+    "sl-truncate",
+    "sl-w-full",
+    "sl-z-base",
+    "sl-z-overlay",
+    "sl-z-raised"
+  ]
+}

package/dist/baseline.css

@@ -0,0 +1,194 @@
+/* =============================================================================
+ * SmartLinks CSS baseline — sl-baseline v1  (FROZEN)
+ * -----------------------------------------------------------------------------
+ * A small, namespaced set of structural helpers the platform guarantees are
+ * present, so any sub-app (and any AI/markdown/dynamic content inside one) can
+ * rely on them. Mechanics only — NO colours, fonts, or components.
+ *
+ * Contract: docs/css-baseline.md. FROZEN: an existing `sl-*` rule's meaning
+ * never changes; new capability ships as v2 alongside, never an edit here.
+ *
+ * Delivery: shipped by the SDK. Container apps inherit it from the host; iframe
+ * apps import `@proveanything/smartlinks/baseline.css`.
+ *
+ * Cascade: everything lives in the low-priority `sl-baseline` layer, so any
+ * ordinary (unlayered) app CSS wins ties. Classes are `sl-`-prefixed so they
+ * never collide with an app's own Tailwind utilities.
+ *
+ * Responsive: `sl-{sm|md|lg}-*` variants are CONTAINER queries — they respond to
+ * the app's own box, not the browser viewport (correct for both container and
+ * iframe embeds). They only apply inside an `sl-container` (or any ancestor with
+ * `container-type: inline-size`). Breakpoints: sm 480 / md 768 / lg 1024.
+ * ============================================================================= */
+
+@layer sl-baseline;
+
+/* Keyframes live outside the layer (layers don't affect @keyframes). */
+@keyframes sl-reveal-kf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+@layer sl-baseline {
+  /* ---- Reset & a11y ------------------------------------------------------- */
+  .sl-reset, .sl-reset * { box-sizing: border-box; }
+  .sl-reset { margin: 0; }
+  .sl-media { max-width: 100%; height: auto; }
+  .sl-focus:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .sl-sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+  /* Responsive container context. Put on the app root (or the host mount) so the
+     sl-{sm|md|lg}-* variants can query the app's own width. */
+  .sl-container { container-type: inline-size; }
+
+  /* ---- Display ------------------------------------------------------------ */
+  .sl-block { display: block; }
+  .sl-inline-block { display: inline-block; }
+  .sl-inline { display: inline; }
+  .sl-flex { display: flex; }
+  .sl-inline-flex { display: inline-flex; }
+  .sl-grid { display: grid; }
+  .sl-hidden { display: none; }
+
+  /* ---- Flex --------------------------------------------------------------- */
+  .sl-flex-row { flex-direction: row; }
+  .sl-flex-col { flex-direction: column; }
+  .sl-flex-wrap { flex-wrap: wrap; }
+  .sl-flex-nowrap { flex-wrap: nowrap; }
+  .sl-items-start { align-items: flex-start; }
+  .sl-items-center { align-items: center; }
+  .sl-items-end { align-items: flex-end; }
+  .sl-items-stretch { align-items: stretch; }
+  .sl-items-baseline { align-items: baseline; }
+  .sl-justify-start { justify-content: flex-start; }
+  .sl-justify-center { justify-content: center; }
+  .sl-justify-end { justify-content: flex-end; }
+  .sl-justify-between { justify-content: space-between; }
+  .sl-justify-around { justify-content: space-around; }
+  .sl-flex-1 { flex: 1 1 0%; }
+  .sl-flex-auto { flex: 1 1 auto; }
+  .sl-grow-0 { flex-grow: 0; }
+  .sl-shrink-0 { flex-shrink: 0; }
+
+  /* ---- Grid --------------------------------------------------------------- */
+  .sl-grid-2 { grid-template-columns: 1fr; }
+  .sl-grid-3 { grid-template-columns: 1fr; }
+  .sl-grid-4 { grid-template-columns: 1fr; }
+  .sl-grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
+  .sl-col-span-full { grid-column: 1 / -1; }
+
+  /* ---- Spacing (scale 0..7 ≈ 0/.25/.5/.75/1/1.5/2/3rem; logical props) ----- */
+  .sl-gap-0 { gap: 0; } .sl-gap-1 { gap: .25rem; } .sl-gap-2 { gap: .5rem; } .sl-gap-3 { gap: .75rem; }
+  .sl-gap-4 { gap: 1rem; } .sl-gap-5 { gap: 1.5rem; } .sl-gap-6 { gap: 2rem; } .sl-gap-7 { gap: 3rem; }
+
+  .sl-p-0 { padding: 0; } .sl-p-1 { padding: .25rem; } .sl-p-2 { padding: .5rem; } .sl-p-3 { padding: .75rem; }
+  .sl-p-4 { padding: 1rem; } .sl-p-5 { padding: 1.5rem; } .sl-p-6 { padding: 2rem; } .sl-p-7 { padding: 3rem; }
+
+  .sl-px-0 { padding-inline: 0; } .sl-px-1 { padding-inline: .25rem; } .sl-px-2 { padding-inline: .5rem; } .sl-px-3 { padding-inline: .75rem; }
+  .sl-px-4 { padding-inline: 1rem; } .sl-px-5 { padding-inline: 1.5rem; } .sl-px-6 { padding-inline: 2rem; } .sl-px-7 { padding-inline: 3rem; }
+
+  .sl-py-0 { padding-block: 0; } .sl-py-1 { padding-block: .25rem; } .sl-py-2 { padding-block: .5rem; } .sl-py-3 { padding-block: .75rem; }
+  .sl-py-4 { padding-block: 1rem; } .sl-py-5 { padding-block: 1.5rem; } .sl-py-6 { padding-block: 2rem; } .sl-py-7 { padding-block: 3rem; }
+
+  .sl-ps-0 { padding-inline-start: 0; } .sl-ps-1 { padding-inline-start: .25rem; } .sl-ps-2 { padding-inline-start: .5rem; } .sl-ps-3 { padding-inline-start: .75rem; }
+  .sl-ps-4 { padding-inline-start: 1rem; } .sl-ps-5 { padding-inline-start: 1.5rem; } .sl-ps-6 { padding-inline-start: 2rem; } .sl-ps-7 { padding-inline-start: 3rem; }
+
+  .sl-pe-0 { padding-inline-end: 0; } .sl-pe-1 { padding-inline-end: .25rem; } .sl-pe-2 { padding-inline-end: .5rem; } .sl-pe-3 { padding-inline-end: .75rem; }
+  .sl-pe-4 { padding-inline-end: 1rem; } .sl-pe-5 { padding-inline-end: 1.5rem; } .sl-pe-6 { padding-inline-end: 2rem; } .sl-pe-7 { padding-inline-end: 3rem; }
+
+  .sl-m-0 { margin: 0; } .sl-m-1 { margin: .25rem; } .sl-m-2 { margin: .5rem; } .sl-m-3 { margin: .75rem; }
+  .sl-m-4 { margin: 1rem; } .sl-m-5 { margin: 1.5rem; } .sl-m-6 { margin: 2rem; } .sl-m-7 { margin: 3rem; }
+  .sl-mx-auto { margin-inline: auto; }
+  .sl-mt-0 { margin-block-start: 0; } .sl-mt-1 { margin-block-start: .25rem; } .sl-mt-2 { margin-block-start: .5rem; } .sl-mt-3 { margin-block-start: .75rem; }
+  .sl-mt-4 { margin-block-start: 1rem; } .sl-mt-5 { margin-block-start: 1.5rem; } .sl-mt-6 { margin-block-start: 2rem; } .sl-mt-7 { margin-block-start: 3rem; }
+  .sl-mb-0 { margin-block-end: 0; } .sl-mb-1 { margin-block-end: .25rem; } .sl-mb-2 { margin-block-end: .5rem; } .sl-mb-3 { margin-block-end: .75rem; }
+  .sl-mb-4 { margin-block-end: 1rem; } .sl-mb-5 { margin-block-end: 1.5rem; } .sl-mb-6 { margin-block-end: 2rem; } .sl-mb-7 { margin-block-end: 3rem; }
+
+  /* ---- Sizing ------------------------------------------------------------- */
+  .sl-w-full { width: 100%; }
+  .sl-h-full { height: 100%; }
+  .sl-min-w-0 { min-width: 0; }
+  .sl-max-w-reading { max-width: 42rem; }
+  .sl-max-w-prose { max-width: 65ch; }
+  .sl-max-w-page { max-width: 72rem; }
+  .sl-aspect-square { aspect-ratio: 1 / 1; }
+  .sl-aspect-wide { aspect-ratio: 16 / 9; }
+
+  /* ---- Typography (static rem scale; use responsive variants for headings) - */
+  .sl-text-xs { font-size: .75rem; } .sl-text-sm { font-size: .875rem; } .sl-text-base { font-size: 1rem; }
+  .sl-text-lg { font-size: 1.125rem; } .sl-text-xl { font-size: 1.25rem; } .sl-text-2xl { font-size: 1.5rem; }
+  .sl-text-3xl { font-size: 1.875rem; } .sl-text-4xl { font-size: 2.25rem; }
+  .sl-font-normal { font-weight: 400; } .sl-font-medium { font-weight: 500; }
+  .sl-font-semibold { font-weight: 600; } .sl-font-bold { font-weight: 700; }
+  .sl-leading-tight { line-height: 1.2; } .sl-leading-normal { line-height: 1.5; } .sl-leading-relaxed { line-height: 1.75; }
+  .sl-tracking-tight { letter-spacing: -0.01em; } .sl-tracking-normal { letter-spacing: 0; }
+  .sl-text-left { text-align: left; } .sl-text-center { text-align: center; } .sl-text-right { text-align: right; }
+  .sl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sl-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+  .sl-line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
+  .sl-balance { text-wrap: balance; }
+  .sl-pretty { text-wrap: pretty; }
+
+  /* ---- Radius / border / shadow (neutral mechanics; colour stays per-app) -- */
+  .sl-rounded-sm { border-radius: .25rem; } .sl-rounded-md { border-radius: .5rem; }
+  .sl-rounded-lg { border-radius: .75rem; } .sl-rounded-xl { border-radius: 1rem; }
+  .sl-rounded-full { border-radius: 9999px; }
+  .sl-border { border: 1px solid var(--sl-border, color-mix(in srgb, currentColor 14%, transparent)); }
+  .sl-border-0 { border: 0; }
+  .sl-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
+  .sl-shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
+  .sl-shadow-lg { box-shadow: 0 12px 32px rgba(0,0,0,.16); }
+
+  /* ---- Object-fit / overflow --------------------------------------------- */
+  .sl-cover { object-fit: cover; }
+  .sl-contain { object-fit: contain; }
+  .sl-overflow-hidden { overflow: hidden; }
+  .sl-overflow-auto { overflow: auto; }
+
+  /* ---- Position & layering (named z levels — a house convention) ---------- */
+  .sl-relative { position: relative; }
+  .sl-absolute { position: absolute; }
+  .sl-sticky { position: sticky; }
+  .sl-inset-0 { inset: 0; }
+  .sl-z-base { z-index: 1; }
+  .sl-z-raised { z-index: 10; }
+  .sl-z-overlay { z-index: 100; }
+
+  /* ---- Motion (reduced-motion safe) -------------------------------------- */
+  .sl-transition { transition: all .2s ease; }
+  .sl-reveal { animation: sl-reveal-kf .5s ease both; }
+  .sl-hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
+  .sl-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.16); }
+  @media (prefers-reduced-motion: reduce) {
+    .sl-transition, .sl-reveal, .sl-hover-lift { transition: none; animation: none; }
+    .sl-hover-lift:hover { transform: none; }
+  }
+
+  /* ---- Responsive (container queries; require an sl-container ancestor) --- */
+  @container (min-width: 480px) {
+    .sl-sm-block { display: block; } .sl-sm-flex { display: flex; } .sl-sm-inline-flex { display: inline-flex; }
+    .sl-sm-grid { display: grid; } .sl-sm-hidden { display: none; }
+    .sl-sm-flex-row { flex-direction: row; } .sl-sm-flex-col { flex-direction: column; }
+    .sl-sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
+    .sl-sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
+    .sl-sm-grid-4 { grid-template-columns: repeat(4, 1fr); }
+    .sl-sm-text-left { text-align: left; } .sl-sm-text-center { text-align: center; } .sl-sm-text-right { text-align: right; }
+  }
+  @container (min-width: 768px) {
+    .sl-md-block { display: block; } .sl-md-flex { display: flex; } .sl-md-inline-flex { display: inline-flex; }
+    .sl-md-grid { display: grid; } .sl-md-hidden { display: none; }
+    .sl-md-flex-row { flex-direction: row; } .sl-md-flex-col { flex-direction: column; }
+    .sl-md-grid-2 { grid-template-columns: repeat(2, 1fr); }
+    .sl-md-grid-3 { grid-template-columns: repeat(3, 1fr); }
+    .sl-md-grid-4 { grid-template-columns: repeat(4, 1fr); }
+    .sl-md-text-left { text-align: left; } .sl-md-text-center { text-align: center; } .sl-md-text-right { text-align: right; }
+  }
+  @container (min-width: 1024px) {
+    .sl-lg-block { display: block; } .sl-lg-flex { display: flex; } .sl-lg-inline-flex { display: inline-flex; }
+    .sl-lg-grid { display: grid; } .sl-lg-hidden { display: none; }
+    .sl-lg-flex-row { flex-direction: row; } .sl-lg-flex-col { flex-direction: column; }
+    .sl-lg-grid-2 { grid-template-columns: repeat(2, 1fr); }
+    .sl-lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
+    .sl-lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
+    .sl-lg-text-left { text-align: left; } .sl-lg-text-center { text-align: center; } .sl-lg-text-right { text-align: right; }
+  }
+}

package/dist/docs/API_SUMMARY.md

@@ -1,6 +1,6 @@
 # Smartlinks API Summary
 
-Version: 2.0.12  |  Generated: 2026-09-21T22:28:25.241Z
+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;

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

@@ -121,6 +121,12 @@ 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) ·

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/types/appManifest.d.ts

@@ -422,6 +422,13 @@ export interface AppManifest {
          * 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.12  |  Generated: 2026-09-21T22:28:25.241Z
+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;

package/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/docs/host-dependency-contract.md

@@ -121,6 +121,12 @@ 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) ·

package/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/openapi.yaml

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proveanything/smartlinks",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "Official JavaScript/TypeScript SDK for the Smartlinks API",
   "type": "module",
   "main": "dist/index.js",
@@ -21,6 +21,8 @@
       "import": "./dist/*.js",
       "default": "./dist/*.js"
     },
+    "./baseline.css": "./dist/baseline.css",
+    "./baseline.classes.json": "./dist/baseline.classes.json",
     "./package.json": "./package.json"
   },
   "bin": {
@@ -39,7 +41,7 @@
   ],
   "scripts": {
     "test": "node test/run.cjs",
-    "build": "tsc && node scripts/fix-esm-extensions.mjs && node generate-api-summary.cjs && node generate-openapi.cjs && node scripts/copy-docs-to-dist.cjs",
+    "build": "tsc && node scripts/fix-esm-extensions.mjs && node generate-api-summary.cjs && node generate-openapi.cjs && node scripts/copy-docs-to-dist.cjs && node scripts/build-baseline.mjs",
     "docs": "typedoc",
     "docs:summary": "node generate-api-summary.cjs",
     "docs:openapi": "node generate-openapi.cjs",