@soloworks/smking-next 0.16.0 → 0.16.1

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @soloworks/smking-next
2
2
 
3
+ ## 0.16.1 — 2026-05-25
4
+
5
+ **New `<SmkingRuntime />` component — one-time mount in customer root layout to load saas-served CSS + Web Component runtime JS.**
6
+
7
+ ### Added
8
+
9
+ - `<SmkingRuntime>` exports from package root. Customers mount it once in `app/layout.tsx` (or equivalent); it emits `<link rel="stylesheet">` + `<script async>` pointing at `/api/v1/public/runtime.{css,js}` on the saas.
10
+ - Optional `baseUrl` prop overrides `process.env.SMKING_BASE_URL`. Default falls back to `https://smking.app`.
11
+
12
+ ### Why
13
+
14
+ bodyHtml emitted by SaaS publish (v0.16+) carries Tailwind utility classes from the dashboard's cva variants. Customer Tailwind JIT can't see those runtime strings at build time, so utility classes render as dead strings without `<SmkingRuntime>` providing the compiled CSS. `<SmkingRuntime>` solves the propagation gap and additionally bundles Web Component IIFEs (`<smking-carousel>` etc.) so future dashboard custom elements reach customer sites without an SDK bump cycle.
15
+
16
+ ### Migration
17
+
18
+ Add one line to your root layout:
19
+
20
+ ```tsx
21
+ import { SmkingRuntime } from "@soloworks/smking-next";
22
+
23
+ export default function RootLayout({ children }) {
24
+ return (
25
+ <html>
26
+ <body>
27
+ <SmkingRuntime />
28
+ {children}
29
+ </body>
30
+ </html>
31
+ );
32
+ }
33
+ ```
34
+
35
+ Patch bump — no breaking changes. Existing v0.16.0 installs keep working; mounting `<SmkingRuntime>` is opt-in but recommended.
36
+
3
37
  ## 0.16.0 — 2026-05-24
4
38
 
5
39
  **Raw passthrough render — `<SmkingCms>` now echoes the full Plate-serialized bodyHtml exactly, no `<article class="smk-cms">` wrapper and no inline CSS injection.**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soloworks/smking-next",
3
- "version": "0.16.0",
3
+ "version": "0.16.1",
4
4
  "description": "AI-native SEO (AEO) for Next.js — auto-inject JSON-LD, FAQ, AI summary, and SEO metadata so AI crawlers (ChatGPT, Perplexity, Google AI) can cite your pages.",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/sillyleo/smking/tree/main/packages/smking-next",
@@ -74,10 +74,12 @@
74
74
  "@tiptap/starter-kit": "^3.23.4",
75
75
  "@tiptap/static-renderer": "^3.23.4",
76
76
  "@types/react": "^19.0.0",
77
+ "@types/react-dom": "^19",
77
78
  "@vitejs/plugin-react": "^6.0.1",
78
79
  "jsdom": "^29.1.0",
79
80
  "next": "^16.2.2",
80
81
  "react": "^19.0.0",
82
+ "react-dom": "19.2.4",
81
83
  "typescript": "^5",
82
84
  "vitest": "^4.1.5"
83
85
  },
@@ -0,0 +1,30 @@
1
+ /**
2
+ * One-time-mount runtime asset loader. Customers place a single
3
+ * `<SmkingRuntime />` in their root layout. Emits a `<link>` to the
4
+ * saas-side compiled CSS and a `<script async>` to the bundled Web
5
+ * Component IIFE. Both are aggressively browser-cached
6
+ * (stale-while-revalidate in production), so the cost amortises to
7
+ * effectively zero across all the page's `<SmkingCms>` instances.
8
+ *
9
+ * Why customer must mount it explicitly:
10
+ * `<SmkingCms>` stays in raw-passthrough mode (v0.16 commit 4bde390)
11
+ * — it doesn't decide for the customer whether to load runtime assets
12
+ * or where. Separating concerns means a customer can use the SDK to
13
+ * fetch a page's bodyHtml + render it inside their own design system,
14
+ * without our CSS bleeding in.
15
+ */
16
+ export function SmkingRuntime({
17
+ baseUrl,
18
+ }: {
19
+ baseUrl?: string;
20
+ }) {
21
+ const url = (
22
+ baseUrl ?? process.env.SMKING_BASE_URL ?? "https://smking.app"
23
+ ).replace(/\/$/, "");
24
+ return (
25
+ <>
26
+ <link rel="stylesheet" href={`${url}/api/v1/public/runtime.css`} />
27
+ <script src={`${url}/api/v1/public/runtime.js`} async />
28
+ </>
29
+ );
30
+ }
package/src/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { SmkingAEO } from "./components/smking-aeo";
2
2
  export { SmkingCms } from "./components/smking-cms";
3
+ export { SmkingRuntime } from "./components/smking-runtime";
3
4
  export { getAeoContent } from "./lib/client";
4
5
  export { getCmsPage } from "./lib/cms-client";
5
6
  export type {
@@ -1,704 +0,0 @@
1
- /**
2
- * AUTO-GENERATED - do not edit by hand.
3
- * Source: packages/shared/src/styles/cms-styles.css
4
- * Sync: pnpm sync:cms-styles
5
- * Hash: f555c5fed446
6
- *
7
- * Inlined by <SmkingCms> (smking-cms.tsx) inside a
8
- * <style data-smking="cms-styles"> ... </style>
9
- * tag exactly once per page render. Mode A only; Mode B
10
- * ("tailwind-prose") skips this entirely.
11
- */
12
- export const SMKING_CMS_STYLES = `/*
13
- * smking CMS — canonical block styles (Mode A "css")
14
- *
15
- * Single source of truth for all customer-facing CMS render styling.
16
- * Consumed at build time by \`scripts/sync-cms-styles.mjs\` which emits:
17
- * - packages/smking-next/src/lib/smking-cms-styles.ts (TS const)
18
- * - packages/smking-laravel/resources/views/cms-styles.blade.php (Blade)
19
- *
20
- * The dashboard imports the same file directly via Next.js workspace
21
- * alias so what the editor preview shows = what the customer site renders
22
- * (WYSIWYG strict per boss original spec).
23
- *
24
- * Mode B (\`tailwind-prose\`) customers do NOT load this file — their
25
- * Tailwind + @tailwindcss/typography plugin replaces all styles below.
26
- *
27
- * Namespacing rules (cross-platform parity):
28
- * - All selectors are scoped to \`.smk-cms\` or \`.smk-block--*\` — no
29
- * global element rules (\`h1 {}\` \`p {}\`) so SDK styles never leak
30
- * into customer's other page sections.
31
- * - Wrapped in \`@layer smking-cms\` so customer CSS authoring with
32
- * Tailwind \`@layer base|components|utilities\` has predictable order.
33
- * - Tokens on \`.smk-cms\` (CSS variables) — customer overrides via
34
- * \`:root { --smk-accent: …; }\` or per-instance.
35
- *
36
- * Edit invariants:
37
- * 1. Never write a global element selector.
38
- * 2. Always declare variants via \`[data-*]\` attribute selectors — the
39
- * SDK markup emits the attributes; CSS reads them. No hard-coded
40
- * ratios / layouts / colors.
41
- * 3. Test against Mode A's class hooks: smk-cms / smk-block--{type} /
42
- * smk-hero / smk-nav / smk-nav-search / smk-carousel.
43
- */
44
-
45
- @layer smking-cms {
46
- /* ============================================================
47
- Design tokens — customer overrides on :root or .smk-cms
48
- ============================================================ */
49
- .smk-cms {
50
- --smk-fg: #0a0a0a;
51
- --smk-fg-muted: #525252;
52
- --smk-fg-subtle: #a3a3a3;
53
- --smk-bg: #fff;
54
- --smk-bg-soft: #fafafa;
55
- --smk-border: #e5e5e5;
56
- --smk-border-strong: #d4d4d4;
57
- --smk-accent: #0a0a0a;
58
- --smk-accent-fg: #fff;
59
- --smk-radius-sm: 6px;
60
- --smk-radius-md: 10px;
61
- --smk-radius-lg: 16px;
62
- --smk-section-gap: 4rem;
63
- --smk-font-serif: ui-serif, Georgia, "Iowan Old Style", "Apple Garamond",
64
- "Times New Roman", serif;
65
- --smk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
66
- "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
67
- }
68
- @media (prefers-color-scheme: dark) {
69
- .smk-cms {
70
- --smk-fg: #f5f5f5;
71
- --smk-fg-muted: #a3a3a3;
72
- --smk-fg-subtle: #525252;
73
- --smk-bg: #0a0a0a;
74
- --smk-bg-soft: #171717;
75
- --smk-border: #262626;
76
- --smk-border-strong: #404040;
77
- --smk-accent: #f5f5f5;
78
- --smk-accent-fg: #0a0a0a;
79
- }
80
- }
81
-
82
- /* ============================================================
83
- Article wrapper
84
- ============================================================ */
85
- .smk-cms {
86
- color: var(--smk-fg);
87
- font-family: var(--smk-font-sans);
88
- line-height: 1.7;
89
- font-size: 17px;
90
- max-width: 42rem;
91
- margin: 0 auto;
92
- padding: 3rem 1.5rem;
93
- }
94
- .smk-cms__title {
95
- font-family: var(--smk-font-serif);
96
- font-size: clamp(2rem, 5vw, 3rem);
97
- font-weight: 700;
98
- line-height: 1.1;
99
- letter-spacing: -0.02em;
100
- margin: 0 0 3rem;
101
- }
102
- .smk-cms > .smk-block + .smk-block {
103
- margin-top: 2.5rem;
104
- }
105
- /* Hero edges out to wrapper bounds; other blocks stay readable column. */
106
- .smk-cms > .smk-block--hero {
107
- margin-left: -1.5rem;
108
- margin-right: -1.5rem;
109
- }
110
-
111
- /* ============================================================
112
- Article — Plate-rendered HTML
113
- SDK emits: \`<div class="smk-block smk-block--article">{html}</div>\`
114
- The inner HTML comes from Plate's serializeHtml on the SaaS side,
115
- so customer SDK ships zero editor deps. Below selectors style the
116
- emitted h1/h2/p/ul/blockquote etc inside the article wrapper.
117
- ============================================================ */
118
- .smk-block--article p {
119
- margin: 0 0 1.25em;
120
- }
121
- .smk-block--article p:last-child {
122
- margin-bottom: 0;
123
- }
124
- .smk-block--article h1,
125
- .smk-block--article h2,
126
- .smk-block--article h3 {
127
- font-family: var(--smk-font-serif);
128
- font-weight: 700;
129
- letter-spacing: -0.015em;
130
- line-height: 1.2;
131
- }
132
- .smk-block--article h1 {
133
- font-size: 2rem;
134
- margin: 2em 0 0.5em;
135
- }
136
- .smk-block--article h2 {
137
- font-size: 1.6rem;
138
- margin: 1.8em 0 0.5em;
139
- }
140
- .smk-block--article h3 {
141
- font-size: 1.25rem;
142
- margin: 1.5em 0 0.5em;
143
- }
144
- .smk-block--article h1:first-child,
145
- .smk-block--article h2:first-child,
146
- .smk-block--article h3:first-child {
147
- margin-top: 0;
148
- }
149
- .smk-block--article ul,
150
- .smk-block--article ol {
151
- margin: 0 0 1.25em;
152
- padding-left: 1.75em;
153
- }
154
- .smk-block--article li {
155
- margin: 0.4em 0;
156
- }
157
- .smk-block--article li::marker {
158
- color: var(--smk-fg-subtle);
159
- }
160
- .smk-block--article a {
161
- color: inherit;
162
- text-decoration: underline;
163
- text-decoration-color: var(--smk-border-strong);
164
- text-underline-offset: 3px;
165
- transition: text-decoration-color 0.15s;
166
- }
167
- .smk-block--article a:hover {
168
- text-decoration-color: currentColor;
169
- }
170
- .smk-block--article blockquote {
171
- margin: 1.5em 0;
172
- padding: 0.25em 0 0.25em 1.25rem;
173
- border-left: 3px solid var(--smk-border-strong);
174
- color: var(--smk-fg-muted);
175
- font-style: italic;
176
- }
177
- .smk-block--article code {
178
- background: var(--smk-bg-soft);
179
- padding: 0.15em 0.4em;
180
- border-radius: 4px;
181
- font-size: 0.9em;
182
- font-family: ui-monospace, "SF Mono", Menlo, monospace;
183
- }
184
- .smk-block--article pre {
185
- background: var(--smk-bg-soft);
186
- padding: 1rem;
187
- border-radius: var(--smk-radius-sm);
188
- overflow-x: auto;
189
- margin: 1.5em 0;
190
- }
191
- .smk-block--article pre code {
192
- background: transparent;
193
- padding: 0;
194
- }
195
- .smk-block--article img {
196
- max-width: 100%;
197
- height: auto;
198
- border-radius: var(--smk-radius-sm);
199
- margin: 1.5em 0;
200
- }
201
-
202
- /* ============================================================
203
- Hero — magazine cover banner
204
- SDK emits: \`<section class="smk-block smk-block--hero smk-hero">\`
205
- ============================================================ */
206
- .smk-hero {
207
- text-align: center;
208
- padding: 5rem 1.5rem 4rem;
209
- background: var(--smk-bg-soft);
210
- border-radius: 0;
211
- margin-bottom: 3rem;
212
- position: relative;
213
- }
214
- .smk-hero__image {
215
- max-width: 100%;
216
- height: auto;
217
- margin: 0 auto 2rem;
218
- border-radius: var(--smk-radius-md);
219
- display: block;
220
- }
221
- .smk-hero__title {
222
- font-family: var(--smk-font-serif);
223
- font-size: clamp(2.25rem, 6vw, 4rem);
224
- font-weight: 800;
225
- line-height: 1.05;
226
- letter-spacing: -0.025em;
227
- margin: 0 0 1rem;
228
- color: var(--smk-fg);
229
- max-width: 32rem;
230
- margin-inline: auto;
231
- }
232
- .smk-hero__subtitle {
233
- color: var(--smk-fg-muted);
234
- font-size: 0.95rem;
235
- margin: 1.5rem auto 0;
236
- max-width: 28rem;
237
- letter-spacing: 0.02em;
238
- }
239
- .smk-hero__cta {
240
- display: inline-block;
241
- padding: 0.75rem 1.5rem;
242
- margin-top: 2rem;
243
- background: var(--smk-accent);
244
- color: var(--smk-accent-fg);
245
- border-radius: var(--smk-radius-sm);
246
- text-decoration: none;
247
- font-weight: 500;
248
- font-size: 0.95rem;
249
- transition: opacity 0.15s;
250
- }
251
- .smk-hero__cta:hover {
252
- opacity: 0.85;
253
- }
254
-
255
- /* ============================================================
256
- Nav — recent-posts / taxonomy-list
257
- SDK emits: \`<section class="smk-block smk-block--nav-{type} smk-nav {sub-class}" data-layout="list|grid|carousel">\`
258
- ============================================================ */
259
- .smk-nav {
260
- padding: 2.5rem 0;
261
- border-top: 1px solid var(--smk-border);
262
- }
263
- .smk-nav__heading {
264
- font-size: 0.75rem;
265
- font-weight: 700;
266
- text-transform: uppercase;
267
- letter-spacing: 0.12em;
268
- color: var(--smk-fg-muted);
269
- margin: 0 0 1.5rem;
270
- }
271
- .smk-nav__list {
272
- list-style: none;
273
- padding: 0;
274
- margin: 0;
275
- }
276
-
277
- /* List layout (data-layout="list") */
278
- .smk-nav[data-layout="list"] .smk-nav__list {
279
- display: flex;
280
- flex-direction: column;
281
- }
282
- .smk-nav[data-layout="list"] .smk-nav__item + .smk-nav__item {
283
- border-top: 1px solid var(--smk-border);
284
- }
285
- .smk-nav[data-layout="list"] .smk-nav__link {
286
- display: flex;
287
- gap: 1.25rem;
288
- align-items: center;
289
- padding: 1.25rem 0;
290
- color: inherit;
291
- text-decoration: none;
292
- transition: opacity 0.15s;
293
- }
294
- .smk-nav[data-layout="list"] .smk-nav__thumb {
295
- width: 6rem;
296
- height: 6rem;
297
- object-fit: cover;
298
- border-radius: var(--smk-radius-sm);
299
- flex-shrink: 0;
300
- background: var(--smk-bg-soft);
301
- }
302
-
303
- /* Grid layout (data-layout="grid") */
304
- .smk-nav[data-layout="grid"] .smk-nav__list {
305
- display: grid;
306
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
307
- gap: 1.25rem;
308
- }
309
- .smk-nav[data-layout="grid"] .smk-nav__link {
310
- display: flex;
311
- flex-direction: column;
312
- color: inherit;
313
- text-decoration: none;
314
- background: var(--smk-bg);
315
- border: 1px solid var(--smk-border);
316
- border-radius: var(--smk-radius-md);
317
- overflow: hidden;
318
- transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
319
- }
320
- .smk-nav[data-layout="grid"] .smk-nav__link:hover {
321
- transform: translateY(-2px);
322
- border-color: var(--smk-border-strong);
323
- box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.12);
324
- }
325
- .smk-nav[data-layout="grid"] .smk-nav__thumb {
326
- width: 100%;
327
- aspect-ratio: 16 / 10;
328
- object-fit: cover;
329
- background: var(--smk-bg-soft);
330
- }
331
- .smk-nav[data-layout="grid"] .smk-nav__meta {
332
- padding: 1rem;
333
- }
334
-
335
- /* Carousel layout (data-layout="carousel") — horizontal scroll-snap */
336
- .smk-nav[data-layout="carousel"] .smk-nav__list {
337
- display: grid;
338
- grid-auto-flow: column;
339
- grid-auto-columns: 70%;
340
- gap: 1rem;
341
- overflow-x: auto;
342
- scroll-snap-type: x mandatory;
343
- padding-bottom: 0.5rem;
344
- }
345
- @media (min-width: 640px) {
346
- .smk-nav[data-layout="carousel"] .smk-nav__list {
347
- grid-auto-columns: 40%;
348
- }
349
- }
350
- .smk-nav[data-layout="carousel"] .smk-nav__item {
351
- scroll-snap-align: start;
352
- background: var(--smk-bg);
353
- border: 1px solid var(--smk-border);
354
- border-radius: var(--smk-radius-md);
355
- overflow: hidden;
356
- }
357
- .smk-nav[data-layout="carousel"] .smk-nav__link {
358
- display: flex;
359
- flex-direction: column;
360
- color: inherit;
361
- text-decoration: none;
362
- }
363
- .smk-nav[data-layout="carousel"] .smk-nav__thumb {
364
- width: 100%;
365
- aspect-ratio: 16 / 10;
366
- object-fit: cover;
367
- background: var(--smk-bg-soft);
368
- }
369
- .smk-nav[data-layout="carousel"] .smk-nav__meta {
370
- padding: 1rem;
371
- }
372
-
373
- /* Shared internals */
374
- .smk-nav__link:hover {
375
- opacity: 0.85;
376
- }
377
- .smk-nav[data-layout="grid"] .smk-nav__link:hover,
378
- .smk-nav[data-layout="carousel"] .smk-nav__link:hover {
379
- opacity: 1;
380
- }
381
- .smk-nav__meta {
382
- flex: 1;
383
- min-width: 0;
384
- }
385
- .smk-nav__title {
386
- font-family: var(--smk-font-serif);
387
- font-size: 1.15rem;
388
- font-weight: 700;
389
- line-height: 1.3;
390
- margin: 0 0 0.5rem;
391
- letter-spacing: -0.01em;
392
- }
393
- .smk-nav__excerpt {
394
- font-size: 0.9rem;
395
- color: var(--smk-fg-muted);
396
- margin: 0;
397
- line-height: 1.55;
398
- display: -webkit-box;
399
- -webkit-line-clamp: 2;
400
- -webkit-box-orient: vertical;
401
- overflow: hidden;
402
- }
403
- .smk-nav__date {
404
- display: block;
405
- font-size: 0.75rem;
406
- color: var(--smk-fg-subtle);
407
- margin-top: 0.6rem;
408
- letter-spacing: 0.04em;
409
- text-transform: uppercase;
410
- }
411
- .smk-nav__empty {
412
- color: var(--smk-fg-subtle);
413
- font-style: italic;
414
- padding: 1rem 0;
415
- }
416
- .smk-nav__view-all {
417
- display: inline-flex;
418
- align-items: center;
419
- gap: 0.4rem;
420
- margin-top: 1.5rem;
421
- color: var(--smk-accent);
422
- font-size: 0.875rem;
423
- font-weight: 600;
424
- text-decoration: none;
425
- }
426
- .smk-nav__view-all::after {
427
- content: "→";
428
- transition: transform 0.15s;
429
- }
430
- .smk-nav__view-all:hover::after {
431
- transform: translateX(3px);
432
- }
433
-
434
- /* ============================================================
435
- Nav-search — inline filter input
436
- SDK emits: \`<section class="smk-block smk-block--nav-search smk-nav-search">\`
437
- with \`data-smk-search-input\` / \`data-smk-search-results\` /
438
- \`data-smk-search-empty\` attributes the IIFE wires up.
439
- ============================================================ */
440
- .smk-nav-search {
441
- padding: 2rem 0;
442
- border-top: 1px solid var(--smk-border);
443
- }
444
- .smk-nav-search__shell {
445
- position: relative;
446
- }
447
- .smk-nav-search__input {
448
- width: 100%;
449
- padding: 0.875rem 1.125rem;
450
- border: 1px solid var(--smk-border);
451
- border-radius: var(--smk-radius-md);
452
- background: var(--smk-bg);
453
- color: var(--smk-fg);
454
- font-size: 1rem;
455
- font-family: inherit;
456
- transition: border-color 0.15s, box-shadow 0.15s;
457
- }
458
- .smk-nav-search__input::placeholder {
459
- color: var(--smk-fg-subtle);
460
- }
461
- .smk-nav-search__input:focus {
462
- outline: none;
463
- border-color: var(--smk-fg);
464
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--smk-fg) 8%, transparent);
465
- }
466
- .smk-nav-search__list {
467
- list-style: none;
468
- padding: 0;
469
- margin: 0.75rem 0 0;
470
- border: 1px solid var(--smk-border);
471
- border-radius: var(--smk-radius-md);
472
- background: var(--smk-bg);
473
- overflow: hidden;
474
- box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.1);
475
- }
476
- .smk-nav-search__result + .smk-nav-search__result {
477
- border-top: 1px solid var(--smk-border);
478
- }
479
- .smk-nav-search__result a {
480
- display: block;
481
- padding: 0.875rem 1.125rem;
482
- color: var(--smk-fg);
483
- text-decoration: none;
484
- transition: background 0.1s;
485
- }
486
- .smk-nav-search__result a:hover {
487
- background: var(--smk-bg-soft);
488
- }
489
- .smk-nav-search__empty {
490
- color: var(--smk-fg-subtle);
491
- padding: 1rem 0 0;
492
- font-size: 0.9rem;
493
- }
494
-
495
- /* ============================================================
496
- Carousel — Apple-newsroom style horizontal carousel with
497
- \`data-aspect\` token-driven aspect-ratio, container-query-anchored
498
- nav buttons, and dots indicator.
499
- SDK emits:
500
- <smking-carousel class="smk-block smk-block--carousel smk-carousel"
501
- data-aspect="16:9|4:3|1:1|3:4|9:16">
502
- <div class="smk-carousel__viewport">
503
- <smking-slide>
504
- <div class="smk-carousel__image-frame">
505
- <img class="smk-carousel__image" /> or .__image--placeholder
506
- </div>
507
- <div class="smk-carousel__caption-row">
508
- <div class="smk-carousel__caption">…</div>
509
- <a class="smk-carousel__download" href />
510
- </div>
511
- </smking-slide>
512
- </div>
513
- <button class="smk-carousel__nav-prev|next" />
514
- <div class="smk-carousel__dots">
515
- <button class="smk-carousel__dot" aria-current="true|false" />
516
- </div>
517
- </smking-carousel>
518
-
519
- Web Component IIFE (SMKING_ELEMENTS_IIFE) upgrades the markup with
520
- swipe / scroll-snap / dot-binding behaviour client-side. CSS below
521
- drives all visual state — image cover-fill, nav-button vertical
522
- centering anchored to image height (cqw container-queries), dot
523
- active state.
524
- ============================================================ */
525
- smking-carousel,
526
- .smk-carousel {
527
- display: block;
528
- position: relative;
529
- margin: 2.5rem 0;
530
- padding-top: 2.5rem; /* room for editor settings overlay; harmless on customer side */
531
- padding-bottom: 1.5rem;
532
- container-type: inline-size; /* enables \`cqw\` for nav-button vertical anchor */
533
- --smk-carousel-aspect: 16 / 9;
534
- --smk-carousel-nav-top: 28.125cqw; /* 50cqw × 9/16 = half of image height */
535
- }
536
- .smk-carousel[data-aspect="4:3"],
537
- smking-carousel[data-aspect="4:3"] {
538
- --smk-carousel-aspect: 4 / 3;
539
- --smk-carousel-nav-top: 37.5cqw;
540
- }
541
- .smk-carousel[data-aspect="1:1"],
542
- smking-carousel[data-aspect="1:1"] {
543
- --smk-carousel-aspect: 1 / 1;
544
- --smk-carousel-nav-top: 50cqw;
545
- }
546
- .smk-carousel[data-aspect="3:4"],
547
- smking-carousel[data-aspect="3:4"] {
548
- --smk-carousel-aspect: 3 / 4;
549
- --smk-carousel-nav-top: 66.667cqw;
550
- }
551
- .smk-carousel[data-aspect="9:16"],
552
- smking-carousel[data-aspect="9:16"] {
553
- --smk-carousel-aspect: 9 / 16;
554
- --smk-carousel-nav-top: 88.889cqw;
555
- }
556
-
557
- .smk-carousel__viewport {
558
- display: flex;
559
- overflow-x: auto;
560
- scroll-snap-type: x mandatory;
561
- scroll-behavior: smooth;
562
- scrollbar-width: none;
563
- -webkit-overflow-scrolling: touch;
564
- }
565
- .smk-carousel__viewport::-webkit-scrollbar {
566
- display: none;
567
- }
568
-
569
- smking-slide,
570
- .smk-carousel__slide {
571
- display: flex;
572
- flex-direction: column;
573
- flex: 0 0 100%;
574
- scroll-snap-align: start;
575
- min-width: 0;
576
- padding-inline: 0.5rem;
577
- gap: 1rem;
578
- }
579
-
580
- /* Image frame — fixed-aspect box. Image cover-fills. */
581
- .smk-carousel__image-frame {
582
- position: relative;
583
- aspect-ratio: var(--smk-carousel-aspect);
584
- overflow: hidden;
585
- border-radius: var(--smk-radius-md);
586
- }
587
- .smk-carousel__image {
588
- display: block;
589
- width: 100%;
590
- height: 100%;
591
- object-fit: cover;
592
- }
593
- .smk-carousel__image--placeholder {
594
- width: 100%;
595
- height: 100%;
596
- display: flex;
597
- align-items: center;
598
- justify-content: center;
599
- background: var(--smk-bg-soft);
600
- border: 1px dashed var(--smk-border);
601
- }
602
-
603
- /* Caption row — text on the left, download icon on the right. Matches
604
- Apple newsroom's per-slide attribution + asset-download pattern. */
605
- .smk-carousel__caption-row {
606
- display: flex;
607
- align-items: center;
608
- justify-content: space-between;
609
- gap: 1rem;
610
- padding-inline: 0.25rem;
611
- }
612
- .smk-carousel__caption {
613
- flex: 1;
614
- text-align: center;
615
- font-size: 0.875rem;
616
- color: var(--smk-fg-muted);
617
- line-height: 1.5;
618
- }
619
- .smk-carousel__download {
620
- display: inline-flex;
621
- align-items: center;
622
- justify-content: center;
623
- width: 1.75rem;
624
- height: 1.75rem;
625
- border-radius: 9999px;
626
- color: var(--smk-fg-muted);
627
- text-decoration: none;
628
- transition: background-color 0.15s, color 0.15s;
629
- }
630
- .smk-carousel__download:hover {
631
- background: var(--smk-bg-soft);
632
- color: var(--smk-fg);
633
- }
634
-
635
- /* Nav buttons — circular cards overlapping the image edges. Top is
636
- centered on the IMAGE (not the whole carousel) via container query:
637
- image height = 100cqw × (ratio_h / ratio_w); half = nav-top var.
638
- 2.5rem offset = container padding-top. */
639
- .smk-carousel__nav-prev,
640
- .smk-carousel__nav-next {
641
- position: absolute;
642
- top: calc(2.5rem + var(--smk-carousel-nav-top));
643
- transform: translateY(-50%);
644
- z-index: 1;
645
- display: inline-flex;
646
- align-items: center;
647
- justify-content: center;
648
- width: 2.5rem;
649
- height: 2.5rem;
650
- padding: 0;
651
- border-radius: 9999px;
652
- border: 1px solid var(--smk-border);
653
- background: var(--smk-bg);
654
- color: var(--smk-fg);
655
- cursor: pointer;
656
- box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
657
- transition: background-color 0.15s, transform 0.15s;
658
- }
659
- .smk-carousel__nav-prev { left: 0.75rem; }
660
- .smk-carousel__nav-next { right: 0.75rem; }
661
- .smk-carousel__nav-prev:hover,
662
- .smk-carousel__nav-next:hover {
663
- background: var(--smk-bg-soft);
664
- }
665
- .smk-carousel__nav-prev:active,
666
- .smk-carousel__nav-next:active {
667
- transform: translateY(-50%) scale(0.95);
668
- }
669
-
670
- /* Dots — small circles centered below the caption row. Inactive is
671
- hairline grey, active fills with foreground colour. */
672
- .smk-carousel__dots {
673
- display: flex;
674
- justify-content: center;
675
- align-items: center;
676
- gap: 0.5rem;
677
- margin-top: 0.75rem;
678
- }
679
- .smk-carousel__dot {
680
- width: 0.5rem;
681
- height: 0.5rem;
682
- padding: 0;
683
- border-radius: 9999px;
684
- border: none;
685
- background: color-mix(in srgb, var(--smk-fg) 20%, transparent);
686
- cursor: pointer;
687
- transition: background-color 0.15s, transform 0.15s;
688
- }
689
- .smk-carousel__dot:hover {
690
- background: color-mix(in srgb, var(--smk-fg) 45%, transparent);
691
- }
692
- .smk-carousel__dot[aria-current="true"] {
693
- background: var(--smk-fg);
694
- transform: scale(1.1);
695
- }
696
-
697
- /* ============================================================
698
- Unknown block — forward-compat fallback
699
- ============================================================ */
700
- .smk-block--unknown {
701
- display: none;
702
- }
703
- }
704
- `;
@@ -1,46 +0,0 @@
1
- /**
2
- * IIFE source for `<smking-carousel>` + `<smking-slide>` Web Component
3
- * registration. The Next.js SDK inlines this as a `<script>` tag once
4
- * per page so customer sites get the carousel interactivity without
5
- * adding a `<script src>` to their layout.
6
- *
7
- * Idempotent: the IIFE guards each `customElements.define` call with a
8
- * `customElements.get(...)` check, so multiple emits per page are
9
- * harmless.
10
- *
11
- * Keep this string in sync with
12
- * `apps/web/src/features/cms/sdk/smking-elements.ts` — the SaaS-side
13
- * Plate editor imports the TS module directly, so both paths register
14
- * the same runtime.
15
- */
16
- export const SMKING_ELEMENTS_IIFE = `(function(){if(typeof window==="undefined"||typeof customElements==="undefined")return;
17
- var C="smking-carousel",S="smking-slide";
18
- if(customElements.get(C))return;
19
- function nextFrame(cb){if(typeof requestAnimationFrame!=="undefined")return requestAnimationFrame(cb);return setTimeout(cb,16);}
20
- function cancelFrame(id){if(typeof cancelAnimationFrame!=="undefined")return cancelAnimationFrame(id);return clearTimeout(id);}
21
- function CarouselEl(){return Reflect.construct(HTMLElement,[],CarouselEl);}
22
- CarouselEl.prototype=Object.create(HTMLElement.prototype);
23
- CarouselEl.prototype.constructor=CarouselEl;
24
- CarouselEl.prototype.connectedCallback=function(){var self=this;
25
- var viewport=self.querySelector(".smk-carousel__viewport");
26
- if(!viewport)return;
27
- var dotsContainer=self.querySelector(".smk-carousel__dots");
28
- var prevBtn=self.querySelector(".smk-carousel__nav-prev");
29
- var nextBtn=self.querySelector(".smk-carousel__nav-next");
30
- var slides=Array.prototype.slice.call(viewport.querySelectorAll(":scope > "+S));
31
- if(dotsContainer){var dotEls=slides.map(function(_,i){var d=document.createElement("button");d.type="button";d.className="smk-carousel__dot";d.dataset.index=String(i);d.setAttribute("aria-label","Go to slide "+(i+1));if(i===0)d.setAttribute("aria-current","true");d.addEventListener("click",function(e){e.preventDefault();viewport.scrollTo({left:i*viewport.clientWidth,behavior:"smooth"});});return d;});dotsContainer.replaceChildren.apply(dotsContainer,dotEls);}
32
- function onPrev(e){e.preventDefault();viewport.scrollBy({left:-viewport.clientWidth,behavior:"smooth"});}
33
- function onNext(e){e.preventDefault();viewport.scrollBy({left:viewport.clientWidth,behavior:"smooth"});}
34
- if(prevBtn)prevBtn.addEventListener("click",onPrev);
35
- if(nextBtn)nextBtn.addEventListener("click",onNext);
36
- var raf=0;
37
- function onScroll(){if(raf)return;raf=nextFrame(function(){raf=0;var ai=Math.round(viewport.scrollLeft/Math.max(1,viewport.clientWidth));if(!dotsContainer)return;var dots=dotsContainer.querySelectorAll(".smk-carousel__dot");dots.forEach(function(d,i){if(i===ai)d.setAttribute("aria-current","true");else d.removeAttribute("aria-current");});});}
38
- viewport.addEventListener("scroll",onScroll,{passive:true});
39
- self._smkCleanup=function(){if(prevBtn)prevBtn.removeEventListener("click",onPrev);if(nextBtn)nextBtn.removeEventListener("click",onNext);viewport.removeEventListener("scroll",onScroll);if(raf)cancelFrame(raf);};};
40
- CarouselEl.prototype.disconnectedCallback=function(){if(this._smkCleanup)this._smkCleanup();};
41
- function SlideEl(){return Reflect.construct(HTMLElement,[],SlideEl);}
42
- SlideEl.prototype=Object.create(HTMLElement.prototype);
43
- SlideEl.prototype.constructor=SlideEl;
44
- customElements.define(C,CarouselEl);
45
- customElements.define(S,SlideEl);
46
- })();`;