@sarimarcus/content-sites-ui 0.1.0-rc.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All packages in the platform release in lockstep; entries are per release version.
+
+## 0.1.0-rc.0 (2026-09-29)
+
+First release candidate.
+
+- Package scaffold: named subpath exports per folder and a `tailwind.css` entry that adds the package to Tailwind's sources (SLA-2734).
+- `Container` (`./layout`), generated from the factory width contract (SLA-2421).
+- `Icon` (`./primitives`): Lucide icons by kebab-case name, with `filled` and an optional `style` passthrough. `@lucide/astro` `^1.23.0` peer.
+- `widths.css`: the named width tokens (`--container-shell`, `-content`, `-measure-wide`, `-measure`, `-deck`) as a Tailwind `@theme` block (SLA-2742).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Olivier Depiesse
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @sarimarcus/content-sites-ui
+
+Universal Astro UI shared by every content site. Named entry points, one per folder: `primitives`,
+`composed`, `editorial`, `affiliate`, `seo`, `layout`, `navigation` and `types`. For example,
+`import { Container } from '@sarimarcus/content-sites-ui/layout'`. `src/internal` is never exported,
+and `src/styles` holds the Tailwind entry.
+
+Depends on `@sarimarcus/content-sites-core` (exact lockstep peer) and `@lucide/astro` (the `Icon` primitive). It carries no reader-visible copy:
+text arrives through props and slots.
+
+## Tailwind
+
+Tailwind v4 does not scan `node_modules`, so a site must import the package's source entry next to Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@sarimarcus/content-sites-ui/tailwind.css";
+```
+
+Without it, utility classes used only inside package components are silently missing from the site's CSS.

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@sarimarcus/content-sites-ui",
+  "version": "0.1.0-rc.0",
+  "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sarimarcus/content-sites-factory.git"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src",
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./primitives": "./src/primitives/index.ts",
+    "./composed": "./src/composed/index.ts",
+    "./editorial": "./src/editorial/index.ts",
+    "./affiliate": "./src/affiliate/index.ts",
+    "./seo": "./src/seo/index.ts",
+    "./layout": "./src/layout/index.ts",
+    "./navigation": "./src/navigation/index.ts",
+    "./types": "./src/types/index.ts",
+    "./tailwind.css": "./src/styles/tailwind.css",
+    "./widths.css": "./src/styles/widths.css"
+  },
+  "peerDependencies": {
+    "@lucide/astro": "^1.23.0",
+    "astro": "^7.0.6",
+    "tailwindcss": "^4.1.18",
+    "@sarimarcus/content-sites-core": "0.1.0-rc.0"
+  }
+}

package/src/affiliate/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/affiliate. Components land here from SLA-2742 on.
+export {};

package/src/composed/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/composed. Components land here from SLA-2742 on.
+export {};

package/src/editorial/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/editorial. Components land here from SLA-2742 on.
+export {};

package/src/layout/Container.astro

@@ -0,0 +1,30 @@
+---
+// GENERATED by scripts/width-tokens/sync.mjs (factory root) — DO NOT EDIT.
+//
+// Canonical widths live in scripts/width-tokens/tokens.json (SLA-2421); the tokens themselves ship
+// as @sarimarcus/content-sites-ui/widths.css. The sync --check gate rejects drift.
+//
+// `size` names a width token. Container is the sanctioned way to build a centred rail
+// with the standard gutter. Two token names are deliberately NOT sizes here:
+//   • `shell` — chrome and full-bleed bands need a viewport-spanning outer element plus
+//     an inner rail, and Container emits one element that is both. Use max-w-shell on the
+//     inner rail instead. (The old `wide` variant had 0 uses in 1,126 call sites.)
+//   • `deck` — a standfirst owns no gutter and is usually left-aligned. Use max-w-deck.
+interface Props {
+  class?: string;
+  as?: 'div' | 'section' | 'article' | 'main';
+  size?: 'content' | 'measure-wide' | 'measure';
+}
+
+const { class: className, as: Tag = 'div', size = 'content' } = Astro.props;
+
+const sizeClasses: Record<NonNullable<Props['size']>, string> = {
+  content: 'max-w-content',
+  'measure-wide': 'max-w-measure-wide',
+  measure: 'max-w-measure',
+};
+---
+
+<Tag class:list={['mx-auto w-full px-4 sm:px-6 lg:px-8', sizeClasses[size], className]}>
+  <slot />
+</Tag>

package/src/layout/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/layout.
+export { default as Container } from './Container.astro';

package/src/navigation/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/navigation. Components land here from SLA-2742 on.
+export {};

package/src/primitives/Icon.astro

@@ -0,0 +1,47 @@
+---
+/**
+ * Icon component — renders Lucide icons via @lucide/astro.
+ * All ~1500 Lucide icons available by kebab-case name. No manual registry needed.
+ *
+ * Props:
+ *   name    — kebab-case Lucide icon name (e.g. "map-pin", "arrow-right")
+ *   class   — Tailwind classes for sizing/color (default: "w-4 h-4")
+ *   size    — explicit px size (optional — prefer Tailwind sizing classes)
+ *   filled  — render as filled shape instead of outline (e.g. solid stars)
+ *   style   — inline style passthrough (e.g. a breadcrumb fading its separators by index)
+ */
+
+import * as Icons from '@lucide/astro';
+
+interface Props {
+  name: string;
+  class?: string;
+  size?: number;
+  filled?: boolean;
+  style?: string;
+}
+
+const { name, class: className = 'w-4 h-4', size, filled = false, style } = Astro.props;
+
+// 'map-pin' → 'MapPin', 'arrow-right' → 'ArrowRight'
+const pascalName = name
+  .split('-')
+  .map((s: string) => s.charAt(0).toUpperCase() + s.slice(1))
+  .join('');
+
+type IconMap = typeof Icons;
+const IconComponent = (Icons as IconMap)[pascalName as keyof IconMap] as any;
+
+// filled=true: CSS overrides SVG presentation attributes (higher specificity than SVG attrs)
+const resolvedClass = filled ? `${className} fill-current [stroke:none]` : className;
+---
+
+{IconComponent && (
+  <IconComponent
+    class={resolvedClass}
+    {...(size !== undefined ? { size } : {})}
+    {...(style ? { style } : {})}
+    strokeWidth={2}
+    aria-hidden="true"
+  />
+)}

package/src/primitives/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/primitives.
+export { default as Icon } from './Icon.astro';

package/src/seo/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/seo. Components land here from SLA-2742 on.
+export {};

package/src/styles/tailwind.css

@@ -0,0 +1,3 @@
+/* Tailwind v4 skips node_modules during class detection. Consumers @import this file so the
+   package's own templates are scanned: @import "@sarimarcus/content-sites-ui/tailwind.css"; */
+@source "..";

package/src/styles/widths.css

@@ -0,0 +1,9 @@
+/* GENERATED by scripts/width-tokens/sync.mjs from scripts/width-tokens/tokens.json — DO NOT EDIT.
+   A site imports it where its width region used to be, so the theme variables keep their order. */
+@theme {
+  --container-shell:        80rem;  /* 1280 — was max-w-7xl */
+  --container-content:      72rem;  /* 1152 — was max-w-6xl */
+  --container-measure-wide: 56rem;  /* 896 — was max-w-4xl */
+  --container-measure:      48rem;  /* 768 — was max-w-3xl */
+  --container-deck:         42rem;  /* 672 — was max-w-2xl */
+}

package/src/types/index.ts

@@ -0,0 +1,2 @@
+// Public surface of @sarimarcus/content-sites-ui/types. Components land here from SLA-2742 on.
+export {};