fix(tools): restore the example order, place the button last, add a pie

The `input` example was moved ahead of `actions` on a misreading: the product
owner never asked for the two examples to be reordered. The agreed order is
restored — `actions` at 11, `input` at 12 — and the reasoning recorded for the
swap is removed from both files, since it was never a decision.

The real complaint was the button's position *inside* the actions block. It
came first, so it rendered to the left of the reviewer select and the date
picker. It is now last of the three, and the row reads as choose, choose, act.
Elements render in array order, so a test pins the order rather than the
comment alone.

The video example previewed Blender's "Big Buck Bunny" with a nature
photograph, so the still promised something the video does not contain.
The thumbnail is now YouTube's own frame for that same video — the URL
YouTube's oEmbed response names as its `thumbnail_url`, verified reachable
before use, and confirmed live since Slack fetches it at post time and would
otherwise refuse the message whole. The title and alt text name the film.

The `data_visualization` example gains a pie chart under the line chart, so it
shows Slack drawing more than one kind: a trend over time and a share of a
whole. The heading and description are rewritten around both. A pie payload is
`segments` with no `axis_config`, which the header documentation now records.
Page 1 measures 48 blocks against Slack's ceiling of 50, verified live rather
than assumed, and the pinned count moves with it.

Author: lukasmoschitz

app/tools/__tests__/block-catalog.test.tsx

@@ -104,24 +104,22 @@ function fakeInteraction(stored: Partial<CatalogState> = {}) {
 const HEADING_LINE = /^(\P{ASCII}) \*(.+?)\* \(`/u;
 
 /**
- * The fourteen examples, in the order the message presents them. The input
- * example precedes the actions one deliberately, and against the order first
- * agreed: with the button above the fields the two read as a single form whose
- * submit control has slipped to the top.
+ * The fourteen examples, in the order the message presents them — the order
+ * agreed with the product owner, `actions` before `input`.
  */
 const THE_14_HEADINGS = [
   "A status update the team can skim",
   "Formatted writing with lists, a quote and code",
   "Collapse the long stuff so it does not flood the channel",
   "Numbers side by side",
   "A long list you can page through",
-  "A trend at a glance",
+  "A trend over time, then a share of the whole",
   "An image in the post",
   "A video that plays in place",
   "A card with a title, image and text",
   "Several cards to browse sideways",
-  "A small input right in the channel",
   "Act without leaving Slack",
+  "A small input right in the channel",
   "Give feedback on a result",
   "The agent at work",
 ];
@@ -301,16 +299,28 @@ describe("showcase_all_slack_blocks_catalog", () => {
     ]);
   });
 
-  it("gives the line chart enough points to show a shape", () => {
-    const chart = catalogBlocks().find(
+  /** The line chart and then the pie, in the order the example renders them. */
+  const charts = () =>
+    catalogBlocks().filter(
       (block) => block.type === "data_visualization",
-    ) as { title?: string; chart?: Record<string, never> };
-    const { series, axis_config } = chart.chart as unknown as {
+    ) as unknown as { title: string; chart: Record<string, unknown> }[];
+
+  it("draws two kinds of chart, a line and then a pie", () => {
+    // The point of the example is that Slack draws more than one kind, so the
+    // pair is pinned rather than just the presence of a chart.
+    expect(charts().map(({ chart }) => chart.type)).toEqual(["line", "pie"]);
+    for (const { title } of charts()) {
+      expect(title.length).toBeLessThanOrEqual(50);
+    }
+  });
+
+  it("gives the line chart enough points to show a shape", () => {
+    const [line] = charts();
+    const { series, axis_config } = line!.chart as unknown as {
       series: { name: string; data: { label: string; value: number }[] }[];
       axis_config: { categories: string[] };
     };
 
-    expect(chart.title?.length).toBeLessThanOrEqual(50);
     expect(axis_config.categories.length).toBeGreaterThanOrEqual(10);
     expect(new Set(axis_config.categories).size).toBe(
       axis_config.categories.length,
@@ -325,6 +335,60 @@ describe("showcase_all_slack_blocks_catalog", () => {
     }
   });
 
+  it("gives the pie segments and no axis config", () => {
+    const pie = charts()[1]!.chart as unknown as {
+      segments: { label: string; value: number }[];
+      axis_config?: unknown;
+    };
+
+    // A pie payload is `segments` alone; the categories rule that governs the
+    // line chart has nothing to match against here.
+    expect(pie.axis_config).toBeUndefined();
+    expect(pie.segments.length).toBeGreaterThan(1);
+    expect(new Set(pie.segments.map(({ label }) => label)).size).toBe(
+      pie.segments.length,
+    );
+    for (const { label, value } of pie.segments) {
+      expect(label.length).toBeLessThanOrEqual(20);
+      expect(value).toBeGreaterThan(0);
+    }
+  });
+
+  it("puts the button after the two controls it acts on", () => {
+    // The example's `actions` block, not the navigator's: the navigator holds a
+    // single button, so the row with three elements is the one under test.
+    const row = catalogBlocks().find(
+      (block) =>
+        block.type === "actions" &&
+        ((block as { elements?: unknown[] }).elements ?? []).length === 3,
+    ) as { elements: { type: string }[] };
+
+    // Elements render in array order, so this is what places the button to the
+    // right of the select and the date picker: choose, choose, then act.
+    expect(row.elements.map(({ type }) => type)).toEqual([
+      "static_select",
+      "datepicker",
+      "button",
+    ]);
+  });
+
+  it("previews the video with a still of that same video", () => {
+    const video = catalogBlocks().find(({ type }) => type === "video") as {
+      title_url: string;
+      video_url: string;
+      thumbnail_url: string;
+      title: { text: string };
+    };
+
+    // A thumbnail of something else makes the preview lie about the content.
+    // All three URLs name one video id, so they cannot drift apart.
+    const id = "aqz-KE-bpKQ";
+    expect(video.title_url).toContain(id);
+    expect(video.video_url).toContain(id);
+    expect(video.thumbnail_url).toContain(id);
+    expect(video.title.text).toContain("Big Buck Bunny");
+  });
+
   it("keeps table cells literal, with no markdown or links", () => {
     const rows = catalogBlocks()
       .filter((block) => block.type === "table" || block.type === "data_table")
@@ -373,7 +437,7 @@ describe("the two pages", () => {
 
     expect(tail).toEqual(["divider", "actions", "context"]);
     // Page 1 is the fourteen examples plus the navigator, nothing more.
-    expect(blocks).toHaveLength(44 + NAVIGATOR_BLOCK_COUNT);
+    expect(blocks).toHaveLength(45 + NAVIGATOR_BLOCK_COUNT);
     expect(textOf(blocks.slice(-NAVIGATOR_BLOCK_COUNT))).toContain("Next");
     expect(textOf(blocks.slice(-NAVIGATOR_BLOCK_COUNT))).toContain(
       "Page 1 of 2",

app/tools/block-catalog.tsx

@@ -7,11 +7,9 @@
  * real thing rendered live. The order runs everyday → text → data → media →
  * interaction → agent, so it reads as a demonstration rather than an inventory.
  *
- * Inside the interaction stretch the order is `input` and then `actions`, on the
- * product owner's instruction and against the order first agreed. With the
- * button above the fields a reader takes the two examples for one form whose
- * submit control has slipped to the top; with the fields first the button reads
- * as what follows them.
+ * Inside the interaction stretch the order is `actions` and then `input`: the
+ * order agreed with the product owner, and the one the pinned heading test
+ * holds.
  *
  * Page 2 is one situation carried through: booking a meeting. A form — channel,
  * time, length, email — a Confirm button, and a confirmation that reports the
@@ -67,8 +65,8 @@
  *    date pickers. A multi-select belongs in an `input` block.
  * 5. An `input` block in a *message* only dispatches to a handler when
  *    `dispatch_action` is true.
- * 6. Slack fetches image and video URLs at post time; a dead URL refuses the
- *    whole message. The URL used here is verified.
+ * 6. Slack fetches image, thumbnail and video URLs at post time; a dead URL
+ *    refuses the whole message. Every URL used here is verified reachable.
  * 7. `icon_button` accepts only a few icon names; `trash` is verified.
  * 8. `plan.title` is a bare string, not a text object — the opposite of every
  *    other titled block, and contrary to Slack's own reference.
@@ -82,7 +80,8 @@
  *     here lets colour carry meaning.
  * 13. A `data_visualization` title is capped at 50 characters, series and
  *     category labels at 20, and every series' point labels must match
- *     `axis_config.categories` exactly.
+ *     `axis_config.categories` exactly. A `pie` chart is the exception: it
+ *     carries `segments` and no `axis_config`, so there is nothing to match.
  * 14. `card` holds a title, a subtitle, a hero image, a body and actions — it
  *     has no children slot, so it cannot frame arbitrary blocks. `container` is
  *     the block that groups other blocks, and it is what frames the examples
@@ -127,6 +126,17 @@ const RadioButtons = Slack.Element.RadioButtons as unknown as UntypedNative;
 /** Verified reachable at post time; Slack refuses the message if a fetch fails. */
 const IMAGE_URL = "https://picsum.photos/id/1015/800/400";
 
+/**
+ * The video example embeds Blender's "Big Buck Bunny" short film — the clip the
+ * SDK's own `catalog-fixtures.ts` uses, and the one URL pair proven to survive
+ * Slack's post-time fetch. Its thumbnail is YouTube's own still for that same
+ * video, which YouTube's oEmbed response names as the video's `thumbnail_url`,
+ * so the preview shows the film that plays rather than an unrelated photograph.
+ * Verified reachable: 200 image/jpeg.
+ */
+const VIDEO_ID = "aqz-KE-bpKQ";
+const VIDEO_THUMBNAIL_URL = `https://i.ytimg.com/vi/${VIDEO_ID}/hqdefault.jpg`;
+
 // ── local text helpers ─────────────────────────────────────────────────────
 
 /** A `mrkdwn` section. `text`, never children — see constraint 9. */
@@ -232,6 +242,19 @@ const RENEWAL_RATE_BY_MONTH: ReadonlyArray<readonly [string, number]> = [
   ["Dec", 97],
 ];
 
+/**
+ * The pie beneath the line, so the example shows Slack drawing more than one
+ * kind of chart. A pie payload is `segments`, with no `axis_config` — the
+ * categories rule applies only to bar, area and line. The counts are the ones
+ * the table example already shows, so the two do not contradict each other, and
+ * every label is inside the 20-character cap.
+ */
+const RENEWALS_BY_REGION: ReadonlyArray<readonly [string, number]> = [
+  ["Americas", 214],
+  ["EMEA", 128],
+  ["APAC", 76],
+];
+
 const CAROUSEL_CARDS: ReadonlyArray<[string, string, string]> = [
   ["card-americas", "Americas", "214 renewals · 96% on time"],
   ["card-emea", "EMEA", "128 renewals · 91% on time"],
@@ -413,13 +436,15 @@ const EXAMPLES: readonly Example[] = [
   },
   {
     emoji: "📈",
-    heading: "A trend at a glance",
+    heading: "A trend over time, then a share of the whole",
     blocks: ["data_visualization"],
     description:
-      "Slack draws the chart itself, so a run of numbers reads as a shape " +
-      "instead of a list.",
+      "Slack draws the charts itself, and more than one kind: a line for how " +
+      "the renewal rate moved through the year, and a pie underneath it for " +
+      "how this quarter's renewals divide between the regions.",
     specimen: [
       <Slack.Block.DataVisualization
+        key="trend"
         title="Renewal rate by month"
         chart={{
           type: "line",
@@ -439,6 +464,20 @@ const EXAMPLES: readonly Example[] = [
           },
         }}
       />,
+      // A second `data_visualization`, a sibling of the first and of every
+      // container — a chart is never a container child (constraint 2). This is
+      // the block page 1 grew by, from 47 to 48 against the ceiling of 50.
+      <Slack.Block.DataVisualization
+        key="share"
+        title="Renewals by region this quarter"
+        chart={{
+          type: "pie",
+          segments: RENEWALS_BY_REGION.map(([label, value]) => ({
+            label,
+            value,
+          })),
+        }}
+      />,
     ],
   },
   {
@@ -461,14 +500,15 @@ const EXAMPLES: readonly Example[] = [
     blocks: ["video"],
     description:
       "A recording plays in the channel itself, so nobody has to open " +
-      "another tab to watch it.",
+      "another tab to watch it. The still above it is the video's own frame, " +
+      "so the preview shows what will play.",
     specimen: [
       <Video
-        alt_text="Recorded walkthrough"
-        title={Plain("Walkthrough · the renewals workflow")}
-        title_url="https://www.youtube.com/watch?v=aqz-KE-bpKQ"
-        thumbnail_url={IMAGE_URL}
-        video_url="https://www.youtube.com/embed/aqz-KE-bpKQ"
+        alt_text="Still from Blender's Big Buck Bunny short film"
+        title={Plain("Big Buck Bunny · Blender Foundation short film")}
+        title_url={`https://www.youtube.com/watch?v=${VIDEO_ID}`}
+        thumbnail_url={VIDEO_THUMBNAIL_URL}
+        video_url={`https://www.youtube.com/embed/${VIDEO_ID}`}
       />,
     ],
   },
@@ -521,47 +561,19 @@ const EXAMPLES: readonly Example[] = [
       />,
     ],
   },
-  // The fields come before the button on the product owner's instruction — see
-  // the note at the top of the file. Read the other way round, the two examples
-  // look like one form with its submit control above the things it submits.
-  {
-    emoji: "📥",
-    heading: "A small input right in the channel",
-    blocks: ["input"],
-    description:
-      "A field in the message itself, so an answer can be given on the spot " +
-      "instead of in a dialog somewhere else.",
-    specimen: [
-      <Input
-        label={Plain("Teams to include in the review")}
-        dispatch_action={true}
-        element={
-          <Slack.Element.MultiStaticSelect
-            placeholder={Plain("Pick one or more teams")}
-            options={TEAMS.map(([label, value]) => option(label, value))}
-            onSelect={reply("input · multi-select")}
-          />
-        }
-      />,
-    ],
-  },
   {
     emoji: "🔘",
     heading: "Act without leaving Slack",
     blocks: ["actions"],
     description:
       "Buttons, a menu and a date picker sitting under the message, each one " +
       "wired to something that actually runs. Try them.",
+    // The button is last of the three, so the row reads left to right as choose
+    // a reviewer, choose a date, then act on both. Elements render in array
+    // order, so this ordering is the only thing that places it.
     specimen: [
       <Slack.Block.Actions
         elements={[
-          <Slack.Element.Button
-            key="approve"
-            style="primary"
-            text={Plain("Approve renewal")}
-            value="approve_renewal"
-            onClick={reply("actions · button")}
-          />,
           <Slack.Element.StaticSelect
             key="reviewer"
             placeholder={Plain("Choose a reviewer")}
@@ -574,10 +586,38 @@ const EXAMPLES: readonly Example[] = [
             initial_date="2026-09-12"
             onSelect={reply("actions · date picker")}
           />,
+          <Slack.Element.Button
+            key="approve"
+            style="primary"
+            text={Plain("Approve renewal")}
+            value="approve_renewal"
+            onClick={reply("actions · button")}
+          />,
         ]}
       />,
     ],
   },
+  {
+    emoji: "📥",
+    heading: "A small input right in the channel",
+    blocks: ["input"],
+    description:
+      "A field in the message itself, so an answer can be given on the spot " +
+      "instead of in a dialog somewhere else.",
+    specimen: [
+      <Input
+        label={Plain("Teams to include in the review")}
+        dispatch_action={true}
+        element={
+          <Slack.Element.MultiStaticSelect
+            placeholder={Plain("Pick one or more teams")}
+            options={TEAMS.map(([label, value]) => option(label, value))}
+            onSelect={reply("input · multi-select")}
+          />
+        }
+      />,
+    ],
+  },
   {
     emoji: "👍",
     heading: "Give feedback on a result",
@@ -996,11 +1036,12 @@ export function BlockCatalog(state: CatalogState = INITIAL_STATE): ChannelNode {
 
 /**
  * The measured size of page 1 with the navigator on it: the fourteen examples'
- * 44 blocks plus the rule, the Next button and the page counter. Pinned by a
+ * 45 blocks plus the rule, the Next button and the page counter. Pinned by a
  * test against Slack's ceiling of 50, because exceeding it loses the whole
- * message rather than the excess blocks.
+ * message rather than the excess blocks. Two blocks of headroom is all that is
+ * left, so an example that needs a new block has to trade for one.
  */
-export const PAGE_1_BLOCK_COUNT = 47;
+export const PAGE_1_BLOCK_COUNT = 48;
 
 // Printed at load, not through the logger: it is the one line that answers "is
 // the running process the code I just edited?" before anything is triggered —