) ); PricingCardRoot.displayName = "PricingCard"; const Flag = React.forwardRef>( ({ className, ...props }, ref) => (

) ); Flag.displayName = "PricingCard.Flag"; const Tier = React.forwardRef>( ({ className, ...props }, ref) => (

) ); Tier.displayName = "PricingCard.Tier"; export interface PricingCardAmountProps extends React.HTMLAttributes { unit?: React.ReactNode; } const Amount = React.forwardRef( ({ children, className, unit, ...props }, ref) => (

{children} {unit ? {unit} : null}

) ); Amount.displayName = "PricingCard.Amount"; const Blurb = React.forwardRef>( ({ className, ...props }, ref) => (

) ); Blurb.displayName = "PricingCard.Blurb"; const Features = React.forwardRef>( ({ className, ...props }, ref) => (

>( ({ children, className, ...props }, ref) => ( {children} ) ); CTA.displayName = "PricingCard.CTA"; export const PricingCard = Object.assign(PricingCardRoot, { Amount, Blurb, CTA, Features, Flag, Tier }); ``` ### Progress (`progress`) Determinate progress bar with green, blue, and warning tones. - Registry item: https://cobanov.github.io/soft-club-ui/r/progress.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/progress.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/progress.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface ProgressProps extends React.HTMLAttributes { max?: number; tone?: "blue" | "danger" | "green" | "warning"; value?: number; } export const Progress = React.forwardRef( ({ className, max = 100, tone = "green", value = 0, ...props }, ref) => { const clamped = Math.min(max, Math.max(0, value)); const pct = max > 0 ? (clamped / max) * 100 : 0; return (

); } ); Progress.displayName = "Progress"; ``` ### PromptBox (`prompt-box`) Compact prompt input with attach, voice, and send controls. - Registry item: https://cobanov.github.io/soft-club-ui/r/prompt-box.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/prompt-box.json` - npm dependencies: lucide-react@^1.17.0 - Registry dependencies: base - Installs to: `components/soft-club/prompt-box.tsx` ```tsx "use client"; import * as React from "react"; import { Mic, Plus, Send } from "lucide-react"; import { cx } from "@/lib/soft-club/cx"; export interface PromptBoxProps extends React.FormHTMLAttributes { defaultValue?: string; placeholder?: string; } export const PromptBox = React.forwardRef( ( { className, defaultValue, placeholder = "Describe the glass pass…", onSubmit, ...props }, ref ) => ( ) ); PromptBox.displayName = "PromptBox"; ``` ### PromptHero (`prompt-hero`) Larger prompt entry for pages where the prompt is the main action. - Registry item: https://cobanov.github.io/soft-club-ui/r/prompt-hero.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/prompt-hero.json` - npm dependencies: none - Registry dependencies: base, button - Installs to: `components/soft-club/prompt-hero.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; import { Button } from "@/components/soft-club/button"; export interface PromptHeroProps extends Omit, "onChange" | "onSubmit"> { ctaLabel?: React.ReactNode; defaultValue?: string; hideCta?: boolean; leading?: React.ReactNode | false; onChange?: (value: string) => void; onSubmit?: (value: string) => void; placeholder?: string; value?: string; } export const PromptHero = React.forwardRef( ( { className, ctaLabel = "Run", defaultValue, hideCta, leading, onChange, onSubmit, placeholder = "Describe the soft-club surface…", value, ...props }, ref ) => { const controlled = value !== undefined; const [internalValue, setInternalValue] = React.useState(defaultValue ?? ""); const currentValue = controlled ? value : internalValue; return ( ); } ); PromptHero.displayName = "PromptHero"; ``` ### RadarSweep (`radar-sweep`) Rotating radar sweep over concentric rings with fading blips. - Registry item: https://cobanov.github.io/soft-club-ui/r/radar-sweep.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/radar-sweep.json` - npm dependencies: none - Registry dependencies: base, theme-color, use-canvas-animation - Installs to: `components/soft-club/radar-sweep.tsx` ```tsx "use client"; import * as React from "react"; import { useCanvasAnimation } from "@/hooks/soft-club/use-canvas-animation"; import { rgba, themeRgb } from "@/lib/soft-club/theme-color"; import { cx } from "@/lib/soft-club/cx"; export interface RadarSweepProps extends React.HTMLAttributes { blips?: { angle: number; radius: number }[]; label?: string; speed?: number; } const defaultBlips = [ { angle: 0.6, radius: 0.42 }, { angle: 2.1, radius: 0.74 }, { angle: 3.5, radius: 0.3 }, { angle: 4.4, radius: 0.62 }, { angle: 5.6, radius: 0.5 } ]; export const RadarSweep = React.forwardRef( ({ blips = defaultBlips, className, label, speed = 0.65, ...props }, ref) => { const hostRef = React.useRef(null); const canvasRef = React.useRef(null); useCanvasAnimation( canvasRef, hostRef, ({ ctx, height, time, width }) => { const primary = themeRgb(hostRef.current, "--sc-theme-rgb-primary", [142, 255, 173]); const secondary = themeRgb(hostRef.current, "--sc-theme-rgb-secondary", [139, 184, 215]); const cx0 = width / 2; const cy0 = height / 2; const radius = Math.min(width, height) / 2 - 6; const angle = time * speed; ctx.clearRect(0, 0, width, height); ctx.strokeStyle = rgba(secondary, 0.22); ctx.lineWidth = 1; for (let r = 1; r <= 3; r += 1) { ctx.beginPath(); ctx.arc(cx0, cy0, (radius * r) / 3, 0, Math.PI * 2); ctx.stroke(); } ctx.beginPath(); ctx.moveTo(cx0 - radius, cy0); ctx.lineTo(cx0 + radius, cy0); ctx.moveTo(cx0, cy0 - radius); ctx.lineTo(cx0, cy0 + radius); ctx.stroke(); const gradient = ctx.createConicGradient ? ctx.createConicGradient(angle, cx0, cy0) : null; if (gradient) { gradient.addColorStop(0, rgba(primary, 0.42)); gradient.addColorStop(0.08, rgba(primary, 0)); gradient.addColorStop(1, rgba(primary, 0)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(cx0, cy0); ctx.arc(cx0, cy0, radius, angle - 0.6, angle); ctx.closePath(); ctx.fill(); } ctx.strokeStyle = rgba(primary, 0.85); ctx.beginPath(); ctx.moveTo(cx0, cy0); ctx.lineTo(cx0 + Math.cos(angle) * radius, cy0 + Math.sin(angle) * radius); ctx.stroke(); const twoPi = Math.PI * 2; for (const blip of blips) { const sweep = ((angle % twoPi) - blip.angle + twoPi) % twoPi; const intensity = Math.max(0, 1 - sweep / 1.4); if (intensity <= 0.02) continue; const bx = cx0 + Math.cos(blip.angle) * radius * blip.radius; const by = cy0 + Math.sin(blip.angle) * radius * blip.radius; ctx.fillStyle = rgba(primary, intensity); ctx.beginPath(); ctx.arc(bx, by, 2.4 + intensity * 2, 0, twoPi); ctx.fill(); } }, { fps: 30 } ); const setRef = (node: HTMLDivElement | null) => { hostRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }; return (

); } ); RadarSweep.displayName = "RadarSweep"; ``` ### RadioGroup (`radio-group`) Accessible radio group with controlled value and labelled items. - Registry item: https://cobanov.github.io/soft-club-ui/r/radio-group.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/radio-group.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/radio-group.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; interface RadioGroupContextValue { name?: string; onValueChange?: (value: string) => void; value?: string; } const RadioGroupContext = React.createContext({}); export interface RadioGroupProps extends Omit, "onChange"> { defaultValue?: string; name?: string; onValueChange?: (value: string) => void; value?: string; } const RadioGroupRoot = React.forwardRef( ({ children, className, defaultValue, name, onValueChange, value, ...props }, ref) => { const [internal, setInternal] = React.useState(defaultValue); const generatedName = React.useId(); const current = value ?? internal; const handleChange = React.useCallback( (next: string) => { if (value === undefined) setInternal(next); onValueChange?.(next); }, [onValueChange, value] ); return (

{children}

); } ); RadioGroupRoot.displayName = "RadioGroup"; export interface RadioGroupItemProps extends Omit, "type" | "value"> { description?: React.ReactNode; label?: React.ReactNode; value: string; } export const RadioGroupItem = React.forwardRef( ({ className, description, label, value, ...props }, ref) => { const ctx = React.useContext(RadioGroupContext); return ( ctx.onValueChange?.(value)} ref={ref} type="radio" value={value} {...props} /> ); } ); RadioGroupItem.displayName = "RadioGroupItem"; export const RadioGroup = Object.assign(RadioGroupRoot, { Item: RadioGroupItem }); ``` ### Rating (`rating`) Interactive star rating with hover preview and keyboard support. - Registry item: https://cobanov.github.io/soft-club-ui/r/rating.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/rating.json` - npm dependencies: lucide-react@^1.17.0 - Registry dependencies: base - Installs to: `components/soft-club/rating.tsx` ```tsx "use client"; import * as React from "react"; import { Star } from "lucide-react"; import { cx } from "@/lib/soft-club/cx"; export interface RatingProps extends Omit, "onChange" | "defaultValue"> { defaultValue?: number; max?: number; onValueChange?: (value: number) => void; readOnly?: boolean; size?: number; value?: number; } /** * A star rating that supports controlled and uncontrolled use, hover preview, * and keyboard arrows. Read-only mode renders a static score. */ export const Rating = React.forwardRef( ( { className, defaultValue = 0, max = 5, onValueChange, readOnly = false, size = 18, value: valueProp, ...props }, ref ) => { const isControlled = valueProp !== undefined; const [internal, setInternal] = React.useState(defaultValue); const value = isControlled ? valueProp : internal; const [hover, setHover] = React.useState(null); const shown = hover ?? value; const commit = (next: number) => { if (readOnly) return; if (!isControlled) setInternal(next); onValueChange?.(next); }; return (

{Array.from({ length: max }, (_, index) => { const starValue = index + 1; const active = starValue <= shown; return ( ); })}

); } ); Rating.displayName = "Rating"; ``` ### Rotator (`rotator`) Typewriter word rotation for compact interface copy. - Registry item: https://cobanov.github.io/soft-club-ui/r/rotator.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/rotator.json` - npm dependencies: none - Registry dependencies: base, use-typewriter - Installs to: `components/soft-club/rotator.tsx` ```tsx "use client"; import * as React from "react"; import { useTypewriter, type UseTypewriterOptions } from "@/hooks/soft-club/use-typewriter"; import { cx } from "@/lib/soft-club/cx"; export interface RotatorProps extends Omit, "prefix">, UseTypewriterOptions { cursor?: string; hideCursor?: boolean; renderWord?: (word: string, index: number) => React.ReactNode; } export const Rotator = React.forwardRef( ( { className, cursor, deleteMs, hideCursor, holdMs, loop, onWordReached, renderWord, typeMs, words, ...props }, ref ) => { const { index, word } = useTypewriter({ deleteMs, holdMs, loop, onWordReached, typeMs, words }); return ( {renderWord ? renderWord(word, index) : word} {!hideCursor ? ( ) : null} ); } ); Rotator.displayName = "Rotator"; ``` ### SandpileBasilica (`sandpile-basilica`) The Abelian sandpile: whoever holds four, gives four away. Click to pour a handful. - Registry item: https://cobanov.github.io/soft-club-ui/r/sandpile-basilica.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/sandpile-basilica.json` - npm dependencies: none - Registry dependencies: base, theme-color, use-canvas-animation, instrument - Installs to: `components/soft-club/sandpile-basilica.tsx` ```tsx "use client"; import * as React from "react"; import { useCanvasAnimation } from "@/hooks/soft-club/use-canvas-animation"; import { rgba, themeRgb } from "@/lib/soft-club/theme-color"; import { cx } from "@/lib/soft-club/cx"; import { useInstrument } from "@/components/soft-club/instrument"; export interface SandpileBasilicaProps extends React.HTMLAttributes { /** Grains dripped onto the center each frame. */ drip?: number; label?: string; } const COLS = 150; const ROWS = 94; interface SandpileSim { avalanches: number; dropped: number; grains: Int32Array; } /** * The Abelian sandpile: one rule — whoever holds four, gives four away. The * floor anneals itself into self-similar cathedral windows that nobody * designed. Grains drip onto the center; click anywhere to pour a handful * and watch the avalanche negotiate. */ export const SandpileBasilica = React.forwardRef( ({ className, drip = 24, label, onPointerDown, ...props }, ref) => { const hostRef = React.useRef(null); const canvasRef = React.useRef(null); const simRef = React.useRef(null); const epochRef = React.useRef(-1); const { epoch } = useInstrument(); useCanvasAnimation( canvasRef, hostRef, ({ ctx, height, width }) => { let sim = simRef.current; if (!sim || epochRef.current !== epoch) { sim = { avalanches: 0, dropped: 0, grains: new Int32Array(COLS * ROWS) }; simRef.current = sim; epochRef.current = epoch; } const { grains } = sim; const centerIndex = Math.floor(ROWS / 2) * COLS + Math.floor(COLS / 2); grains[centerIndex] += drip; sim.dropped += drip; // Topple until stable, bounded per frame so cascades stay smooth. for (let pass = 0; pass < 60; pass += 1) { let toppled = 0; for (let y = 1; y < ROWS - 1; y += 1) { const row = y * COLS; for (let x = 1; x < COLS - 1; x += 1) { const i = row + x; if (grains[i] >= 4) { const share = grains[i] >> 2; grains[i] -= share * 4; grains[i - 1] += share; grains[i + 1] += share; grains[i - COLS] += share; grains[i + COLS] += share; toppled += 1; } } } if (toppled === 0) break; sim.avalanches += toppled; } const primary = themeRgb(hostRef.current, "--sc-theme-rgb-primary", [142, 255, 173]); const secondary = themeRgb(hostRef.current, "--sc-theme-rgb-secondary", [139, 184, 215]); const text = themeRgb(hostRef.current, "--sc-theme-rgb-text", [214, 240, 224]); const tones = [ null, rgba(secondary, 0.3), rgba(primary, 0.45), rgba(primary, 0.85), rgba(text, 0.9) ]; const cellW = width / COLS; const cellH = height / ROWS; ctx.clearRect(0, 0, width, height); for (let y = 0; y < ROWS; y += 1) { const row = y * COLS; for (let x = 0; x < COLS; x += 1) { const level = Math.min(4, grains[row + x]); const tone = tones[level]; if (!tone) continue; ctx.fillStyle = tone; ctx.fillRect(x * cellW, y * cellH, Math.ceil(cellW), Math.ceil(cellH)); } } ctx.fillStyle = rgba(primary, 0.7); ctx.font = "9px monospace"; ctx.fillText( `DROPPED ${sim.dropped} TOPPLES ${sim.avalanches} RULE 4 -> 1+1+1+1`, 8, height - 8 ); }, { fps: 30 } ); const setRef = (node: HTMLDivElement | null) => { hostRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }; const pour = (event: React.PointerEvent) => { onPointerDown?.(event); const sim = simRef.current; const host = hostRef.current; if (!sim || !host) return; const rect = host.getBoundingClientRect(); const x = Math.min( COLS - 2, Math.max(1, Math.floor(((event.clientX - rect.left) / rect.width) * COLS)) ); const y = Math.min( ROWS - 2, Math.max(1, Math.floor(((event.clientY - rect.top) / rect.height) * ROWS)) ); sim.grains[y * COLS + x] += 256; sim.dropped += 256; }; return (

); } ); SandpileBasilica.displayName = "SandpileBasilica"; ``` ### ScrollArea (`scroll-area`) Scoped scroll container with themed thin scrollbars. - Registry item: https://cobanov.github.io/soft-club-ui/r/scroll-area.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/scroll-area.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/scroll-area.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface ScrollAreaProps extends React.HTMLAttributes { maxHeight?: number | string; orientation?: "both" | "horizontal" | "vertical"; } export const ScrollArea = React.forwardRef( ({ className, maxHeight = "16rem", orientation = "vertical", style, ...props }, ref) => (

) ); ScrollArea.displayName = "ScrollArea"; ``` ### Separator (`separator`) Thin divider for compact panels and form group breaks. - Registry item: https://cobanov.github.io/soft-club-ui/r/separator.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/separator.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/separator.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface SeparatorProps extends React.HTMLAttributes { decorative?: boolean; orientation?: "horizontal" | "vertical"; } export const Separator = React.forwardRef( ({ className, decorative = true, orientation = "horizontal", ...props }, ref) => (

) ); Separator.displayName = "Separator"; ``` ### Sheet (`sheet`) Edge-anchored panel that slides in from any side of the viewport. - Registry item: https://cobanov.github.io/soft-club-ui/r/sheet.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/sheet.json` - npm dependencies: @radix-ui/react-dialog@^1.1.6, lucide-react@^1.17.0 - Registry dependencies: base, button - Installs to: `components/soft-club/sheet.tsx` ```tsx "use client"; import * as React from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { X } from "lucide-react"; import { cx } from "@/lib/soft-club/cx"; import { Button } from "@/components/soft-club/button"; export const Sheet = DialogPrimitive.Root; export const SheetTrigger = DialogPrimitive.Trigger; export const SheetClose = DialogPrimitive.Close; export const SheetPortal = DialogPrimitive.Portal; export const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetOverlay.displayName = DialogPrimitive.Overlay.displayName; export interface SheetContentProps extends React.ComponentPropsWithoutRef { side?: "bottom" | "left" | "right" | "top"; } export const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps >(({ children, className, side = "right", ...props }, ref) => ( {children} )); SheetContent.displayName = DialogPrimitive.Content.displayName; export const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

); SheetHeader.displayName = "SheetHeader"; export const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

); SheetFooter.displayName = "SheetFooter"; export const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetTitle.displayName = DialogPrimitive.Title.displayName; export const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetDescription.displayName = DialogPrimitive.Description.displayName; ``` ### SignalMarquee (`signal-marquee`) Thin motion strip for looped signal text. - Registry item: https://cobanov.github.io/soft-club-ui/r/signal-marquee.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/signal-marquee.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/signal-marquee.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface SignalMarqueeProps extends React.HTMLAttributes { items?: string[]; } const defaultItems = ["SC-133G04", "GLASS PASS", "A3 ONLINE", "B2 BUS", "NOISE 04"]; export const SignalMarquee = React.forwardRef( ({ className, items = defaultItems, ...props }, ref) => { const loop = [...items, ...items]; return (

{loop.map((item, index) => ( {item} ))}

); } ); SignalMarquee.displayName = "SignalMarquee"; ``` ### Skeleton (`skeleton`) Reduced-motion aware loading placeholder. - Registry item: https://cobanov.github.io/soft-club-ui/r/skeleton.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/skeleton.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/skeleton.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export type SkeletonProps = React.HTMLAttributes; export const Skeleton = React.forwardRef( ({ className, ...props }, ref) => (

) ); Skeleton.displayName = "Skeleton"; ``` ### Slider (`slider`) Native range slider with token track and themed thumb tones. - Registry item: https://cobanov.github.io/soft-club-ui/r/slider.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/slider.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/slider.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface SliderProps extends Omit, "type"> { tone?: "blue" | "green" | "warning"; } export const Slider = React.forwardRef( ({ className, tone = "green", ...props }, ref) => ( ) ); Slider.displayName = "Slider"; ``` ### SoftFooter (`soft-footer`) Rich footer with a brand block, link columns, a base row, and an animated gradient rule. - Registry item: https://cobanov.github.io/soft-club-ui/r/soft-footer.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/soft-footer.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/soft-footer.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; /** * A rich Gen X Soft Club footer: a drifting gradient rule, a brand block, * link columns, and a base row for legal / status copy. */ const SoftFooterRoot = React.forwardRef>( ({ children, className, ...props }, ref) => ( ) ); SoftFooterRoot.displayName = "SoftFooter"; export const SoftFooterInner = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); SoftFooterInner.displayName = "SoftFooterInner"; export interface SoftFooterBrandProps extends React.HTMLAttributes { kicker?: React.ReactNode; name?: React.ReactNode; } export const SoftFooterBrand = React.forwardRef( ({ children, className, kicker, name, ...props }, ref) => (

{kicker ? {kicker} : null} {name ? {name} : null} {children}

) ); SoftFooterBrand.displayName = "SoftFooterBrand"; export const SoftFooterColumns = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); SoftFooterColumns.displayName = "SoftFooterColumns"; export interface SoftFooterColumnProps extends React.HTMLAttributes { heading?: React.ReactNode; } export const SoftFooterColumn = React.forwardRef( ({ children, className, heading, ...props }, ref) => (

{heading ? {heading} : null} {children}

) ); SoftFooterColumn.displayName = "SoftFooterColumn"; export const SoftFooterLink = React.forwardRef< HTMLAnchorElement, React.AnchorHTMLAttributes >(({ className, ...props }, ref) => ( )); SoftFooterLink.displayName = "SoftFooterLink"; export const SoftFooterBase = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); SoftFooterBase.displayName = "SoftFooterBase"; export const SoftFooter = Object.assign(SoftFooterRoot, { Base: SoftFooterBase, Brand: SoftFooterBrand, Column: SoftFooterColumn, Columns: SoftFooterColumns, Inner: SoftFooterInner, Link: SoftFooterLink }); ``` ### SoftHeader (`soft-header`) Frosted site header with subway-Helvetica brand, nav, actions, and a drifting gradient rule. - Registry item: https://cobanov.github.io/soft-club-ui/r/soft-header.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/soft-header.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/soft-header.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface SoftHeaderProps extends React.HTMLAttributes { /** Pin to the top of the viewport. */ sticky?: boolean; } /** * A frosted Gen X Soft Club site header: subway-Helvetica brand, nav, and a * drifting gradient hairline along the base. */ const SoftHeaderRoot = React.forwardRef( ({ children, className, sticky, ...props }, ref) => (

{children}

) ); SoftHeaderRoot.displayName = "SoftHeader"; export interface SoftHeaderBrandProps extends React.AnchorHTMLAttributes { kicker?: React.ReactNode; } export const SoftHeaderBrand = React.forwardRef( ({ children, className, kicker, ...props }, ref) => ( {kicker ? {kicker} : null} {children} ) ); SoftHeaderBrand.displayName = "SoftHeaderBrand"; export const SoftHeaderNav = React.forwardRef>( ({ className, ...props }, ref) => (

) ); SoftHeaderNav.displayName = "SoftHeaderNav"; export const SoftHeaderLink = React.forwardRef< HTMLAnchorElement, React.AnchorHTMLAttributes >(({ className, ...props }, ref) => ( )); SoftHeaderLink.displayName = "SoftHeaderLink"; export const SoftHeaderActions = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

{step.label} {step.description ? ( {step.description} ) : null} {index < steps.length - 1 ? (

) ); Stepper.displayName = "Stepper"; ``` ### StickyBanner (`sticky-banner`) Dense inline banner for update or release notices. - Registry item: https://cobanov.github.io/soft-club-ui/r/sticky-banner.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/sticky-banner.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/sticky-banner.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface StickyBannerProps extends React.HTMLAttributes { action?: React.ReactNode; } export const StickyBanner = React.forwardRef( ({ action, children, className, ...props }, ref) => (

) ); StickyBanner.displayName = "StickyBanner"; ``` ### Switch (`switch`) Native switch control for binary settings. - Registry item: https://cobanov.github.io/soft-club-ui/r/switch.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/switch.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/switch.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface SwitchProps extends Omit, "type"> { description?: React.ReactNode; label?: React.ReactNode; } export const Switch = React.forwardRef( ({ className, description, label, ...props }, ref) => ( ) ); Switch.displayName = "Switch"; ``` ### Table (`table`) Composable data table with header, body, footer, and hover rows. - Registry item: https://cobanov.github.io/soft-club-ui/r/table.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/table.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/table.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; const TableRoot = React.forwardRef>( ({ className, ...props }, ref) => (

) ); TableRoot.displayName = "Table"; export const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableHeader.displayName = "TableHeader"; export const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableBody.displayName = "TableBody"; export const TableFooter = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableFooter.displayName = "TableFooter"; export const TableRow = React.forwardRef< HTMLTableRowElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableRow.displayName = "TableRow"; export const TableHead = React.forwardRef< HTMLTableCellElement, React.ThHTMLAttributes >(({ className, ...props }, ref) => (

)); TableCaption.displayName = "TableCaption"; export const Table = Object.assign(TableRoot, { Body: TableBody, Caption: TableCaption, Cell: TableCell, Footer: TableFooter, Head: TableHead, Header: TableHeader, Row: TableRow }); ``` ### Tabs (`tabs`) Radix-backed tabs for switching compact views. - Registry item: https://cobanov.github.io/soft-club-ui/r/tabs.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/tabs.json` - npm dependencies: @radix-ui/react-tabs@^1.1.3 - Registry dependencies: base - Installs to: `components/soft-club/tabs.tsx` ```tsx "use client"; import * as React from "react"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cx } from "@/lib/soft-club/cx"; export const Tabs = TabsPrimitive.Root; export const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); TabsList.displayName = TabsPrimitive.List.displayName; export const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; export const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); TabsContent.displayName = TabsPrimitive.Content.displayName; ``` ### Textarea (`textarea`) Multi-line note field for prompts, logs, and system copy. - Registry item: https://cobanov.github.io/soft-club-ui/r/textarea.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/textarea.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/textarea.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export type TextareaProps = React.TextareaHTMLAttributes; export const Textarea = React.forwardRef( ({ className, ...props }, ref) => ( ) ); Textarea.displayName = "Textarea"; ``` ### Timeline (`timeline`) Vertical event log with status-aware nodes. - Registry item: https://cobanov.github.io/soft-club-ui/r/timeline.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/timeline.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/timeline.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; const TimelineRoot = React.forwardRef<HTMLOListElement, React.HTMLAttributes<HTMLOListElement>>( ({ className, ...props }, ref) => ( <ol className={cx("sc-timeline", className)} ref={ref} {...props} /> ) ); TimelineRoot.displayName = "Timeline"; export interface TimelineItemProps extends React.LiHTMLAttributes<HTMLLIElement> { /** Tone of the node marker. */ status?: "active" | "default" | "done"; } export const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>( ({ children, className, status = "default", ...props }, ref) => ( <li className={cx("sc-timeline__item", `sc-timeline__item--${status}`, className)} ref={ref} {...props}> <span aria-hidden="true" className="sc-timeline__node" /> <div className="sc-timeline__content">{children}</div> </li> ) ); TimelineItem.displayName = "TimelineItem"; export const TimelineTime = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>( ({ className, ...props }, ref) => ( <span className={cx("sc-timeline__time", className)} ref={ref} {...props} /> ) ); TimelineTime.displayName = "TimelineTime"; export const TimelineTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>( ({ className, ...props }, ref) => ( <p className={cx("sc-timeline__title", className)} ref={ref} {...props} /> ) ); TimelineTitle.displayName = "TimelineTitle"; export const TimelineDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement> >(({ className, ...props }, ref) => ( <p className={cx("sc-timeline__description", className)} ref={ref} {...props} /> )); TimelineDescription.displayName = "TimelineDescription"; export const Timeline = Object.assign(TimelineRoot, { Description: TimelineDescription, Item: TimelineItem, Time: TimelineTime, Title: TimelineTitle }); ``` ### Toast (`toast`) Transient feedback for syncs, saves, and route changes. - Registry item: https://cobanov.github.io/soft-club-ui/r/toast.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/toast.json` - npm dependencies: @radix-ui/react-toast@^1.2.6, lucide-react@^1.17.0 - Registry dependencies: base, button - Installs to: `components/soft-club/toast.tsx` ```tsx "use client"; import * as React from "react"; import * as ToastPrimitive from "@radix-ui/react-toast"; import { X } from "lucide-react"; import { cx } from "@/lib/soft-club/cx"; import { Button } from "@/components/soft-club/button"; export const ToastProvider = ToastPrimitive.Provider; export const ToastViewport = React.forwardRef< React.ElementRef<typeof ToastPrimitive.Viewport>, React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> >(({ className, ...props }, ref) => ( <ToastPrimitive.Viewport className={cx("sc-toast-viewport", className)} ref={ref} {...props} /> )); ToastViewport.displayName = ToastPrimitive.Viewport.displayName; export const Toast = React.forwardRef< React.ElementRef<typeof ToastPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root> >(({ className, ...props }, ref) => ( <ToastPrimitive.Root className={cx("sc-toast-root", className)} ref={ref} {...props} /> )); Toast.displayName = ToastPrimitive.Root.displayName; export const ToastTitle = React.forwardRef< React.ElementRef<typeof ToastPrimitive.Title>, React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title> >(({ className, ...props }, ref) => ( <ToastPrimitive.Title className={cx("sc-toast-title", className)} ref={ref} {...props} /> )); ToastTitle.displayName = ToastPrimitive.Title.displayName; export const ToastDescription = React.forwardRef< React.ElementRef<typeof ToastPrimitive.Description>, React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description> >(({ className, ...props }, ref) => ( <ToastPrimitive.Description className={cx("sc-toast-description", className)} ref={ref} {...props} /> )); ToastDescription.displayName = ToastPrimitive.Description.displayName; export const ToastAction = React.forwardRef< React.ElementRef<typeof ToastPrimitive.Action>, React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> >(({ children, className, ...props }, ref) => ( <ToastPrimitive.Action asChild ref={ref} {...props}> <Button className={cx("sc-toast-action", className)} size="sm" variant="outline"> {children} </Button> </ToastPrimitive.Action> )); ToastAction.displayName = ToastPrimitive.Action.displayName; export const ToastClose = React.forwardRef< React.ElementRef<typeof ToastPrimitive.Close>, React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close> >(({ className, children, ...props }, ref) => ( <ToastPrimitive.Close aria-label="Close" className={cx("sc-toast-close", className)} ref={ref} {...props} > {children ?? <X aria-hidden="true" size={14} strokeWidth={1.8} />} </ToastPrimitive.Close> )); ToastClose.displayName = ToastPrimitive.Close.displayName; ``` ### ToggleGroup (`toggle-group`) Single or multiple toggle set with shared selection state. - Registry item: https://cobanov.github.io/soft-club-ui/r/toggle-group.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/toggle-group.json` - npm dependencies: none - Registry dependencies: base, toggle - Installs to: `components/soft-club/toggle-group.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; import { Toggle, type ToggleProps } from "@/components/soft-club/toggle"; interface ToggleGroupContextValue { size?: ToggleProps["size"]; toggle: (value: string) => void; value: string[]; variant?: ToggleProps["variant"]; } const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null); export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> { defaultValue?: string[]; onValueChange?: (value: string[]) => void; size?: ToggleProps["size"]; type?: "multiple" | "single"; value?: string[]; variant?: ToggleProps["variant"]; } const ToggleGroupRoot = React.forwardRef<HTMLDivElement, ToggleGroupProps>( ( { children, className, defaultValue, onValueChange, size, type = "single", value, variant, ...props }, ref ) => { const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []); const current = value ?? internal; const toggle = React.useCallback( (item: string) => { let next: string[]; if (type === "single") { next = current.includes(item) ? [] : [item]; } else { next = current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item]; } if (value === undefined) setInternal(next); onValueChange?.(next); }, [current, onValueChange, type, value] ); return ( <ToggleGroupContext.Provider value={{ size, toggle, value: current, variant }}> <div className={cx("sc-toggle-group", className)} ref={ref} role="group" {...props}> {children} </div> </ToggleGroupContext.Provider> ); } ); ToggleGroupRoot.displayName = "ToggleGroup"; export interface ToggleGroupItemProps extends Omit<ToggleProps, "defaultPressed" | "onPressedChange" | "pressed"> { value: string; } export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>( ({ size, value, variant, ...props }, ref) => { const ctx = React.useContext(ToggleGroupContext); const pressed = ctx?.value.includes(value) ?? false; return ( <Toggle onPressedChange={() => ctx?.toggle(value)} pressed={pressed} ref={ref} size={size ?? ctx?.size} variant={variant ?? ctx?.variant} {...props} /> ); } ); ToggleGroupItem.displayName = "ToggleGroupItem"; export const ToggleGroup = Object.assign(ToggleGroupRoot, { Item: ToggleGroupItem }); ``` ### Toggle (`toggle`) Two-state pressable toggle with default and outline variants. - Registry item: https://cobanov.github.io/soft-club-ui/r/toggle.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/toggle.json` - npm dependencies: class-variance-authority@^0.7.1 - Registry dependencies: base - Installs to: `components/soft-club/toggle.tsx` ```tsx "use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cx } from "@/lib/soft-club/cx"; export const toggleVariants = cva("sc-toggle", { defaultVariants: { size: "md", variant: "default" }, variants: { size: { lg: "sc-toggle--lg", md: "sc-toggle--md", sm: "sc-toggle--sm" }, variant: { default: "sc-toggle--default", outline: "sc-toggle--outline" } } }); export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof toggleVariants> { defaultPressed?: boolean; onPressedChange?: (pressed: boolean) => void; pressed?: boolean; } export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>( ( { className, defaultPressed, onClick, onPressedChange, pressed, size, variant, ...props }, ref ) => { const [internal, setInternal] = React.useState(defaultPressed ?? false); const isPressed = pressed ?? internal; return ( <button aria-pressed={isPressed} className={cx(toggleVariants({ size, variant }), className)} data-state={isPressed ? "on" : "off"} onClick={(event) => { onClick?.(event); if (event.defaultPrevented) return; const next = !isPressed; if (pressed === undefined) setInternal(next); onPressedChange?.(next); }} ref={ref} type="button" {...props} /> ); } ); Toggle.displayName = "Toggle"; ``` ### TokenStream (`token-stream`) Token-by-token reveal with custom tokenizer and loop timing. - Registry item: https://cobanov.github.io/soft-club-ui/r/token-stream.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/token-stream.json` - npm dependencies: none - Registry dependencies: base, use-token-stream - Installs to: `components/soft-club/token-stream.tsx` ```tsx "use client"; import * as React from "react"; import { useTokenStream, type UseTokenStreamOptions } from "@/hooks/soft-club/use-token-stream"; import { cx } from "@/lib/soft-club/cx"; export interface TokenStreamProps extends React.HTMLAttributes<HTMLSpanElement>, Omit<UseTokenStreamOptions, "enabled" | "text"> { animated?: boolean; cursor?: boolean; hideCaret?: boolean; text?: string; tokens?: string[]; } const defaultTokens = ["SC", "/", "133G04", " ", "glass", " ", "bus", " ", "online"]; export const TokenStream = React.forwardRef<HTMLSpanElement, TokenStreamProps>( ( { animated, className, cursor = true, hideCaret, loop, loopDelayMs, onComplete, speedMs, text, tokenize, tokens = defaultTokens, ...props }, ref ) => { const streamText = text ?? tokens.join(""); const shouldAnimate = animated ?? text !== undefined; const { isStreaming, output } = useTokenStream({ enabled: shouldAnimate, loop, loopDelayMs, onComplete, speedMs, text: streamText, tokenize }); return ( <span className={cx("sc-token-stream", className)} ref={ref} {...props}> {shouldAnimate ? ( <span className="sc-token-stream__token">{output}</span> ) : ( tokens.map((token, index) => ( <span className="sc-token-stream__token" key={`${token}-${index}`}> {token} </span> )) )} {cursor && !hideCaret && (!shouldAnimate || isStreaming) ? ( <span aria-hidden="true" className="sc-token-stream__cursor" /> ) : null} </span> ); } ); TokenStream.displayName = "TokenStream"; ``` ### ToolCall (`tool-call`) Agent tool-call indicator: a loading pill naming the called tool and its state. - Registry item: https://cobanov.github.io/soft-club-ui/r/tool-call.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/tool-call.json` - npm dependencies: lucide-react@^1.17.0 - Registry dependencies: base, spinner - Installs to: `components/soft-club/tool-call.tsx` ```tsx "use client"; import * as React from "react"; import { Check, X } from "lucide-react"; import { cx } from "@/lib/soft-club/cx"; import { Spinner } from "@/components/soft-club/spinner"; export type ToolCallStatus = "calling" | "done" | "error" | "running"; export interface ToolCallProps extends React.HTMLAttributes<HTMLSpanElement> { /** Override the status verb ("calling", "ran", ...). */ label?: React.ReactNode; /** Custom loading indicator for active states; defaults to a Spinner. */ loader?: React.ReactNode; status?: ToolCallStatus; /** Name of the tool that was invoked, e.g. "search_web". */ tool: React.ReactNode; } const defaultLabels: Record<ToolCallStatus, string> = { calling: "calling", done: "ran", error: "failed", running: "running" }; /** * The agent tool-call indicator: an animated loading pill that names the tool * being invoked and reflects its lifecycle (calling, running, done, error). * Drop it into a ChatBubble's `thinking` slot or use it standalone. */ export const ToolCall = React.forwardRef<HTMLSpanElement, ToolCallProps>( ({ className, label, loader, status = "running", tool, ...props }, ref) => { const loading = status === "calling" || status === "running"; return ( <span className={cx("sc-tool-call", `sc-tool-call--${status}`, className)} ref={ref} role="status" {...props} > <span aria-hidden="true" className="sc-tool-call__icon"> {loading ? ( loader ?? <Spinner size="sm" /> ) : status === "done" ? ( <Check size={12} strokeWidth={2} /> ) : ( <X size={12} strokeWidth={2} /> )} </span> <span className="sc-tool-call__verb">{label ?? defaultLabels[status]}</span> <code className="sc-tool-call__name">{tool}</code> {loading ? ( <span aria-hidden="true" className="sc-tool-call__dots"> <i /> <i /> <i /> </span> ) : null} </span> ); } ); ToolCall.displayName = "ToolCall"; ``` ### Tooltip (`tooltip`) Hover and focus hint for compact controls. - Registry item: https://cobanov.github.io/soft-club-ui/r/tooltip.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/tooltip.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/tooltip.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "content"> { content: React.ReactNode; side?: "top" | "bottom"; } export const Tooltip = React.forwardRef<HTMLSpanElement, TooltipProps>( ({ children, className, content, side = "top", ...props }, ref) => ( <span className={cx("sc-tooltip", `sc-tooltip--${side}`, className)} ref={ref} {...props}> {children} <span className="sc-tooltip__content" role="tooltip"> {content} </span> </span> ) ); Tooltip.displayName = "Tooltip"; ``` ### Tree (`tree`) Collapsible tree for nested data with click-to-select leaves. - Registry item: https://cobanov.github.io/soft-club-ui/r/tree.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/tree.json` - npm dependencies: lucide-react@^1.17.0 - Registry dependencies: base - Installs to: `components/soft-club/tree.tsx` ```tsx "use client"; import * as React from "react"; import { ChevronRight } from "lucide-react"; import { cx } from "@/lib/soft-club/cx"; export interface TreeNode { children?: TreeNode[]; defaultExpanded?: boolean; id: string; label: React.ReactNode; } interface TreeContextValue { onSelect?: (id: string) => void; selectedId?: string; } const TreeContext = React.createContext<TreeContextValue>({}); export interface TreeProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "onSelect"> { defaultSelectedId?: string; items: TreeNode[]; onSelect?: (id: string) => void; selectedId?: string; } const TreeBranch = ({ node, level }: { level: number; node: TreeNode }) => { const { onSelect, selectedId } = React.useContext(TreeContext); const hasChildren = Boolean(node.children && node.children.length > 0); const [expanded, setExpanded] = React.useState(node.defaultExpanded ?? level === 0); const selected = selectedId === node.id; return ( <li className="sc-tree__branch" role="treeitem" aria-expanded={hasChildren ? expanded : undefined}> <div className={cx("sc-tree__row", selected && "sc-tree__row--selected")} onClick={() => { if (hasChildren) setExpanded((value) => !value); onSelect?.(node.id); }} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); if (hasChildren) setExpanded((value) => !value); onSelect?.(node.id); } }} role="button" style={{ paddingLeft: `calc(${level} * var(--sc-space-4) + var(--sc-space-2))` }} tabIndex={0} > <ChevronRight aria-hidden="true" className={cx( "sc-tree__chevron", hasChildren && expanded && "sc-tree__chevron--open", !hasChildren && "sc-tree__chevron--hidden" )} size={14} strokeWidth={1.9} /> <span className="sc-tree__label">{node.label}</span> </div> {hasChildren && expanded ? ( <ul className="sc-tree__group" role="group"> {node.children!.map((child) => ( <TreeBranch key={child.id} level={level + 1} node={child} /> ))} </ul> ) : null} </li> ); }; /** * A collapsible tree for nested data. Branches expand on click, leaves report * selection, and indentation follows depth via a spacing token. */ export const Tree = React.forwardRef<HTMLUListElement, TreeProps>( ({ className, defaultSelectedId, items, onSelect, selectedId: selectedProp, ...props }, ref) => { const isControlled = selectedProp !== undefined; const [internal, setInternal] = React.useState(defaultSelectedId); const selectedId = isControlled ? selectedProp : internal; const handleSelect = React.useCallback( (id: string) => { if (!isControlled) setInternal(id); onSelect?.(id); }, [isControlled, onSelect] ); const context = React.useMemo( () => ({ onSelect: handleSelect, selectedId }), [handleSelect, selectedId] ); return ( <TreeContext.Provider value={context}> <ul className={cx("sc-tree", className)} ref={ref} role="tree" {...props}> {items.map((node) => ( <TreeBranch key={node.id} level={0} node={node} /> ))} </ul> </TreeContext.Provider> ); } ); Tree.displayName = "Tree"; ``` ### VoronoiTerritories (`voronoi-territories`) A Voronoi census with Lloyd relaxation and Kuramoto shading. Click a territory to rupture its file. - Registry item: https://cobanov.github.io/soft-club-ui/r/voronoi-territories.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/voronoi-territories.json` - npm dependencies: none - Registry dependencies: base, theme-color, use-canvas-animation, instrument - Installs to: `components/soft-club/voronoi-territories.tsx` ```tsx "use client"; import * as React from "react"; import { useCanvasAnimation } from "@/hooks/soft-club/use-canvas-animation"; import { rgba, themeRgb } from "@/lib/soft-club/theme-color"; import { cx } from "@/lib/soft-club/cx"; import { useInstrument } from "@/components/soft-club/instrument"; export interface VoronoiTerritoriesProps extends React.HTMLAttributes<HTMLDivElement> { label?: string; /** Number of territory sites surveyed. */ sites?: number; } const BLOCK = 5; interface Site { cells: number; cx: number; cy: number; flash: number; label: string; omega: number; phase: number; x: number; y: number; } interface VoronoiSim { cols: number; owner: Int16Array; ruptured: number; rows: number; sites: Site[]; } const makeSite = (cols: number, rows: number): Site => ({ cells: 0, cx: 0, cy: 0, flash: 0, label: `C-${100 + Math.floor(Math.random() * 800)}`, omega: 0.6 + Math.random() * 0.9, phase: Math.random() * Math.PI * 2, x: Math.random() * cols, y: Math.random() * rows }); /** * The archive surveyed as land: a Voronoi census over a pixel grid. Sites * drift under Lloyd relaxation, Kuramoto coupling synchronizes the shading of * neighboring holdings, and clicking a territory ruptures its file, annexing * it to a new random survey point. The map keeps the damage on record. */ export const VoronoiTerritories = React.forwardRef<HTMLDivElement, VoronoiTerritoriesProps>( ({ className, label, onPointerDown, sites = 24, ...props }, ref) => { const hostRef = React.useRef<HTMLDivElement | null>(null); const canvasRef = React.useRef<HTMLCanvasElement | null>(null); const simRef = React.useRef<VoronoiSim | null>(null); const epochRef = React.useRef(-1); const { epoch } = useInstrument(); useCanvasAnimation( canvasRef, hostRef, ({ ctx, dt, height, width }) => { const cols = Math.max(8, Math.floor(width / BLOCK)); const rows = Math.max(8, Math.floor(height / BLOCK)); let sim = simRef.current; if (!sim || sim.cols !== cols || sim.rows !== rows || epochRef.current !== epoch) { sim = { cols, owner: new Int16Array(cols * rows), ruptured: 0, rows, sites: Array.from({ length: sites }, () => makeSite(cols, rows)) }; simRef.current = sim; epochRef.current = epoch; } // Nearest-site assignment + centroid accumulation (Lloyd relaxation). for (const site of sim.sites) { site.cells = 0; site.cx = 0; site.cy = 0; } const { owner } = sim; for (let gy = 0; gy < rows; gy += 1) { for (let gx = 0; gx < cols; gx += 1) { let best = 0; let bestDist = Infinity; for (let s = 0; s < sim.sites.length; s += 1) { const dx = sim.sites[s].x - gx; const dy = sim.sites[s].y - gy; const dist = dx * dx + dy * dy; if (dist < bestDist) { bestDist = dist; best = s; } } owner[gy * cols + gx] = best; const site = sim.sites[best]; site.cells += 1; site.cx += gx; site.cy += gy; } } for (const site of sim.sites) { if (site.cells > 0) { site.x += (site.cx / site.cells - site.x) * 0.08; site.y += (site.cy / site.cells - site.y) * 0.08; } site.flash = Math.max(0, site.flash - dt * 1.4); } // Kuramoto coupling across shared borders. const coupling = new Float32Array(sim.sites.length); for (let gy = 0; gy < rows - 1; gy += 1) { for (let gx = 0; gx < cols - 1; gx += 1) { const here = owner[gy * cols + gx]; const east = owner[gy * cols + gx + 1]; const south = owner[(gy + 1) * cols + gx]; if (east !== here) { coupling[here] += Math.sin(sim.sites[east].phase - sim.sites[here].phase); coupling[east] += Math.sin(sim.sites[here].phase - sim.sites[east].phase); } if (south !== here) { coupling[here] += Math.sin(sim.sites[south].phase - sim.sites[here].phase); coupling[south] += Math.sin(sim.sites[here].phase - sim.sites[south].phase); } } } let syncX = 0; let syncY = 0; sim.sites.forEach((site, index) => { site.phase += dt * (site.omega + 0.0016 * coupling[index]); syncX += Math.cos(site.phase); syncY += Math.sin(site.phase); }); const sync = Math.hypot(syncX, syncY) / sim.sites.length; const primary = themeRgb(hostRef.current, "--sc-theme-rgb-primary", [142, 255, 173]); const text = themeRgb(hostRef.current, "--sc-theme-rgb-text", [214, 240, 224]); const warm = themeRgb(hostRef.current, "--sc-theme-rgb-warm", [201, 124, 92]); ctx.clearRect(0, 0, width, height); for (let gy = 0; gy < rows; gy += 1) { for (let gx = 0; gx < cols; gx += 1) { const here = owner[gy * cols + gx]; const site = sim.sites[here]; const east = gx + 1 < cols ? owner[gy * cols + gx + 1] : here; const south = gy + 1 < rows ? owner[(gy + 1) * cols + gx] : here; const isWall = east !== here || south !== here; if (isWall) { ctx.fillStyle = rgba(text, 0.82); } else if (site.flash > 0) { ctx.fillStyle = rgba(warm, 0.25 + site.flash * 0.6); } else { const pulse = 0.5 + 0.5 * Math.sin(site.phase); ctx.fillStyle = rgba(primary, 0.1 + pulse * 0.16); } ctx.fillRect(gx * BLOCK, gy * BLOCK, BLOCK - 1, BLOCK - 1); } } ctx.fillStyle = rgba(text, 0.8); ctx.font = "8px monospace"; sim.sites.forEach((site, index) => { if (index % 3 !== 0) return; ctx.fillText(site.label, site.x * BLOCK + 4, site.y * BLOCK - 3); ctx.fillText(String(site.cells), site.x * BLOCK + 4, site.y * BLOCK + 7); }); ctx.fillStyle = rgba(primary, 0.7); ctx.font = "9px monospace"; ctx.fillText( `HOLDINGS ${sim.sites.length} RUPTURED ${sim.ruptured} SYNC ${sync.toFixed(2)} GRID ${cols}x${rows}`, 8, height - 8 ); }, { fps: 24 } ); const setRef = (node: HTMLDivElement | null) => { hostRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }; const rupture = (event: React.PointerEvent<HTMLDivElement>) => { onPointerDown?.(event); const sim = simRef.current; const host = hostRef.current; if (!sim || !host) return; const rect = host.getBoundingClientRect(); const gx = Math.floor((event.clientX - rect.left) / BLOCK); const gy = Math.floor((event.clientY - rect.top) / BLOCK); if (gx < 0 || gy < 0 || gx >= sim.cols || gy >= sim.rows) return; const site = sim.sites[sim.owner[gy * sim.cols + gx]]; site.flash = 1; site.x = Math.random() * sim.cols; site.y = Math.random() * sim.rows; site.label = `C-${100 + Math.floor(Math.random() * 800)}`; sim.ruptured += 1; }; return ( <div className={cx("sc-live", "sc-voronoi-territories", className)} onPointerDown={rupture} ref={setRef} {...props} > <canvas aria-hidden="true" className="sc-live__canvas" ref={canvasRef} /> {label ? <span className="sc-live__label">{label}</span> : null} </div> ); } ); VoronoiTerritories.displayName = "VoronoiTerritories"; ``` ### Waveform (`waveform`) Always-moving audio-style bar field with gradient bars. - Registry item: https://cobanov.github.io/soft-club-ui/r/waveform.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/waveform.json` - npm dependencies: none - Registry dependencies: base, theme-color, use-canvas-animation - Installs to: `components/soft-club/waveform.tsx` ```tsx "use client"; import * as React from "react"; import { useCanvasAnimation } from "@/hooks/soft-club/use-canvas-animation"; import { rgba, themeRgb } from "@/lib/soft-club/theme-color"; import { cx } from "@/lib/soft-club/cx"; export interface WaveformProps extends React.HTMLAttributes<HTMLDivElement> { bars?: number; label?: string; } export const Waveform = React.forwardRef<HTMLDivElement, WaveformProps>( ({ bars = 40, className, label, ...props }, ref) => { const hostRef = React.useRef<HTMLDivElement | null>(null); const canvasRef = React.useRef<HTMLCanvasElement | null>(null); useCanvasAnimation(canvasRef, hostRef, ({ ctx, height, time, width }) => { const primary = themeRgb(hostRef.current, "--sc-theme-rgb-primary", [142, 255, 173]); const secondary = themeRgb(hostRef.current, "--sc-theme-rgb-secondary", [139, 184, 215]); const gap = 2; const barWidth = Math.max(2, width / bars - gap); const midY = height / 2; ctx.clearRect(0, 0, width, height); for (let i = 0; i < bars; i += 1) { const phase = i * 0.4; const amplitude = 0.5 + 0.34 * Math.sin(time * 2 + phase) + 0.16 * Math.sin(time * 4.8 + phase * 1.7); const barHeight = Math.max(2, Math.abs(amplitude) * (height - 8)); const x = i * (barWidth + gap); const blend = i / bars; const color: [number, number, number] = [ primary[0] + (secondary[0] - primary[0]) * blend, primary[1] + (secondary[1] - primary[1]) * blend, primary[2] + (secondary[2] - primary[2]) * blend ]; const gradient = ctx.createLinearGradient(0, midY - barHeight / 2, 0, midY + barHeight / 2); gradient.addColorStop(0, rgba(color, 0.9)); gradient.addColorStop(0.5, rgba(color, 0.55)); gradient.addColorStop(1, rgba(color, 0.9)); ctx.fillStyle = gradient; ctx.fillRect(x, midY - barHeight / 2, barWidth, barHeight); } }); const setRef = (node: HTMLDivElement | null) => { hostRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }; return ( <div className={cx("sc-live", "sc-waveform", className)} ref={setRef} {...props}> <canvas aria-hidden="true" className="sc-live__canvas" ref={canvasRef} /> {label ? <span className="sc-live__label">{label}</span> : null} </div> ); } ); Waveform.displayName = "Waveform"; ``` ### WordRoll (`word-roll`) Small rolling word mark for labels and headers. - Registry item: https://cobanov.github.io/soft-club-ui/r/word-roll.json - Install: `npx shadcn@latest add https://cobanov.github.io/soft-club-ui/r/word-roll.json` - npm dependencies: none - Registry dependencies: base - Installs to: `components/soft-club/word-roll.tsx` ```tsx "use client"; import * as React from "react"; import { cx } from "@/lib/soft-club/cx"; export interface WordRollProps extends React.HTMLAttributes<HTMLSpanElement> { index?: number; words?: string[]; } const defaultWords = ["glass", "metro", "trip-hop", "sony", "signal"]; export const WordRoll = React.forwardRef<HTMLSpanElement, WordRollProps>( ({ className, index = 0, words = defaultWords, ...props }, ref) => { const safeIndex = Math.abs(index) % words.length; return ( <span className={cx("sc-word-roll", className)} ref={ref} {...props}> {words[safeIndex]} </span> ); } ); WordRoll.displayName = "WordRoll"; ```
)); TableHead.displayName = "TableHead"; export const TableCell = React.forwardRef< HTMLTableCellElement, React.TdHTMLAttributes >(({ className, ...props }, ref) => (	)); TableCell.displayName = "TableCell"; export const TableCaption = React.forwardRef< HTMLTableCaptionElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

{title}

{children}

{title}