@tetherto/dev-websites-core 0.2.0 → 0.3.0

package/README.md

@@ -1,13 +1,20 @@
 # `@tetherto/dev-websites-core`
 
-Shared non-UI libraries for WDK / QVAC websites. Domains:
-
-| Import                         | Contents                                                                |
-| ------------------------------ | ----------------------------------------------------------------------- |
-| `@tetherto/dev-websites-core/cms`   | Payload `buildCmsConfig`, stock collections, access, Lexical, media I/O |
-| `@tetherto/dev-websites-core/seo`   | `createMetadataFactory`, `getSiteUrl`, `getOgBackgroundDataUrl`         |
-| `@tetherto/dev-websites-core/i18n`  | `Languages` / `LanguageLabel`                                           |
-| `@tetherto/dev-websites-core/utils` | `createLogger`, `toPlainValue`, `stripShikiPreBackground`               |
+Shared CMS, SEO, i18n, utils, and UI primitives for WDK / QVAC websites.
+
+| Import | Contents |
+| --- | --- |
+| `@tetherto/dev-websites-core/cms` | Payload `buildCmsConfig`, stock collections, access, Lexical, media I/O |
+| `@tetherto/dev-websites-core/seo` | `createMetadataFactory`, `getSiteUrl`, `getOgBackgroundDataUrl` |
+| `@tetherto/dev-websites-core/i18n` | `Languages` / `LanguageLabel` |
+| `@tetherto/dev-websites-core/utils` | `createLogger`, `toPlainValue`, `stripShikiPreBackground` |
+| `@tetherto/dev-websites-core/ui` | UI primitives (`Button`, `Dialog`, `Pagination`, `Tooltip`, …) + `cn` |
+| `@tetherto/dev-websites-core/ui/a11y` | `focusRingClassName`, `VisuallyHidden` |
+| `@tetherto/dev-websites-core/ui/carousel` | `Carousel` (+ optional `embla-carousel-react` peer) |
+| `@tetherto/dev-websites-core/ui/theme.css` | One-shot: tokens + Tailwind v4 `@theme` preset |
+| `@tetherto/dev-websites-core/ui/theme/tokens.css` | CSS variables (HSL channels) |
+| `@tetherto/dev-websites-core/ui/theme/preset.css` | Tailwind v4 `@theme` map |
+| `@tetherto/dev-websites-core/ui/theme/preset` | JS Tailwind preset for `tailwind.config.ts` |
 
 ### Install
 
@@ -43,6 +50,47 @@ rm -rf node_modules/@tetherto/dev-websites-core && npm install @tetherto/dev-web
 Do **not** import `@tetherto/dev-websites-core/cms` from Client Components — it includes Node-only
 modules (`fs`, Payload, S3). Prefer domain subpaths over the root barrel.
 
+### UI theming
+
+One **Tailwind theme contract** for all sites (same utility names). Defaults are
+**WDK**. QVAC (and future apps) override values only.
+
+```ts
+// core: @tetherto/dev-websites-core/ui/theme/preset
+// — full theme.extend (colors, type scale, radii, btn sizing)
+
+// WDK
+import uiPreset from '@tetherto/dev-websites-core/ui/theme/preset'
+export default {
+  presets: [uiPreset],
+  content: [/* app + dist/ui */],
+}
+
+// QVAC — same keys, different CSS variables / brand values
+import uiPreset from '@tetherto/dev-websites-core/ui/theme/preset'
+export default {
+  presets: [uiPreset],
+  content: [/* app + dist/ui */],
+  theme: {
+    extend: {
+      colors: {
+        accent: { DEFAULT: 'hsl(var(--color-text-action) / <alpha-value>)', /* … */ },
+        // …
+      },
+    },
+  },
+}
+```
+
+Apps define the CSS variables the preset references (`--color-bg-base`,
+`--color-accent`, …). QVAC also aliases those names onto its Figma tokens in
+`globals.css`. Product-only utilities (e.g. QVAC `text-heading`) stay in the
+app config until migrated onto the shared names.
+
+Optional CSS helpers: `ui/theme/tokens.css`, `ui/theme/preset.css`, `ui/theme.css`
+(short-name contract / Tailwind v4 `@theme`). The JS preset above is the source
+of truth for WDK/QVAC.
+
 ### CMS stock
 
 Registered by `buildCmsConfig` in this order. Disable or extend any of them via
@@ -69,10 +117,15 @@ to stock hooks, not replaced.
 
 ### Peer dependencies
 
-The consuming site must install these (all are required peers):
+CMS / Next (required for `/cms` consumers):
 `payload`, `@payloadcms/richtext-lexical`, `@payloadcms/storage-s3`,
 `@aws-sdk/client-s3`, `next`.
 
+UI (required for `/ui` consumers):
+`react`, `react-dom`, `@radix-ui/react-*` (dialog, dropdown-menu, primitive, slot, tooltip),
+`class-variance-authority`, `clsx`, `tailwind-merge`. Optional: `react-icons`,
+`embla-carousel-react` (carousel entry only).
+
 ### Environment variables
 
 Read from `process.env` at runtime by the package — **set them in the consuming

package/dist/cms/index.d.mts

@@ -0,0 +1,3 @@
+import { A as codeTabsBlock, B as STOCK_COLLECTION_SLUGS, C as leafBlocks, D as downloadCtaBlock, E as stepsBlock, F as seoFields, G as applyGlobalOverride, H as CollectionOverride, I as draftsWithAutosave, J as createAccessHelpers, K as AccessHelpers, L as BuildCmsConfigOptions, M as richTextBlock, N as setPublishedAt, O as videoBlock, P as slugify, R as buildCmsConfig, S as languageOptions, T as accordionBlock, U as GlobalOverride, V as StockCollectionSlug, W as applyCollectionOverride, _ as blogContentBlocks, a as createPages, b as codeBlockLanguages, c as createAuthors, d as createUsers, f as CreateS3MediaPluginOptions, g as richTextEditor, h as getRichTextEditorConfig, i as createLegalPages, j as codeBlock, k as imageBlock, l as createMedia, m as requireEnvAtRuntime, n as createChangelog, o as createBlogPosts, p as createS3MediaPlugin, q as AccessOptions, r as createChangelogTags, s as createCategories, t as createSiteSettings, u as createApiTokens, v as pageContentBlocks, w as sectionHeadingBlock, x as defaultCodeLanguage, y as showcaseContentBlocks, z as Overrides } from "../index.mjs";
+import { n as readPayloadMediaAsDataUrl, r as readPayloadMediaBuffer, t as PayloadMedia } from "../readMediaBuffer.mjs";
+export { type AccessHelpers, type AccessOptions, type BuildCmsConfigOptions, type CollectionOverride, type CreateS3MediaPluginOptions, type GlobalOverride, type Overrides, type PayloadMedia, STOCK_COLLECTION_SLUGS, type StockCollectionSlug, accordionBlock, applyCollectionOverride, applyGlobalOverride, blogContentBlocks, buildCmsConfig, codeBlock, codeBlockLanguages, codeTabsBlock, createAccessHelpers, createApiTokens, createAuthors, createBlogPosts, createCategories, createChangelog, createChangelogTags, createLegalPages, createMedia, createPages, createS3MediaPlugin, createSiteSettings, createUsers, defaultCodeLanguage, downloadCtaBlock, draftsWithAutosave, getRichTextEditorConfig, imageBlock, languageOptions, leafBlocks, pageContentBlocks, readPayloadMediaAsDataUrl, readPayloadMediaBuffer, requireEnvAtRuntime, richTextBlock, richTextEditor, sectionHeadingBlock, seoFields, setPublishedAt, showcaseContentBlocks, slugify, stepsBlock, videoBlock };

package/dist/cms/index.mjs

@@ -0,0 +1,3 @@
+import { A as downloadCtaBlock, B as createAccessHelpers, C as leafBlocks, D as richTextEditor, E as getRichTextEditorConfig, F as languageOptions, I as createAuthors, L as seoFields, M as codeBlock, N as codeBlockLanguages, O as videoBlock, P as defaultCodeLanguage, R as slugify, S as accordionBlock, T as richTextBlock, _ as setPublishedAt, a as applyCollectionOverride, b as showcaseContentBlocks, c as createUsers, d as createMedia, f as createChangelogTags, g as draftsWithAutosave, h as createBlogPosts, i as STOCK_COLLECTION_SLUGS, j as codeTabsBlock, k as imageBlock, l as createLegalPages, m as createCategories, n as requireEnvAtRuntime, o as applyGlobalOverride, p as createChangelog, r as buildCmsConfig, s as createSiteSettings, t as createS3MediaPlugin, u as createPages, v as blogContentBlocks, w as stepsBlock, x as sectionHeadingBlock, y as pageContentBlocks, z as createApiTokens } from "../cms.mjs";
+import { n as readPayloadMediaBuffer, t as readPayloadMediaAsDataUrl } from "../readMediaBuffer.mjs";
+export { STOCK_COLLECTION_SLUGS, accordionBlock, applyCollectionOverride, applyGlobalOverride, blogContentBlocks, buildCmsConfig, codeBlock, codeBlockLanguages, codeTabsBlock, createAccessHelpers, createApiTokens, createAuthors, createBlogPosts, createCategories, createChangelog, createChangelogTags, createLegalPages, createMedia, createPages, createS3MediaPlugin, createSiteSettings, createUsers, defaultCodeLanguage, downloadCtaBlock, draftsWithAutosave, getRichTextEditorConfig, imageBlock, languageOptions, leafBlocks, pageContentBlocks, readPayloadMediaAsDataUrl, readPayloadMediaBuffer, requireEnvAtRuntime, richTextBlock, richTextEditor, sectionHeadingBlock, seoFields, setPublishedAt, showcaseContentBlocks, slugify, stepsBlock, videoBlock };