example, extracted from the platform into its own repository

The reference plugin — deliberately the smallest thing that is still a real
plugin, and what EXTRACTING-A-PLUGIN.md sends people to read.

It leaves the platform tree with music and offscale, so that `plugins/` in the
platform repository holds documentation and nothing else. That is the point of
the move: a directory that contains both tracked source and untracked installs
is one where "is this mine or is this installed" has no answer you can see.

Same extraction as the two before it: source only, no history. The platform's
history still holds every commit that shaped this.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/ExampleDetail.tsx

@@ -0,0 +1,23 @@
+import { useParams } from 'react-router';
+
+// The second panel, reading the URL rather than being told by its sibling.
+//
+// The shell registers `<prefix>` and `<prefix>/:section`, so a plugin's sections are addressable,
+// linkable and cmd-clickable — the same convention every core screen follows. Panels read `useParams`
+// independently; nothing is passed between them, so they cannot disagree.
+export const ExampleDetail = () => {
+  const { section } = useParams();
+
+  return (
+    <div className="h-full overflow-auto p-6">
+      <h2 className="text-lg font-semibold text-duck-dark">Detail</h2>
+      <p className="mt-1 text-sm text-duck-dark/60">
+        Section from the URL: <code>{section ?? '(none)'}</code>
+      </p>
+      <p className="mt-3 text-xs text-duck-dark/40">
+        Try <code>/example/anything</code> — this panel reads it from <code>useParams</code>, with no state passed from
+        the panel beside it.
+      </p>
+    </div>
+  );
+};

web/ExampleOverview.tsx

@@ -0,0 +1,27 @@
+import { useClient } from 'hooks/useClient';
+import { useQuery } from '@tanstack/react-query';
+
+// A panel, not a screen. It gets whatever space the layout gives it and knows nothing about routing.
+//
+// `useClient` comes from the platform's workspace packages, resolved because a plugin lives inside the
+// repository — no publishing, no version negotiation. This is the whole plugin↔host API in one line.
+export const ExampleOverview = () => {
+  const client = useClient();
+  const { data, isLoading } = useQuery({
+    queryKey: ['example', 'ping'],
+    queryFn: () => client.get<{ plugin: string; ok: boolean }>('/example/ping'),
+  });
+
+  return (
+    <div className="h-full overflow-auto p-6">
+      <h2 className="text-lg font-semibold text-duck-dark">Example</h2>
+      <p className="mt-1 text-sm text-duck-dark/60">
+        A panel from <code>plugins/example/web/</code>, rendered by the shell's <code>WorkspaceView</code>.
+      </p>
+      <div className="mt-4 rounded-md border border-duck-dark/10 bg-duck-dark/[0.02] p-3 font-mono text-xs">
+        <div className="mb-1 text-duck-dark/50">GET /api/example/ping</div>
+        {isLoading ? <span className="text-duck-dark/40">…</span> : <span>{JSON.stringify(data)}</span>}
+      </div>
+    </div>
+  );
+};

web/layout.ts

@@ -0,0 +1,16 @@
+import type { LayoutNode } from 'officerdev';
+
+// How this plugin's panels are arranged. The shell renders `WorkspaceView` with this as the default and
+// persists the user's version per plugin, so this is the starting arrangement rather than a fixed one.
+//
+// Every `appType` here must be a key from `panels.ts` — `appTypes.allowed` is pinned to them, so a
+// mismatch falls back rather than rendering another plugin's panel inside this screen.
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'example-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'example-overview', appType: 'example-overview' }, size: 40 },
+    { node: { type: 'panel', id: 'example-detail', appType: 'example-detail' }, size: 60 },
+  ],
+};

web/panels.ts

@@ -0,0 +1,16 @@
+import { Puzzle, ListTree } from 'lucide-react';
+import type { AppRegistryMeta } from 'officerdev';
+import { ExampleOverview } from './ExampleOverview';
+import { ExampleDetail } from './ExampleDetail';
+
+// The panels this plugin contributes. AT LEAST ONE, or discovery refuses the plugin.
+//
+// A plugin never renders a screen — the shell renders `WorkspaceView` around these, arranged by
+// `layout.ts`. That is what makes "every plugin route is a Workspace" a property of the shape rather than
+// a rule someone has to remember.
+//
+// `availableOnPanel: false` keeps them off the generic panel picker: they belong to this plugin's screen.
+export const appRegistryMetas: AppRegistryMeta[] = [
+  { key: 'example-overview', name: 'Overview', icon: Puzzle, component: ExampleOverview, availableOnPanel: false },
+  { key: 'example-detail', name: 'Detail', icon: ListTree, component: ExampleDetail, availableOnPanel: false },
+];