@cueplusplus/ui 0.3.0 → 0.5.0

package/manifest/components/reviewable-diff.json

@@ -0,0 +1,93 @@
+{
+  "name": "ReviewableDiff",
+  "slug": "reviewable-diff",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The same diff, but each hunk is a decision: keep it, discard it, apply what\nsurvived.",
+  "props": [
+    {
+      "name": "filename",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "File the hunks belong to."
+    },
+    {
+      "name": "hunks",
+      "type": "readonly DiffHunk[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Each hunk carries its own decision. Apply stays disabled until none are pending."
+    },
+    {
+      "name": "onKeep",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when a hunk is accepted."
+    },
+    {
+      "name": "onDiscard",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when a hunk is rejected."
+    },
+    {
+      "name": "onApply",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the reviewed set is committed. Only kept hunks should be written."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"filename\" | \"hunks\" | \"onKeep\" | \"onDiscard\" | \"onApply\"\n> & {\n  /** File the hunks belong to. */\n  filename: string;\n  /** Each hunk carries its own decision. Apply stays disabled until none are pending. */\n  hunks: readonly DiffHunk[];\n  /** Called when a hunk is accepted. */\n  onKeep?: (id: string) => void;\n  /** Called when a hunk is rejected. */\n  onDiscard?: (id: string) => void;\n  /** Called when the reviewed set is committed. Only kept hunks should be written. */\n  onApply?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "The same diff, but each hunk is a decision: keep it, discard it, apply what survived.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ReviewableDiff } from \"@cueplusplus/ui/elements\";\n\n<ReviewableDiff\n  filename=\"composer.tsx\"\n  hunks={hunks}\n  onKeep={(id) => decide(id, \"kept\")}\n  onDiscard={(id) => decide(id, \"discarded\")}\n  onApply={commit}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/reviewable-diff",
+  "mdUrl": "/docs/components/reviewable-diff.md",
+  "jsonUrl": "/r/components/reviewable-diff.json",
+  "specimens": [
+    {
+      "title": "ReviewableDiff",
+      "group": "elements",
+      "components": [
+        "ReviewableDiff"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"under review\" wide>\n    <ReviewableDiff\n      filename=\"show/main-stage.cue\"\n      hunks={HUNKS.map((hunk) => ({\n        ...hunk,\n        decision: decisions[hunk.id] ?? \"pending\",\n      }))}\n      onKeep={decide(\"kept\")}\n      onDiscard={decide(\"discarded\")}\n      onApply={() => setDecisions({ fade: \"pending\", follow: \"pending\" })}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "The same diff, except every hunk is a decision. A discarded hunk stays visible at reduced opacity rather than vanishing, so what the reviewer turned down is still part of what they reviewed, and Apply stays disabled until nothing is pending.",
+      "interaction": "Keep and Discard are per hunk and named by range for a screen reader. Apply here puts every hunk back to pending, so the bench can be run again."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/risk-badge.json

@@ -0,0 +1,74 @@
+{
+  "name": "RiskBadge",
+  "slug": "risk-badge",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "How dangerous this call is, said out loud instead of implied.\n\nOne of the two elements the field study found nobody shipping. Every agent UI\nknows which of its tools are frightening — that is what the approval buckets\nare — but the knowledge lives in the taxonomy rather than on the row, so a\n`curl` to an arbitrary host and a `cat` of a local file look alike until you\nread them. A runtime that scores its own actions can put the score on the\nrow, and one element renders it for every tool that will ever exist.\n\n`unknown` is a first-class value and it is the default answer for a runtime\nwith no scorer. The alternative — omitting the badge, or falling back to\n`low` — is how a UI ends up implying that unscored means safe.\n\nColour is never alone: each risk has its own glyph and its own words, so the\nbadge survives a colour-blind reader, a monochrome screenshot and a theme\nwhose danger hue is somebody's brand red.",
+  "props": [
+    {
+      "name": "risk",
+      "type": "\"low\" | \"high\" | \"medium\" | \"unknown\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the runtime says this call could do: `unknown`, `low`, `medium` or\n`high`. Stamped as `data-risk`, and as `data-color` for the tone, so a\nconsole can restyle the row from the attribute rather than from a prop."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "What it is called. Defaults to `RISK_LABELS[risk]` — `High risk`, not\n`HIGH`, because the badge sits inline beside a duration and a diff stat and\na bare adjective there is a number about something."
+    },
+    {
+      "name": "reason",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Why, in the words the products that guess at risk already use: `outside\nyour workspace`, `protected file`, `arbitrary network access`. Drawn beside\nthe label, truncating before the label does."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"span\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "How dangerous this call is, said out loud instead of implied.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { RiskBadge } from \"@cueplusplus/ui/elements\";\n\n<RiskBadge risk=\"high\" reason=\"arbitrary network access\" />\n// The honest answer from a runtime that does not score its actions.\n<RiskBadge risk=\"unknown\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/risk-badge",
+  "mdUrl": "/docs/components/risk-badge.md",
+  "jsonUrl": "/r/components/risk-badge.json",
+  "specimens": [
+    {
+      "title": "RiskBadge",
+      "group": "elements",
+      "components": [
+        "RiskBadge"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"the four\">\n    <span className=\"flex flex-wrap items-center gap-(--cue-space-2)\">\n      <RiskBadge risk=\"unknown\" />\n      <RiskBadge risk=\"low\" />\n      <RiskBadge risk=\"medium\" />\n      <RiskBadge risk=\"high\" />\n    </span>\n  </Specimen>\n  <Specimen label=\"with the qualifier the row needs\" wide>\n    <span className=\"flex flex-col items-start gap-(--cue-space-2)\">\n      <RiskBadge risk=\"medium\" reason=\"outside your workspace\" />\n      <RiskBadge risk=\"high\" reason=\"arbitrary network access\" />\n    </span>\n  </Specimen>\n</Specimens>",
+      "note": "How dangerous the runtime says this call is, said out loud instead of implied. Six of the seven open-source agent UIs in the study encode risk through which approval bucket a tool happens to fall into, so a fetch to an arbitrary host and a read of a local file look alike until you read them. One runtime scores the action itself, and one badge then renders it for every tool that will ever exist. `unknown` is a first-class value: a runtime with no scorer must not be made to look like one that scored everything safe.",
+      "interaction": "none. The qualifier beside the label is the half the implicit products were right about — `High risk` on its own is a temperature, `High risk · arbitrary network access` is a fact — and it truncates before the label does."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/schedule-card.json

@@ -0,0 +1,101 @@
+{
+  "name": "ScheduleCard",
+  "slug": "schedule-card",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A run that repeats on its own, with its cadence and how it has been doing.",
+  "props": [
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the scheduled run does."
+    },
+    {
+      "name": "cadence",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Human-readable recurrence, not a cron string."
+    },
+    {
+      "name": "nextRun",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "When it fires next. Replaced by paused when disabled."
+    },
+    {
+      "name": "enabled",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the schedule is live."
+    },
+    {
+      "name": "history",
+      "type": "readonly ScheduleRun[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Recent runs, so a silently failing schedule is visible."
+    },
+    {
+      "name": "onToggle",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the schedule is paused or resumed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"name\"\n  | \"cadence\"\n  | \"nextRun\"\n  | \"enabled\"\n  | \"history\"\n  | \"onToggle\"\n> & {\n  /** What the scheduled run does. */\n  name: string;\n  /** Human-readable recurrence, not a cron string. */\n  cadence: string;\n  /** When it fires next. Replaced by paused when disabled. */\n  nextRun: string;\n  /** Whether the schedule is live. */\n  enabled: boolean;\n  /** Recent runs, so a silently failing schedule is visible. */\n  history: readonly ScheduleRun[];\n  /** Called when the schedule is paused or resumed. */\n  onToggle?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A run that repeats on its own, with its cadence and how it has been doing.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ScheduleCard } from \"@cueplusplus/ui/elements\";\n\n<ScheduleCard\n  name=\"Triage the issue queue\"\n  cadence=\"every day at 06:00\"\n  nextRun=\"Tomorrow, 06:00\"\n  enabled\n  history={history}\n  onToggle={toggle}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/schedule-card",
+  "mdUrl": "/docs/components/schedule-card.md",
+  "jsonUrl": "/r/components/schedule-card.json",
+  "specimens": [
+    {
+      "title": "ScheduleCard",
+      "group": "elements-knowledge",
+      "components": [
+        "ScheduleCard"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"running\" wide>\n    <ScheduleCard\n      name=\"Pre-show rig check\"\n      cadence=\"every day at 17:30\"\n      nextRun=\"Today 17:30\"\n      enabled={scheduled}\n      history={RUNS}\n      onToggle={() => setScheduled((current) => !current)}\n    />\n  </Specimen>\n  <Specimen label=\"paused\" wide>\n    <ScheduleCard\n      name=\"Pre-show rig check\"\n      cadence=\"every day at 17:30\"\n      nextRun=\"Today 17:30\"\n      enabled={false}\n      history={RUNS}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A job that repeats on its own: what it is called, how often it goes, when it next goes, and how the last three went. Paused, the next-run row dims and says `paused` rather than showing a time that will not happen.",
+      "interaction": "the toggle is a real switch — role, `aria-checked` and a label naming the schedule — so three of these on a page do not all read as 'Toggle'."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/score-breakdown.json

@@ -0,0 +1,91 @@
+{
+  "name": "ScoreBreakdown",
+  "slug": "score-breakdown",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A verdict with its arithmetic shown: criteria, weights, and what pulled it down.",
+  "props": [
+    {
+      "name": "verdict",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The decision in a word. Its tint follows total over outOf."
+    },
+    {
+      "name": "total",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "The composite score."
+    },
+    {
+      "name": "outOf",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Maximum possible, for the headline and for every criterion bar."
+    },
+    {
+      "name": "criteria",
+      "type": "readonly ScoreCriterion[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "What produced the number, so the verdict can be argued with."
+    },
+    {
+      "name": "visibleCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many criteria have been scored."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"verdict\" | \"total\" | \"outOf\" | \"criteria\" | \"visibleCount\"\n> & {\n  /** The decision in a word. Its tint follows total over outOf. */\n  verdict: string;\n  /** The composite score. */\n  total: number;\n  /** Maximum possible, for the headline and for every criterion bar. */\n  outOf: number;\n  /** What produced the number, so the verdict can be argued with. */\n  criteria: readonly ScoreCriterion[];\n  /** How many criteria have been scored. */\n  visibleCount: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-title",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "A verdict with its arithmetic shown: criteria, weights, and what pulled it down.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ScoreBreakdown } from \"@cueplusplus/ui/elements\";\n\n<ScoreBreakdown\n  verdict=\"approve\"\n  total={4.2}\n  outOf={5}\n  criteria={criteria}\n  visibleCount={3}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/score-breakdown",
+  "mdUrl": "/docs/components/score-breakdown.md",
+  "jsonUrl": "/r/components/score-breakdown.json",
+  "specimens": [
+    {
+      "title": "ScoreBreakdown",
+      "group": "elements-knowledge",
+      "components": [
+        "ScoreBreakdown"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"all four criteria\" wide>\n    <ScoreBreakdown\n      verdict=\"recommended\"\n      total={7.8}\n      outOf={10}\n      criteria={CRITERIA}\n      visibleCount={CRITERIA.length}\n    />\n  </Specimen>\n  <Specimen label=\"arriving, and marginal\" wide>\n    <ScoreBreakdown\n      verdict=\"marginal\"\n      total={5.4}\n      outOf={10}\n      criteria={CRITERIA}\n      visibleCount={2}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A verdict with its working shown. The number leads, the badge names it in words, and every criterion carries its weight and the note that explains a low mark — which is what makes a 7.8 arguable instead of oracular. The badge's three bands are the element's own thresholds at three quarters and a half.",
+      "interaction": "none. The bars animate their width, and hold still for a reader who asked for less motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/scroll-anchor.json

@@ -0,0 +1,72 @@
+{
+  "name": "ScrollAnchor",
+  "slug": "scroll-anchor",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Streaming never steals your scroll position; a pill offers the way back down.",
+  "props": [
+    {
+      "name": "messages",
+      "type": "ScrollAnchorMessage[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Conversation messages appended over time inside the scroll viewport."
+    },
+    {
+      "name": "paused",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Freezes the scene where it is; replay happens by remounting."
+    },
+    {
+      "name": "onSettled",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called once every message has landed and the viewport is pinned."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"messages\" | \"paused\" | \"onSettled\"\n> & {\n  /** Conversation messages appended over time inside the scroll viewport. */\n  messages: ScrollAnchorMessage[];\n  /** Freezes the scene where it is; replay happens by remounting. */\n  paused?: boolean;\n  /** Called once every message has landed and the viewport is pinned. */\n  onSettled?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-text-ui"
+  ],
+  "summary": "Streaming never steals your scroll position; a pill offers the way back down.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ScrollAnchor } from \"@cueplusplus/ui/elements\";\n\n<ScrollAnchor\n  messages={[\n    { role: \"user\", text: \"Keep scrolling pinned?\" },\n    { role: \"assistant\", text: \"Only when you are already at the bottom.\" },\n  ]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/scroll-anchor",
+  "mdUrl": "/docs/components/scroll-anchor.md",
+  "jsonUrl": "/r/components/scroll-anchor.json",
+  "specimens": [
+    {
+      "title": "ScrollAnchor",
+      "group": "elements-thread",
+      "components": [
+        "ScrollAnchor"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"arriving\">\n    <ScrollAnchor messages={ARRIVING} />\n  </Specimen>\n  <Specimen label=\"paused at the top\">\n    <ScrollAnchor messages={ARRIVING} paused />\n  </Specimen>\n</Specimens>",
+      "note": "The rule every transcript needs and few get: streaming may only move the viewport if you were already at the bottom of it. Scroll up to read something and the answer keeps arriving behind you; a pill counts what landed and takes you back down. It is the family's one element that runs a clock of its own — the turns append on a timer so the behaviour can be seen standing still.",
+      "interaction": "the pill is a button. Both scrolls are CSS `scroll-smooth`, not `scrollTo({ behavior })`, because only the declarative one can be withdrawn: `motion-reduce:scroll-auto` makes them instant, and the timer stops outright, painting the finished transcript in one go."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/scroll-area.json

@@ -14,13 +14,6 @@
       "defaultValue": null,
       "description": "Extra classes for the frame. Give it a height, or nothing will scroll."
     },
-    {
-      "name": "orientation",
-      "type": "\"both\" | \"horizontal\" | \"vertical\"",
-      "required": false,
-      "defaultValue": "vertical",
-      "description": "Which axes may scroll. Defaults to `\"vertical\"`."
-    },
     {
       "name": "children",
       "type": "ReactNode",
@@ -28,6 +21,13 @@
       "defaultValue": null,
       "description": "The scrolling content."
     },
+    {
+      "name": "orientation",
+      "type": "\"both\" | \"horizontal\" | \"vertical\"",
+      "required": false,
+      "defaultValue": "vertical",
+      "description": "Which axes may scroll. Defaults to `\"vertical\"`."
+    },
     {
       "name": "viewportClassName",
       "type": "string",

package/manifest/components/search-input.json

@@ -7,6 +7,13 @@
   "clientOnly": true,
   "description": "A filter box: leading magnifier, Escape to clear, and a debounced change\ncallback for whatever the query drives.\n\nEscape-to-clear is the reason this is a component and not a recipe. It is the\nbehaviour every console filter needs and the one every hand-rolled search box\nforgets, and getting it right means also stopping the key from bubbling into a\ndialog that would otherwise close underneath the user.\n\nDebouncing is deliberately separate from `onValueChange`: the input stays\nresponsive on every keystroke while the expensive work waits for the typing to\nstop. Clearing flushes the debounce rather than scheduling it.",
   "props": [
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initial query for an uncontrolled input."
+    },
     {
       "name": "className",
       "type": "string",
@@ -21,13 +28,6 @@
       "defaultValue": null,
       "description": "Rung of the control ladder. Defaults to `\"md\"`."
     },
-    {
-      "name": "defaultValue",
-      "type": "string",
-      "required": false,
-      "defaultValue": null,
-      "description": "Initial query for an uncontrolled input."
-    },
     {
       "name": "debounce",
       "type": "number",

package/manifest/components/segmented-control.json

@@ -7,6 +7,13 @@
   "clientOnly": true,
   "description": "A one-of-N switch drawn as a row of segments: the console's view picker.\n\nBuilt on Base UI's `ToggleGroup`, so arrow-key roving focus and the\npressed-state ARIA come from the primitive. Two rules are added on top:\n\n1. **It cannot be emptied.** A toggle group lets you unpress the pressed\n   item; a segmented control is a choice between N things, so clicking the\n   active segment is a no-op rather than a way to end up with nothing\n   selected. This is why the underlying group is always controlled here, even\n   when the wrapper is not.\n2. **The active segment is tinted, not filled** — see {@link ITEM_CLASSES}.\n\nGive the group an `aria-label`: on its own it is an unnamed group of buttons.",
   "props": [
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The initially picked value when uncontrolled."
+    },
     {
       "name": "className",
       "type": "string",
@@ -14,6 +21,20 @@
       "defaultValue": null,
       "description": "Extra classes for the group frame."
     },
+    {
+      "name": "previousLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Show earlier segments",
+      "description": "Accessible name for the chevron that reveals segments off the leading edge."
+    },
+    {
+      "name": "nextLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Show later segments",
+      "description": "Accessible name for the chevron that reveals segments off the trailing edge."
+    },
     {
       "name": "overflow",
       "type": "\"clip\" | \"scroll\"",
@@ -28,13 +49,6 @@
       "defaultValue": "md",
       "description": "Which rung of the control ladder to sit on. Defaults to `\"md\"`."
     },
-    {
-      "name": "defaultValue",
-      "type": "string",
-      "required": false,
-      "defaultValue": null,
-      "description": "The initially picked value when uncontrolled."
-    },
     {
       "name": "value",
       "type": "string",
@@ -49,20 +63,6 @@
       "defaultValue": null,
       "description": "Called with the newly picked value. Never called with `undefined`."
     },
-    {
-      "name": "previousLabel",
-      "type": "string",
-      "required": false,
-      "defaultValue": "Show earlier segments",
-      "description": "Accessible name for the chevron that reveals segments off the leading edge."
-    },
-    {
-      "name": "nextLabel",
-      "type": "string",
-      "required": false,
-      "defaultValue": "Show later segments",
-      "description": "Accessible name for the chevron that reveals segments off the trailing edge."
-    },
     {
       "name": "items",
       "type": "readonly SegmentedControlItem[]",