60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T427b,"use client"; import Link from "next/link"; import { type FormEvent, type ReactNode, useState } from "react"; import { Badge6 } from "@/components/beste/component/badge6"; import { Button1 } from "@/components/beste/component/button1"; import { Socialproof24 } from "@/components/beste/piece/socialproof24"; import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSubmit, QuestionnaireTitle, } from "@/components/ui/questionnaire"; import { cn } from "@/lib/utils"; interface Badge { label: string; } interface ActionButton { label: string; href: string; } interface BandImage { src: string; alt: string; } interface WeightChoice { value: string; label: string; description?: string; /** Added to the score. The highest weight in each question sets the ceiling. */ weight: number; } interface WeightQuestion { /** Form field name. Must be unique across the flow. */ name: string; title: string; description?: string; choices?: WeightChoice[]; } interface Band { /** Upper edge of this band as a percent. Bands are read in order. */ upTo: number; title: string; summary: string; /** What this band actually asks a team to do */ practices?: string[]; image?: BandImage; button?: ActionButton; } interface Aside { title?: string; note?: string; /** Piece shown in the banner beside the questions */ media?: ReactNode; } interface Workflow55Labels { previous?: string; next?: string; submit?: string; restart?: string; railTitle?: string; scoreLabel?: string; practicesTitle?: string; } interface Workflow55Props { badge?: Badge; /** Short line beside the eyebrow, across the hairline divider */ meta?: string; heading?: string; description?: string; questions?: WeightQuestion[]; /** Prints a scoped shortcut on every choice and binds it while the question is active */ shortcuts?: "letters" | "numbers"; /** Read in order; the first band whose `upTo` covers the score wins. */ bands?: Band[]; /** Band across the top, shown until the score is placed */ image?: BandImage; /** Small banner beside the questions, so the column is not empty while answering */ aside?: Aside; labels?: Workflow55Labels; className?: string; } export const workflow55Demo: Workflow55Props = { badge: { label: "How much process" }, meta: "Four questions", heading: "Most teams are running the wrong amount of process", description: "Not too much or too little in general, just the wrong amount for this piece of work. Four questions put you somewhere on the line, and the line has an honest bottom end.", shortcuts: "numbers", image: { src: "https://images.unsplash.com/photo-1777873106116-4f29e3988626?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", alt: "Empty meeting room with chairs pulled back", }, aside: { title: "Who it ends up involving", note: "Every rung up the scale adds a name that has to say yes before the work can move.", media: ( ), }, labels: { submit: "Place me on the line", restart: "Answer again", railTitle: "How much process this needs", scoreLabel: "on the line", practicesTitle: "What that actually means", }, questions: [ { name: "blast", title: "If this goes wrong on a Friday, who notices?", description: "The honest blast radius, not the one in the risk register.", choices: [ { value: "team", label: "The team, and nobody else", weight: 0 }, { value: "company", label: "The rest of the company", weight: 2 }, { value: "customers", label: "Paying customers, immediately", weight: 4 }, ], }, { name: "reverse", title: "How hard is it to undo?", choices: [ { value: "easy", label: "One command, under a minute", weight: 0 }, { value: "awkward", label: "A morning of work and an apology", weight: 2 }, { value: "never", label: "It cannot be undone", weight: 4 }, ], }, { name: "people", title: "How many people have to agree?", choices: [ { value: "one", label: "One, and they are writing it", weight: 0 }, { value: "few", label: "Two or three in the same team", weight: 1 }, { value: "many", label: "Several teams, plus somebody senior", weight: 3 }, ], }, { name: "rules", title: "Is anybody outside the company allowed to ask about it?", description: "Auditors, regulators, or a customer with a contract clause.", choices: [ { value: "no", label: "No", weight: 0 }, { value: "maybe", label: "In theory, never in practice", weight: 1 }, { value: "yes", label: "Yes, and they do", weight: 4 }, ], }, ], bands: [ { upTo: 20, title: "Just ship it", summary: "Nothing here justifies a process. A review board on this work would cost more than the mistake it is meant to prevent.", practices: [ "One person writes it and one person looks at it", "No document, no ticket, no meeting", "Fix forward rather than plan around failure", ], image: { src: "https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&h=1000&fit=crop", alt: "Single desk with a laptop and a notebook", }, button: { label: "See the lightweight kit", href: "https://beste.co" }, }, { upTo: 45, title: "Light checkpoints", summary: "Enough at stake to write things down, not enough to stop and gather people. Two checkpoints, both asynchronous.", practices: [ "A one-page note before, a one-page note after", "A named reviewer rather than a committee", "Rollback rehearsed once, not documented three times", ], image: { src: "https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=1200&h=1000&fit=crop", alt: "Two people reviewing work on a shared screen", }, button: { label: "See the checkpoint template", href: "https://beste.co" }, }, { upTo: 70, title: "Staged review", summary: "Several teams and a change that is awkward to reverse. Stage it, and let each stage prove the next one is safe.", practices: [ "Three stages with a named owner and an exit condition each", "A dry run against production data before the first stage", "One meeting, at the start, with everyone who can say no", ], image: { src: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&h=1000&fit=crop", alt: "Small team standing around a table mid-discussion", }, button: { label: "See the staging plan", href: "https://beste.co" }, }, { upTo: 100, title: "Full change control", summary: "Irreversible, externally visible, and somebody outside the company is entitled to ask how it was done. This is the one case where the paperwork is the cheap part.", practices: [ "Written change request, approved before any work starts", "Evidence captured as it happens rather than reconstructed after", "A rehearsed rollback, signed off by somebody who did not write it", ], image: { src: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&h=1000&fit=crop", alt: "Empty meeting room with chairs pulled back", }, button: { label: "See the change control pack", href: "https://beste.co" }, }, ], }; export function Workflow55({ badge, meta, heading, description, questions = [], shortcuts, bands = [], image, aside, labels = {}, className, }: Workflow55Props) { const { previous: previousLabel, next: nextLabel, submit: submitLabel, restart: restartLabel, railTitle, scoreLabel, practicesTitle, } = labels; const [percent, setPercent] = useState(null); /** The ceiling is the heaviest answer to every question, so the rail is always full scale. */ const ceiling = questions.reduce( (sum, question) => sum + Math.max(0, ...(question.choices ?? []).map((choice) => choice.weight)), 0 ); const handleSubmit = (event: FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); let score = 0; for (const question of questions) { const value = String(data.get(question.name) ?? ""); const choice = question.choices?.find((entry) => entry.value === value); score += choice?.weight ?? 0; } setPercent(ceiling > 0 ? Math.round((score / ceiling) * 100) : 0); }; const restart = () => setPercent(null); const band = percent === null ? undefined : (bands.find((entry) => percent <= entry.upTo) ?? bands.at(-1)); const shownImage = band?.image ?? image; return (

{badge && } {badge && meta && } {meta && ( {meta} )}

{heading && (

{heading}

)} {description && (

{description}

)}

{shownImage && ( {shownImage.alt}

)}

{percent === null ? (

{questions.length > 0 && } {questions.map((question, index) => ( {question.title} {question.description && ( {question.description} )} {question.choices?.map((choice, choiceIndex) => ( {choice.label} {choice.description && ( {choice.description} )} ))} ))} {previousLabel} {nextLabel} {submitLabel} {aside && (

{aside.title && (

{aside.title}

)} {aside.media && (

{aside.media}

)} {aside.note && (

{aside.note}

)}

) : (

{railTitle && (

{railTitle}

)}

{percent}%

{scoreLabel ?? "on the line"}

{band && ( <>

{band.title}

{band.summary}

)}

{band?.button && ( )}

{band?.practices && band.practices.length > 0 && (

{practicesTitle && (

{practicesTitle}

)}

{index + 1}
{practice}

)}

); } 63:Td65,"use client"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { cn } from "@/lib/utils"; type Surface = "card" | "glass"; interface Member { src: string; alt: string; name?: string; } interface Socialproof24Props { items?: Member[]; surface?: Surface; bordered?: boolean; inverted?: boolean; className?: string; } /* The card sets the colour and everything inside it is drawn in `current`, so inverting is two classes rather than a condition on every element. `glass` is a deliberate exception to the solid-surface rule: these pieces sit over section background images, and a frosted panel is the point of it. */ const surfaceClasses: Record = { card: { plain: "bg-card text-card-foreground", inverted: "bg-foreground text-background", }, glass: { plain: "bg-card/60 text-card-foreground backdrop-blur-md", inverted: "bg-foreground/60 text-background backdrop-blur-md", }, }; export const socialproof24Demo: Socialproof24Props = { surface: "card", bordered: false, inverted: false, items: [ { src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop", alt: "Portrait of a product designer", }, { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop", alt: "Portrait of a frontend engineer", }, { src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&h=160&fit=crop", alt: "Portrait of a content strategist", name: "Dana Whitlock", }, { src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=160&h=160&fit=crop", alt: "Portrait of a product manager", }, ], }; export function Socialproof24({ items = [], surface = "card", bordered = false, inverted = false, className }: Socialproof24Props) { const surfaceTone = surfaceClasses[surface][inverted ? "inverted" : "plain"]; return (

{items.map((member, index) => (

{member.name && (

{member.name}

)} {member.alt .split(" ") .map((word) => word[0]) .join("") .slice(0, 2)}

))}

); } 64:T54f,import { cn } from "@/lib/utils"; type Tone = "primary" | "foreground" | "muted"; type Badge6Orientation = "horizontal" | "vertical"; interface Badge6Props { /** Eyebrow label (rendered uppercase) */ label: string; /** Accent square color */ tone?: Tone; /** Layout: square beside the label (default) or stacked above it */ orientation?: Badge6Orientation; /** Override the label classes, e.g. "text-background/70" on dark surfaces */ labelClassName?: string; /** Additional classes merged onto the root */ className?: string; } const toneStyles: Record = { primary: "bg-primary", foreground: "bg-foreground", muted: "bg-muted-foreground", }; export const badge6Demo: Badge6Props = { label: "About Us", }; export function Badge6({ label, tone = "primary", orientation = "horizontal", labelClassName, className, }: Badge6Props) { const vertical = orientation === "vertical"; return (

{label}

); } 65:Te35,"use client"; import { ArrowRight, type LucideIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Tone = "dark" | "primary"; interface Button1Props { /** Button label */ label: string; /** * Compose the rendered element shadcn-style (radix asChild): * `` * The child element receives the pill content (label + seal) as its * children, so pass it without children of its own. */ asChild?: boolean; /** The element to render when `asChild` is set (e.g. your router's Link) */ children?: React.ReactElement; /** * Fallback link: renders a plain ``. Prefer `asChild` with your * framework's Link component for client-side navigation. */ href?: string; /** Trailing seal icon (defaults to ArrowRight) */ icon?: LucideIcon; /** Surface tone: dark pill (default) or primary pill (for dark backgrounds) */ tone?: Tone; /** Fully round the pill and seal (shorthand for className="rounded-full") */ roundedFull?: boolean; /** Click handler (used when there is no href and no asChild) */ onClick?: React.MouseEventHandler; /** Additional classes merged onto the button */ className?: string; } const toneStyles: Record = { dark: { pill: "bg-foreground text-background hover:bg-foreground/90", seal: "bg-primary text-primary-foreground", }, primary: { pill: "bg-primary text-primary-foreground hover:bg-primary/90", seal: "bg-primary-foreground text-primary", }, }; export const button1Demo: Button1Props = { label: "Read More", }; export function Button1({ label, asChild = false, children, href, icon: Icon = ArrowRight, tone = "dark", roundedFull = false, onClick, className, }: Button1Props) { const styles = toneStyles[tone]; // Mirror the pill's border radius onto the seal so the arrow chip always // matches the pill. Priority: an explicit `rounded-*` in className wins, // then the `roundedFull` shorthand, otherwise the default rounded-md. const explicitRadius = className?.match(/\brounded-(?:none|sm|md|lg|xl|2xl|3xl|full)\b/)?.[0]; const sealRadius = explicitRadius ?? (roundedFull ? "rounded-full" : "rounded-md"); const inner = ( <> {label} ); const classes = cn( // justify-between keeps the label left and the seal pinned right when the // pill is full-width; at w-fit there's no free space so they stay together. "group/button1 h-auto w-fit justify-between gap-3 rounded-md py-3 pl-6 pr-3 text-base font-bold transition-colors", roundedFull && "rounded-full", styles.pill, className ); if (asChild && React.isValidElement(children)) { // The consumer's element (e.g. next/link's ) becomes the // rendered element; the pill content is injected as its children. return ( ); } if (href) { return ( ); } return ( ); } 5f:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["questionnaire","avatar","button"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/workflow55/workflow55.tsx","content":"$62","type":"registry:component","target":"components/beste/block/workflow55.tsx"},{"path":"registry-pieces/socialproof24/socialproof24.tsx","content":"$63","type":"registry:component","target":"components/beste/piece/socialproof24.tsx"},{"path":"registry-components/badge6/badge6.tsx","content":"$64","type":"registry:component","target":"components/beste/component/badge6.tsx"},{"path":"registry-components/button1/button1.tsx","content":"$65","type":"registry:component","target":"components/beste/component/button1.tsx"}],"className":"h-[70svh] min-h-80"}]]}]