@ciderpress/ui 1.0.0-rc.1

package/dist/theme/styles/overrides/section-card.css

@@ -0,0 +1,114 @@
+/**
+ * Section landing page cards — emitted by the sync engine as raw HTML.
+ */
+
+/* ── Section grid ────────────────────────────────────────── */
+.cp-section-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.cp-section-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border-radius: var(--rp-radius);
+  border: 1px solid var(--cp-c-border);
+  background: var(--cp-c-bg-soft);
+  text-decoration: none !important;
+  transition:
+    border-color 0.2s,
+    background 0.2s,
+    box-shadow 0.2s;
+}
+
+.cp-section-card__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cp-section-card:hover {
+  border-color: var(--cp-c-brand-1);
+  background: var(--cp-c-bg-elv);
+  box-shadow: var(--cp-shadow-card-hover);
+}
+
+.cp-section-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.cp-section-card__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Section icon colors ─────────────────────────────────── */
+.cp-section-card__icon--blue {
+  background: var(--cp-c-tint-blue-bg);
+  color: var(--cp-c-tint-blue-fg);
+}
+
+.cp-section-card__icon--purple {
+  background: var(--cp-c-tint-purple-bg);
+  color: var(--cp-c-tint-purple-fg);
+}
+
+.cp-section-card__icon--green {
+  background: var(--cp-c-tint-green-bg);
+  color: var(--cp-c-tint-green-fg);
+}
+
+.cp-section-card__icon--amber {
+  background: var(--cp-c-tint-amber-bg);
+  color: var(--cp-c-tint-amber-fg);
+}
+
+.cp-section-card__icon--red {
+  background: var(--cp-c-tint-red-bg);
+  color: var(--cp-c-tint-red-fg);
+}
+
+.cp-section-card__icon--slate {
+  background: var(--cp-c-tint-slate-bg);
+  color: var(--cp-c-tint-slate-fg);
+}
+
+.cp-section-card__icon--cyan {
+  background: var(--cp-c-tint-cyan-bg);
+  color: var(--cp-c-tint-cyan-fg);
+}
+
+.cp-section-card__icon--pink {
+  background: var(--cp-c-tint-pink-bg);
+  color: var(--cp-c-tint-pink-fg);
+}
+
+.cp-section-card__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--cp-c-text-1);
+  line-height: 1;
+}
+
+.cp-section-card__desc {
+  font-size: 12.5px;
+  color: var(--cp-c-text-2);
+  line-height: 1.45;
+}
+
+/* ── Responsive ──────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .cp-section-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/theme/styles/overrides/sidebar.css

@@ -0,0 +1,144 @@
+/**
+ * Rspress sidebar overrides — group headers, item sizing, active stripe,
+ * mobile drawer transitions.
+ *
+ * Cascade layer: `ciderpress.overrides` (see styles/layers.css).
+ *
+ * `!important` inventory (task 8.2):
+ *   - Before: 0
+ *   - After:  0
+ *
+ * No `!important` declarations are needed here — `html .rp-sidebar-*`
+ * specificity combined with the `ciderpress.overrides` layer wins against
+ * Rspress's sidebar defaults.
+ */
+
+@layer ciderpress.overrides {
+  /* ── Transitions (960px–1439px) ──────────────────────────── */
+
+  @media (min-width: 960px) and (max-width: 1439px) {
+    .rspress-sidebar {
+      transition:
+        width 0.3s ease,
+        min-width 0.3s ease;
+    }
+  }
+
+  /* ── Group section headers — mono ALL CAPS (mockup pattern) ──── */
+  html .rp-sidebar-section-header {
+    font-family: var(--cp-font-family-mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--cp-c-text-3);
+    font-weight: 500;
+  }
+
+  html .rp-sidebar-section-header__left {
+    color: var(--cp-c-text-3);
+  }
+
+  /* Top-level group anchors (clickable section headers) styled as eyebrow labels */
+  html .rp-sidebar-item.rp-sidebar-group[data-depth='0'] {
+    font-family: var(--cp-font-family-mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--cp-c-text-3);
+    font-weight: 500;
+    margin-top: 12px;
+  }
+
+  html .rp-sidebar-item.rp-sidebar-group[data-depth='0']:hover {
+    color: var(--cp-c-text-1);
+  }
+
+  /* Sub-items — 13px regular Geist, denser than Rspress default */
+  html .rp-sidebar-item.rp-sidebar-item--group-item {
+    font-size: 13px;
+  }
+
+  /* Tighten sidebar horizontal padding — Rspress's defaults leave too
+     much room on the left/right inside the rail, which makes the
+     content feel narrow. */
+  html .rp-doc-layout__sidebar,
+  html .rspress-sidebar {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-bottom: 16px;
+  }
+
+  html .rp-sidebar-body {
+    padding-bottom: 16px;
+  }
+
+  /* ── Active item — accent stripe on the left edge ─────────── */
+  /* Pin `font-weight` to the base value. Rspress's default jumps to 600
+     on `--active`, which widens the text and reflows the sidebar layout
+     every time the active page changes. The stripe + bg + brand color
+     already mark the row; the bold is redundant. */
+  html .rp-sidebar-item--active {
+    color: var(--cp-c-text-1);
+    background: var(--cp-c-bg-soft);
+    font-weight: 400;
+    position: relative;
+  }
+
+  html .rp-sidebar-item--active::before {
+    content: '';
+    position: absolute;
+    left: -8px;
+    top: 7px;
+    bottom: 7px;
+    width: 2px;
+    background: var(--cp-c-brand-1);
+    border-radius: 0 2px 2px 0;
+  }
+
+  /* TODO: assess adding this override back in a future pass */
+  /* ── Mobile drawer at 900px (Rspress default: 768px) ────── */
+
+  /*
+ * Rspress collapses the sidebar into a slide-out drawer at ≤768px.
+ * Extend that behavior up to ≤900px so narrower viewports get the
+ * drawer sooner. The existing ≤768px rules still apply below.
+ *
+
+@media (min-width: 769px) and (max-width: 900px) {
+  .rp-doc-layout__sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--rp-sidebar-width);
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+    transition:
+      opacity 0.25s,
+      transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+    z-index: var(--rp-z-index-sidebar);
+    height: 100vh;
+    overflow: auto scroll;
+    padding-bottom: 100px;
+  }
+
+  .rp-doc-layout__sidebar--open {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .rp-sidebar-menu__mask {
+    display: block;
+  }
+
+  .rp-nav-hamburger__sm {
+    display: block;
+  }
+
+  .rp-nav-menu {
+    display: none;
+  }
+}
+
+*/
+}

package/dist/theme/styles/overrides/tokens.css

@@ -0,0 +1,288 @@
+/**
+ * ciderpress structural tokens (--cp-* prefix).
+ *
+ * Color definitions live in theme files (styles/themes/*.css).
+ * This file holds non-color structural tokens only: spacing, radii, shadows,
+ * motion, z-index, line-heights, letter-spacings, opacities, sizes,
+ * breakpoints, blurs, and font-families.
+ *
+ * Naming follows `TOKEN_TO_CSS_VAR` in `@ciderpress/theme` (packages/theme/src/tokens.ts):
+ *   --cp-s-{N}         spacing scale (N = px value on a 2-px grid)
+ *   --cp-radius-*      border-radius
+ *   --cp-shadow-*      box-shadow recipes
+ *   --cp-duration-*    transition durations
+ *   --cp-ease-*        transition easings
+ *   --cp-z-*           z-index
+ *   --cp-lh-*          line-height
+ *   --cp-letter-*      letter-spacing
+ *   --cp-opacity-*     opacity
+ *   --cp-size-*        component sizes (non-spacing)
+ *   --cp-bp-*          breakpoint widths
+ *   --cp-blur-*        backdrop blur
+ *   --cp-ff-*          font-family
+ *   --cp-fw-*          font-weight
+ *   --cp-fs-*          font-size
+ *
+ * Values are mirrored from `.snapshots/baseline/token-audit.txt` so the
+ * defaults match the implicit values previously inlined across component CSS.
+ * DO NOT change a default here without re-running the audit — visual output
+ * must remain stable.
+ *
+ * Cascade layer: `ciderpress.tokens` (see styles/layers.css).
+ */
+
+@layer ciderpress.tokens {
+  :root {
+    /* ── Font families ──────────────────────────────────────── */
+    /**
+   * Default body / UI font — Geist Mono. Whole site reads as a
+   * terminal-style mono surface.
+   */
+    --cp-font-family-base: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+    /**
+   * Optional sans fallback — exposed for cases that explicitly want
+   * proportional Geist (e.g. very long prose passages).
+   */
+    --cp-font-family-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+    /**
+   * Decorative pixel-art font — opt-in for brand marks, headlines, etc.
+   * Apply with `font-family: var(--cp-font-family-pixel)` on the target.
+   */
+    --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
+    /**
+   * Monospace alias — same as base. Kept for callsites that explicitly
+   * tag "this should be monospace" (code, shortcuts, eyebrow labels) so
+   * the intent stays readable in the stylesheet.
+   */
+    --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+    /* Canonical aliases matching TOKEN_TO_CSS_VAR (fonts.family.sans/mono). */
+    --cp-ff-sans: var(--cp-font-family-sans);
+    --cp-ff-mono: var(--cp-font-family-mono);
+
+    /* ── Font weights ───────────────────────────────────────── */
+    --cp-fw-regular: 400;
+    --cp-fw-medium: 500;
+    --cp-fw-semibold: 600;
+    --cp-fw-bold: 700;
+
+    /* ── Font sizes ─────────────────────────────────────────── */
+    --cp-fs-body: 16px;
+    --cp-fs-btn: 14px;
+    --cp-fs-bullet: 14px;
+    --cp-fs-code: 13px;
+    --cp-fs-eyebrow: 11px;
+    --cp-fs-tagline: 18px;
+    --cp-fs-hero-title: clamp(40px, 6.5vw, 76px);
+    --cp-fs-split-title: clamp(28px, 4vw, 40px);
+    --cp-fs-feature-title: 18px;
+    --cp-fs-feature-desc: 16px;
+    --cp-fs-feature-link: 12px;
+    --cp-fs-section-title: 14px;
+    --cp-fs-section-desc: 12.5px;
+    --cp-fs-badge: 11px;
+    --cp-fs-tooltip: 13px;
+    --cp-fs-tooltip-headline: 13px;
+    --cp-fs-tooltip-cta: 12px;
+    --cp-fs-check: 11px;
+    --cp-fs-field-name: 14px;
+    --cp-fs-field-type: 11px;
+    --cp-fs-field-badge: 11px;
+    --cp-fs-field-default: 12px;
+    --cp-fs-field-default-code: 11px;
+    --cp-fs-field-body: 14px;
+    --cp-fs-field-group-title: 14px;
+    --cp-fs-field-trigger: 12px;
+    --cp-fs-prompt-desc: 14px;
+    --cp-fs-prompt-feedback: 12px;
+    --cp-fs-prompt-btn: 12px;
+    --cp-fs-prompt-menu-item: 13px;
+    --cp-fs-prompt-menu-desc: 11px;
+    --cp-fs-color-name: 12px;
+    --cp-fs-color-value: 11px;
+    --cp-fs-window-title: 12px;
+    --cp-fs-window-tab: 12px;
+    --cp-fs-window-url: 11px;
+    --cp-fs-term-body: 13px;
+    --cp-fs-demo-title: 11px;
+    --cp-fs-demo-body: 13px;
+    --cp-fs-ask-ai: 13px;
+    --cp-fs-ask-ai-mark: 10px;
+    --cp-fs-ask-ai-shortcut: 10px;
+    --cp-fs-sidebar-link: 14px;
+
+    /* ── Spacing scale (2-px grid) ──────────────────────────── */
+    --cp-s-1: 1px;
+    --cp-s-2: 2px;
+    --cp-s-3: 3px;
+    --cp-s-4: 4px;
+    --cp-s-5: 5px;
+    --cp-s-6: 6px;
+    --cp-s-8: 8px;
+    --cp-s-10: 10px;
+    --cp-s-12: 12px;
+    --cp-s-14: 14px;
+    --cp-s-16: 16px;
+    --cp-s-18: 18px;
+    --cp-s-20: 20px;
+    --cp-s-24: 24px;
+    --cp-s-28: 28px;
+    --cp-s-32: 32px;
+    --cp-s-40: 40px;
+    --cp-s-48: 48px;
+    --cp-s-56: 56px;
+    --cp-s-64: 64px;
+    --cp-s-72: 72px;
+    --cp-s-96: 96px;
+
+    /* ── Radii ──────────────────────────────────────────────── */
+    --cp-radius-xs: 2px;
+    --cp-radius-xs-sm: 3px;
+    --cp-radius-sm: 4px;
+    --cp-radius-md-sm: 6px;
+    --cp-radius-md: 8px;
+    --cp-radius-lg: 10px;
+    --cp-radius-md-lg: 12px;
+    --cp-radius-pill: 9999px;
+
+    /* Legacy radius aliases — preserved for back-compat with existing callsites. */
+    --cp-radius-card: 6px;
+    --cp-radius-frame: 10px;
+
+    /* Override Rspress radius defaults to favor sharper corners. */
+    --rp-radius: 0.25rem;
+    --rp-radius-small: 0.125rem;
+    --rp-radius-large: 0.5rem;
+
+    /* ── Shadows ────────────────────────────────────────────── */
+    /**
+   * Card hover lift — uses the purple-glow tint (rgba(167,139,250,.08)).
+   * The tint var is supplied by the theme palette files.
+   */
+    --cp-shadow-card-hover: 0 2px 12px var(--cp-c-tint-purple-glow);
+    --cp-shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.12);
+    --cp-shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.08);
+    /**
+   * Hero demo — 3-layer composite: hairline outline, large drop shadow,
+   * and a soft brand-soft glow.
+   */
+    --cp-shadow-hero-demo:
+      0 0 0 1px rgba(0, 0, 0, 0.5), 0 24px 48px -12px rgba(0, 0, 0, 0.6),
+      0 0 80px var(--cp-c-brand-soft);
+    /**
+   * Ask-AI floating button — 2-layer composite: large drop shadow plus
+   * focus halo ring.
+   */
+    --cp-shadow-ask-ai: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(0, 0, 0, 0.5);
+
+    /* ── Motion ─────────────────────────────────────────────── */
+    --cp-duration-fast: 0.15s;
+    --cp-duration-base: 0.2s;
+    --cp-ease-base: ease;
+
+    /* ── Z-index ────────────────────────────────────────────── */
+    --cp-z-dropdown: 50;
+    --cp-z-floating: 60;
+    --cp-z-tooltip: 100;
+
+    /* ── Line-heights ───────────────────────────────────────── */
+    --cp-lh-display: 1;
+    --cp-lh-tight: 1.4;
+    --cp-lh-tighter: 1.3;
+    --cp-lh-snug: 1.45;
+    --cp-lh-base: 1.5;
+    --cp-lh-relaxed: 1.6;
+    --cp-lh-demo: 1.65;
+    --cp-lh-code: 1.7;
+    --cp-lh-sidebar: 24px;
+
+    /* ── Letter-spacings ────────────────────────────────────── */
+    --cp-letter-wide: 0.02em;
+    --cp-letter-eyebrow: 0.1em;
+    --cp-letter-display: -0.025em;
+    --cp-letter-hero: -0.04em;
+
+    /* ── Opacities ──────────────────────────────────────────── */
+    --cp-opacity-muted: 0.5;
+    --cp-opacity-deprecated: 0.6;
+    --cp-opacity-hover: 0.8;
+
+    /* ── Sizes (component sizes that aren't pure spacing) ──── */
+    --cp-size-titlebar: 36px;
+    --cp-size-window-dot: 10px;
+    --cp-size-window-tab-dot: 6px;
+    --cp-size-browser-tab-max: 200px;
+    --cp-size-browser-icon: 14px;
+    --cp-size-browser-urlbar: 28px;
+    --cp-size-icon-box: 36px;
+    --cp-size-icon-box-sm: 28px;
+    --cp-size-icon-svg: 18px;
+    --cp-size-icon-svg-sm: 16px;
+    --cp-size-icon-sm: 16px;
+    --cp-size-content-max: 1152px;
+    --cp-size-focus-ring: 2px;
+    --cp-size-focus-ring-offset: 2px;
+    --cp-size-tooltip-max: 320px;
+    --cp-size-swatch: 24px;
+    --cp-size-demo-max: 920px;
+    --cp-size-split-max: 1200px;
+    --cp-size-hero-grid: 24px;
+    --cp-size-hero-max: 1100px;
+    --cp-size-tagline-max: 640px;
+    --cp-size-prompt-icon: 20px;
+    --cp-size-prompt-btn: 30px;
+    --cp-size-menu-min: 220px;
+    --cp-size-prompt-menu-icon: 18px;
+    --cp-size-check: 18px;
+    --cp-size-chevron: 14px;
+    --cp-size-ask-ai-icon: 18px;
+    --cp-size-sidebar-circle: 36px;
+    --cp-size-scrollbar: 6px;
+
+    /* ── Breakpoints ────────────────────────────────────────── */
+    --cp-bp-sm: 768px;
+    --cp-bp-md: 720px;
+    --cp-bp-md-lg: 880px;
+    --cp-bp-content: 1184px;
+
+    /* ── Backdrop blur ──────────────────────────────────────── */
+    --cp-blur-base: 8px;
+
+    /* ── Gradients ──────────────────────────────────────────── */
+    /**
+   * Brand gradient — used by the ask-ai icon. 135deg sweep from brand-1
+   * through brand-3.
+   */
+    --cp-gradient-brand: linear-gradient(135deg, var(--cp-c-brand-1), var(--cp-c-brand-3));
+    /**
+   * Hero title gradient — 3-stop sweep from brand-1 through hero-cyan to
+   * hero-purple.
+   */
+    --cp-gradient-hero-title: linear-gradient(
+      120deg,
+      var(--cp-c-brand-1) 0%,
+      var(--cp-c-gradient-hero-cyan) 50%,
+      var(--cp-c-gradient-hero-purple) 100%
+    );
+
+    /* ── Legacy layout aliases ──────────────────────────────── */
+    --cp-layout-max-width: 1680px;
+    --cp-landing-max-width: 1200px;
+    --cp-frame-gutter: 12px;
+    --cp-announce-h: 36px;
+  }
+
+  /* ── Typography defaults — match the mockup (14px / 1.5 / Geist) ── */
+  html body,
+  html .rp-doc,
+  html .rspress-doc,
+  html .rp-home-hero,
+  html .rp-nav {
+    font-family: var(--cp-font-family-base);
+  }
+
+  html body {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+}

package/dist/theme/styles/overrides/vscode.css

@@ -0,0 +1,88 @@
+/**
+ * VS Code preview mode overrides.
+ *
+ * Applied when html[data-ciderpress-env="vscode"] is set — injected synchronously
+ * by the inline head script before first paint.
+ */
+
+/* Hide left sidebar and its placeholder */
+html[data-ciderpress-env='vscode'] .rp-doc-layout__sidebar,
+html[data-ciderpress-env='vscode'] .rp-doc-layout__sidebar-placeholder {
+  display: none;
+}
+
+/* Hide right TOC and its placeholder */
+html[data-ciderpress-env='vscode'] .rp-doc-layout__outline,
+html[data-ciderpress-env='vscode'] .rp-doc-layout__outline-placeholder {
+  display: none;
+}
+
+/* Center content at 1200px max */
+html[data-ciderpress-env='vscode'] .rp-doc-layout__doc {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* ── Hide Copy Markdown in VS Code — replaced by Edit button ── */
+html[data-ciderpress-env='vscode'] .rp-llms-copy-button {
+  display: none;
+}
+
+/* ── Edit source button (inside .rp-llms-container) ────── */
+/* Matches Rspress .rp-llms-button styles exactly */
+.cp-edit-source-btn {
+  border: 1px solid var(--rp-c-divider-light);
+  background: var(--rp-c-bg);
+  height: 36px;
+  color: var(--rp-c-text-2);
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--rp-font-family-base, system-ui, sans-serif);
+  line-height: normal;
+  transition:
+    background 0.2s,
+    border-color 0.2s,
+    color 0.2s,
+    box-shadow 0.2s,
+    transform 0.1s;
+  display: inline-flex;
+}
+
+.cp-edit-source-btn:hover {
+  background: var(--rp-c-bg-soft);
+  border-color: var(--rp-c-divider);
+  color: var(--rp-c-text-1);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 4%);
+}
+
+.cp-edit-source-btn:active {
+  background: var(--rp-c-bg-soft);
+  box-shadow: none;
+}
+
+.cp-edit-source-btn svg {
+  flex-shrink: 0;
+}
+
+/* Hide nav items, social links, hamburger, mobile nav, appearance toggle */
+html[data-ciderpress-env='vscode'] .rp-nav-menu__item,
+html[data-ciderpress-env='vscode'] .rp-social-links,
+html[data-ciderpress-env='vscode'] .rp-nav-hamburger,
+html[data-ciderpress-env='vscode'] .rp-nav-screen,
+html[data-ciderpress-env='vscode'] .rp-nav-screen-menu,
+html[data-ciderpress-env='vscode'] .rp-local-nav,
+html[data-ciderpress-env='vscode'] .rp-switch-appearance,
+html[data-ciderpress-env='vscode'] .rp-nav-screen-appearance,
+html[data-ciderpress-env='vscode'] .rp-doc-layout__menu,
+html[data-ciderpress-env='vscode'] .cp-site-footer {
+  display: none;
+}