@ciderpress/ui 1.0.0-rc.10 → 1.0.0-rc.11

package/dist/node.mjs

@@ -12,6 +12,7 @@ import path_0 from "path";
 import { Project, SyntaxKind as external_ts_morph_SyntaxKind } from "ts-morph";
 import node_process from "node:process";
 import katex from "katex";
+import { unfold } from "massaman/array";
 import react from "react";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
@@ -17358,7 +17359,7 @@ function buildLabelCss(label) {
   margin-top: -14px;
   text-align: left;
   color: var(--cp-c-text-2, #888);
-  font-family: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--cp-ff-display, 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif);
   font-size: 28px;
   font-weight: 400;
   line-height: 1;
@@ -17451,6 +17452,408 @@ function mermaidPlugin(options = {}) {
         builderConfig: remarkMermaid.builderConfig
     };
 }
+const SAFE_PROTOCOLS = new Set([
+    'http:',
+    'https:',
+    'mailto:',
+    'tel:'
+]);
+const PROTOCOL_PATTERN = /^[a-z][a-z0-9+.-]*:/i;
+const FORBIDDEN_CHARS_PATTERN = /[\u0000-\u0020\u007F]/u;
+function safeUrl(href) {
+    const trimmed = href.trim();
+    if (FORBIDDEN_CHARS_PATTERN.test(trimmed)) return null;
+    return match_match(trimmed).with('', ()=>null).with(P.string.startsWith('#'), ()=>trimmed).with(P.string.startsWith('/'), ()=>trimmed).with(P.string.startsWith('./'), ()=>trimmed).with(P.string.startsWith('../'), ()=>trimmed).otherwise(()=>{
+        const match_ = trimmed.match(PROTOCOL_PATTERN);
+        if (!match_) return trimmed;
+        const scheme = match_[0].toLowerCase();
+        if (SAFE_PROTOCOLS.has(scheme)) return trimmed;
+        return null;
+    });
+}
+const ALLOWED_TAGS = new Set([
+    'b',
+    'strong',
+    'i',
+    'em',
+    'code',
+    'kbd',
+    'mark',
+    'sup',
+    'sub',
+    'span',
+    'small',
+    'u',
+    's',
+    'del',
+    'ins'
+]);
+const STRIPPED_TAGS = new Set([
+    "script",
+    'style',
+    'iframe',
+    'object',
+    'embed',
+    'template',
+    "noscript"
+]);
+const ACCENT_CLASS = 'cp-accent';
+const MARK_CLASS = 'cp-mark';
+const TOKEN_PATTERN = /(?:\\([*=`[\]<\\]))|(?:`([^`]+)`)|(?:\*\*([\s\S]+?)\*\*)|(?:==([\s\S]+?)==)|(?:(?<!\*)\*(?=[^\s*])([^*\n]+?)(?<=[^\s*])\*(?!\*))|(?:\[([^\]]*)\]\(((?:[^()\s]|\([^()\s]*\))+)\))|(?:<(\/?)\s*([a-zA-Z][a-zA-Z0-9-]*)(?=[\s/>])((?:"[^"]*"|'[^']*'|[^>"'])*)>)/;
+const ATTR_PATTERN = /([a-zA-Z-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
+const CLOSE_TAG_BOUNDARY = /[\s>]/;
+function parseRichText(text) {
+    if ('string' != typeof text || 0 === text.length) return [];
+    return parseInline({
+        input: text,
+        inLink: false
+    });
+}
+function toPlainText(text) {
+    return flattenNodes(parseRichText(text));
+}
+function parseInline({ input, inLink }) {
+    return unfold((remaining)=>{
+        if (0 === remaining.length) return false;
+        const found = TOKEN_PATTERN.exec(remaining);
+        if (null === found) return [
+            [
+                {
+                    kind: 'text',
+                    value: remaining
+                }
+            ],
+            ''
+        ];
+        const lead = remaining.slice(0, found.index);
+        const after = remaining.slice(found.index + found[0].length);
+        const step = consumeToken({
+            found,
+            after,
+            inLink
+        });
+        return [
+            [
+                ...textNodes(lead),
+                ...step.nodes
+            ],
+            step.rest
+        ];
+    }, input).flat();
+}
+function textNodes(lead) {
+    if (0 === lead.length) return [];
+    return [
+        {
+            kind: 'text',
+            value: lead
+        }
+    ];
+}
+function consumeToken({ found, after, inLink }) {
+    const [, escaped, code, bold, highlight, italic, linkText, linkHref, closing, tagName, rawAttrs] = found;
+    if (void 0 !== escaped) return {
+        nodes: [
+            {
+                kind: 'text',
+                value: escaped
+            }
+        ],
+        rest: after
+    };
+    if (void 0 !== code) return {
+        nodes: [
+            codeNode(code)
+        ],
+        rest: after
+    };
+    if (void 0 !== bold) return {
+        nodes: [
+            accentNode(parseInline({
+                input: bold,
+                inLink
+            }))
+        ],
+        rest: after
+    };
+    if (void 0 !== highlight) return {
+        nodes: [
+            markNode(parseInline({
+                input: highlight,
+                inLink
+            }))
+        ],
+        rest: after
+    };
+    if (void 0 !== italic) return {
+        nodes: [
+            rich_text_parse_element({
+                tag: 'em',
+                children: parseInline({
+                    input: italic,
+                    inLink
+                })
+            })
+        ],
+        rest: after
+    };
+    if (void 0 !== linkHref) return {
+        nodes: linkNodes({
+            text: linkText ?? '',
+            href: linkHref,
+            inLink
+        }),
+        rest: after
+    };
+    if (void 0 !== tagName) {
+        const tail = (rawAttrs ?? '').trimEnd();
+        const isSelfClosing = tail.endsWith('/');
+        return consumeTag({
+            tagName: tagName.toLowerCase(),
+            attrs: match_match(isSelfClosing).with(true, ()=>tail.slice(0, -1)).otherwise(()=>tail),
+            isClosing: '/' === closing,
+            isSelfClosing,
+            after,
+            inLink
+        });
+    }
+    return {
+        nodes: [
+            {
+                kind: 'text',
+                value: found[0]
+            }
+        ],
+        rest: after
+    };
+}
+function consumeTag(params) {
+    const { tagName, attrs, isClosing, isSelfClosing, after, inLink } = params;
+    if (isClosing) return {
+        nodes: [],
+        rest: after
+    };
+    if ('br' === tagName) return {
+        nodes: [
+            {
+                kind: 'break'
+            }
+        ],
+        rest: after
+    };
+    if (isSelfClosing) return {
+        nodes: selfClosingNodes({
+            tagName,
+            attrs
+        }),
+        rest: after
+    };
+    const close = findClosingTag({
+        text: after,
+        tagName
+    });
+    if (null === close) {
+        if (STRIPPED_TAGS.has(tagName)) return {
+            nodes: [],
+            rest: ''
+        };
+        return {
+            nodes: [],
+            rest: after
+        };
+    }
+    const inner = after.slice(0, close.start);
+    const rest = after.slice(close.end);
+    if (STRIPPED_TAGS.has(tagName)) return {
+        nodes: [],
+        rest
+    };
+    if ('a' === tagName) return {
+        nodes: anchorNodes({
+            attrs,
+            inner,
+            inLink
+        }),
+        rest
+    };
+    if (ALLOWED_TAGS.has(tagName)) return {
+        nodes: [
+            taggedElement({
+                tag: tagName,
+                attrs,
+                children: parseInline({
+                    input: inner,
+                    inLink
+                })
+            })
+        ],
+        rest
+    };
+    return {
+        nodes: parseInline({
+            input: inner,
+            inLink
+        }),
+        rest
+    };
+}
+function selfClosingNodes({ tagName, attrs }) {
+    if (!ALLOWED_TAGS.has(tagName)) return [];
+    return [
+        taggedElement({
+            tag: tagName,
+            attrs,
+            children: []
+        })
+    ];
+}
+function findClosingTag({ text, tagName }) {
+    return scanForClose({
+        lower: text.toLowerCase(),
+        tagName,
+        from: 0
+    });
+}
+function scanForClose({ lower, tagName, from }) {
+    const needle = `</${tagName}`;
+    const candidates = unfold((offset)=>{
+        const at = lower.indexOf(needle, offset);
+        if (-1 === at) return false;
+        return [
+            at,
+            at + needle.length
+        ];
+    }, from);
+    const start = candidates.find((at)=>CLOSE_TAG_BOUNDARY.test(lower.charAt(at + needle.length)));
+    if (void 0 === start) return null;
+    const gt = lower.indexOf('>', start);
+    if (-1 === gt) return null;
+    return {
+        start,
+        end: gt + 1
+    };
+}
+function parseAttrs(attrs) {
+    const entries = [
+        ...attrs.matchAll(ATTR_PATTERN)
+    ];
+    return entries.reduce((acc, entry)=>{
+        const name = entry[1].toLowerCase();
+        const value = entry[2] ?? entry[3] ?? '';
+        return match_match(name).with('class', ()=>({
+                ...acc,
+                className: value
+            })).with('classname', ()=>({
+                ...acc,
+                className: value
+            })).with('title', ()=>({
+                ...acc,
+                title: value
+            })).with('href', ()=>({
+                ...acc,
+                href: value
+            })).otherwise(()=>acc);
+    }, {});
+}
+function taggedElement({ tag, attrs, children }) {
+    const parsed = parseAttrs(attrs);
+    return {
+        kind: 'element',
+        tag,
+        className: parsed.className,
+        title: parsed.title,
+        children
+    };
+}
+function anchorNodes({ attrs, inner, inLink }) {
+    const { href } = parseAttrs(attrs);
+    if (void 0 === href || inLink) return parseInline({
+        input: inner,
+        inLink
+    });
+    const safe = safeUrl(href);
+    if (null === safe) return parseInline({
+        input: inner,
+        inLink
+    });
+    const children = parseInline({
+        input: inner,
+        inLink: true
+    });
+    return linkOrChildren({
+        href: safe,
+        children
+    });
+}
+function linkNodes({ text, href, inLink }) {
+    const safe = safeUrl(href);
+    if (null === safe || inLink) return parseInline({
+        input: text,
+        inLink
+    });
+    return linkOrChildren({
+        href: safe,
+        children: parseInline({
+            input: text,
+            inLink: true
+        })
+    });
+}
+function linkOrChildren({ href, children }) {
+    if (0 === children.length) return [];
+    return [
+        {
+            kind: 'link',
+            href,
+            children
+        }
+    ];
+}
+function codeNode(value) {
+    return {
+        kind: 'code',
+        value
+    };
+}
+function accentNode(children) {
+    return {
+        kind: 'element',
+        tag: 'strong',
+        className: ACCENT_CLASS,
+        children
+    };
+}
+function markNode(children) {
+    return {
+        kind: 'element',
+        tag: 'mark',
+        className: MARK_CLASS,
+        children
+    };
+}
+function rich_text_parse_element({ tag, children }) {
+    return {
+        kind: 'element',
+        tag,
+        children
+    };
+}
+function flattenNodes(nodes) {
+    return nodes.map(flattenNode).join('');
+}
+function flattenNode(node) {
+    return match_match(node).with({
+        kind: 'text'
+    }, (n)=>n.value).with({
+        kind: 'code'
+    }, (n)=>n.value).with({
+        kind: 'break'
+    }, ()=>' ').with({
+        kind: 'link'
+    }, (n)=>flattenNodes(n.children)).with({
+        kind: 'element'
+    }, (n)=>flattenNodes(n.children)).exhaustive();
+}
 const DEFAULT_LOADER_MIN_MS = 150;
 const DEFAULT_LOADER_MAX_MS = 5000;
 const VSCODE_SET_JS = "document.documentElement.dataset.ciderpressEnv='vscode'";
@@ -17546,8 +17949,8 @@ function createRspressConfig(options) {
             cleanUrls: true
         },
         llms: true,
-        title: config.title ?? 'ciderpress',
-        description: config.description ?? 'Documentation',
+        title: toPlainText(config.title ?? 'ciderpress'),
+        description: toPlainText(config.description ?? 'Documentation'),
         icon: resolveFaviconPath(favicon),
         logo: match_match(logoRaw).with(P.string, (l)=>l).otherwise(()=>''),
         logoText: '',
@@ -17860,20 +18263,10 @@ function buildSiteBlock(params) {
     };
 }
 function resolveHomeConfig(home) {
-    const fallbackShowcase = {
-        columns: 2
-    };
     if (void 0 === home) return {
-        hero: {},
-        showcase: fallbackShowcase
-    };
-    return {
-        ...home,
-        showcase: {
-            columns: 2,
-            ...home.showcase
-        }
+        hero: {}
     };
+    return home;
 }
 function buildHeadScriptBody(options) {
     const minimalRegistry = options.registry.map((entry)=>({

package/dist/theme/components/home/cta.css

@@ -9,6 +9,21 @@
   padding: 0 32px;
 }
 
+.cp-cta__eyebrow {
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--cp-letter-eyebrow);
+  /* Same shade pair as `.cp-accent` — `--cp-c-brand-1` is a fill colour and
+     misses 4.5:1 at this size on several themes. See styles/rich-text.css. */
+  color: var(--cp-c-brand-2, var(--cp-c-brand-1));
+  margin-bottom: var(--cp-s-12);
+}
+
+html[data-cp-variant='dark'] .cp-cta__eyebrow {
+  color: var(--cp-c-brand-light, var(--cp-c-brand-1));
+}
+
 .cp-cta__title {
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 600;

package/dist/theme/components/home/cta.tsx

@@ -1,6 +1,7 @@
-import { match } from 'massaman/match'
+import { match, P } from 'massaman/match'
 import type React from 'react'
 
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { RouteLink } from '../../lib/route-link.tsx'
 import { safeUrl } from '../../lib/safe-url.ts'
 import type { HeroAction } from './hero'
@@ -8,6 +9,10 @@ import type { HeroAction } from './hero'
 import './cta.css'
 
 export interface CTAProps {
+  /**
+   * Small uppercase kicker rendered above the headline.
+   */
+  readonly eyebrow?: string
   /**
    * Headline.
    */
@@ -30,12 +35,15 @@ export interface CTAProps {
  * @returns React element.
  */
 export function CTA(props: CTAProps): React.ReactElement {
-  const { title, subtitle, actions } = props
+  const { eyebrow, title, subtitle, actions } = props
   const list = actions ?? []
 
   return (
     <section className="cp-cta">
       <div className="cp-cta__inner">
+        {match(eyebrow)
+          .with(P.string, (e) => <div className="cp-cta__eyebrow">{renderRichText(e)}</div>)
+          .otherwise(() => null)}
         <h2 className="cp-cta__title">{title}</h2>
         {match(subtitle)
           .with(undefined, () => null)

package/dist/theme/components/home/feature-card.css

@@ -18,7 +18,7 @@
 }
 
 .cp-feature-card__title {
-  font-family: 'Geist Pixel Square', var(--rp-font-family-base, sans-serif);
+  font-family: var(--cp-ff-display);
   font-size: var(--cp-fs-feature-title);
   font-weight: var(--cp-fw-bold);
   color: var(--rp-c-text-1, var(--cp-c-text-1));

package/dist/theme/components/home/feature-card.tsx

@@ -2,6 +2,7 @@ import { match, P } from 'massaman/match'
 import type React from 'react'
 
 import './feature-card.css'
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { Card } from '../shared/card'
 import { CardIcon } from '../shared/card-icon'
 import type { CardIconInput } from '../shared/resolve-card-icon'
@@ -64,14 +65,14 @@ export function FeatureCard({
               className={clampClass('cp-feature-card__title', titleLines)}
               style={clampStyle(titleLines)}
             >
-              {title}
+              {renderRichText(title)}
             </span>
           </div>
           <span
             className={clampClass('cp-feature-card__desc', descriptionLines)}
             style={clampStyle(descriptionLines)}
           >
-            {description}
+            {renderRichText(description)}
           </span>
           {linkTail}
         </Card>

package/dist/theme/components/home/feature.tsx

@@ -1,16 +1,22 @@
-import type { HomeFeaturesConfig } from '@ciderpress/config'
-import { useFrontmatter } from '@rspress/core/runtime'
+import type { TruncateConfig } from '@ciderpress/config'
 import { match, P } from 'massaman/match'
 import type React from 'react'
 
-import { useCiderpress } from '../../hooks/use-ciderpress'
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { FeatureCard } from './feature-card'
 import type { FeatureItem } from './feature-card'
 
 interface FrontmatterFeaturesHeading {
   readonly label?: string
   readonly title?: string
-  readonly subtitle?: string
+  readonly body?: string
+}
+
+interface HomeFeatureProps {
+  readonly items?: readonly FeatureItem[]
+  readonly heading?: FrontmatterFeaturesHeading
+  readonly columns?: 1 | 2 | 3 | 4
+  readonly truncate?: TruncateConfig
 }
 
 const DEFAULT_HEADING_EYEBROW = 'Features'
@@ -19,23 +25,15 @@ const DEFAULT_HEADING_SUBTITLE =
   "Everything you need, nothing you don't. Configured in TypeScript, validated at boot."
 
 /**
- * Custom HomeFeature override for ciderpress.
- * Uses useFrontmatter() hook to read features and renders with FeatureCard/FeatureGrid styling.
+ * Features grid block. Renders the supplied feature cards under a heading,
+ * or nothing when no cards are present.
  *
- * @returns React element with feature grid or null
+ * @param props - Resolved feature cards, optional heading, and truncation limits.
+ * @returns React element with the feature grid, or null.
  */
-export function HomeFeature(): React.ReactElement | null {
-  const { frontmatter } = useFrontmatter()
-  const { home } = useCiderpress()
-  const gridConfig = home && home.features
-
-  // Rspress types frontmatter as its own FrontMatterMeta shape which does not
-  // include ciderpress-specific `features`. The double cast is necessary because
-  // no shared Zod schema exists for frontmatter validation at runtime.
-  const fm = frontmatter as Record<string, unknown>
-  const features = fm.features as readonly FeatureItem[] | undefined
-  const heading = fm.featuresHeading as FrontmatterFeaturesHeading | undefined
-  // Frontmatter is unvalidated user content — a `featuresHeading.title: {}`
+export function HomeFeature(props: HomeFeatureProps): React.ReactElement | null {
+  const { items, heading, columns, truncate } = props
+  // Frontmatter is unvalidated user content — a `heading.title: {}`
   // would otherwise render as `[object Object]` in the H2. Treat any
   // non-string value as missing and fall through to the framework default.
   const headingEyebrow = match(heading && heading.label)
@@ -44,22 +42,27 @@ export function HomeFeature(): React.ReactElement | null {
   const headingTitle = match(heading && heading.title)
     .with(P.string, (s) => s)
     .otherwise(() => DEFAULT_HEADING_TITLE)
-  const headingSubtitle = match(heading && heading.subtitle)
+  const headingSubtitle = match(heading && heading.body)
     .with(P.string, (s) => s)
     .otherwise(() => DEFAULT_HEADING_SUBTITLE)
+  // Column count rides on a custom property so the grid keeps its CSS
+  // media queries — a narrow viewport still collapses to one column.
+  const gridStyle = match(columns)
+    .with(P.number, (c) => ({ '--cp-feature-cols': String(c) }) as React.CSSProperties)
+    .otherwise(() => undefined)
 
-  return match(features)
+  return match(items)
     .with(
       P.when((f): f is readonly FeatureItem[] => Array.isArray(f) && f.length > 0),
-      (items) => (
+      (list) => (
         <div className="cp-feature-section">
           <div className="cp-feature-section-head">
-            <div className="cp-feature-section-head__eyebrow">{headingEyebrow}</div>
-            <h2 className="cp-feature-section-head__title">{headingTitle}</h2>
-            <p className="cp-feature-section-head__sub">{headingSubtitle}</p>
+            <div className="cp-feature-section-head__eyebrow">{renderRichText(headingEyebrow)}</div>
+            <h2 className="cp-feature-section-head__title">{renderRichText(headingTitle)}</h2>
+            <p className="cp-feature-section-head__sub">{renderRichText(headingSubtitle)}</p>
           </div>
-          <div className="cp-feature-grid">
-            {items.map((f, i) => renderFeature(f, i, gridConfig))}
+          <div className="cp-feature-grid" style={gridStyle}>
+            {list.map((f, i) => renderFeature(f, i, truncate))}
           </div>
         </div>
       )
@@ -74,16 +77,16 @@ export function HomeFeature(): React.ReactElement | null {
  * @private
  * @param feature - Feature item data
  * @param index - Array index for key generation
- * @param gridConfig - Optional grid config for truncation
+ * @param truncate - Optional line-clamp limits for card text
  * @returns Feature card element
  */
 function renderFeature(
   feature: FeatureItem,
   index: number,
-  gridConfig: HomeFeaturesConfig | undefined
+  truncate: TruncateConfig | undefined
 ): React.ReactElement {
-  const titleLines = gridConfig && gridConfig.truncate && gridConfig.truncate.title
-  const descLines = gridConfig && gridConfig.truncate && gridConfig.truncate.description
+  const titleLines = truncate && truncate.title
+  const descLines = truncate && truncate.description
 
   return (
     <FeatureCard

package/dist/theme/components/home/hero-demo.css

@@ -72,6 +72,17 @@
   padding: 0;
 }
 
+/* Code-form hero demo — the frame owns the chrome, so strip the native
+   Rspress code block's own margin and rounded corners. */
+.cp-hero-demo--code .rp-codeblock {
+  margin: 0;
+  border-radius: 0;
+}
+
+.cp-hero-demo--code .rp-codeblock pre {
+  overflow-x: auto;
+}
+
 .cp-hero-demo__img {
   display: block;
   width: 100%;