@charcuterie/ui 3.3.0 → 3.4.1

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/MarkdownEditor/MarkdownEditor.tsx

@@ -18,12 +18,14 @@ import {
   indentLines,
   insertLink,
   insertText,
+  isLinkPaste,
   MARKDOWN_LINE_PREFIXES,
   outdentLines,
   toggleHeading,
   toggleInlineMarker,
   toggleLinePrefix,
   toMarkdownImage,
+  wrapSelectionInLink,
 } from "./markdownCommands.ts"
 import type { MarkdownSpanKind } from "./markdownSpans.ts"
 import {
@@ -464,17 +466,41 @@ export const MarkdownEditor = ({
       pasteEvent.clipboardData.files,
     ).filter(isImageFile)
 
-    if (files.length === 0 || !onUploadImage) {
-      // Left to the browser on purpose. A `<textarea>` pastes
-      // `text/plain` and nothing else, so the no-HTML guarantee
-      // needs no code here at all — intercepting the paste to
-      // "sanitise" it would be the version that can have a bug.
+    if (files.length > 0 && onUploadImage) {
+      pasteEvent.preventDefault()
+
+      uploadImages(files)
+
       return
     }
 
-    pasteEvent.preventDefault()
+    const pasted =
+      pasteEvent.clipboardData.getData("text/plain")
 
-    uploadImages(files)
+    const selection = readSelection()
+
+    // A URL pasted over selected text becomes a link, the way it
+    // does in every editor anyone uses. Reading `text/plain` here
+    // is not a hole in the no-HTML guarantee — that flavour is the
+    // only one a `<textarea>` would have taken anyway, and what
+    // goes back in is markdown built by a command.
+    if (
+      isLinkPaste(pasted) &&
+      selection.selectionStart !== selection.selectionEnd
+    ) {
+      pasteEvent.preventDefault()
+
+      applyEdit(
+        wrapSelectionInLink(selection, pasted.trim()),
+      )
+
+      return
+    }
+
+    // Everything else is left to the browser on purpose. A
+    // `<textarea>` pastes `text/plain` and nothing else, so the
+    // no-HTML guarantee needs no code here — intercepting the paste
+    // to "sanitise" it would be the version that can have a bug.
   }
 
   const handleDrop = (

package/src/MarkdownEditor/markdownCommands.test.ts

@@ -7,12 +7,14 @@ import {
   insertImage,
   insertLink,
   insertText,
+  isLinkPaste,
   MARKDOWN_LINE_PREFIXES,
   outdentLines,
   toggleHeading,
   toggleInlineMarker,
   toggleLinePrefix,
   toMarkdownImage,
+  wrapSelectionInLink,
 } from "./markdownCommands.ts"
 
 const at = (text: string, marker = "|") => {
@@ -382,3 +384,56 @@ test("the minimal edit is the smallest range that explains the change", () => {
     text: "",
   })
 })
+
+/**
+ * Pasting a URL over selected text is what every editor the owner
+ * uses already does, and its absence is why a link pasted into a
+ * Docket description stayed flat text.
+ */
+test("a URL pasted over a selection wraps it", () => {
+  expect(
+    wrapSelectionInLink(
+      at("see |the docs| now"),
+      "https://example.com",
+    ),
+  ).toEqual({
+    // After the whole insertion, not inside the destination: the
+    // URL is already known, so parking the caret in it would ask
+    // the user to replace what they just pasted.
+    selectionEnd: 35,
+    selectionStart: 35,
+    text: "see [the docs](https://example.com) now",
+  })
+})
+
+test("a URL pasted with no selection is inserted plainly", () => {
+  // Autolink renders a bare URL as a link anyway, so wrapping it
+  // with no text would produce `[](url)` — an empty link.
+  expect(
+    wrapSelectionInLink(
+      at("see | now"),
+      "https://example.com",
+    ),
+  ).toEqual({
+    selectionEnd: 23,
+    selectionStart: 23,
+    text: "see https://example.com now",
+  })
+})
+
+test.each([
+  ["https://example.com", true],
+  ["http://example.com/a?b=c#d", true],
+  ["  https://example.com  ", true],
+  ["not a url", false],
+  ["", false],
+  // Deliberately strict: a paste that is only *mostly* a URL is
+  // left alone, because mangling a literal paste is worse than
+  // not linkifying one.
+  ["see https://example.com", false],
+  ["https://a.com https://b.com", false],
+  ["mailto:someone@example.com", false],
+  ["www.example.com", false],
+])("isLinkPaste(%j) is %s", (pasted, isExpected) => {
+  expect(isLinkPaste(pasted)).toBe(isExpected)
+})

package/src/MarkdownEditor/markdownCommands.ts

@@ -394,6 +394,66 @@ export const insertLink = (
   })
 }
 
+/**
+ * Does this pasted string want to become a link?
+ *
+ * Deliberately strict. A paste that is *mostly* a URL — a sentence
+ * with one in it, two URLs on two lines — is left alone, because
+ * the cost of guessing wrong is silently mangling something the
+ * user meant to paste literally. One absolute `http(s)` URL, no
+ * inner whitespace, nothing either side of it.
+ *
+ * `mailto:` and bare `www.` are excluded on the same principle:
+ * they are the cases where "did they mean a link?" genuinely has
+ * two answers.
+ */
+export const isLinkPaste = (pasted: string): boolean =>
+  /^https?:\/\/[^\s<>]+$/.test(pasted.trim())
+
+/**
+ * Paste a URL over selected text and get `[selected](url)`.
+ *
+ * Every editor the owner uses does this — Outline, Notion, Slack,
+ * GitHub — and its absence is why a link pasted into Docket stayed
+ * flat text nobody could click. It is the one paste behaviour worth
+ * intercepting, and it is still markdown in and markdown out.
+ *
+ * Unlike `insertLink`, the caret lands **after** the whole
+ * insertion rather than inside the destination: the URL is already
+ * known, so parking the selection in it would ask the user to
+ * replace what they just pasted.
+ *
+ * With an empty selection this is a plain insertion of the URL —
+ * autolink renders a bare URL as a link anyway, so wrapping it in
+ * `[](…)` with no text would produce an empty link instead.
+ */
+export const wrapSelectionInLink = (
+  state: MarkdownSelection,
+  url: string,
+): MarkdownSelection => {
+  const selected = state.text.slice(
+    state.selectionStart,
+    state.selectionEnd,
+  )
+
+  if (selected === "") {
+    return insertText(state, url)
+  }
+
+  const insertion = `[${selected}](${url})`
+
+  const caret = state.selectionStart + insertion.length
+
+  return replaceRange({
+    end: state.selectionEnd,
+    insertion,
+    selectionEnd: caret,
+    selectionStart: caret,
+    start: state.selectionStart,
+    text: state.text,
+  })
+}
+
 /**
  * What Enter should do inside a list, a task list or a blockquote —
  * or `null` when it should do the ordinary thing and the component

package/src/MarkdownEditor/markdownSpans.test.ts

@@ -215,3 +215,68 @@ test("the caret's line is found from its offset", () => {
 
   expect(toLineIndex(text, 9999)).toBe(2)
 })
+
+/**
+ * Gap 2 of Docket's markdown handoff. A URL pasted into a
+ * description used to tokenize as prose — no `url` span, nothing to
+ * paint, and indistinguishable from the words around it.
+ */
+test("a bare URL paints as a URL without being marked up", () => {
+  expect(
+    toInlineSpans("see https://example.com now"),
+  ).toEqual([
+    { kind: "plain", text: "see " },
+    { kind: "url", text: "https://example.com" },
+    { kind: "plain", text: " now" },
+  ])
+})
+
+test("a sentence's full stop is not part of the URL", () => {
+  expect(
+    toInlineSpans("read https://example.com/a."),
+  ).toEqual([
+    { kind: "plain", text: "read " },
+    { kind: "url", text: "https://example.com/a" },
+    { kind: "plain", text: "." },
+  ])
+})
+
+test("a parenthesised URL does not swallow the paren", () => {
+  expect(
+    toInlineSpans("(see https://example.com)"),
+  ).toEqual([
+    { kind: "plain", text: "(see " },
+    { kind: "url", text: "https://example.com" },
+    { kind: "plain", text: ")" },
+  ])
+})
+
+/**
+ * The destination inside an explicit link is already a `url` span
+ * emitted by the link rule, and the link rule runs first. If
+ * autolink won here, the `](` and `)` would stop being markers.
+ */
+test("an explicit link still tokenizes as a link", () => {
+  expect(
+    toInlineSpans("[docs](https://example.com)"),
+  ).toEqual([
+    { kind: "marker", text: "[" },
+    { kind: "link", text: "docs" },
+    { kind: "marker", text: "](" },
+    { kind: "url", text: "https://example.com" },
+    { kind: "marker", text: ")" },
+  ])
+})
+
+/**
+ * Autolink runs before emphasis, which fixes a bug that predates
+ * it: the stretch between two underscores in a URL used to paint
+ * as italic text.
+ */
+test("underscores inside a URL are not emphasis", () => {
+  expect(
+    toInlineSpans("https://example.com/a_b_c"),
+  ).toEqual([
+    { kind: "url", text: "https://example.com/a_b_c" },
+  ])
+})

package/src/MarkdownEditor/markdownSpans.ts

@@ -121,8 +121,22 @@ const TASK_MARKER_PATTERN = /^\[[ xX]\][ \t]*/
  *  - **Image before link**, because `![alt](url)` starts with a
  *    valid link at index 1.
  *  - **Strong before emphasis**, because `**` starts with `*`.
+ *  - **Link before autolink**, because the `https://…` inside
+ *    `[text](https://…)` is a destination, not a bare URL, and
+ *    matching it as one would paint the parentheses as link text.
  */
 const INLINE_PATTERNS = {
+  /**
+   * A bare URL, as GFM autolinks it.
+   *
+   * Trailing punctuation is excluded from the match rather than
+   * trimmed after: `see https://example.com.` ends a sentence, and
+   * the full stop belongs to the prose. The closing paren is
+   * likewise left out so `(see https://example.com)` does not
+   * swallow it — at the cost of clipping a URL that genuinely ends
+   * in one, which is the rarer and less annoying failure.
+   */
+  autolink: /https?:\/\/[^\s<>[\]()]+[^\s<>[\]().,;:!?'"]/y,
   code: /(`+)([^\n]*?)\1/y,
   emphasis: /([*_])(?=[^\s*_])([^\n*_]*?[^\s*_])\1/y,
   escape: /\\([\\`*_{}[\]()#+\-.!>~|])/y,
@@ -243,6 +257,27 @@ export const toInlineSpans = (
       continue
     }
 
+    INLINE_PATTERNS.autolink.lastIndex = index
+
+    const autolinked = INLINE_PATTERNS.autolink.exec(text)
+
+    if (autolinked) {
+      // One span, no markers — there is no syntax to dim, because
+      // the user typed none. It paints as a URL so that a pasted
+      // link reads as a link, which is the whole complaint this
+      // answers: a URL dropped into a description used to be
+      // indistinguishable from prose.
+      //
+      // Running before `emphasis` also fixes a bug nobody filed:
+      // a URL with two underscores in it used to italicise the
+      // stretch between them.
+      pushSpan(spans, "url", autolinked[0])
+
+      index += autolinked[0].length
+
+      continue
+    }
+
     INLINE_PATTERNS.strong.lastIndex = index
 
     const strong = INLINE_PATTERNS.strong.exec(text)

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 },