@charcuterie/ui 3.4.0 → 3.5.0

package/src/FileDropZone/FileDropZone.stories.tsx

@@ -10,7 +10,7 @@ import { FileDropZone } from "./FileDropZone.tsx"
 const noop = () => undefined
 
 const meta = {
-  title: "Components/FileDropZone",
+  title: "Components/Controls/FileDropZone",
   component: FileDropZone,
   parameters: { layout: "padded" },
   args: {

package/src/Header/Header.stories.tsx

@@ -16,7 +16,7 @@ import {
 import { Header } from "./Header.tsx"
 
 const meta = {
-  title: "Components/Header",
+  title: "Components/Layout/Header",
   component: Header,
   parameters: { layout: "fullscreen" },
   argTypes: {

package/src/IconButton/IconButton.stories.tsx

@@ -27,7 +27,7 @@ import { IconButton } from "./IconButton.tsx"
 const UNDO_ICON = <UndoIcon />
 
 const meta = {
-  title: "Components/IconButton",
+  title: "Components/Actions/IconButton",
   component: IconButton,
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },

package/src/Lightbox/Lightbox.stories.tsx

@@ -33,7 +33,7 @@ const PosterThumb = (): ReactNode => (
 )
 
 const meta = {
-  title: "Components/Lightbox",
+  title: "Components/Overlays/Lightbox",
   component: Lightbox,
   parameters: { layout: "padded" },
   args: {

package/src/Listbox/Listbox.stories.tsx

@@ -70,7 +70,7 @@ const TRACKS: ListboxItem[] = [
 ]
 
 const meta = {
-  title: "Components/Listbox",
+  title: "Components/Controls/Listbox",
   component: Listbox,
   parameters: { layout: "padded" },
   argTypes: { placement: placementArgType },

package/src/LiveStatusIndicator/LiveStatusIndicator.stories.tsx

@@ -24,7 +24,7 @@ const CONNECTION_STATUSES = [
 ] as const
 
 const meta = {
-  title: "Components/LiveStatusIndicator",
+  title: "Components/Feedback/LiveStatusIndicator",
   component: LiveStatusIndicator,
   parameters: { layout: "padded" },
   argTypes: { status: connectionStatusArgType },

package/src/LogViewer/LogViewer.stories.tsx

@@ -46,7 +46,7 @@ const LONG_LINES: LogLine[] = Array.from(
 )
 
 const meta = {
-  title: "Components/LogViewer",
+  title: "Components/Data/LogViewer",
   component: LogViewer,
   parameters: { layout: "padded" },
   args: {

package/src/Main/Main.stories.tsx

@@ -24,7 +24,7 @@ const CONTENT_WIDTH_OPTIONS = [
 ] as const
 
 const meta = {
-  title: "Components/Main",
+  title: "Components/Layout/Main",
   component: Main,
   parameters: { layout: "fullscreen" },
   argTypes: {

package/src/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -45,7 +45,7 @@ ip -br addr show
 const noop = () => undefined
 
 const meta = {
-  title: "Components/MarkdownEditor",
+  title: "Components/Controls/MarkdownEditor",
   component: MarkdownEditor,
   parameters: { layout: "padded" },
   args: {

package/src/MediaTile/MediaTile.stories.tsx

@@ -25,7 +25,7 @@ const toPosterSrc = (label: string) =>
 const MISSING_SRC = "/charcuterie-missing-poster.png"
 
 const meta = {
-  title: "Components/MediaTile",
+  title: "Components/Data/MediaTile",
   component: MediaTile,
   parameters: { layout: "padded" },
   args: { aspectRatio: "poster" },

package/src/Menu/Menu.stories.tsx

@@ -141,7 +141,7 @@ const TooltipTriggerHarness = ({
 }
 
 const meta = {
-  title: "Components/Menu",
+  title: "Components/Actions/Menu",
   component: Menu,
   parameters: { layout: "centered" },
   argTypes: { placement: placementArgType },

package/src/Modal/Modal.stories.tsx

@@ -6,7 +6,7 @@ import { Button } from "../Button/Button.tsx"
 import { Modal } from "./Modal.tsx"
 
 const meta = {
-  title: "Components/Modal",
+  title: "Components/Overlays/Modal",
   component: Modal,
   parameters: { layout: "padded" },
   args: {

package/src/Picker/Picker.stories.tsx

@@ -57,7 +57,7 @@ const TRACKS: PickerOption[] = [
 ]
 
 const meta = {
-  title: "Components/Picker",
+  title: "Components/Controls/Picker",
   component: Picker,
   parameters: { layout: "padded" },
   argTypes: {

package/src/Popover/Popover.stories.tsx

@@ -14,7 +14,7 @@ import {
 import { Popover } from "./Popover.tsx"
 
 const meta = {
-  title: "Components/Popover",
+  title: "Components/Overlays/Popover",
   component: Popover,
   parameters: { layout: "padded" },
   argTypes: { placement: placementArgType },

package/src/ProgressBar/ProgressBar.stories.tsx

@@ -20,7 +20,7 @@ const DISC_THRESHOLDS: ProgressThreshold[] = [
 ]
 
 const meta = {
-  title: "Components/ProgressBar",
+  title: "Components/Feedback/ProgressBar",
   component: ProgressBar,
   parameters: { layout: "padded" },
   argTypes: { intent: intentArgType },

package/src/QueryBuilder/QueryBuilder.stories.tsx

@@ -173,7 +173,7 @@ const QueryBuilderHarness = ({
 }
 
 const meta = {
-  title: "Components/QueryBuilder",
+  title: "Components/Controls/QueryBuilder",
   component: QueryBuilder,
   parameters: { layout: "padded" },
   args: {

package/src/RadioGroup/RadioGroup.stories.tsx

@@ -24,7 +24,7 @@ const NAMING_ITEMS: RadioItem[] = [
 ]
 
 const meta = {
-  title: "Components/RadioGroup",
+  title: "Components/Controls/RadioGroup",
   component: RadioGroup,
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },

package/src/Rail/Rail.stories.tsx

@@ -13,7 +13,7 @@ import {
 import { Rail } from "./Rail.tsx"
 
 const meta = {
-  title: "Components/Rail",
+  title: "Components/Layout/Rail",
   component: Rail,
   parameters: { layout: "fullscreen" },
   argTypes: {

package/src/SegmentedControl/SegmentedControl.stories.tsx

@@ -24,7 +24,7 @@ const COLUMN_ITEMS: SegmentedItem[] = [
 ]
 
 const meta = {
-  title: "Components/SegmentedControl",
+  title: "Components/Controls/SegmentedControl",
   component: SegmentedControl,
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },

package/src/Select/Select.stories.tsx

@@ -41,13 +41,24 @@ const GROUPED: SelectItem[] = [
 ]
 
 const meta = {
-  // `Deprecated/`, not `Components/`, and that is the whole point of
-  // moving it: the sidebar is the first place an agent looks for a
-  // picker, and a `Select` sitting between `Rail` and `Shell` reads
-  // as a component in good standing. Nothing new gets one — `Picker`
-  // is the drop-in. See the 2026-08-20 deprecation record.
-  title: "Deprecated/Select",
+  title: "Components/Controls/Select",
   component: Select,
+  /**
+   * Deprecated — `Picker` is the drop-in. This is a **label, not a
+   * relocation**: the component still lives beside the other
+   * controls, where somebody looking for a picker will actually
+   * find it, and the sidebar paints a badge on it there. A
+   * `Deprecated/` section instead of a label hides the warning from
+   * everyone who does not already know to look for it, which is
+   * exactly backwards.
+   *
+   * Manager entries take the **intersection** of their children's
+   * tags, so tagging the meta puts the badge on the `Select` node
+   * itself, not just on each story underneath it.
+   * `sidebar.renderLabel` in `@charcuterie/storybook-config/manager`
+   * is what draws it.
+   */
+  tags: ["deprecated"],
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },
   args: {

package/src/Shell/Shell.stories.tsx

@@ -29,7 +29,7 @@ const CONTENT_WIDTH_OPTIONS = [
 ] as const
 
 const meta = {
-  title: "Components/Shell",
+  title: "Components/Layout/Shell",
   component: Shell,
   parameters: { layout: "fullscreen" },
   argTypes: {

package/src/Skeleton/Skeleton.stories.tsx

@@ -10,7 +10,7 @@ import { Card } from "../Card/Card.tsx"
 import { Skeleton } from "./Skeleton.tsx"
 
 const meta = {
-  title: "Components/Skeleton",
+  title: "Components/Feedback/Skeleton",
   component: Skeleton,
   parameters: { layout: "padded" },
   args: { lineCount: 1, shape: "block" },

package/src/SortableTableHeader/SortableTableHeader.stories.tsx

@@ -30,7 +30,7 @@ const CELL_CLASS =
  * every table gets wrong the same way.
  */
 const meta = {
-  title: "Components/SortableTableHeader",
+  title: "Components/Data/SortableTableHeader",
   component: SortableTableHeader,
   parameters: { layout: "padded" },
   args: { onSort: noop },

package/src/Spinner/Spinner.stories.tsx

@@ -11,7 +11,7 @@ import {
 import { Spinner } from "./Spinner.tsx"
 
 const meta = {
-  title: "Components/Spinner",
+  title: "Components/Feedback/Spinner",
   component: Spinner,
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },

package/src/Swatch/Swatch.stories.tsx

@@ -22,7 +22,7 @@ const STICKERS = [
 ] as const
 
 const meta = {
-  title: "Components/Swatch",
+  title: "Components/Controls/Swatch",
   component: Swatch,
   parameters: { layout: "padded" },
   argTypes: { color: { control: "color" } },

package/src/Switch/Switch.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Switch } from "./Switch.tsx"
 
 const meta = {
-  title: "Components/Switch",
+  title: "Components/Controls/Switch",
   component: Switch,
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },

package/src/Tabs/Tabs.stories.tsx

@@ -44,7 +44,7 @@ const BAY_TABS: TabItem[] = [
 ]
 
 const meta = {
-  title: "Components/Tabs",
+  title: "Components/Layout/Tabs",
   component: Tabs,
   parameters: { layout: "padded" },
   argTypes: {

package/src/TextLink/TextLink.stories.tsx

@@ -39,7 +39,7 @@ const INTENTS = [
 ] as const
 
 const meta = {
-  title: "Components/TextLink",
+  title: "Components/Actions/TextLink",
   component: TextLink,
   parameters: { layout: "padded" },
   argTypes: {

package/src/Toast/Toast.stories.tsx

@@ -20,7 +20,7 @@ const noop = () => undefined
  * is the documented way to hold one for an action anyway.
  */
 const meta = {
-  title: "Components/Toast",
+  title: "Components/Overlays/Toast",
   component: Toast,
   parameters: { layout: "padded" },
   argTypes: { intent: intentArgType },

package/src/Toolbar/Toolbar.stories.tsx

@@ -126,7 +126,7 @@ const Frame = ({
 )
 
 const meta = {
-  title: "Components/Toolbar",
+  title: "Components/Actions/Toolbar",
   component: Toolbar,
   parameters: { layout: "padded" },
   argTypes: { size: controlSizeArgType },

package/src/Tooltip/Tooltip.stories.tsx

@@ -11,7 +11,7 @@ import { SettingsIcon } from "../icons.storyHelpers.tsx"
 import { Tooltip } from "./Tooltip.tsx"
 
 const meta = {
-  title: "Components/Tooltip",
+  title: "Components/Overlays/Tooltip",
   component: Tooltip,
   parameters: { layout: "centered" },
   argTypes: { placement: placementArgType },

package/src/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -19,7 +19,7 @@ import { VisuallyHidden } from "./VisuallyHidden.tsx"
  * loses translation.
  */
 const meta = {
-  title: "Foundation/VisuallyHidden",
+  title: "Utilities/VisuallyHidden",
   component: VisuallyHidden,
   parameters: { layout: "padded" },
 } satisfies Meta<typeof VisuallyHidden>

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.mdx

@@ -98,6 +98,34 @@ blank line at the top and bottom of the block that reads as a rendering bug. A l
 stays, because hiding `-` turns an unordered list into indented prose — Obsidian substitutes
 a `•`, which means choosing a width, and this component has no business choosing one.
 
+## Tables render, and the caret edits them
+
+<Canvas of={MarkdownEditorCodeMirrorStories.Tables} />
+
+A table is the one construct on this surface whose meaning is *geometry*. Every other
+decoration hangs on text CodeMirror draws anyway; a column cannot, because column two's text
+is on four separate lines. So the pipes stop being drawn and a real `<table>` is drawn
+instead — alignment from the delimiter row, and `**bold**`, `` `code` ``, links and images
+rendering inside the cells exactly as they do in a paragraph.
+
+**Click a cell and the markdown comes back with the caret in that cell.** That is the same
+trade as a link or an image, and it is the only way in: you cannot edit a column you cannot
+see. Arrow keys work too — Down from the line above enters at the top row, Up from below
+enters at the bottom — because CodeMirror otherwise steps *over* a block widget and the
+table would be unreachable without a mouse.
+
+Three decisions worth knowing:
+
+- **The widest row wins, not the header.** GFM drops cells past the header's width. An
+  editor that did the same would put text you typed on screen nowhere, so short rows gain
+  empty cells instead and nothing is ever hidden.
+- **An empty cell keeps its column.** The parser emits no cell node for `| |`; the `|`
+  positions are what the columns are read from, so a blank cell does not shift the row.
+- **A wide table scrolls inside its own block** rather than pushing the editor sideways.
+
+`\|` — the only way to put a pipe *in* a cell — now conceals its backslash like any other
+marker, in tables and everywhere else.
+
 ## Clicking a link opens it
 
 Obsidian's behaviour, not VS Code's: where the markup is hidden, a link that looks like a

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.stories.tsx

@@ -47,8 +47,30 @@ ip -br addr show
 Replacement rails ordered from https://example.invalid/product?id=1234
 `
 
+/**
+ * Alignment from the delimiter row, inline markup inside cells, a
+ * deliberately blank cell, and a row that is one column short —
+ * every table decision in one fixture.
+ */
+const TABLES = `## Rack inventory
+
+| Port | Goes to | **Speed** | Notes |
+| :--- | :---: | ---: | --- |
+| 1 | uplink | 10G | swapped \`2026-08-19\` |
+| 2 |  | 1G | see [the runbook](https://example.invalid/runbook) |
+| 3 | shelf | 1G |
+| 4 | ~~spare~~ | — | pulled \\| relabel |
+
+A table with no outer pipes is still a table:
+
+Disk | Size
+--- | ---:
+front-left | 18 TB
+front-right | 18 TB
+`
+
 const meta = {
-  title: "Components/MarkdownEditorCodeMirror",
+  title: "Components/Controls/MarkdownEditorCodeMirror",
   component: MarkdownEditorCodeMirror,
   parameters: { layout: "padded" },
   args: {
@@ -145,3 +167,23 @@ export const CaretReveal: Story = {
     label: "Description",
   },
 }
+
+/**
+ * The construct whose meaning is geometry.
+ *
+ * Everything else on this surface is a decoration hung on text that
+ * is drawn anyway — a column is not, because column two's text is
+ * on four separate lines. So the pipes stop being drawn and a real
+ * table is drawn instead, alignment and all, with `**bold**` and
+ * links rendering inside the cells like anywhere else.
+ *
+ * Click a cell and the markdown comes back with the caret in that
+ * cell — the same trade the rest of the surface makes for a link or
+ * an image.
+ */
+export const Tables: Story = {
+  args: {
+    defaultValue: TABLES,
+    label: "Description",
+  },
+}