50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1ca8,import { ArrowRight } from "lucide-react"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "./lib/cn"; import { StageScope } from "./stage-scope"; import "./block-concept.css"; /** * Marketing blocks share one voice: monochrome from the system tokens, Geist * display with two-tone titles, ink actions, ruled sections and ember only for * focus. Blocks follow the page theme, and the Caliper UI controls inside them too. */ export type BlockAction = { label: string; href?: string; onClick?: () => void }; /** * A full-bleed band. The section is the container, so everything inside lays * out by the block's own width; `block-inner` holds the measure and rhythm. * `backdrop` paints behind the content edge to edge (grid lines, a tone). */ export function BlockRoot({ as: Tag = "section", width = "default", backdrop, tone, className, innerClassName, children, ...props }: Omit, "ref"> & { /** The band's element; a site footer is a footer. */ as?: "section" | "footer" | "div"; /** default 1240px · narrow 960px · wide 1440px. */ width?: "default" | "narrow" | "wide"; backdrop?: ReactNode; /** A band tone: the page colour or the sunken colour. */ tone?: "page" | "sunken" | "ink"; innerClassName?: string; }) { return ( {backdrop}

{children}

); } export function BlockEyebrow({ className, ...props }: ComponentProps<"p">) { return

; } /** A display heading in the block face. size 1 is the hero headline. */ export function BlockTitle({ as: Tag = "h2", size = 2, className, ...props }: ComponentProps<"h2"> & { as?: "h1" | "h2" | "h3"; size?: 1 | 2 | 3 }) { return ; } /** The second tone of a title: these words land in grey. */ export function BlockEm({ className, ...props }: ComponentProps<"em">) { return ; } export function BlockLead({ className, ...props }: ComponentProps<"p">) { return

; } /** * The section opening every block shares: eyebrow, title and lead. `split` * sets the lead beside the title on wide blocks; `center` stacks it centred. */ export function BlockHeader({ eyebrow, title, lead, align = "start", aside, headingLevel = 2, className, }: { eyebrow?: ReactNode; title: ReactNode; lead?: ReactNode; align?: "start" | "center" | "split"; /** 1 when the block opens the page, e.g. a pricing page. */ headingLevel?: 1 | 2; /** Sits at the end of the header row, e.g. a period toggle. */ aside?: ReactNode; className?: string; }) { return (

{eyebrow && {eyebrow}} {title}
{(lead || aside) && (
{lead && {lead}} {aside}
)}

); } export function BlockActions({ primary, secondary, className, block = false, }: { primary?: BlockAction; secondary?: BlockAction; className?: string; /** Full-width actions, e.g. on phones. */ block?: boolean; }) { if (!primary && !secondary) return null; return (
{primary && } {secondary && }
); } export function BlockButton({ action, kind = "primary", arrow = false }: { action: BlockAction; kind?: "primary" | "secondary"; arrow?: boolean }) { const shared = { "data-slot": "block-button", "data-kind": kind } as const; const content = ( <> {action.label} {arrow && } ); return action.href ? ( {content} ) : ( ); } export function BlockCard({ className, ...props }: ComponentProps<"div">) { return
; } export function BlockChip({ className, ...props }: ComponentProps<"span">) { return ; } /** * A product artefact on a stage: a dotted tonal panel holding a framed window, with an optional floating note that overlaps the * window's corner on wide blocks and sits beneath it on narrow ones. */ export function BlockStage({ title, floating, bare = false, className, children, }: { /** Shown in the window bar, e.g. "halden.app/close". */ title?: string; floating?: ReactNode; /** No window frame: the children bring their own surfaces. */ bare?: boolean; className?: string; children: ReactNode; }) { return (
{bare ? ( {children} ) : (

{title && {title}}

{children}

)} {floating &&
{floating}
}
); } /** Company names set as type in a quiet row; swap in SVG marks in production. */ export function BlockLogos({ label, logos, className }: { label?: string; logos: readonly string[]; className?: string }) { return (
{label &&
{label}
}
{logos.map((logo) => (
{logo}
))}

); } /** Initials from a name, in the block's highlight tones. */ export function BlockInitials({ name, size = 36, tone, className }: { name: string; size?: number; tone?: number; className?: string }) { const words = name.trim().split(/\s+/u); const initials = ((words[0]?.[0] ?? "") + (words.length > 1 ? (words[words.length - 1]?.[0] ?? "") : "")).toUpperCase(); return ( ); } export type BlockStat = { value: ReactNode; label: string }; 53:T820,import type { ReactNode } from "react"; import { cn } from "./lib/cn"; import { BlockActions, BlockEyebrow, BlockRoot, BlockTitle, type BlockAction } from "./block-concept"; import "./cta-block.css"; /** * The closing call to action: the hero's promise again at poster size, one * specific next step and a reassurance line. `tone="ink"` sets it on an ink * panel that inverts its actions; `tone="page"` leaves it on the page. */ export function CtaBlock({ eyebrow, title, reassurance, primary, secondary, action, tone = "ink", className, }: { eyebrow?: string; title: string; /** e.g. "14 days free · no card · import your September close". */ reassurance?: string; primary?: BlockAction; secondary?: BlockAction; /** Custom content in place of the actions, e.g. an install command. */ action?: ReactNode; tone?: "ink" | "page"; className?: string; }) { const ink = tone === "ink"; // An ink panel that inverts its actions. return (
{ink && ); } 54:T2ac6,/* block-concept.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* A site header used outside a block still needs the block tokens. */ [data-slot="block"] { --k-display-font: var(--font-display-block, var(--font-sans, system-ui, sans-serif)); --k-display-weight: 700; --k-display-case: none; --k-display-track: -0.03em; --k-display-stretch: normal; --k-display-lh: 1.04; /* Monochrome, from the system tokens, so blocks follow the page theme. */ --k-bg: var(--background, #fff); --k-surface: var(--elevated, #fff); --k-sunken: var(--surface, #f7f7f8); --k-ink: var(--foreground, #18181b); --k-muted: var(--muted-foreground, #5d5d66); --k-line: var(--border, #e4e4e8); --k-line-strong: color-mix(in oklab, var(--border-strong, #8a8a94) 55%, var(--k-line)); /* The grey second line of a two-tone title; 3:1 or better as large text in both themes. */ --k-faint: color-mix(in oklab, var(--k-muted) 70%, var(--k-bg)); --k-accent: var(--k-ink); --k-accent-ink: var(--k-bg); --k-hi: var(--k-ink); --k-hi-soft: var(--k-sunken); --k-focus: var(--brand, #bb4400); --k-danger: var(--danger, #c2272d); --k-stage: var(--surface, #f7f7f8); --k-stage-dot: color-mix(in oklab, var(--k-ink) 14%, var(--k-stage)); --k-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 14px 30px -16px rgb(0 0 0 / 24%), 0 40px 80px -48px rgb(0 0 0 / 32%); --k-radius: 10px; --k-radius-lg: 14px; --k-radius-xl: 18px; --k-btn-radius: 10px; --k-tile-1: color-mix(in oklab, var(--k-ink) 5%, var(--k-bg)); --k-tile-2: color-mix(in oklab, var(--k-ink) 8%, var(--k-bg)); --k-tile-3: color-mix(in oklab, var(--k-ink) 11%, var(--k-bg)); --k-tile-4: color-mix(in oklab, var(--k-ink) 14%, var(--k-bg)); background: var(--k-bg); color: var(--k-ink); font-family: var(--font-sans, system-ui, sans-serif); } /* Band tones inside a concept: a sunken band, or an inverse ink band. */ [data-slot="block"][data-tone="sunken"] { background: var(--k-sunken); } [data-slot="block-inner"] { position: relative; z-index: 1; margin-inline: auto; max-inline-size: 1240px; padding-inline: clamp(20px, 5cqi, 64px); padding-block: clamp(64px, 10cqi, 128px); } [data-slot="block-inner"][data-width="narrow"] { max-inline-size: 960px; } [data-slot="block-inner"][data-width="wide"] { max-inline-size: 1440px; } /* ── Type ─────────────────────────────────────────── */ [data-slot="block-eyebrow"] { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono, monospace); font-size: 13px; line-height: 18px; color: var(--k-muted); } [data-slot="block-title"] { margin: 0; font-family: var(--k-display-font); font-weight: var(--k-display-weight); font-stretch: var(--k-display-stretch); font-variation-settings: "wdth" var(--k-display-wdth, 100); text-transform: var(--k-display-case); letter-spacing: var(--k-display-track); font-optical-sizing: auto; text-wrap: balance; color: var(--k-ink); } [data-slot="block-title"][data-size="1"] { font-size: clamp(38px, 4.4cqi, 64px); line-height: 1.08; font-weight: 900; letter-spacing: -0.04em; } [data-slot="block-title"][data-size="2"] { font-size: clamp(30px, 3cqi, 42px); line-height: var(--k-display-lh); } [data-slot="block-title"][data-size="3"] { font-size: clamp(19px, 1.7cqi, 22px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; } /* Two-tone titles: the emphasised words land in grey. */ [data-slot="block-em"] { font-style: normal; color: var(--k-faint); } [data-slot="block-lead"] { margin: 0; max-width: 50ch; font-size: clamp(16px, 1.3cqi, 18px); line-height: 1.6; color: var(--k-muted); text-wrap: pretty; } /* The shared section opening. */ [data-slot="block-header"] { display: grid; gap: 20px 48px; margin-bottom: clamp(36px, 5cqi, 64px); } [data-slot="block-header-title"] { display: grid; gap: 18px; justify-items: start; } [data-slot="block-header-aside"] { display: grid; gap: 16px; align-content: end; justify-items: start; } [data-slot="block-header"][data-align="center"] { justify-items: center; text-align: center; } [data-slot="block-header"][data-align="center"] :is([data-slot="block-header-title"], [data-slot="block-header-aside"]) { justify-items: center; } [data-slot="block-header"][data-align="center"] [data-slot="block-title"] { max-width: 18ch; } @container (min-width: 900px) { [data-slot="block-header"][data-align="split"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } [data-slot="block-header"][data-align="split"] [data-slot="block-header-aside"] { justify-items: start; padding-bottom: 6px; } } /* ── Buttons ──────────────────────────────────────── */ [data-slot="block-button"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--k-btn-radius); font: 500 14px/1 var(--font-sans, system-ui, sans-serif); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), translate var(--duration-normal) var(--ease-settle); } [data-slot="block-button"][data-kind="primary"] { background: var(--k-accent); color: var(--k-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 1px 2px rgb(0 0 0 / 20%); } [data-slot="block-button"][data-kind="secondary"] { background: color-mix(in srgb, var(--k-surface) 60%, transparent); color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line-strong); } [data-slot="block-button-arrow"] { transition: translate var(--duration-normal) var(--ease-settle); } @media (hover: hover) { [data-slot="block-button"][data-kind="primary"]:hover { background: color-mix(in srgb, var(--k-accent) 86%, var(--k-bg)); } [data-slot="block-button"][data-kind="secondary"]:hover { background: var(--k-sunken); box-shadow: inset 0 0 0 1px var(--k-ink); } [data-slot="block-button"]:hover [data-slot="block-button-arrow"] { translate: 3px 0; } } [data-slot="block-button"]:active { translate: 0 var(--motion-press-travel); } [data-slot="block-button"]:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 3px; } [data-slot="block-card"] { border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line); } [data-slot="block-chip"] { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--k-hi-soft); color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line); text-decoration: none; } [data-slot="block-initials"] { display: inline-grid; flex: none; place-items: center; border-radius: 10px; font-weight: 600; background: var(--k-hi-soft); color: var(--k-hi); } [data-slot="block-initials"][data-tone="1"] { background: var(--k-tile-1); color: var(--k-ink); } [data-slot="block-initials"][data-tone="2"] { background: var(--k-tile-2); color: var(--k-ink); } [data-slot="block-initials"][data-tone="3"] { background: var(--k-tile-3); color: var(--k-ink); } /* ── Stage: a product artefact framed on a tonal panel ─ */ [data-slot="block-stage"] { position: relative; padding: clamp(14px, 4.5cqi, 64px); padding-bottom: 0; border-radius: var(--k-radius-xl); background-color: var(--k-stage); background-image: radial-gradient(var(--k-stage-dot) 1px, transparent 1.2px); background-size: 16px 16px; box-shadow: inset 0 0 0 1px var(--k-line); overflow: hidden; } [data-slot="block-window"] { position: relative; overflow: hidden; border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line), var(--k-shadow); } [data-slot="block-window-bar"] { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--k-line); background: color-mix(in srgb, var(--k-sunken) 55%, var(--k-surface)); } [data-slot="block-window-dots"] { display: none; } [data-slot="block-window-dots"] i { width: 10px; height: 10px; border-radius: 999px; background: var(--k-line-strong); } [data-slot="block-window-title"] { flex: 1 1 0; min-width: 0; width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--k-muted); } [data-slot="block-window-body"] { padding: clamp(14px, 2.6cqi, 28px); } [data-slot="block-float"] { position: relative; z-index: 2; margin: 12px 0 14px; } @container (min-width: 760px) { /* Over the window bar's empty right end, so it never hides a row. */ [data-slot="block-float"] { position: absolute; top: clamp(12px, 2.4cqi, 36px); right: clamp(12px, 2.4cqi, 36px); margin: 0; max-width: 320px; } } [data-slot="block-float"] > * { border-radius: var(--k-radius); background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line), var(--k-shadow); } /* ── Logos ────────────────────────────────────────── */ [data-slot="block-logos"] { display: grid; gap: 18px; } [data-slot="block-logos-label"] { margin: 0; font-size: 13px; color: var(--k-muted); } [data-slot="block-logos"] ul { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(24px, 4.5cqi, 56px); margin: 0; padding: 0; list-style: none; } [data-slot="block-logos"] li { font-family: var(--k-display-font); font-weight: var(--k-display-weight); font-stretch: var(--k-display-stretch); text-transform: var(--k-display-case); font-size: clamp(18px, 2cqi, 24px); letter-spacing: calc(var(--k-display-track) / 2); color: var(--k-muted); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { [data-slot="block-button"], [data-slot="block-button-arrow"] { transition: none; } [data-slot="block-button"]:active { translate: none; } [data-slot="block-button"]:hover [data-slot="block-button-arrow"] { translate: none; } } @media print { footer[data-slot="block"] { display: none !important; } [data-slot="block"] { background: #fff; } } } 55:T523,/* cta-block.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="block-dots"] { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--k-stage-dot) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 85%); } /* The closing band inverts its actions. */ [data-slot="cta-band"] [data-slot="block-dots"] { --k-stage-dot: rgb(255 255 255 / 14%); } [data-slot="cta-band"] [data-slot="block-button"][data-kind="primary"] { background: var(--k-bg); color: var(--k-ink); } [data-slot="cta-band"] [data-slot="block-button"][data-kind="secondary"] { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); } @media (hover: hover) { [data-slot="cta-band"] [data-slot="block-button"][data-kind="primary"]:hover { background: color-mix(in srgb, var(--k-bg) 88%, var(--k-hi)); } [data-slot="cta-band"] [data-slot="block-button"][data-kind="secondary"]:hover { background: rgb(255 255 255 / 8%); box-shadow: inset 0 0 0 1px currentColor; } } [data-slot="cta-band"] [data-slot="block-button"]:focus-visible { outline-color: currentColor; } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/block-concept.tsx","content":"$52","type":"registry:ui","target":"components/ui/block-concept.tsx"},{"path":"ui/cta-block.tsx","content":"$53","type":"registry:ui","target":"components/ui/cta-block.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/stage-scope.tsx","content":"\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\n/**\n * True inside a block stage: a frame shown there is a demonstration on a page\n * that already has its own main landmark, so it should not add a second one.\n */\nconst InStage = createContext(false);\n\nexport function StageScope({ children }: { children: ReactNode }) {\n return {children};\n}\n\nexport const useInStage = () => useContext(InStage);\n","type":"registry:ui","target":"components/ui/stage-scope.tsx"},{"path":"ui/block-concept.css","content":"$54","type":"registry:file","target":"components/ui/block-concept.css"},{"path":"ui/cta-block.css","content":"$55","type":"registry:file","target":"components/ui/cta-block.css"}],"className":"h-[70svh] min-h-80"}]]}]