@devslab/site-kit 0.5.2 → 0.6.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@devslab/site-kit",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Strict i18n, SEO/GEO, and Solid public-site shells for DevsLab products",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": [
-    "./styles.css"
+    "./styles.css",
+    "./site-sections.css"
   ],
   "repository": {
     "type": "git",
@@ -24,6 +25,7 @@
     "src/tanstack-start.mjs",
     "src/tanstack-start.d.mts",
     "styles.css",
+    "site-sections.css",
     "README.md",
     "README.ko.md"
   ],
@@ -50,10 +52,11 @@
       "types": "./src/tanstack-start.d.mts",
       "import": "./src/tanstack-start.mjs"
     },
-    "./styles.css": "./styles.css"
+    "./styles.css": "./styles.css",
+    "./site-sections.css": "./site-sections.css"
   },
   "dependencies": {
-    "@devslab/dds-solid": "0.5.2"
+    "@devslab/dds-solid": "0.6.0"
   },
   "peerDependencies": {
     "@tanstack/solid-router": "1.170.30",

package/site-sections.css

@@ -0,0 +1,65 @@
+/* Section primitives (sections.tsx). Every selector here is prefixed
+   site-section / site-hero / site-steps / site-rows / site-pricing and is
+   defined once. Tokens only; no colour literals; no theme rules — the
+   tokens carry light and dark. */
+
+.site-section { padding-block: var(--dds-space-64); border-block-start: 1px solid var(--dds-color-border-default); }
+.site-section[data-tone="band"] { background: var(--dds-color-bg-subtle); }
+.site-section__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
+
+.site-section__head { max-inline-size: 46rem; margin-block-end: var(--dds-space-40); }
+.site-section__index { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); letter-spacing: .18em; }
+.site-section__head h2 { margin: 0; font-size: var(--dds-typo-title-1-font-size); line-height: var(--dds-typo-title-1-line-height); letter-spacing: -.02em; text-wrap: balance; white-space: pre-line; }
+.site-section__lede { margin: 0; margin-block-start: var(--dds-space-12); max-inline-size: 44rem; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-1-font-size); line-height: 1.7; }
+
+@media (max-width: 48rem) {
+  .site-section { padding-block: var(--dds-space-48); }
+}
+
+html:lang(ko) .site-section__head h2,
+html:lang(ko) .site-section__lede { word-break: keep-all; overflow-wrap: break-word; }
+
+/* Steps: three columns sharing one hairline; ring numerals in the body face. */
+.site-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--dds-color-border-default); }
+.site-steps__step { padding-block: var(--dds-space-24); padding-inline-end: var(--dds-space-24); border-block-end: 1px solid var(--dds-color-border-default); }
+.site-steps__marker { display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border-radius: var(--dds-radius-full); border: 1.5px solid var(--dds-color-text-brand); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-sans); font-size: 13px; font-weight: 600; line-height: 1; }
+.site-steps__step h3 { margin-block: var(--dds-space-12) var(--dds-space-8); font-size: var(--dds-typo-title-3-font-size); }
+.site-steps__step p { margin: 0; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-2-font-size); line-height: 1.7; }
+@media (min-width: 56.25rem) {
+  .site-steps { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
+  .site-steps__step + .site-steps__step { padding-inline-start: var(--dds-space-24); border-inline-start: 1px solid var(--dds-color-border-default); }
+}
+html:lang(ko) .site-steps__step p { word-break: keep-all; overflow-wrap: break-word; }
+
+/* Rows: title column + body column above the two-column threshold, stacked below. */
+.site-rows { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--dds-color-border-default); }
+.site-rows__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dds-space-8) var(--dds-space-24); padding-block: var(--dds-space-24); border-block-end: 1px solid var(--dds-color-border-default); }
+.site-rows__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dds-space-8); }
+.site-rows__title h3 { margin: 0; font-size: var(--dds-typo-title-3-font-size); }
+.site-rows__body { margin: 0; max-inline-size: 52rem; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-2-font-size); line-height: 1.7; }
+@media (min-width: 56.25rem) {
+  .site-rows__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
+}
+html:lang(ko) .site-rows__body { word-break: keep-all; overflow-wrap: break-word; }
+
+/* Pricing note: a paragraph block and one action, side by side when there is room. */
+.site-pricing { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--dds-space-24); }
+.site-pricing__note { flex: 1 1 28rem; max-inline-size: 60ch; }
+.site-pricing__note p { margin: 0; color: var(--dds-color-text-secondary); line-height: 1.7; }
+.site-pricing__note p + p { margin-block-start: var(--dds-space-8); }
+.site-pricing__action { flex: 0 0 auto; }
+
+/* Hero: copy 6 / aside 5, one column below the threshold. The aside has no
+   height rule — a swapping scene fixes its own height in the consumer. */
+.site-hero { padding-block: var(--dds-space-64); }
+.site-hero__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dds-space-48); align-items: start; }
+.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); letter-spacing: .18em; }
+.site-hero__copy h1 { margin: 0; font-size: var(--dds-typo-display-font-size); line-height: var(--dds-typo-display-line-height); letter-spacing: -.025em; text-wrap: balance; white-space: pre-line; }
+.site-hero__lede { margin: 0; margin-block-start: var(--dds-space-24); max-inline-size: 46ch; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-1-font-size); line-height: 1.7; }
+.site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dds-space-16) var(--dds-space-24); margin-block-start: var(--dds-space-32); }
+.site-hero__aside { margin: 0; inline-size: 100%; }
+@media (min-width: 56.25rem) {
+  .site-hero__shell { grid-template-columns: 6fr 5fr; }
+}
+html:lang(ko) .site-hero__copy h1,
+html:lang(ko) .site-hero__lede { word-break: keep-all; overflow-wrap: break-word; }

package/src/core/locales.d.mts

@@ -1,4 +1,5 @@
 export type SiteLocale = "ko" | "en" | "ja" | "zh-HK" | "zh-TW" | "hi" | "vi" | "id" | "th" | "pt-BR" | "fr" | "de" | "es" | "ar";
+export type LocaleCode = SiteLocale;
 export type TextDirection = "ltr" | "rtl";
 export interface LocaleDefinition { readonly code: SiteLocale; readonly language: string; readonly nativeName: string; readonly dir: TextDirection }
 
@@ -31,6 +32,7 @@ export declare const LOCALES: readonly LocaleDefinition[];
  * are the family registry, so not calling this changes nothing.
  */
 export declare function defineLocaleRegistry<Extra extends string = never>(options?: {
+  only?: ReadonlyArray<LocaleCode>;
   extra?: readonly ExtraLocaleDefinition<Extra>[];
   aliases?: readonly (readonly [string, SiteLocale | Extra])[];
 }): LocaleRegistry<SiteLocale | Extra>;

package/src/core/locales.mjs

@@ -41,22 +41,37 @@ const FAMILY_ALIASES = Object.freeze([["zh", "zh-TW"], ["pt", "pt-BR"]]);
  * and security-scanned here, and seven Indian languages share one flag
  * anyway.
  *
- * @param {{ extra?: ReadonlyArray<object>, aliases?: ReadonlyArray<[string, string]> }} [options]
+ * @param {{ only?: ReadonlyArray<string>, extra?: ReadonlyArray<object>, aliases?: ReadonlyArray<[string, string]> }} [options]
  */
 export function defineLocaleRegistry(options = {}) {
   const extra = options.extra ?? [];
-  const seen = new Set(LOCALES.map(({ code }) => code));
+  // `only` — the product sells in a subset of the family's languages. The
+  // subset keeps the family's order (the picker order is a family decision)
+  // and is applied before `extra`, so a product may still add its own.
+  let family = LOCALES;
+  if (options.only !== undefined) {
+    if (options.only.length === 0) throw new RangeError("`only` needs at least one locale — a registry with none is a bug, not a choice");
+    const wanted = new Set(options.only);
+    for (const code of wanted) {
+      if (!LOCALES.some((locale) => locale.code === code)) throw new RangeError(`${code} is not a family locale — \`only\` selects from the family list; use \`extra\` for a product's own`);
+    }
+    family = Object.freeze(LOCALES.filter((locale) => wanted.has(locale.code)));
+  }
+  const seen = new Set(family.map(({ code }) => code));
   for (const locale of extra) {
     if (!locale?.code) throw new TypeError("every extra locale needs a code");
-    if (seen.has(locale.code)) {
+    if (LOCALES.some((known) => known.code === locale.code)) {
       throw new RangeError(`${locale.code} is already a family locale — remove it from \`extra\``);
     }
+    if (seen.has(locale.code)) {
+      throw new RangeError(`${locale.code} appears twice in \`extra\``);
+    }
     if (!locale.nativeName) throw new TypeError(`${locale.code} needs a nativeName — it is what the picker shows`);
     if (locale.dir !== "ltr" && locale.dir !== "rtl") throw new RangeError(`${locale.code} needs dir "ltr" or "rtl"`);
     seen.add(locale.code);
   }
 
-  const locales = Object.freeze([...LOCALES, ...extra.map((locale) => Object.freeze({ ...locale }))]);
+  const locales = Object.freeze([...family, ...extra.map((locale) => Object.freeze({ ...locale }))]);
   const byLower = new Map(locales.map((locale) => [locale.code.toLowerCase(), locale]));
   const aliases = new Map([...FAMILY_ALIASES, ...(options.aliases ?? [])]);
 
@@ -65,7 +80,7 @@ export function defineLocaleRegistry(options = {}) {
     const exact = byLower.get(String(candidate).trim().toLowerCase());
     if (exact) return exact.code;
     const base = String(candidate).trim().toLowerCase().split("-")[0];
-    if (aliases.has(base)) return aliases.get(base);
+    if (aliases.has(base)) { const target = aliases.get(base); return byLower.has(target.toLowerCase()) ? target : undefined; }
     return byLower.get(base)?.code;
   }
 

package/styles.css

@@ -1,10 +1,12 @@
 @import "@devslab/dds-solid/styles.css";
+@import "./site-sections.css";
 
 .dds-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .dds-sr-only:focus { position: fixed; inset-block-start: var(--dds-space-8); inset-inline-start: var(--dds-space-8); z-index: 1000; inline-size: auto; block-size: auto; padding: var(--dds-space-8) var(--dds-space-12); margin: 0; overflow: visible; clip-path: none; white-space: normal; border: 2px solid currentColor; border-radius: var(--dds-radius-sm); background: var(--dds-color-bg-default); color: var(--dds-color-text-primary); }
 
 .site-shell { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--dds-color-bg-default); color: var(--dds-color-text-primary); }
 .site-main { flex: 1; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
+.site-main--bleed { inline-size: 100%; }
 .site-header { position: sticky; inset-block-start: 0; z-index: 100; border-block-end: 1px solid var(--dds-color-border-default); background: var(--dds-color-bg-default); }
 .site-header__inner { min-block-size: 64px; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
 .site-brand { justify-self: start; color: var(--dds-color-text-primary); font-weight: 700; text-decoration: none; }