Migrating to v4.

The CLI copies source, so nothing updates on its own. Commit first: --overwrite replaces your edits.

# the new tokens: --finish-glow, --chart-from and the taylor theme
npx @entrepta/cli@latest init --theme=entrepta --overwrite

# the components that changed. Commit first: --overwrite replaces your edits
npx @entrepta/cli@latest add card dialog field metric choice-card swatch-picker \
  chat-thread tabs stepper sidebar mobile-nav dropdown command-palette tooltip \
  segmented-control empty-state --overwrite

# the format file has a new name. Reinstall what uses it, then delete lib/format.ts
# if it was entrepta's
npx @entrepta/cli@latest add amount delta money-input calendar date-picker \
  date-navigator filter-builder bar-list contribution-grid chart --overwrite

• Labels

  Before: CardLabel, FieldLabel, DialogLabel, Metric, ChoiceCard, SwatchPicker and ChatThread put a ◆ in front of their text.

  After: They draw nothing in front. Pass an icon for something there, a Phosphor icon or an element.

  the old look

  tsxcopy

  const Mark = () => (
    <span aria-hidden style={{ fontSize: 10 }} className="text-[var(--fg-brand)]">◆</span>
  )
  
  <CardLabel icon={<Mark />}>post</CardLabel>
  <Field id="email" label="email" icon={<Mark />}>…</Field>
  <Metric label="spent" icon={<Mark />} value={…} />

• The current marker

  Before: Sidebar, MobileNav, Stepper and Tabs marked the current item with a ◆.

  After: Sidebar and MobileNav take an indicator, a dot by default. Tabs and Stepper have none by default: the underline and the marker already say it. null hides it.

  the old look

  tsxcopy

  const Mark = () => (
    <span aria-hidden style={{ fontSize: 10 }} className="text-[var(--fg-brand)]">◆</span>
  )
  
  <Sidebar indicator={<Mark />} … />
  <MobileNav indicator={<Mark />} … />
  <Tabs indicator={<Mark />} defaultValue="a">…</Tabs>
  <Stepper indicator={<Mark />} steps={STEPS} current="bank" />

• Menu titles

  Before: DropdownMenuLabel and a command palette group had a ◆ before the title.

  After: They are text.

  the old look

  tsxcopy

  // a class on the label, the way the ◆ came in before
  <DropdownMenuLabel className="before:content-['◆'] before:text-[var(--fg-brand)] before:[font-size:9px]">
    account
  </DropdownMenuLabel>
  <CommandGroup
    heading="pages"
    className="[&_[cmdk-group-heading]]:before:content-['◆'] [&_[cmdk-group-heading]]:before:text-[var(--fg-brand)]"
  />

• The //

  Before: FieldError and the command palette footer started with a dimmed //.

  After: FieldError is the message alone. The palette footer says palette.

  the old look

  tsxcopy

  const Slashes = () => <span aria-hidden className="opacity-70">{"// "}</span>
  
  <Field id="email" label="email" error={error && <><Slashes />{error}</>}>…</Field>
  <CommandFoot><Slashes />palette</CommandFoot>

• CardComment

  Before: CardComment drew a // in front of a footer note.

  After: It is CardNote now, the text alone in the footer's ink.

  the old look

  tsxcopy

  <CardNote>
    <span aria-hidden className="opacity-60">{"// "}</span>
    updated today
  </CardNote>

• lib/format.ts

  Before: The format helpers lived in lib/format.ts, a name many projects already use.

  After: They live in lib/entrepta-format.ts. Reinstall what imports them, then delete lib/format.ts if it was entrepta's. Never delete one that is yours.

The CLI says so when you ask for one of them, and links here. A project that already copied one keeps working.

• StatusBar. Moved to the docs app (apps/docs/components/editor/status-bar.tsx). Copy it from there. It is the bar at the bottom of this site.
• ChromeMessage. Use EmptyState with size="page". It takes an illustration and a heading level.
• SectHead, doc-parts. Removed. Nothing used them. They were the $ command rule and the heading pieces.
• PageOutline. Removed. Nothing used it.
• PageLoading. Removed, with the load-dot classes. Use Skeleton for a loading shape.
• Spotlight, SpotlightCard. Removed, with the --bg-spotlight token. The glow that follows the cursor is gone. SpotlightCard is Card.
• Card variant terminal, CardTerminalBar, CardTerminalBody. Removed. A block of shell commands is CodeBlock variant="terminal". Anything else is a Card.
• Tabs onClose. Removed. A tab is picked, not closed. The × button is gone.
• Tabs variant="window". Removed. The title bar with the three dots is gone from the docs site too. A plain TabsList is the tabs.