@ciderpress/ui 1.0.0-rc.1

package/dist/theme/components/shared/ciderpress-mark.tsx

@@ -0,0 +1,77 @@
+import { match } from 'massaman/match'
+import type React from 'react'
+
+const MARK_FALLBACK_COLOR = '#dc2626'
+const MARK_FALLBACK_SHADOW = '#7f1d1d'
+
+/**
+ * Props accepted by the ciderpress brand mark.
+ */
+export interface CiderpressMarkProps {
+  /** Optional className applied to the root `<svg>` element. */
+  readonly className?: string
+  /** Explicit `width`/`height` — defaults to letting CSS size the SVG. */
+  readonly size?: number | string
+  /**
+   * Accessible label. Defaults to `"ciderpress"`. Pass an empty string to
+   * mark the SVG as decorative (`aria-hidden`).
+   */
+  readonly title?: string
+}
+
+/**
+ * Compact ciderpress brand mark — a rounded-square chip with the
+ * pixel-apple glyph centred inside. The apple body uses
+ * `fill="currentColor"` so it inherits the active theme's brand colour
+ * via `--rp-c-brand`; the body shadow tracks `--cp-c-brand-3` (the
+ * deepest brand shade). Leaf greens and stem browns stay constant.
+ *
+ * Visually mirrors the favicon swapped in by `syncThemeFavicon`, so the
+ * tab mark and the in-page mark stay in lockstep across every theme.
+ *
+ * @param props - Optional className, size, and accessible label.
+ * @returns Inline SVG element.
+ */
+export function CiderpressMark(props: CiderpressMarkProps): React.ReactElement {
+  const decorative = props.title === ''
+  const label = props.title ?? 'ciderpress'
+  const a11yProps = match(decorative)
+    .with(true, () => ({ role: 'presentation' as const, 'aria-hidden': true as const }))
+    .otherwise(() => ({ role: 'img' as const, 'aria-label': label }))
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 64 64"
+      shapeRendering="crispEdges"
+      className={props.className}
+      width={props.size}
+      height={props.size}
+      style={{ color: `var(--rp-c-brand, ${MARK_FALLBACK_COLOR})` }}
+      {...a11yProps}
+    >
+      {!decorative && <title>{label}</title>}
+      <rect width="64" height="64" rx="12" fill="var(--cp-c-bg, #0a0a0a)" />
+      {/* Apple source content lives in (60..250, 40..260). scale(0.25)
+          places a 47.5x55 apple centred in the 64x64 chip. */}
+      <g transform="translate(8.25 4.5) scale(0.25) translate(-60 -40)">
+        <path d="M80,40h10v10h-10v-10zM90,50h30v10h10v10h-30v-10h-10v-10z" fill="#99e550" />
+        <path
+          d="M90,40h30v10h-30v-10zM120,50h10v10h-10v-10zM130,60h10v10h-10v-10z"
+          fill="#6abe30"
+        />
+        <path d="M120,40h20v10h10v20h-10v-10h-10v-10h-10v-10z" fill="#4b692f" />
+        <path d="M160,40h20v10h-10v10h-10v10h-10v-20h10v-10z" fill="#d9a066" />
+        <path d="M150,70h10v20h-10v-20z" fill="#8f563b" />
+        <path
+          d="M90,80h20v10h30v10h30v-10h30v-10h20v10h10v10h10v10h10v90h-10v20h-10v20h-10v10h-10v10h-30v-10h-10v-10h-10v-10h-10v10h-10v10h-10v10h-30v-10h-10v-10h-10v-20h-10v-20h-10v-90h10v-10h10v-10h10v-10zM220,200h10v-30h-10v-10h-10v40h-10v20h-10v20h10v-10h10v-10h10v-20z"
+          fill="currentColor"
+        />
+        <path
+          d="M110,80h30v10h-30v-10zM170,80h30v10h-30v-10zM140,90h30v10h-30v-10zM210,160h10v10h10v30h-10v20h-10v10h-10v10h-10v-20h10v-20h10v-40zM150,230h10v10h10v10h10v10h-50v-10h10v-10h10v-10z"
+          fill={`var(--cp-c-brand-3, ${MARK_FALLBACK_SHADOW})`}
+        />
+      </g>
+    </svg>
+  )
+}

package/dist/theme/components/shared/color.css

@@ -0,0 +1,56 @@
+/**
+ * Color — color swatch with click-to-copy.
+ */
+
+.cp-color {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cp-s-8);
+  padding: var(--cp-s-4) var(--cp-s-10) var(--cp-s-4) var(--cp-s-4);
+  border: 1px solid var(--cp-c-border);
+  border-radius: var(--rp-radius-large);
+  background: var(--cp-c-bg);
+  cursor: pointer;
+  font-family: var(--cp-font-family-base);
+  transition: border-color var(--cp-duration-base);
+}
+
+.cp-color:hover {
+  border-color: var(--cp-c-brand-1);
+}
+
+.cp-color:focus-visible {
+  border-color: var(--cp-c-brand-1);
+  outline: var(--cp-size-focus-ring) solid var(--cp-c-brand-1);
+  outline-offset: var(--cp-size-focus-ring-offset);
+}
+
+.cp-color__swatch {
+  display: block;
+  width: var(--cp-size-swatch);
+  height: var(--cp-size-swatch);
+  border-radius: var(--rp-radius);
+  border: 1px solid var(--cp-c-overlay-faint);
+  flex-shrink: 0;
+}
+
+.cp-color__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+}
+
+.cp-color__name {
+  font-size: var(--cp-fs-color-name);
+  font-weight: 600;
+  color: var(--cp-c-text-1);
+  line-height: var(--cp-lh-tighter);
+}
+
+.cp-color__value {
+  font-size: var(--cp-fs-color-value);
+  font-family: var(--cp-font-family-mono);
+  color: var(--cp-c-text-2);
+  line-height: var(--cp-lh-tighter);
+}

package/dist/theme/components/shared/color.stories.tsx

@@ -0,0 +1,47 @@
+import type { Story } from '@ladle/react'
+
+import { Color } from './color.tsx'
+
+const meta = {
+  title: 'Data Display / Color Swatch',
+}
+
+export default meta
+
+/**
+ * Single swatch — click the button to copy the value to clipboard.
+ *
+ * @returns Color swatch
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const Default: Story = () => <Color value="#dc2626" name="brand-1" />
+
+/**
+ * Anonymous swatch — no name, just the colour value as label.
+ *
+ * @returns Color swatch without a name
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const Anonymous: Story = () => <Color value="hsl(0 84% 60%)" />
+
+/**
+ * Full Mulled palette laid out as a grid.
+ *
+ * @returns Grid of palette swatches
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const Palette: Story = () => (
+  <div
+    style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 8 }}
+  >
+    <Color value="#991b1b" name="brand-1" />
+    <Color value="#7f1d1d" name="brand-2" />
+    <Color value="#450a0a" name="brand-3" />
+    <Color value="#dc2626" name="brand-light" />
+    <Color value="#0a0a0a" name="bg" />
+    <Color value="#0f0f0f" name="bg-alt" />
+    <Color value="#161616" name="bg-elv" />
+    <Color value="#f5f5f5" name="text-1" />
+    <Color value="#2a2a2a" name="border" />
+  </div>
+)

package/dist/theme/components/shared/color.tsx

@@ -0,0 +1,69 @@
+import { match, P } from 'massaman/match'
+import type React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export interface ColorProps {
+  /**
+   * Color value in any CSS-valid format (hex, rgb, hsl).
+   */
+  readonly value: string
+  /**
+   * Optional display name for the color.
+   */
+  readonly name?: string
+}
+
+/**
+ * Color swatch that displays a color value with an optional name.
+ * Click to copy the color value to clipboard.
+ *
+ * @param props - Color value and optional display name
+ * @returns React element with clickable color swatch
+ */
+export function Color({ value, name }: ColorProps): React.ReactElement {
+  const [copied, setCopied] = useState(false)
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(
+    () => () => {
+      if (resetTimerRef.current !== null) {
+        clearTimeout(resetTimerRef.current)
+      }
+    },
+    []
+  )
+
+  const handleClick = useCallback(() => {
+    navigator.clipboard
+      .writeText(value)
+      .then(() => {
+        if (resetTimerRef.current !== null) {
+          clearTimeout(resetTimerRef.current)
+        }
+        setCopied(true)
+        resetTimerRef.current = setTimeout(() => setCopied(false), 2000)
+        return null
+      })
+      .catch(() => {
+        setCopied(false)
+      })
+  }, [value])
+
+  const nameEl = match(name)
+    .with(P.nonNullable, (n) => <span className="cp-color__name">{n}</span>)
+    .otherwise(() => null)
+
+  const label = match(copied)
+    .with(true, () => 'Copied!')
+    .otherwise(() => value)
+
+  return (
+    <button type="button" className="cp-color" onClick={handleClick} title={`Copy ${value}`}>
+      <span className="cp-color__swatch" style={{ backgroundColor: value }} />
+      <span className="cp-color__info">
+        {nameEl}
+        <span className="cp-color__value">{label}</span>
+      </span>
+    </button>
+  )
+}

package/dist/theme/components/shared/columns.css

@@ -0,0 +1,37 @@
+/**
+ * Columns — responsive grid layout (1–4 columns).
+ */
+
+.cp-columns {
+  display: grid;
+  gap: 16px;
+  width: 100%;
+}
+
+.cp-columns--1 {
+  grid-template-columns: 1fr;
+}
+
+.cp-columns--2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.cp-columns--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.cp-columns--4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 640px) {
+  .cp-columns--2,
+  .cp-columns--3,
+  .cp-columns--4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+.cp-column {
+  min-width: 0;
+}

package/dist/theme/components/shared/columns.stories.tsx

@@ -0,0 +1,91 @@
+import type { Story } from '@ladle/react'
+import type React from 'react'
+
+import { Column, Columns } from './columns.tsx'
+
+const meta = {
+  title: 'Layout / Columns',
+}
+
+export default meta
+
+function Cell({ n }: { readonly n: number }): React.ReactElement {
+  return (
+    <div
+      style={{
+        padding: '20px 16px',
+        background: 'var(--cp-c-bg-soft)',
+        border: '1px solid var(--cp-c-border)',
+        borderRadius: 'var(--rp-radius)',
+        textAlign: 'center',
+        fontFamily: 'ui-monospace, monospace',
+        color: 'var(--cp-c-text-2)',
+      }}
+    >
+      cell {n}
+    </div>
+  )
+}
+
+/**
+ * Two-column grid — the default. Collapses to a single column below
+ * 640px.
+ *
+ * @returns Two-column grid
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const TwoColumns: Story = () => (
+  <Columns>
+    <Cell n={1} />
+    <Cell n={2} />
+  </Columns>
+)
+
+/**
+ * Three-column grid.
+ *
+ * @returns Three-column grid
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const ThreeColumns: Story = () => (
+  <Columns cols={3}>
+    <Cell n={1} />
+    <Cell n={2} />
+    <Cell n={3} />
+  </Columns>
+)
+
+/**
+ * Four-column grid — densest variant.
+ *
+ * @returns Four-column grid
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const FourColumns: Story = () => (
+  <Columns cols={4}>
+    {[1, 2, 3, 4].map((n) => (
+      <Cell key={n} n={n} />
+    ))}
+  </Columns>
+)
+
+/**
+ * Explicit `<Column>` wrappers — use these when a cell needs to group
+ * multiple elements into a single grid slot.
+ *
+ * @returns Two-column grid with grouped content per column
+ */
+// oxlint-disable-next-line func-style -- Ladle stories use `export const`
+export const ExplicitColumns: Story = () => (
+  <Columns>
+    <Column>
+      <h3 style={{ marginTop: 0 }}>Left</h3>
+      <p>Multiple elements in one grid slot.</p>
+      <p>Second paragraph stays grouped.</p>
+    </Column>
+    <Column>
+      <h3 style={{ marginTop: 0 }}>Right</h3>
+      <p>Mirrored layout on the other side.</p>
+    </Column>
+  </Columns>
+)

package/dist/theme/components/shared/columns.tsx

@@ -0,0 +1,50 @@
+import { match } from 'massaman/match'
+import type React from 'react'
+
+export interface ColumnsProps {
+  /**
+   * Number of grid columns (1–4). Defaults to 2.
+   * Collapses to a single column on viewports below 640px.
+   */
+  readonly cols?: 1 | 2 | 3 | 4
+  /**
+   * Grid children — either raw content or explicit Column wrappers.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * Generic responsive grid layout for arbitrary content.
+ * Supports 1–4 columns with automatic responsive collapse.
+ *
+ * @param props - Grid configuration with column count
+ * @returns React element with CSS Grid layout
+ */
+export function Columns({ cols = 2, children }: ColumnsProps): React.ReactElement {
+  const className = match(cols)
+    .with(1, () => 'cp-columns cp-columns--1')
+    .with(2, () => 'cp-columns cp-columns--2')
+    .with(3, () => 'cp-columns cp-columns--3')
+    .with(4, () => 'cp-columns cp-columns--4')
+    .exhaustive()
+
+  return <div className={className}>{children}</div>
+}
+
+export interface ColumnProps {
+  /**
+   * Content rendered inside the column.
+   */
+  readonly children: React.ReactNode
+}
+
+/**
+ * Explicit wrapper for content placed inside a Columns grid.
+ * Use when you need to group multiple elements into a single grid cell.
+ *
+ * @param props - Column content
+ * @returns React element for a grid cell
+ */
+export function Column({ children }: ColumnProps): React.ReactElement {
+  return <div className="cp-column">{children}</div>
+}