@proveanything/smartlinks 2.0.12 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,209 @@
1
+ {
2
+ "version": "v1",
3
+ "classes": [
4
+ "sl-absolute",
5
+ "sl-aspect-square",
6
+ "sl-aspect-wide",
7
+ "sl-balance",
8
+ "sl-block",
9
+ "sl-border",
10
+ "sl-border-0",
11
+ "sl-col-span-full",
12
+ "sl-contain",
13
+ "sl-container",
14
+ "sl-cover",
15
+ "sl-flex",
16
+ "sl-flex-1",
17
+ "sl-flex-auto",
18
+ "sl-flex-col",
19
+ "sl-flex-nowrap",
20
+ "sl-flex-row",
21
+ "sl-flex-wrap",
22
+ "sl-focus",
23
+ "sl-font-bold",
24
+ "sl-font-medium",
25
+ "sl-font-normal",
26
+ "sl-font-semibold",
27
+ "sl-gap-0",
28
+ "sl-gap-1",
29
+ "sl-gap-2",
30
+ "sl-gap-3",
31
+ "sl-gap-4",
32
+ "sl-gap-5",
33
+ "sl-gap-6",
34
+ "sl-gap-7",
35
+ "sl-grid",
36
+ "sl-grid-2",
37
+ "sl-grid-3",
38
+ "sl-grid-4",
39
+ "sl-grid-auto",
40
+ "sl-grow-0",
41
+ "sl-h-full",
42
+ "sl-hidden",
43
+ "sl-hover-lift",
44
+ "sl-inline",
45
+ "sl-inline-block",
46
+ "sl-inline-flex",
47
+ "sl-inset-0",
48
+ "sl-items-baseline",
49
+ "sl-items-center",
50
+ "sl-items-end",
51
+ "sl-items-start",
52
+ "sl-items-stretch",
53
+ "sl-justify-around",
54
+ "sl-justify-between",
55
+ "sl-justify-center",
56
+ "sl-justify-end",
57
+ "sl-justify-start",
58
+ "sl-leading-normal",
59
+ "sl-leading-relaxed",
60
+ "sl-leading-tight",
61
+ "sl-lg-block",
62
+ "sl-lg-flex",
63
+ "sl-lg-flex-col",
64
+ "sl-lg-flex-row",
65
+ "sl-lg-grid",
66
+ "sl-lg-grid-2",
67
+ "sl-lg-grid-3",
68
+ "sl-lg-grid-4",
69
+ "sl-lg-hidden",
70
+ "sl-lg-inline-flex",
71
+ "sl-lg-text-center",
72
+ "sl-lg-text-left",
73
+ "sl-lg-text-right",
74
+ "sl-line-clamp-2",
75
+ "sl-line-clamp-3",
76
+ "sl-m-0",
77
+ "sl-m-1",
78
+ "sl-m-2",
79
+ "sl-m-3",
80
+ "sl-m-4",
81
+ "sl-m-5",
82
+ "sl-m-6",
83
+ "sl-m-7",
84
+ "sl-max-w-page",
85
+ "sl-max-w-prose",
86
+ "sl-max-w-reading",
87
+ "sl-mb-0",
88
+ "sl-mb-1",
89
+ "sl-mb-2",
90
+ "sl-mb-3",
91
+ "sl-mb-4",
92
+ "sl-mb-5",
93
+ "sl-mb-6",
94
+ "sl-mb-7",
95
+ "sl-md-block",
96
+ "sl-md-flex",
97
+ "sl-md-flex-col",
98
+ "sl-md-flex-row",
99
+ "sl-md-grid",
100
+ "sl-md-grid-2",
101
+ "sl-md-grid-3",
102
+ "sl-md-grid-4",
103
+ "sl-md-hidden",
104
+ "sl-md-inline-flex",
105
+ "sl-md-text-center",
106
+ "sl-md-text-left",
107
+ "sl-md-text-right",
108
+ "sl-media",
109
+ "sl-min-w-0",
110
+ "sl-mt-0",
111
+ "sl-mt-1",
112
+ "sl-mt-2",
113
+ "sl-mt-3",
114
+ "sl-mt-4",
115
+ "sl-mt-5",
116
+ "sl-mt-6",
117
+ "sl-mt-7",
118
+ "sl-mx-auto",
119
+ "sl-overflow-auto",
120
+ "sl-overflow-hidden",
121
+ "sl-p-0",
122
+ "sl-p-1",
123
+ "sl-p-2",
124
+ "sl-p-3",
125
+ "sl-p-4",
126
+ "sl-p-5",
127
+ "sl-p-6",
128
+ "sl-p-7",
129
+ "sl-pe-0",
130
+ "sl-pe-1",
131
+ "sl-pe-2",
132
+ "sl-pe-3",
133
+ "sl-pe-4",
134
+ "sl-pe-5",
135
+ "sl-pe-6",
136
+ "sl-pe-7",
137
+ "sl-pretty",
138
+ "sl-ps-0",
139
+ "sl-ps-1",
140
+ "sl-ps-2",
141
+ "sl-ps-3",
142
+ "sl-ps-4",
143
+ "sl-ps-5",
144
+ "sl-ps-6",
145
+ "sl-ps-7",
146
+ "sl-px-0",
147
+ "sl-px-1",
148
+ "sl-px-2",
149
+ "sl-px-3",
150
+ "sl-px-4",
151
+ "sl-px-5",
152
+ "sl-px-6",
153
+ "sl-px-7",
154
+ "sl-py-0",
155
+ "sl-py-1",
156
+ "sl-py-2",
157
+ "sl-py-3",
158
+ "sl-py-4",
159
+ "sl-py-5",
160
+ "sl-py-6",
161
+ "sl-py-7",
162
+ "sl-relative",
163
+ "sl-reset",
164
+ "sl-reveal",
165
+ "sl-rounded-full",
166
+ "sl-rounded-lg",
167
+ "sl-rounded-md",
168
+ "sl-rounded-sm",
169
+ "sl-rounded-xl",
170
+ "sl-shadow-lg",
171
+ "sl-shadow-md",
172
+ "sl-shadow-sm",
173
+ "sl-shrink-0",
174
+ "sl-sm-block",
175
+ "sl-sm-flex",
176
+ "sl-sm-flex-col",
177
+ "sl-sm-flex-row",
178
+ "sl-sm-grid",
179
+ "sl-sm-grid-2",
180
+ "sl-sm-grid-3",
181
+ "sl-sm-grid-4",
182
+ "sl-sm-hidden",
183
+ "sl-sm-inline-flex",
184
+ "sl-sm-text-center",
185
+ "sl-sm-text-left",
186
+ "sl-sm-text-right",
187
+ "sl-sr-only",
188
+ "sl-sticky",
189
+ "sl-text-2xl",
190
+ "sl-text-3xl",
191
+ "sl-text-4xl",
192
+ "sl-text-base",
193
+ "sl-text-center",
194
+ "sl-text-left",
195
+ "sl-text-lg",
196
+ "sl-text-right",
197
+ "sl-text-sm",
198
+ "sl-text-xl",
199
+ "sl-text-xs",
200
+ "sl-tracking-normal",
201
+ "sl-tracking-tight",
202
+ "sl-transition",
203
+ "sl-truncate",
204
+ "sl-w-full",
205
+ "sl-z-base",
206
+ "sl-z-overlay",
207
+ "sl-z-raised"
208
+ ]
209
+ }
@@ -0,0 +1,194 @@
1
+ /* =============================================================================
2
+ * SmartLinks CSS baseline — sl-baseline v1 (FROZEN)
3
+ * -----------------------------------------------------------------------------
4
+ * A small, namespaced set of structural helpers the platform guarantees are
5
+ * present, so any sub-app (and any AI/markdown/dynamic content inside one) can
6
+ * rely on them. Mechanics only — NO colours, fonts, or components.
7
+ *
8
+ * Contract: docs/css-baseline.md. FROZEN: an existing `sl-*` rule's meaning
9
+ * never changes; new capability ships as v2 alongside, never an edit here.
10
+ *
11
+ * Delivery: shipped by the SDK. Container apps inherit it from the host; iframe
12
+ * apps import `@proveanything/smartlinks/baseline.css`.
13
+ *
14
+ * Cascade: everything lives in the low-priority `sl-baseline` layer, so any
15
+ * ordinary (unlayered) app CSS wins ties. Classes are `sl-`-prefixed so they
16
+ * never collide with an app's own Tailwind utilities.
17
+ *
18
+ * Responsive: `sl-{sm|md|lg}-*` variants are CONTAINER queries — they respond to
19
+ * the app's own box, not the browser viewport (correct for both container and
20
+ * iframe embeds). They only apply inside an `sl-container` (or any ancestor with
21
+ * `container-type: inline-size`). Breakpoints: sm 480 / md 768 / lg 1024.
22
+ * ============================================================================= */
23
+
24
+ @layer sl-baseline;
25
+
26
+ /* Keyframes live outside the layer (layers don't affect @keyframes). */
27
+ @keyframes sl-reveal-kf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
28
+
29
+ @layer sl-baseline {
30
+ /* ---- Reset & a11y ------------------------------------------------------- */
31
+ .sl-reset, .sl-reset * { box-sizing: border-box; }
32
+ .sl-reset { margin: 0; }
33
+ .sl-media { max-width: 100%; height: auto; }
34
+ .sl-focus:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
35
+ .sl-sr-only {
36
+ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
37
+ overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
38
+ }
39
+ /* Responsive container context. Put on the app root (or the host mount) so the
40
+ sl-{sm|md|lg}-* variants can query the app's own width. */
41
+ .sl-container { container-type: inline-size; }
42
+
43
+ /* ---- Display ------------------------------------------------------------ */
44
+ .sl-block { display: block; }
45
+ .sl-inline-block { display: inline-block; }
46
+ .sl-inline { display: inline; }
47
+ .sl-flex { display: flex; }
48
+ .sl-inline-flex { display: inline-flex; }
49
+ .sl-grid { display: grid; }
50
+ .sl-hidden { display: none; }
51
+
52
+ /* ---- Flex --------------------------------------------------------------- */
53
+ .sl-flex-row { flex-direction: row; }
54
+ .sl-flex-col { flex-direction: column; }
55
+ .sl-flex-wrap { flex-wrap: wrap; }
56
+ .sl-flex-nowrap { flex-wrap: nowrap; }
57
+ .sl-items-start { align-items: flex-start; }
58
+ .sl-items-center { align-items: center; }
59
+ .sl-items-end { align-items: flex-end; }
60
+ .sl-items-stretch { align-items: stretch; }
61
+ .sl-items-baseline { align-items: baseline; }
62
+ .sl-justify-start { justify-content: flex-start; }
63
+ .sl-justify-center { justify-content: center; }
64
+ .sl-justify-end { justify-content: flex-end; }
65
+ .sl-justify-between { justify-content: space-between; }
66
+ .sl-justify-around { justify-content: space-around; }
67
+ .sl-flex-1 { flex: 1 1 0%; }
68
+ .sl-flex-auto { flex: 1 1 auto; }
69
+ .sl-grow-0 { flex-grow: 0; }
70
+ .sl-shrink-0 { flex-shrink: 0; }
71
+
72
+ /* ---- Grid --------------------------------------------------------------- */
73
+ .sl-grid-2 { grid-template-columns: 1fr; }
74
+ .sl-grid-3 { grid-template-columns: 1fr; }
75
+ .sl-grid-4 { grid-template-columns: 1fr; }
76
+ .sl-grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
77
+ .sl-col-span-full { grid-column: 1 / -1; }
78
+
79
+ /* ---- Spacing (scale 0..7 ≈ 0/.25/.5/.75/1/1.5/2/3rem; logical props) ----- */
80
+ .sl-gap-0 { gap: 0; } .sl-gap-1 { gap: .25rem; } .sl-gap-2 { gap: .5rem; } .sl-gap-3 { gap: .75rem; }
81
+ .sl-gap-4 { gap: 1rem; } .sl-gap-5 { gap: 1.5rem; } .sl-gap-6 { gap: 2rem; } .sl-gap-7 { gap: 3rem; }
82
+
83
+ .sl-p-0 { padding: 0; } .sl-p-1 { padding: .25rem; } .sl-p-2 { padding: .5rem; } .sl-p-3 { padding: .75rem; }
84
+ .sl-p-4 { padding: 1rem; } .sl-p-5 { padding: 1.5rem; } .sl-p-6 { padding: 2rem; } .sl-p-7 { padding: 3rem; }
85
+
86
+ .sl-px-0 { padding-inline: 0; } .sl-px-1 { padding-inline: .25rem; } .sl-px-2 { padding-inline: .5rem; } .sl-px-3 { padding-inline: .75rem; }
87
+ .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; }
88
+
89
+ .sl-py-0 { padding-block: 0; } .sl-py-1 { padding-block: .25rem; } .sl-py-2 { padding-block: .5rem; } .sl-py-3 { padding-block: .75rem; }
90
+ .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; }
91
+
92
+ .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; }
93
+ .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; }
94
+
95
+ .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; }
96
+ .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; }
97
+
98
+ .sl-m-0 { margin: 0; } .sl-m-1 { margin: .25rem; } .sl-m-2 { margin: .5rem; } .sl-m-3 { margin: .75rem; }
99
+ .sl-m-4 { margin: 1rem; } .sl-m-5 { margin: 1.5rem; } .sl-m-6 { margin: 2rem; } .sl-m-7 { margin: 3rem; }
100
+ .sl-mx-auto { margin-inline: auto; }
101
+ .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; }
102
+ .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; }
103
+ .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; }
104
+ .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; }
105
+
106
+ /* ---- Sizing ------------------------------------------------------------- */
107
+ .sl-w-full { width: 100%; }
108
+ .sl-h-full { height: 100%; }
109
+ .sl-min-w-0 { min-width: 0; }
110
+ .sl-max-w-reading { max-width: 42rem; }
111
+ .sl-max-w-prose { max-width: 65ch; }
112
+ .sl-max-w-page { max-width: 72rem; }
113
+ .sl-aspect-square { aspect-ratio: 1 / 1; }
114
+ .sl-aspect-wide { aspect-ratio: 16 / 9; }
115
+
116
+ /* ---- Typography (static rem scale; use responsive variants for headings) - */
117
+ .sl-text-xs { font-size: .75rem; } .sl-text-sm { font-size: .875rem; } .sl-text-base { font-size: 1rem; }
118
+ .sl-text-lg { font-size: 1.125rem; } .sl-text-xl { font-size: 1.25rem; } .sl-text-2xl { font-size: 1.5rem; }
119
+ .sl-text-3xl { font-size: 1.875rem; } .sl-text-4xl { font-size: 2.25rem; }
120
+ .sl-font-normal { font-weight: 400; } .sl-font-medium { font-weight: 500; }
121
+ .sl-font-semibold { font-weight: 600; } .sl-font-bold { font-weight: 700; }
122
+ .sl-leading-tight { line-height: 1.2; } .sl-leading-normal { line-height: 1.5; } .sl-leading-relaxed { line-height: 1.75; }
123
+ .sl-tracking-tight { letter-spacing: -0.01em; } .sl-tracking-normal { letter-spacing: 0; }
124
+ .sl-text-left { text-align: left; } .sl-text-center { text-align: center; } .sl-text-right { text-align: right; }
125
+ .sl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
126
+ .sl-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
127
+ .sl-line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
128
+ .sl-balance { text-wrap: balance; }
129
+ .sl-pretty { text-wrap: pretty; }
130
+
131
+ /* ---- Radius / border / shadow (neutral mechanics; colour stays per-app) -- */
132
+ .sl-rounded-sm { border-radius: .25rem; } .sl-rounded-md { border-radius: .5rem; }
133
+ .sl-rounded-lg { border-radius: .75rem; } .sl-rounded-xl { border-radius: 1rem; }
134
+ .sl-rounded-full { border-radius: 9999px; }
135
+ .sl-border { border: 1px solid var(--sl-border, color-mix(in srgb, currentColor 14%, transparent)); }
136
+ .sl-border-0 { border: 0; }
137
+ .sl-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
138
+ .sl-shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
139
+ .sl-shadow-lg { box-shadow: 0 12px 32px rgba(0,0,0,.16); }
140
+
141
+ /* ---- Object-fit / overflow --------------------------------------------- */
142
+ .sl-cover { object-fit: cover; }
143
+ .sl-contain { object-fit: contain; }
144
+ .sl-overflow-hidden { overflow: hidden; }
145
+ .sl-overflow-auto { overflow: auto; }
146
+
147
+ /* ---- Position & layering (named z levels — a house convention) ---------- */
148
+ .sl-relative { position: relative; }
149
+ .sl-absolute { position: absolute; }
150
+ .sl-sticky { position: sticky; }
151
+ .sl-inset-0 { inset: 0; }
152
+ .sl-z-base { z-index: 1; }
153
+ .sl-z-raised { z-index: 10; }
154
+ .sl-z-overlay { z-index: 100; }
155
+
156
+ /* ---- Motion (reduced-motion safe) -------------------------------------- */
157
+ .sl-transition { transition: all .2s ease; }
158
+ .sl-reveal { animation: sl-reveal-kf .5s ease both; }
159
+ .sl-hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
160
+ .sl-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.16); }
161
+ @media (prefers-reduced-motion: reduce) {
162
+ .sl-transition, .sl-reveal, .sl-hover-lift { transition: none; animation: none; }
163
+ .sl-hover-lift:hover { transform: none; }
164
+ }
165
+
166
+ /* ---- Responsive (container queries; require an sl-container ancestor) --- */
167
+ @container (min-width: 480px) {
168
+ .sl-sm-block { display: block; } .sl-sm-flex { display: flex; } .sl-sm-inline-flex { display: inline-flex; }
169
+ .sl-sm-grid { display: grid; } .sl-sm-hidden { display: none; }
170
+ .sl-sm-flex-row { flex-direction: row; } .sl-sm-flex-col { flex-direction: column; }
171
+ .sl-sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
172
+ .sl-sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
173
+ .sl-sm-grid-4 { grid-template-columns: repeat(4, 1fr); }
174
+ .sl-sm-text-left { text-align: left; } .sl-sm-text-center { text-align: center; } .sl-sm-text-right { text-align: right; }
175
+ }
176
+ @container (min-width: 768px) {
177
+ .sl-md-block { display: block; } .sl-md-flex { display: flex; } .sl-md-inline-flex { display: inline-flex; }
178
+ .sl-md-grid { display: grid; } .sl-md-hidden { display: none; }
179
+ .sl-md-flex-row { flex-direction: row; } .sl-md-flex-col { flex-direction: column; }
180
+ .sl-md-grid-2 { grid-template-columns: repeat(2, 1fr); }
181
+ .sl-md-grid-3 { grid-template-columns: repeat(3, 1fr); }
182
+ .sl-md-grid-4 { grid-template-columns: repeat(4, 1fr); }
183
+ .sl-md-text-left { text-align: left; } .sl-md-text-center { text-align: center; } .sl-md-text-right { text-align: right; }
184
+ }
185
+ @container (min-width: 1024px) {
186
+ .sl-lg-block { display: block; } .sl-lg-flex { display: flex; } .sl-lg-inline-flex { display: inline-flex; }
187
+ .sl-lg-grid { display: grid; } .sl-lg-hidden { display: none; }
188
+ .sl-lg-flex-row { flex-direction: row; } .sl-lg-flex-col { flex-direction: column; }
189
+ .sl-lg-grid-2 { grid-template-columns: repeat(2, 1fr); }
190
+ .sl-lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
191
+ .sl-lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
192
+ .sl-lg-text-left { text-align: left; } .sl-lg-text-center { text-align: center; } .sl-lg-text-right { text-align: right; }
193
+ }
194
+ }
@@ -1,6 +1,6 @@
1
1
  # Smartlinks API Summary
2
2
 
3
- Version: 2.0.12 | Generated: 2026-09-21T22:28:25.241Z
3
+ Version: 2.0.14 | Generated: 2026-09-22T11:19:25.044Z
4
4
 
5
5
  This is a concise summary of all available API functions and types.
6
6
 
@@ -2182,6 +2182,7 @@ interface AppManifest {
2182
2182
  appId: string;
2183
2183
  moduleFormat?: 'umd' | 'esm' | 'dual';
2184
2184
  sharedDependencies?: string;
2185
+ cssBaseline?: string;
2185
2186
  globals?: Record<string, string>;
2186
2187
  seo?: {
2187
2188
  strategy?: 'executor' | string;
@@ -0,0 +1,133 @@
1
+ # SmartLinks CSS baseline (`sl-baseline`)
2
+
3
+ > **Status: SHIPPED — `v1`, frozen.** The SDK ships `@proveanything/smartlinks/baseline.css`
4
+ > (+ `baseline.classes.json`); the Portal/Hub serve it and apps opt in via
5
+ > `meta.cssBaseline: "v1"`. `v1` is frozen: an existing `sl-*` rule's meaning never changes;
6
+ > new capability ships as `v2` alongside. Supersedes the earlier "shared Tailwind base" idea —
7
+ > that approach (sharing raw generated Tailwind) was too large and could never safely change;
8
+ > this is the version that survives being frozen for years.
9
+
10
+ A small, **frozen, namespaced** set of structural CSS helpers the platform guarantees are
11
+ present, so any sub-app — and any AI/markdown/dynamic content renderer inside one — can rely
12
+ on them. It is **mechanics, not aesthetics**: layout, spacing, sizing, type scale,
13
+ responsive flow, radius/border/shadow, and a little motion. It never defines colours, fonts,
14
+ or components — those are brand data and per-app.
15
+
16
+ It is the CSS sibling of the JS shared-dependency contract, and like that contract **the SDK
17
+ is the source of truth**: the SDK authors and ships the baseline; hosts and apps consume it.
18
+
19
+ ## Why this shape (and not the alternatives)
20
+
21
+ - **Small + frozen** → maintainable for years. A 60–120-rule hand-authored contract can be
22
+ honoured indefinitely; a giant generated Tailwind sheet can't.
23
+ - **Namespaced (`sl-`)** → zero collision with an app's own Tailwind (`flex`, `p-4`) or the
24
+ host. Apps use `sl-*` for the guaranteed floor *and* their own utilities side by side. This
25
+ is what removes the cascade/coexistence fragility.
26
+ - **A stable contract, decoupled from Tailwind underneath** → the SDK may build it with
27
+ Tailwind 4/5/6 internally, but apps target `sl-*`, so Tailwind upgrades are free.
28
+ - **Teachable** → ~100 stable primitives can be put in an AI prompt; the full Tailwind
29
+ surface cannot. Dynamic/AI content gets a guaranteed floor instead of hand-rolling CSS.
30
+ - **A floor, not a ceiling** → opt-in, additive; apps are free to ignore it or write their
31
+ own CSS. It just guarantees a consistent structural baseline when they want it.
32
+
33
+ ## Responsive: container-query-backed, breakpoint-named
34
+
35
+ Apps render **both** as containers (in the host document) and as iframes. Plain viewport
36
+ `@media` is inconsistent across those — in an iframe it sees the iframe size (usually right),
37
+ in a container it sees the *host* viewport (wrong for a sub-region). So the responsive
38
+ primitives are **container-query based** (`@container`), exposed with familiar breakpoint
39
+ names so authors/AI still think "phone / tablet / desktop":
40
+
41
+ - The app's mount root is a **container context** (`sl-container`, i.e. `container-type:
42
+ inline-size`) — set by the host on container mounts and by the app root in iframe mode.
43
+ - `sl-md-grid-2` then means "when **my** box is ≥ tablet width", correct in both embed modes.
44
+ - Breakpoints (container widths): `sm` ≥ 480px, `md` ≥ 768px, `lg` ≥ 1024px.
45
+
46
+ This is the "works well on mobile / tablet / desktop" house opinion, done correctly for an
47
+ embed-first platform.
48
+
49
+ ## The v1 surface (frozen)
50
+
51
+ All names `sl-`-prefixed. Responsive variants exist only for the layout-flow primitives
52
+ marked ✦ (as `sl-{sm|md|lg}-<name>`), to keep the set teachable and small.
53
+
54
+ **Reset & a11y**
55
+ `sl-reset` (border-box + margin:0 on self/descendants) · `sl-media` (max-width:100%,
56
+ height:auto) · `sl-focus` (keyboard-only focus ring) · `sl-sr-only` · `sl-container`
57
+ (responsive container context)
58
+
59
+ **Display ✦** `sl-block` · `sl-inline-block` · `sl-inline` · `sl-flex` · `sl-inline-flex` ·
60
+ `sl-grid` · `sl-hidden`
61
+
62
+ **Flex ✦(direction)** `sl-flex-row` · `sl-flex-col` · `sl-flex-wrap` · `sl-flex-nowrap` ·
63
+ `sl-items-{start,center,end,stretch,baseline}` · `sl-justify-{start,center,end,between,around}`
64
+ · `sl-flex-1` · `sl-flex-auto` · `sl-grow-0` · `sl-shrink-0`
65
+
66
+ **Grid ✦(columns)** `sl-grid-{2,3,4}` (collapse to 1 col below `sm`) · `sl-grid-auto`
67
+ (auto-fit minmax) · `sl-col-span-full`
68
+
69
+ **Spacing** — curated 8-step scale `0,1,2,3,4,5,6,7` ≈ `0, .25, .5, .75, 1, 1.5, 2, 3 rem`.
70
+ Logical properties (RTL-safe): `sl-gap-{0..7}` · `sl-p-{0..7}` · `sl-px-{0..7}` ·
71
+ `sl-py-{0..7}` · `sl-ps-{0..7}` / `sl-pe-{0..7}` (inline start/end) · `sl-m-{0..7}` ·
72
+ `sl-mx-auto` · `sl-mt-{0..7}` · `sl-mb-{0..7}`
73
+
74
+ **Sizing** `sl-w-full` · `sl-h-full` · `sl-min-w-0` · `sl-max-w-{reading(42rem),prose(65ch),
75
+ page(72rem)}` · `sl-aspect-{square,wide(16/9)}`
76
+
77
+ **Typography** — static rem scale (predictable in any embed; use the responsive `✦` align
78
+ and per-breakpoint sizing where you want type to change). `sl-text-{xs,sm,base,lg,xl,2xl,3xl,
79
+ 4xl}` · `sl-font-{normal,medium,semibold,bold}` · `sl-leading-{tight,normal,relaxed}` ·
80
+ `sl-tracking-{tight,normal}` · `sl-text-{left,center,right}` ✦(align) · `sl-truncate` ·
81
+ `sl-line-clamp-{2,3}` · `sl-balance` (text-wrap:balance) · `sl-pretty`
82
+
83
+ **Radius / border / shadow** — neutral mechanics only (no brand colour). `sl-rounded-{sm,md,
84
+ lg,xl,full}` · `sl-border` / `sl-border-0` (colour = `--sl-border`, a subtle
85
+ `color-mix(currentColor 14%, transparent)` default, overridable) · `sl-shadow-{sm,md,lg}`
86
+ (neutral)
87
+
88
+ **Object-fit / overflow** `sl-cover` · `sl-contain` · `sl-overflow-hidden` · `sl-overflow-auto`
89
+
90
+ **Position & layering** `sl-relative` · `sl-absolute` · `sl-sticky` · `sl-inset-0` ·
91
+ `sl-z-{base,raised,overlay}` (named levels — a house layering convention so apps don't fight
92
+ over z-index)
93
+
94
+ **Motion** (small, reduced-motion-safe; keyframes are `sl-`-namespaced) `sl-transition`
95
+ (standard ease/duration) · `sl-reveal` (fade-up on view) · `sl-hover-lift` · all motion is
96
+ **disabled under `prefers-reduced-motion`**. Rich motion vocabularies stay per-app (and may
97
+ become a separate versioned motion contract later if several apps want to share one).
98
+
99
+ ### Explicitly NOT in the baseline (non-goals)
100
+ - **No colours** — brand data, delivered via CSS variables / theme params.
101
+ - **No fonts** — per-app; the baseline sets a *scale*, never a family.
102
+ - **No components** — no buttons/cards/nav; those are per-app aesthetics.
103
+ - **No full utility surface** — anything bespoke ships in the app's own scoped CSS.
104
+
105
+ ## Delivery — one SDK source, two paths
106
+
107
+ The SDK ships the compiled baseline as `@proveanything/smartlinks/baseline.css` (+ the
108
+ machine-readable class list for the doctor). One authored source; two delivery mechanisms:
109
+
110
+ | Embed mode | How the app gets it |
111
+ |---|---|
112
+ | **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"`. |
113
+ | **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. |
114
+
115
+ Cascade: baseline loads first; app CSS after → app rules win ties. `sl-*` never collides with
116
+ app utilities regardless.
117
+
118
+ ## SDK / build support (kept minimal — no CSS surgery)
119
+ - The SDK **exports `baseline.css`** (and `baseline.classes.json`), built in the SDK's own
120
+ build so the file and the class list can't drift.
121
+ - Manifest field **`meta.cssBaseline: "v1"`** — declares reliance so the host can guarantee
122
+ it's present.
123
+ - `smartlinks-doctor`: warn if an app declares `cssBaseline` but uses an `sl-*` class outside
124
+ the declared version (the useful invariant — spirit of the JS import check). No subtraction
125
+ tooling needed: `sl-*` is a fixed vocabulary apps just use.
126
+
127
+ ## Versioning & freeze
128
+ - `v1` is **frozen**: an existing `sl-*` class's meaning/output never changes in place.
129
+ - New capability ships as `v2` **alongside** `v1` (both served), never a silent mutation.
130
+ - Tailwind (or whatever builds it) may be upgraded underneath as long as the `sl-*` contract
131
+ keeps its meaning.
132
+ - Governance: additions to the surface go through review (it's a decades-long contract);
133
+ err toward *stable and generous* over minimal, since the AI builders target it.
@@ -121,6 +121,12 @@ Bundles ship their own compiled CSS, so the host's Tailwind version is irrelevan
121
121
  micro-app can stay on **Tailwind 3 indefinitely**, or adopt Tailwind 4 — its choice. (The starter
122
122
  app ships the Tailwind 4 CSS-first layout as the default; see its README.)
123
123
 
124
+ > **CSS baseline (`sl-baseline` v1):** the CSS sibling of this JS contract, but deliberately
125
+ > **not** a shared Tailwind dump. It's a small, frozen, `sl-`-namespaced set of structural
126
+ > helpers (layout, spacing, responsive flow, type scale, motion — no colours, fonts, or
127
+ > components) the SDK ships (`@proveanything/smartlinks/baseline.css`) and the host serves.
128
+ > Opt-in via `meta.cssBaseline: "v1"`. See [css-baseline.md](css-baseline.md).
129
+
124
130
  ## The R5 host stack (reference)
125
131
 
126
132
  React **19.3** · Vite **8.3** · react-router-dom **7.18** · Tailwind **4.3** (CSS-first) ·
@@ -63,6 +63,7 @@ The SmartLinks SDK (`@proveanything/smartlinks`) includes comprehensive document
63
63
  | **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 |
64
64
  | **Deploying & Registering** | `docs/deploying-apps.md` | Getting your app into the platform: fast dev publish, channels, deploy keys, registering releases |
65
65
  | **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 |
66
+ | **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` |
66
67
  | **Deep Linking** | `docs/deep-link-discovery.md` | URL state management, navigable states, portal menus, AI nav |
67
68
  | **Portal Back Button** | `docs/portal-back-button.md` | Hierarchy-aware "up" navigation inside embedded apps |
68
69
  | **Portal Request Action** | `docs/portal-request-action.md` | Triggering portal built-in actions (__qrScanner, __share, __logout, etc.) from sub-apps |
package/dist/openapi.yaml CHANGED
@@ -17957,6 +17957,8 @@ components:
17957
17957
  - dual
17958
17958
  sharedDependencies:
17959
17959
  type: string
17960
+ cssBaseline:
17961
+ type: string
17960
17962
  globals:
17961
17963
  type: object
17962
17964
  additionalProperties:
@@ -422,6 +422,13 @@ export interface AppManifest {
422
422
  * compatible import map for the ESM load path.
423
423
  */
424
424
  sharedDependencies?: string;
425
+ /**
426
+ * The SmartLinks CSS baseline this bundle relies on, e.g. `"v1"`. A small, frozen,
427
+ * `sl-`-namespaced set of structural helpers the SDK ships and the host guarantees
428
+ * present. Container apps declare it and ship nothing; iframe apps import
429
+ * `@proveanything/smartlinks/baseline.css`. Opt-in and additive. See docs/css-baseline.md.
430
+ */
431
+ cssBaseline?: string;
425
432
  /**
426
433
  * Per-app namespaced UMD globals (R4.7+), e.g. `{ widgets: "MyAppWidgets" }`.
427
434
  * UMD-only: ESM bundles expose their exports through the module namespace and
@@ -1,6 +1,6 @@
1
1
  # Smartlinks API Summary
2
2
 
3
- Version: 2.0.12 | Generated: 2026-09-21T22:28:25.241Z
3
+ Version: 2.0.14 | Generated: 2026-09-22T11:19:25.044Z
4
4
 
5
5
  This is a concise summary of all available API functions and types.
6
6
 
@@ -2182,6 +2182,7 @@ interface AppManifest {
2182
2182
  appId: string;
2183
2183
  moduleFormat?: 'umd' | 'esm' | 'dual';
2184
2184
  sharedDependencies?: string;
2185
+ cssBaseline?: string;
2185
2186
  globals?: Record<string, string>;
2186
2187
  seo?: {
2187
2188
  strategy?: 'executor' | string;
@@ -0,0 +1,133 @@
1
+ # SmartLinks CSS baseline (`sl-baseline`)
2
+
3
+ > **Status: SHIPPED — `v1`, frozen.** The SDK ships `@proveanything/smartlinks/baseline.css`
4
+ > (+ `baseline.classes.json`); the Portal/Hub serve it and apps opt in via
5
+ > `meta.cssBaseline: "v1"`. `v1` is frozen: an existing `sl-*` rule's meaning never changes;
6
+ > new capability ships as `v2` alongside. Supersedes the earlier "shared Tailwind base" idea —
7
+ > that approach (sharing raw generated Tailwind) was too large and could never safely change;
8
+ > this is the version that survives being frozen for years.
9
+
10
+ A small, **frozen, namespaced** set of structural CSS helpers the platform guarantees are
11
+ present, so any sub-app — and any AI/markdown/dynamic content renderer inside one — can rely
12
+ on them. It is **mechanics, not aesthetics**: layout, spacing, sizing, type scale,
13
+ responsive flow, radius/border/shadow, and a little motion. It never defines colours, fonts,
14
+ or components — those are brand data and per-app.
15
+
16
+ It is the CSS sibling of the JS shared-dependency contract, and like that contract **the SDK
17
+ is the source of truth**: the SDK authors and ships the baseline; hosts and apps consume it.
18
+
19
+ ## Why this shape (and not the alternatives)
20
+
21
+ - **Small + frozen** → maintainable for years. A 60–120-rule hand-authored contract can be
22
+ honoured indefinitely; a giant generated Tailwind sheet can't.
23
+ - **Namespaced (`sl-`)** → zero collision with an app's own Tailwind (`flex`, `p-4`) or the
24
+ host. Apps use `sl-*` for the guaranteed floor *and* their own utilities side by side. This
25
+ is what removes the cascade/coexistence fragility.
26
+ - **A stable contract, decoupled from Tailwind underneath** → the SDK may build it with
27
+ Tailwind 4/5/6 internally, but apps target `sl-*`, so Tailwind upgrades are free.
28
+ - **Teachable** → ~100 stable primitives can be put in an AI prompt; the full Tailwind
29
+ surface cannot. Dynamic/AI content gets a guaranteed floor instead of hand-rolling CSS.
30
+ - **A floor, not a ceiling** → opt-in, additive; apps are free to ignore it or write their
31
+ own CSS. It just guarantees a consistent structural baseline when they want it.
32
+
33
+ ## Responsive: container-query-backed, breakpoint-named
34
+
35
+ Apps render **both** as containers (in the host document) and as iframes. Plain viewport
36
+ `@media` is inconsistent across those — in an iframe it sees the iframe size (usually right),
37
+ in a container it sees the *host* viewport (wrong for a sub-region). So the responsive
38
+ primitives are **container-query based** (`@container`), exposed with familiar breakpoint
39
+ names so authors/AI still think "phone / tablet / desktop":
40
+
41
+ - The app's mount root is a **container context** (`sl-container`, i.e. `container-type:
42
+ inline-size`) — set by the host on container mounts and by the app root in iframe mode.
43
+ - `sl-md-grid-2` then means "when **my** box is ≥ tablet width", correct in both embed modes.
44
+ - Breakpoints (container widths): `sm` ≥ 480px, `md` ≥ 768px, `lg` ≥ 1024px.
45
+
46
+ This is the "works well on mobile / tablet / desktop" house opinion, done correctly for an
47
+ embed-first platform.
48
+
49
+ ## The v1 surface (frozen)
50
+
51
+ All names `sl-`-prefixed. Responsive variants exist only for the layout-flow primitives
52
+ marked ✦ (as `sl-{sm|md|lg}-<name>`), to keep the set teachable and small.
53
+
54
+ **Reset & a11y**
55
+ `sl-reset` (border-box + margin:0 on self/descendants) · `sl-media` (max-width:100%,
56
+ height:auto) · `sl-focus` (keyboard-only focus ring) · `sl-sr-only` · `sl-container`
57
+ (responsive container context)
58
+
59
+ **Display ✦** `sl-block` · `sl-inline-block` · `sl-inline` · `sl-flex` · `sl-inline-flex` ·
60
+ `sl-grid` · `sl-hidden`
61
+
62
+ **Flex ✦(direction)** `sl-flex-row` · `sl-flex-col` · `sl-flex-wrap` · `sl-flex-nowrap` ·
63
+ `sl-items-{start,center,end,stretch,baseline}` · `sl-justify-{start,center,end,between,around}`
64
+ · `sl-flex-1` · `sl-flex-auto` · `sl-grow-0` · `sl-shrink-0`
65
+
66
+ **Grid ✦(columns)** `sl-grid-{2,3,4}` (collapse to 1 col below `sm`) · `sl-grid-auto`
67
+ (auto-fit minmax) · `sl-col-span-full`
68
+
69
+ **Spacing** — curated 8-step scale `0,1,2,3,4,5,6,7` ≈ `0, .25, .5, .75, 1, 1.5, 2, 3 rem`.
70
+ Logical properties (RTL-safe): `sl-gap-{0..7}` · `sl-p-{0..7}` · `sl-px-{0..7}` ·
71
+ `sl-py-{0..7}` · `sl-ps-{0..7}` / `sl-pe-{0..7}` (inline start/end) · `sl-m-{0..7}` ·
72
+ `sl-mx-auto` · `sl-mt-{0..7}` · `sl-mb-{0..7}`
73
+
74
+ **Sizing** `sl-w-full` · `sl-h-full` · `sl-min-w-0` · `sl-max-w-{reading(42rem),prose(65ch),
75
+ page(72rem)}` · `sl-aspect-{square,wide(16/9)}`
76
+
77
+ **Typography** — static rem scale (predictable in any embed; use the responsive `✦` align
78
+ and per-breakpoint sizing where you want type to change). `sl-text-{xs,sm,base,lg,xl,2xl,3xl,
79
+ 4xl}` · `sl-font-{normal,medium,semibold,bold}` · `sl-leading-{tight,normal,relaxed}` ·
80
+ `sl-tracking-{tight,normal}` · `sl-text-{left,center,right}` ✦(align) · `sl-truncate` ·
81
+ `sl-line-clamp-{2,3}` · `sl-balance` (text-wrap:balance) · `sl-pretty`
82
+
83
+ **Radius / border / shadow** — neutral mechanics only (no brand colour). `sl-rounded-{sm,md,
84
+ lg,xl,full}` · `sl-border` / `sl-border-0` (colour = `--sl-border`, a subtle
85
+ `color-mix(currentColor 14%, transparent)` default, overridable) · `sl-shadow-{sm,md,lg}`
86
+ (neutral)
87
+
88
+ **Object-fit / overflow** `sl-cover` · `sl-contain` · `sl-overflow-hidden` · `sl-overflow-auto`
89
+
90
+ **Position & layering** `sl-relative` · `sl-absolute` · `sl-sticky` · `sl-inset-0` ·
91
+ `sl-z-{base,raised,overlay}` (named levels — a house layering convention so apps don't fight
92
+ over z-index)
93
+
94
+ **Motion** (small, reduced-motion-safe; keyframes are `sl-`-namespaced) `sl-transition`
95
+ (standard ease/duration) · `sl-reveal` (fade-up on view) · `sl-hover-lift` · all motion is
96
+ **disabled under `prefers-reduced-motion`**. Rich motion vocabularies stay per-app (and may
97
+ become a separate versioned motion contract later if several apps want to share one).
98
+
99
+ ### Explicitly NOT in the baseline (non-goals)
100
+ - **No colours** — brand data, delivered via CSS variables / theme params.
101
+ - **No fonts** — per-app; the baseline sets a *scale*, never a family.
102
+ - **No components** — no buttons/cards/nav; those are per-app aesthetics.
103
+ - **No full utility surface** — anything bespoke ships in the app's own scoped CSS.
104
+
105
+ ## Delivery — one SDK source, two paths
106
+
107
+ The SDK ships the compiled baseline as `@proveanything/smartlinks/baseline.css` (+ the
108
+ machine-readable class list for the doctor). One authored source; two delivery mechanisms:
109
+
110
+ | Embed mode | How the app gets it |
111
+ |---|---|
112
+ | **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"`. |
113
+ | **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. |
114
+
115
+ Cascade: baseline loads first; app CSS after → app rules win ties. `sl-*` never collides with
116
+ app utilities regardless.
117
+
118
+ ## SDK / build support (kept minimal — no CSS surgery)
119
+ - The SDK **exports `baseline.css`** (and `baseline.classes.json`), built in the SDK's own
120
+ build so the file and the class list can't drift.
121
+ - Manifest field **`meta.cssBaseline: "v1"`** — declares reliance so the host can guarantee
122
+ it's present.
123
+ - `smartlinks-doctor`: warn if an app declares `cssBaseline` but uses an `sl-*` class outside
124
+ the declared version (the useful invariant — spirit of the JS import check). No subtraction
125
+ tooling needed: `sl-*` is a fixed vocabulary apps just use.
126
+
127
+ ## Versioning & freeze
128
+ - `v1` is **frozen**: an existing `sl-*` class's meaning/output never changes in place.
129
+ - New capability ships as `v2` **alongside** `v1` (both served), never a silent mutation.
130
+ - Tailwind (or whatever builds it) may be upgraded underneath as long as the `sl-*` contract
131
+ keeps its meaning.
132
+ - Governance: additions to the surface go through review (it's a decades-long contract);
133
+ err toward *stable and generous* over minimal, since the AI builders target it.
@@ -121,6 +121,12 @@ Bundles ship their own compiled CSS, so the host's Tailwind version is irrelevan
121
121
  micro-app can stay on **Tailwind 3 indefinitely**, or adopt Tailwind 4 — its choice. (The starter
122
122
  app ships the Tailwind 4 CSS-first layout as the default; see its README.)
123
123
 
124
+ > **CSS baseline (`sl-baseline` v1):** the CSS sibling of this JS contract, but deliberately
125
+ > **not** a shared Tailwind dump. It's a small, frozen, `sl-`-namespaced set of structural
126
+ > helpers (layout, spacing, responsive flow, type scale, motion — no colours, fonts, or
127
+ > components) the SDK ships (`@proveanything/smartlinks/baseline.css`) and the host serves.
128
+ > Opt-in via `meta.cssBaseline: "v1"`. See [css-baseline.md](css-baseline.md).
129
+
124
130
  ## The R5 host stack (reference)
125
131
 
126
132
  React **19.3** · Vite **8.3** · react-router-dom **7.18** · Tailwind **4.3** (CSS-first) ·
package/docs/overview.md CHANGED
@@ -63,6 +63,7 @@ The SmartLinks SDK (`@proveanything/smartlinks`) includes comprehensive document
63
63
  | **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 |
64
64
  | **Deploying & Registering** | `docs/deploying-apps.md` | Getting your app into the platform: fast dev publish, channels, deploy keys, registering releases |
65
65
  | **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 |
66
+ | **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` |
66
67
  | **Deep Linking** | `docs/deep-link-discovery.md` | URL state management, navigable states, portal menus, AI nav |
67
68
  | **Portal Back Button** | `docs/portal-back-button.md` | Hierarchy-aware "up" navigation inside embedded apps |
68
69
  | **Portal Request Action** | `docs/portal-request-action.md` | Triggering portal built-in actions (__qrScanner, __share, __logout, etc.) from sub-apps |
package/openapi.yaml CHANGED
@@ -17957,6 +17957,8 @@ components:
17957
17957
  - dual
17958
17958
  sharedDependencies:
17959
17959
  type: string
17960
+ cssBaseline:
17961
+ type: string
17960
17962
  globals:
17961
17963
  type: object
17962
17964
  additionalProperties:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proveanything/smartlinks",
3
- "version": "2.0.12",
3
+ "version": "2.0.14",
4
4
  "description": "Official JavaScript/TypeScript SDK for the Smartlinks API",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -21,6 +21,8 @@
21
21
  "import": "./dist/*.js",
22
22
  "default": "./dist/*.js"
23
23
  },
24
+ "./baseline.css": "./dist/baseline.css",
25
+ "./baseline.classes.json": "./dist/baseline.classes.json",
24
26
  "./package.json": "./package.json"
25
27
  },
26
28
  "bin": {
@@ -34,12 +36,13 @@
34
36
  "scripts/register-release.mjs",
35
37
  "scripts/publish.mjs",
36
38
  "scripts/doctor.mjs",
39
+ "scripts/lib/",
37
40
  "openapi.yaml",
38
41
  "README.md"
39
42
  ],
40
43
  "scripts": {
41
44
  "test": "node test/run.cjs",
42
- "build": "tsc && node scripts/fix-esm-extensions.mjs && node generate-api-summary.cjs && node generate-openapi.cjs && node scripts/copy-docs-to-dist.cjs",
45
+ "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",
43
46
  "docs": "typedoc",
44
47
  "docs:summary": "node generate-api-summary.cjs",
45
48
  "docs:openapi": "node generate-openapi.cjs",
@@ -143,6 +143,47 @@ if (!checkEsm && problems.length === 0) {
143
143
  console.log(`${DIM}moduleFormat "${format}" — ESM path not in use; UMD bundles resolve shared deps from window globals.${RESET}`);
144
144
  }
145
145
 
146
+ // ---- CSS baseline (sl-baseline) --------------------------------------------
147
+ // If the app declares meta.cssBaseline, warn on any `sl-*` class it uses that isn't in
148
+ // the declared baseline version — those render nothing once the host's baseline is the
149
+ // only source. Heuristic (scans built bundle text for the distinctive `sl-` namespace)
150
+ // and WARN-only: it never fails the build.
151
+ if (meta.cssBaseline) {
152
+ let baseline = null;
153
+ try {
154
+ baseline = JSON.parse(readFileSync(resolve(here, '../dist/baseline.classes.json'), 'utf8'));
155
+ } catch {
156
+ warnings.push(`meta.cssBaseline is "${meta.cssBaseline}" but this SDK build has no baseline class list to check against.`);
157
+ }
158
+ if (baseline) {
159
+ if (baseline.version !== meta.cssBaseline) {
160
+ warnings.push(`meta.cssBaseline is "${meta.cssBaseline}" but this SDK ships baseline "${baseline.version}" — the host may serve a different set.`);
161
+ }
162
+ const baseSet = new Set(baseline.classes || []);
163
+ // Class usage lives in compiled markup strings — present in every bundle regardless
164
+ // of module format, so scan both umd + esm across all surfaces.
165
+ const used = new Set();
166
+ for (const [, block] of surfaces) {
167
+ for (const p of [block?.files?.js?.umd, block?.files?.js?.esm]) {
168
+ if (!p) continue;
169
+ const bp = resolveBundle(p);
170
+ if (!bp) continue;
171
+ for (const m of readFileSync(bp, 'utf8').matchAll(/\bsl-[a-z0-9-]+/g)) used.add(m[0]);
172
+ }
173
+ }
174
+ const unknown = [...used].filter((c) => !baseSet.has(c)).sort();
175
+ if (used.size === 0) {
176
+ console.log(`${DIM}cssBaseline (${baseline.version}) — declared; no sl-* classes found in the bundles.${RESET}`);
177
+ } else if (unknown.length === 0) {
178
+ console.log(`${GREEN}✓${RESET} cssBaseline ${DIM}(${baseline.version})${RESET} — all ${used.size} sl-* classes used are in the baseline`);
179
+ } else {
180
+ console.log(`${YELLOW}⚠${RESET} cssBaseline ${DIM}(${baseline.version})${RESET} — ${unknown.length} sl-* class${unknown.length === 1 ? '' : 'es'} used but not in the baseline (they will not render):`);
181
+ for (const c of unknown) console.log(` ${YELLOW}${c}${RESET}`);
182
+ warnings.push(`sl-* classes used but not in cssBaseline "${baseline.version}": ${unknown.join(', ')} — define them in your own CSS, fix the typo, or drop them.`);
183
+ }
184
+ }
185
+ }
186
+
146
187
  console.log('');
147
188
  for (const w of warnings) console.log(`${YELLOW}⚠ ${w}${RESET}`);
148
189
 
@@ -0,0 +1,57 @@
1
+ // Extract the *real* bare import specifiers from a (usually minified) ESM bundle.
2
+ //
3
+ // We LEX the module with es-module-lexer rather than text-scanning, so specifiers only
4
+ // come from genuine `import`/`export … from`/`import()` statements. Data that merely
5
+ // contains the word `from` — e.g. tailwind-merge's class map `{"gradient-from":[{from:…}]}`
6
+ // — can no longer masquerade as an import (the historical false-positive class).
7
+ //
8
+ // Relative, absolute-path, and http(s) specifiers are dropped (never contract entries);
9
+ // `node:` specifiers are kept so the caller can flag them (they must never appear in a
10
+ // browser bundle).
11
+
12
+ import { init, parse } from 'es-module-lexer';
13
+
14
+ await init;
15
+
16
+ // Legacy conservative regex — only used if the lexer throws (unexpected for valid ESM).
17
+ // Kept so the doctor degrades to "runs, approximately" rather than crashing.
18
+ function regexFallback(code) {
19
+ const specs = new Set();
20
+ const patterns = [
21
+ /\bfrom\s*["']([^"']+)["']/g,
22
+ /\bimport\s*["']([^"']+)["']/g,
23
+ /\bimport\(\s*["']([^"']+)["']\s*\)/g,
24
+ ];
25
+ for (const re of patterns) {
26
+ let m;
27
+ while ((m = re.exec(code))) specs.add(m[1]);
28
+ }
29
+ return [...specs].filter(keep);
30
+ }
31
+
32
+ function keep(spec) {
33
+ if (!spec) return false;
34
+ if (spec.startsWith('.') || spec.startsWith('/')) return false; // internal/relative
35
+ if (/^https?:/.test(spec)) return false; // absolute URL import
36
+ return true;
37
+ }
38
+
39
+ /**
40
+ * @param {string} code ESM bundle source
41
+ * @returns {string[]} deduped bare import specifiers (may include `node:` ones)
42
+ */
43
+ export function bareImportsOf(code) {
44
+ let imports;
45
+ try {
46
+ [imports] = parse(code);
47
+ } catch {
48
+ return regexFallback(code);
49
+ }
50
+ const specs = new Set();
51
+ for (const imp of imports) {
52
+ // `imp.n` is the resolved specifier for static imports, re-exports, and
53
+ // string-literal dynamic imports; undefined for `import(expr)` we can't resolve.
54
+ if (imp.n && keep(imp.n)) specs.add(imp.n);
55
+ }
56
+ return [...specs];
57
+ }