@linktr.ee/arbor-mcp 0.1.0

package/dist/index.js

@@ -0,0 +1,1208 @@
+#!/usr/bin/env node
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// ../../apps/playroom/src/hash-code.js
+var require_hash_code = __commonJS({
+  "../../apps/playroom/src/hash-code.js"(exports, module) {
+    "use strict";
+    function hashCode2(str) {
+      var s = String(str == null ? "" : str);
+      var h = 2166136261;
+      for (var i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24)) >>> 0;
+      }
+      return h.toString(36);
+    }
+    module.exports = { hashCode: hashCode2 };
+  }
+});
+
+// src/index.ts
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+
+// src/server.ts
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema
+} from "@modelcontextprotocol/sdk/types.js";
+
+// ../../apps/playroom/src/canonical-snippet-lookup.ts
+import { compressToEncodedURIComponent } from "lz-string";
+
+// ../../apps/playroom/src/compositions.ts
+var compositions_default = [
+  // ── Alert ──
+  {
+    group: "Alert",
+    name: "Alert (success)",
+    code: '<Alert status="success" title="Payment method updated" message="Your card ending in 4242 is now the default." />'
+  },
+  {
+    group: "Alert",
+    name: "Alert (error)",
+    code: '<Alert status="error" title="Payment failed" message="Your card was declined. Try a different payment method." />'
+  },
+  {
+    group: "Alert",
+    name: "Alert (dismissible)",
+    code: '<Alert status="info" title="New feature available" message="You can now schedule links to go live at a specific time." onDismiss={() => {}} />'
+  },
+  // ── Actions ──
+  // Maps to figma-mappings `Actions` (node 8156-2311). The Figma component is
+  // a horizontal toolbar slot for grouping action buttons.
+  {
+    group: "Actions",
+    name: "Actions",
+    code: `<Actions>
+  <Button>Save changes</Button>
+  <Button variant="ghost">Cancel</Button>
+</Actions>`
+  },
+  // ── Avatar ──
+  {
+    group: "Avatar",
+    name: "Avatar",
+    code: `<Avatar>
+  <AvatarImage src="https://i.pravatar.cc/150?u=1" alt="Alex Morgan" />
+  <AvatarFallback>AM</AvatarFallback>
+</Avatar>`
+  },
+  {
+    group: "Avatar",
+    name: "Avatar with status badge",
+    code: `<Avatar>
+  <AvatarImage src="https://i.pravatar.cc/150?u=2" alt="Jordan Smith" />
+  <AvatarFallback>JS</AvatarFallback>
+  <AvatarBadge className="bg-green-600" />
+</Avatar>`
+  },
+  {
+    group: "Avatar",
+    name: "Avatar group",
+    code: `<AvatarGroup>
+  <Avatar size="sm">
+    <AvatarImage src="https://i.pravatar.cc/150?u=1" alt="Alex" />
+    <AvatarFallback>AM</AvatarFallback>
+  </Avatar>
+  <Avatar size="sm">
+    <AvatarImage src="https://i.pravatar.cc/150?u=2" alt="Jordan" />
+    <AvatarFallback>JS</AvatarFallback>
+  </Avatar>
+  <Avatar size="sm">
+    <AvatarImage src="https://i.pravatar.cc/150?u=3" alt="Sam" />
+    <AvatarFallback>SK</AvatarFallback>
+  </Avatar>
+  <AvatarGroupCount count={5} size="sm" />
+</AvatarGroup>`
+  },
+  // ── Badge ──
+  {
+    group: "Badge",
+    name: "Badge",
+    code: "<Badge>New</Badge>"
+  },
+  {
+    group: "Badge",
+    name: "Badge (variants)",
+    code: `<div className="flex gap-2">
+  <Badge variant="success">Active</Badge>
+  <Badge variant="warning">Pending</Badge>
+  <Badge variant="danger">Expired</Badge>
+  <Badge variant="info">Beta</Badge>
+</div>`
+  },
+  {
+    group: "Badge",
+    name: "StatusBadge",
+    code: '<StatusBadge status="active" />'
+  },
+  {
+    group: "Badge",
+    name: "PlanBadge",
+    code: '<PlanBadge plan="pro" />'
+  },
+  {
+    group: "Badge",
+    name: "NotificationBadge",
+    code: "<NotificationBadge count={3} />"
+  },
+  // ── Button ──
+  {
+    group: "Button",
+    name: "Button (primary)",
+    code: "<Button>Save changes</Button>"
+  },
+  {
+    group: "Button",
+    name: "Button (secondary)",
+    code: '<Button variant="secondary">Cancel</Button>'
+  },
+  {
+    group: "Button",
+    name: "Button (danger)",
+    code: '<Button variant="danger">Delete account</Button>'
+  },
+  {
+    group: "Button",
+    name: "Button (outline)",
+    code: '<Button variant="outline">View analytics</Button>'
+  },
+  {
+    group: "Button",
+    name: "Button (loading)",
+    code: '<Button state="loading">Saving\u2026</Button>'
+  },
+  {
+    group: "Button",
+    name: "Button pair",
+    code: `<div className="flex gap-2">
+  <Button variant="secondary">Cancel</Button>
+  <Button>Save changes</Button>
+</div>`
+  },
+  // ── CardSelect ──
+  {
+    group: "CardSelect",
+    name: "CardSelect",
+    code: `<CardSelect defaultValue="classic">
+  <CardSelectItem value="classic">Classic</CardSelectItem>
+  <CardSelectItem value="featured">Featured</CardSelectItem>
+  <CardSelectItem value="spotlight">Spotlight</CardSelectItem>
+</CardSelect>`
+  },
+  // ── Checkbox ──
+  {
+    group: "Checkbox",
+    name: "Checkbox with label",
+    code: `<div className="flex items-center gap-2">
+  <Checkbox id="terms" />
+  <label htmlFor="terms">I agree to the terms and conditions</label>
+</div>`
+  },
+  {
+    group: "Checkbox",
+    name: "Checkbox group",
+    code: `<div className="flex flex-col gap-3">
+  <div className="flex items-center gap-2">
+    <Checkbox id="email" defaultChecked />
+    <label htmlFor="email">Email notifications</label>
+  </div>
+  <div className="flex items-center gap-2">
+    <Checkbox id="push" />
+    <label htmlFor="push">Push notifications</label>
+  </div>
+  <div className="flex items-center gap-2">
+    <Checkbox id="sms" />
+    <label htmlFor="sms">SMS notifications</label>
+  </div>
+</div>`
+  },
+  // ── Collapsible ──
+  {
+    group: "Collapsible",
+    name: "Collapsible",
+    code: `<Collapsible>
+  <CollapsibleTrigger asChild>
+    <Button variant="ghost">Show more</Button>
+  </CollapsibleTrigger>
+  <CollapsibleContent>
+    <Text>Here is the hidden content that appears when expanded.</Text>
+  </CollapsibleContent>
+</Collapsible>`
+  },
+  // ── Dialog ──
+  {
+    group: "Dialog",
+    name: "Dialog",
+    code: `<Dialog>
+  <DialogTrigger asChild>
+    <Button>Edit profile</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>Make changes to your profile here.</DialogDescription>
+    </DialogHeader>
+    <div className="flex flex-col gap-4 py-4">
+      <FieldRoot>
+        <FieldControl>
+          <FieldLabel>Display name</FieldLabel>
+          <FieldInput placeholder="Your name" />
+        </FieldControl>
+      </FieldRoot>
+      <FieldRoot>
+        <FieldControl>
+          <FieldLabel>Bio</FieldLabel>
+          <FieldTextarea placeholder="Tell us about yourself" />
+        </FieldControl>
+      </FieldRoot>
+    </div>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="secondary">Cancel</Button>
+      </DialogClose>
+      <Button>Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`
+  },
+  {
+    group: "Dialog",
+    name: "Dialog (destructive)",
+    code: `<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="danger">Delete link</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Delete link</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete the link and remove it from your Linktree.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="secondary">Cancel</Button>
+      </DialogClose>
+      <Button variant="danger">Delete</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`
+  },
+  // ── Drawer ──
+  {
+    group: "Drawer",
+    name: "Drawer (bottom)",
+    code: `<Drawer>
+  <DrawerTrigger asChild>
+    <Button>Open drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHandle />
+    <DrawerHeader>
+      <DrawerTitle>Settings</DrawerTitle>
+      <DrawerDescription>Manage your preferences.</DrawerDescription>
+    </DrawerHeader>
+    <div className="p-4">
+      <Text>Drawer content goes here.</Text>
+    </div>
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button variant="secondary">Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`
+  },
+  // ── DropdownMenu ──
+  {
+    group: "DropdownMenu",
+    name: "DropdownMenu",
+    code: `<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Options</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+    <DropdownMenuDivider />
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+    <DropdownMenuItem>Duplicate</DropdownMenuItem>
+    <DropdownMenuItem>Share</DropdownMenuItem>
+    <DropdownMenuDivider />
+    <DropdownMenuItem className="text-danger">Delete</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`
+  },
+  // ── Elevation ──
+  {
+    group: "Elevation",
+    name: "Elevation",
+    code: `<Elevation level={200} className="rounded-card p-6">
+  <Text variant="body-base-medium">Elevated card content</Text>
+</Elevation>`
+  },
+  // ── Field ──
+  {
+    group: "Field",
+    name: "Field (input)",
+    code: `<FieldRoot>
+  <FieldControl>
+    <FieldLabel>Email address</FieldLabel>
+    <FieldInput placeholder="you@example.com" />
+  </FieldControl>
+</FieldRoot>`
+  },
+  {
+    group: "Field",
+    name: "Field (textarea with counter)",
+    code: `<FieldRoot>
+  <FieldControl>
+    <FieldLabel>Bio</FieldLabel>
+    <FieldTextarea placeholder="Tell us about yourself" />
+  </FieldControl>
+  <FieldCounter max={200} />
+</FieldRoot>`
+  },
+  {
+    group: "Field",
+    name: "Field (with addon)",
+    code: `<FieldRoot>
+  <FieldControl>
+    <FieldAddon align="start">https://</FieldAddon>
+    <FieldLabel>URL</FieldLabel>
+    <FieldInput placeholder="linktr.ee/yourname" />
+  </FieldControl>
+</FieldRoot>`
+  },
+  {
+    group: "Field",
+    name: "Field (error state)",
+    code: `<FieldRoot state="error">
+  <FieldControl>
+    <FieldLabel>Username</FieldLabel>
+    <FieldInput value="ab" />
+  </FieldControl>
+  <FieldMessage>Username must be at least 3 characters.</FieldMessage>
+</FieldRoot>`
+  },
+  {
+    group: "Field",
+    name: "Field (outline variant)",
+    code: `<FieldRoot variant="outline">
+  <FieldControl>
+    <FieldLabel>Link title</FieldLabel>
+    <FieldInput placeholder="My website" />
+  </FieldControl>
+</FieldRoot>`
+  },
+  // ── Fieldset ──
+  {
+    group: "Fieldset",
+    name: "Fieldset",
+    code: `<Fieldset>
+  <FieldsetLegend>Notifications</FieldsetLegend>
+  <FieldsetDescription>Select how you'd like to be notified.</FieldsetDescription>
+  <RadioGroup defaultValue="email">
+    <RadioButton value="email">Email</RadioButton>
+    <RadioButton value="push">Push notification</RadioButton>
+    <RadioButton value="sms">SMS</RadioButton>
+  </RadioGroup>
+</Fieldset>`
+  },
+  // ── HeaderBar ──
+  // Maps to figma-mappings `HeaderBar` (node 5223-5837). Title + back-button
+  // is the canonical small variant; HeaderBar.stories.tsx covers the full
+  // surface (actions, tabs, integration patterns).
+  {
+    group: "HeaderBar",
+    name: "HeaderBar",
+    code: '<HeaderBar title="My profile" showBackButton />'
+  },
+  // ── IconButton ──
+  {
+    group: "IconButton",
+    name: "IconButton",
+    code: '<IconButton icon={Gear} variant="secondary" aria-label="Settings" />'
+  },
+  {
+    group: "IconButton",
+    name: "IconButton (toolbar)",
+    code: '<IconButton icon={PencilSimple} variant="toolbar" size="sm" aria-label="Edit" />'
+  },
+  // ── Link ──
+  {
+    group: "Link",
+    name: "Link",
+    code: '<Link href="#">Learn more</Link>'
+  },
+  {
+    group: "Link",
+    name: "Link (external)",
+    code: '<Link href="https://linktr.ee" external>Visit Linktree</Link>'
+  },
+  // ── NativeSelect ──
+  {
+    group: "NativeSelect",
+    name: "NativeSelect",
+    code: `<NativeSelect>
+  <NativeSelectOption disabled value="">Select a country\u2026</NativeSelectOption>
+  <NativeSelectOption value="au">Australia</NativeSelectOption>
+  <NativeSelectOption value="us">United States</NativeSelectOption>
+  <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+</NativeSelect>`
+  },
+  // ── Popover ──
+  {
+    group: "Popover",
+    name: "Popover",
+    code: `<Popover>
+  <PopoverTrigger asChild>
+    <IconButton icon={Question} variant="ghost" aria-label="More info" />
+  </PopoverTrigger>
+  <PopoverContent className="w-80">
+    <Text variant="body-sm-medium">Help</Text>
+    <Text variant="body-sm-regular">This setting controls who can see your profile. Changes take effect immediately.</Text>
+  </PopoverContent>
+</Popover>`
+  },
+  // ── RadioGroup ──
+  {
+    group: "RadioGroup",
+    name: "RadioGroup (compact)",
+    code: `<RadioGroup defaultValue="email">
+  <RadioButton variant="compact" value="email">Email</RadioButton>
+  <RadioButton variant="compact" value="push">Push notification</RadioButton>
+  <RadioButton variant="compact" value="sms">SMS</RadioButton>
+</RadioGroup>`
+  },
+  {
+    group: "RadioGroup",
+    name: "RadioGroup (pill)",
+    code: `<RadioGroup defaultValue="monthly" orientation="horizontal">
+  <RadioButton variant="pill" value="monthly">Monthly</RadioButton>
+  <RadioButton variant="pill" value="yearly">Yearly</RadioButton>
+</RadioGroup>`
+  },
+  // ── RadioButton ──
+  // Maps to figma-mappings `RadioButton` (node 5223-28096). Standalone-button
+  // entry distinct from the RadioGroup composition above — but RadioButton
+  // must always render inside a RadioGroup, so the canonical snippet wraps
+  // a 2-option pill group.
+  {
+    group: "RadioButton",
+    name: "RadioButton",
+    code: `<RadioGroup defaultValue="option-1">
+  <RadioButton value="option-1" variant="pill">Option 1</RadioButton>
+  <RadioButton value="option-2" variant="pill">Option 2</RadioButton>
+</RadioGroup>`
+  },
+  // ── SearchInput ──
+  {
+    group: "SearchInput",
+    name: "SearchInput",
+    code: `<SearchInput>
+  <SearchInputRoot>
+    <SearchInputControl>
+      <SearchInputInput placeholder="Search links\u2026" />
+    </SearchInputControl>
+    <SearchInputContent>
+      <SearchInputItem value="my-website">My website</SearchInputItem>
+      <SearchInputItem value="instagram">Instagram</SearchInputItem>
+      <SearchInputItem value="shop">Shop</SearchInputItem>
+      <SearchInputEmpty>No results found.</SearchInputEmpty>
+    </SearchInputContent>
+  </SearchInputRoot>
+</SearchInput>`
+  },
+  // ── Select ──
+  {
+    group: "Select",
+    name: "Select",
+    code: `<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select a timezone\u2026" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>Americas</SelectLabel>
+      <SelectItem value="est">Eastern (UTC\u22125)</SelectItem>
+      <SelectItem value="cst">Central (UTC\u22126)</SelectItem>
+      <SelectItem value="pst">Pacific (UTC\u22128)</SelectItem>
+    </SelectGroup>
+    <SelectDivider />
+    <SelectGroup>
+      <SelectLabel>Asia Pacific</SelectLabel>
+      <SelectItem value="aest">Sydney (UTC+10)</SelectItem>
+      <SelectItem value="nzst">Auckland (UTC+12)</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>`
+  },
+  // ── Divider ──
+  {
+    group: "Divider",
+    name: "Divider",
+    code: "<Divider />"
+  },
+  {
+    group: "Divider",
+    name: "Divider (with label)",
+    code: '<Divider label="OR" />'
+  },
+  // ── Skeleton ──
+  {
+    group: "Skeleton",
+    name: "Skeleton (text block)",
+    code: "<SkeletonText lines={3} />"
+  },
+  {
+    group: "Skeleton",
+    name: "Skeleton (profile)",
+    code: `<div className="flex items-center gap-3">
+  <SkeletonAvatar size="lg" />
+  <div className="flex flex-col gap-2">
+    <SkeletonText lines={1} className="w-32" />
+    <SkeletonText lines={1} className="w-48" />
+  </div>
+</div>`
+  },
+  // ── Switch ──
+  {
+    group: "Switch",
+    name: "Switch",
+    code: '<Switch label="Enable notifications" />'
+  },
+  // ── Tabs ──
+  {
+    group: "Tabs",
+    name: "Tabs (underline)",
+    code: `<Tabs defaultValue="links">
+  <TabsList>
+    <TabsTrigger value="links">Links</TabsTrigger>
+    <TabsTrigger value="appearance">Appearance</TabsTrigger>
+    <TabsTrigger value="settings">Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="links">Manage your links here.</TabsContent>
+  <TabsContent value="appearance">Customize your appearance.</TabsContent>
+  <TabsContent value="settings">Manage your settings.</TabsContent>
+</Tabs>`
+  },
+  {
+    group: "Tabs",
+    name: "Tabs (segmented)",
+    code: `<Tabs defaultValue="monthly">
+  <TabsList variant="segmented">
+    <TabsTrigger value="monthly">Monthly</TabsTrigger>
+    <TabsTrigger value="yearly">Yearly</TabsTrigger>
+  </TabsList>
+</Tabs>`
+  },
+  // ── Text ──
+  {
+    group: "Text",
+    name: "Text (title)",
+    code: '<Text variant="title-lg-bold" as="h1">Page title</Text>'
+  },
+  {
+    group: "Text",
+    name: "Text (body)",
+    code: '<Text variant="body-base-regular">Body text goes here.</Text>'
+  },
+  {
+    group: "Text",
+    name: "Text (small)",
+    code: '<Text variant="body-sm-regular">Supporting text or caption.</Text>'
+  },
+  // ── TextTitle ──
+  // figma-mappings splits Text into TextTitle / TextBody (different node IDs
+  // in Figma: 5618-182 and 5118-457). The canonical-snippet lookup matches
+  // by exact group name, so we mirror that split here.
+  {
+    group: "TextTitle",
+    name: "TextTitle",
+    code: '<Text variant="title-lg-bold">Section heading</Text>'
+  },
+  // ── TextBody ──
+  {
+    group: "TextBody",
+    name: "TextBody",
+    code: '<Text variant="body-base-regular">A body paragraph showing the typography scale.</Text>'
+  },
+  // ── Toast ──
+  // Snippet entries demo the Toast surface itself. Production usage is
+  // imperative via `sendToastSuccess`/`sendToastError`/etc. helpers
+  // (see @linktr.ee/arbor exports), which dispatch a CustomEvent picked
+  // up by `<ToastListener />`.
+  {
+    group: "Toast",
+    name: "Toast (success)",
+    code: '<Toast id="demo-1" title="Settings saved" description="Your preferences have been updated." icon={<CheckCircle size={20} weight="fill" />} />'
+  },
+  {
+    group: "Toast",
+    name: "Toast (with action)",
+    code: '<Toast id="demo-2" title="Link deleted" description="Your link is no longer visible." action={{ label: "Undo", onClick: () => {} }} />'
+  },
+  {
+    group: "Toast",
+    name: "Toast (inverted)",
+    code: '<Toast id="demo-3" inverted description="Copied to clipboard" />'
+  },
+  {
+    group: "Toast",
+    name: "Toast (stacked chin)",
+    code: '<Toast id="demo-4" stacked title="Multiple updates" description="Two new comments and one mention." />'
+  },
+  // ── Tooltip ──
+  {
+    group: "Tooltip",
+    name: "Tooltip",
+    code: `<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <IconButton icon={Question} variant="ghost" aria-label="More info" />
+    </TooltipTrigger>
+    <TooltipContent>More info</TooltipContent>
+  </Tooltip>
+</TooltipProvider>`
+  },
+  // ═══════════════════════════════════
+  // ── Compositions (multi-component) ──
+  // ═══════════════════════════════════
+  {
+    group: "Compositions",
+    name: "Profile header",
+    code: `<div className="flex items-center gap-4">
+  <Avatar size="xl">
+    <AvatarImage src="https://i.pravatar.cc/150?u=4" alt="Alex Morgan" />
+    <AvatarFallback>AM</AvatarFallback>
+  </Avatar>
+  <div className="flex flex-col gap-1">
+    <Text variant="title-sm-bold">Alex Morgan</Text>
+    <Text variant="body-sm-regular">@alexmorgan</Text>
+    <div className="flex gap-2">
+      <PlanBadge plan="pro" />
+      <StatusBadge status="active" />
+    </div>
+  </div>
+</div>`
+  },
+  {
+    group: "Compositions",
+    name: "Settings form",
+    code: `<div className="flex flex-col gap-6 max-w-lg">
+  <Text variant="title-sm-bold" as="h2">Profile settings</Text>
+  <FieldRoot>
+    <FieldControl>
+      <FieldLabel>Display name</FieldLabel>
+      <FieldInput placeholder="Your name" />
+    </FieldControl>
+  </FieldRoot>
+  <FieldRoot>
+    <FieldControl>
+      <FieldLabel>Bio</FieldLabel>
+      <FieldTextarea placeholder="Tell us about yourself" />
+    </FieldControl>
+    <FieldCounter max={150} />
+  </FieldRoot>
+  <FieldRoot variant="outline">
+    <FieldControl>
+      <FieldAddon align="start">https://</FieldAddon>
+      <FieldLabel>URL</FieldLabel>
+      <FieldInput placeholder="linktr.ee/yourname" />
+    </FieldControl>
+  </FieldRoot>
+  <Divider />
+  <div className="flex gap-2 justify-end">
+    <Button variant="secondary">Cancel</Button>
+    <Button>Save changes</Button>
+  </div>
+</div>`
+  },
+  {
+    group: "Compositions",
+    name: "Card list",
+    code: `<div className="flex flex-col gap-3 max-w-md">
+  <Elevation level={100} className="rounded-card p-4">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Avatar size="sm">
+          <AvatarFallback>\u{1F517}</AvatarFallback>
+        </Avatar>
+        <div>
+          <Text variant="body-base-medium">My website</Text>
+          <Text variant="body-sm-regular">linktr.ee/alex</Text>
+        </div>
+      </div>
+      <Badge variant="success">Active</Badge>
+    </div>
+  </Elevation>
+  <Elevation level={100} className="rounded-card p-4">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Avatar size="sm">
+          <AvatarFallback>\u{1F4F8}</AvatarFallback>
+        </Avatar>
+        <div>
+          <Text variant="body-base-medium">Instagram</Text>
+          <Text variant="body-sm-regular">instagram.com/alex</Text>
+        </div>
+      </div>
+      <Badge variant="success">Active</Badge>
+    </div>
+  </Elevation>
+  <Elevation level={100} className="rounded-card p-4">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Avatar size="sm">
+          <AvatarFallback>\u{1F6CD}\uFE0F</AvatarFallback>
+        </Avatar>
+        <div>
+          <Text variant="body-base-medium">Shop</Text>
+          <Text variant="body-sm-regular">shop.example.com</Text>
+        </div>
+      </div>
+      <Badge variant="secondary">Draft</Badge>
+    </div>
+  </Elevation>
+</div>`
+  },
+  {
+    group: "Compositions",
+    name: "Notification list",
+    code: `<div className="flex flex-col gap-2 max-w-md">
+  <Alert status="success" title="Link added" message="Instagram was added to your Linktree." onDismiss={() => {}} />
+  <Alert status="warning" title="Approaching limit" message="You've used 9 of 10 links on the free plan." />
+  <Alert status="info" title="New feature" message="You can now schedule links to go live at a specific time." onDismiss={() => {}} />
+</div>`
+  },
+  {
+    group: "Compositions",
+    name: "Empty state",
+    code: `<div className="flex flex-col items-center justify-center gap-4 py-12 text-center">
+  <Text variant="title-sm-bold">No links yet</Text>
+  <Text variant="body-base-regular">Add your first link to get started.</Text>
+  <Button>Add a link</Button>
+</div>`
+  },
+  {
+    group: "Compositions",
+    name: "Pricing toggle",
+    code: `<div className="flex flex-col items-center gap-6">
+  <Tabs defaultValue="yearly">
+    <TabsList variant="segmented">
+      <TabsTrigger value="monthly">Monthly</TabsTrigger>
+      <TabsTrigger value="yearly">Yearly</TabsTrigger>
+    </TabsList>
+  </Tabs>
+  <div className="flex gap-4">
+    <Elevation level={100} className="rounded-card p-6 flex flex-col gap-3 w-56">
+      <Text variant="body-base-medium">Starter</Text>
+      <Text variant="title-lg-bold">$5/mo</Text>
+      <Text variant="body-sm-regular">For creators just getting started.</Text>
+      <Button variant="outline" className="w-full">Choose plan</Button>
+    </Elevation>
+    <Elevation level={200} className="rounded-card p-6 flex flex-col gap-3 w-56">
+      <div className="flex items-center gap-2">
+        <Text variant="body-base-medium">Pro</Text>
+        <Badge variant="accent">Popular</Badge>
+      </div>
+      <Text variant="title-lg-bold">$9/mo</Text>
+      <Text variant="body-sm-regular">For growing creators.</Text>
+      <Button className="w-full">Choose plan</Button>
+    </Elevation>
+  </div>
+</div>`
+  },
+  {
+    group: "Compositions",
+    name: "Delete confirmation",
+    code: `<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="danger">Delete account</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Delete account</DialogTitle>
+      <DialogDescription>
+        This will permanently delete your account and all your links. This action cannot be undone.
+      </DialogDescription>
+    </DialogHeader>
+    <FieldRoot state="error">
+      <FieldControl>
+        <FieldLabel>Type "DELETE" to confirm</FieldLabel>
+        <FieldInput placeholder="DELETE" />
+      </FieldControl>
+    </FieldRoot>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="secondary">Cancel</Button>
+      </DialogClose>
+      <Button variant="danger">Delete my account</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`
+  },
+  {
+    group: "Compositions",
+    name: "Linktree profile",
+    code: `<div className="flex min-h-screen flex-col items-center bg-background px-4 py-12">
+  <div className="flex w-full max-w-md flex-col items-center gap-6">
+    <div className="flex flex-col items-center gap-3">
+      <Avatar size="xl">
+        <AvatarImage src="https://i.pravatar.cc/150?img=15" alt="Arbor" />
+        <AvatarFallback>\u{1F333}</AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col items-center gap-1">
+        <Text variant="title-sm-bold">@arbor</Text>
+        <Text variant="body-sm-regular" className="text-center text-secondary">
+          Design system \xB7 Linktree
+        </Text>
+      </div>
+    </div>
+
+    <div className="flex w-full flex-col gap-3">
+      <Button variant="outline" className="w-full justify-center" size="lg">
+        \u{1F3B5} New single \u2014 Out now
+      </Button>
+      <Button variant="outline" className="w-full justify-center" size="lg">
+        \u{1F3A4} Upcoming shows
+      </Button>
+      <Button variant="outline" className="w-full justify-center" size="lg">
+        \u{1F6D2} Merch store
+      </Button>
+      <Button variant="outline" className="w-full justify-center" size="lg">
+        \u{1F4F8} Instagram
+      </Button>
+      <Button variant="outline" className="w-full justify-center" size="lg">
+        \u{1F3A7} Spotify
+      </Button>
+    </div>
+
+    <Divider />
+
+    <div className="flex flex-col items-center gap-2 w-full">
+      <Text variant="body-xs-regular" className="text-secondary">
+        Join my newsletter
+      </Text>
+      <div className="flex w-full items-center gap-2">
+        <FieldRoot variant="outline" className="flex-1">
+          <FieldControl>
+            <FieldLabel>Email</FieldLabel>
+            <FieldInput />
+          </FieldControl>
+        </FieldRoot>
+        <Button>Subscribe</Button>
+      </div>
+    </div>
+  </div>
+</div>`
+  }
+];
+
+// ../../apps/playroom/src/canonical-snippet-lookup.ts
+var PLAYROOM_HOMEPAGE_URL = "https://arbor.linktr.ee/playroom/";
+function findCanonicalEntryByGroup(group) {
+  for (const entry of compositions_default) {
+    if (entry.group === group) return entry;
+  }
+  return null;
+}
+function buildPlayroomUrl(jsx) {
+  const compressed = compressToEncodedURIComponent(
+    JSON.stringify({ code: jsx })
+  );
+  return `${PLAYROOM_HOMEPAGE_URL}#?code=${compressed}`;
+}
+async function mintPlayroomUrl(jsx, slugClient) {
+  let result;
+  try {
+    result = await slugClient.mintOrReuse(jsx);
+  } catch {
+    return {
+      url: buildPlayroomUrl(jsx),
+      source: "lz-string-fallback",
+      reason: "network"
+    };
+  }
+  if (result.ok) {
+    return {
+      url: result.url,
+      source: result.source,
+      slug: result.slug
+    };
+  }
+  return {
+    url: buildPlayroomUrl(jsx),
+    source: "lz-string-fallback",
+    reason: result.reason
+  };
+}
+function lookupByArborName(arborName) {
+  const normalized = typeof arborName === "string" ? arborName.trim() : "";
+  if (!normalized) {
+    return {
+      coverage: "not_found",
+      figmaName: arborName,
+      url: PLAYROOM_HOMEPAGE_URL
+    };
+  }
+  const entry = findCanonicalEntryByGroup(normalized);
+  if (entry) {
+    return {
+      coverage: "mapped",
+      arborComponentName: normalized,
+      snippet: entry.code,
+      url: buildPlayroomUrl(entry.code)
+    };
+  }
+  return {
+    coverage: "not_found",
+    figmaName: normalized,
+    url: PLAYROOM_HOMEPAGE_URL
+  };
+}
+
+// ../../apps/playroom/src/slug-client.ts
+var { hashCode } = require_hash_code();
+var MAX_SNIPPET_BYTES = 200 * 1024;
+var SLUG_PATTERN = /^[a-z]{3,11}-[a-z]{3,11}-[a-z]{3,11}-(?:[1-9]|[1-9][0-9])$/;
+var PLAYROOM_BASE_URL = "https://arbor.linktr.ee/playroom/";
+var DEFAULT_TIMEOUT_MS = 5e3;
+function createInMemoryCache() {
+  const store = /* @__PURE__ */ new Map();
+  return {
+    get: (key) => store.get(key),
+    set: (key, slug) => {
+      store.set(key, slug);
+    }
+  };
+}
+function assertValidEndpoint(endpoint) {
+  if (!(endpoint instanceof URL)) {
+    throw new Error(
+      "[slug-client] endpoint must be a URL instance \u2014 pass `new URL(...)`"
+    );
+  }
+  if (endpoint.protocol !== "https:") {
+    throw new Error(
+      `[slug-client] endpoint must be https://, got ${endpoint.protocol}`
+    );
+  }
+}
+function createSlugClient(opts) {
+  assertValidEndpoint(opts.endpoint);
+  const fetchImpl = opts.fetch ?? globalThis.fetch;
+  if (typeof fetchImpl !== "function") {
+    throw new Error(
+      "[slug-client] no fetch implementation available \u2014 pass `fetch` in options or run in an environment with global fetch"
+    );
+  }
+  const cache = opts.cache ?? createInMemoryCache();
+  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+  const endpointUrl = opts.endpoint.toString();
+  const inflight = /* @__PURE__ */ new Map();
+  async function performMint(jsx, key) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (opts.bearerToken) {
+      headers["Authorization"] = `Bearer ${opts.bearerToken}`;
+    }
+    if (opts.producerName) {
+      headers["X-Arbor-Producer"] = opts.producerName;
+    }
+    let response;
+    try {
+      response = await fetchImpl(endpointUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ snippet: jsx }),
+        signal: controller.signal
+      });
+    } catch (err) {
+      const isAbort = err?.name === "AbortError";
+      return { ok: false, reason: isAbort ? "timeout" : "network" };
+    } finally {
+      clearTimeout(timer);
+    }
+    if (!response.ok) {
+      return { ok: false, reason: "http_error" };
+    }
+    let payload;
+    try {
+      payload = await response.json();
+    } catch {
+      return { ok: false, reason: "malformed_response" };
+    }
+    const slug = extractSlug(payload);
+    if (!slug) {
+      return { ok: false, reason: "malformed_response" };
+    }
+    const url = `${PLAYROOM_BASE_URL}?slug=${slug}`;
+    const branded = slug;
+    cache.set(key, branded);
+    return { ok: true, source: "minted", slug: branded, url };
+  }
+  async function mintOrReuse(jsx) {
+    const byteLength = new TextEncoder().encode(jsx).length;
+    if (byteLength > MAX_SNIPPET_BYTES) {
+      return { ok: false, reason: "oversize" };
+    }
+    const key = hashCode(jsx);
+    const cached = cache.get(key);
+    if (cached) {
+      const url = `${PLAYROOM_BASE_URL}?slug=${cached}`;
+      return { ok: true, source: "cached", slug: cached, url };
+    }
+    const existing = inflight.get(key);
+    if (existing) return existing;
+    const promise = performMint(jsx, key).finally(() => {
+      inflight.delete(key);
+    });
+    inflight.set(key, promise);
+    return promise;
+  }
+  return { mintOrReuse };
+}
+function extractSlug(payload) {
+  if (!payload || typeof payload !== "object") return null;
+  const slug = payload.slug;
+  if (typeof slug !== "string" || slug.length === 0) return null;
+  if (!SLUG_PATTERN.test(slug)) return null;
+  return slug;
+}
+
+// src/tools/open-in-playroom.ts
+var TOOL_NAME = "arbor.open_in_playroom";
+var TOOL_DESCRIPTION = 'Given an Arbor component name (PascalCase), return the Playroom URL with the canonical snippet pre-loaded. Use coverage="mapped" responses with high confidence; coverage="fallback" responses are best-effort name matching; coverage="not_found" responses link to the Playroom homepage.';
+var TOOL_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    componentName: {
+      type: "string",
+      description: 'Arbor PascalCase component name, e.g. "Button" or "HeaderBar"'
+    }
+  },
+  required: ["componentName"]
+};
+function buildMcpSlugClient() {
+  const rawBase = process.env.SNIPPET_API_BASE;
+  if (!rawBase) return null;
+  let endpoint;
+  try {
+    endpoint = new URL(rawBase);
+  } catch {
+    throw new Error(`[arbor-mcp] SNIPPET_API_BASE is not a valid URL: ${rawBase}`);
+  }
+  if (endpoint.protocol !== "https:") {
+    throw new Error(`[arbor-mcp] SNIPPET_API_BASE must use HTTPS: ${rawBase}`);
+  }
+  return createSlugClient({
+    endpoint,
+    // Unbounded — MCP per-session lifetime is short, no LRU needed. Cache key
+    // is content-addressed (FNV-1a of the snippet) so duplicate JSX never
+    // burns a second slug.
+    cache: createInMemoryCache(),
+    bearerToken: process.env.SNIPPET_MINT_TOKEN,
+    producerName: "mcp",
+    timeoutMs: 5e3
+  });
+}
+var mcpSlugClient = buildMcpSlugClient();
+async function runOpenInPlayroom(args, slugClientOverride) {
+  const slugClient = slugClientOverride === void 0 ? mcpSlugClient : slugClientOverride;
+  if (!args || typeof args !== "object") {
+    throw new Error("arbor.open_in_playroom requires an object argument with `componentName`");
+  }
+  const { componentName } = args;
+  if (typeof componentName !== "string" || componentName.trim() === "") {
+    throw new Error("arbor.open_in_playroom: `componentName` is required and must be a non-empty string");
+  }
+  const lookup = lookupByArborName(componentName.trim());
+  if (lookup.coverage === "not_found") {
+    return {
+      coverage: "not_found",
+      figmaName: lookup.figmaName,
+      url: lookup.url
+    };
+  }
+  if (!slugClient) {
+    return {
+      coverage: "mapped",
+      arborComponentName: lookup.arborComponentName,
+      snippet: lookup.snippet,
+      url: lookup.url,
+      // already buildPlayroomUrl output
+      source: "lz-string-fallback",
+      degraded: true,
+      reason: "unconfigured"
+    };
+  }
+  const minted = await mintPlayroomUrl(lookup.snippet, slugClient);
+  if (minted.source === "lz-string-fallback") {
+    return {
+      coverage: "mapped",
+      arborComponentName: lookup.arborComponentName,
+      snippet: lookup.snippet,
+      url: minted.url,
+      source: "lz-string-fallback",
+      degraded: true,
+      reason: minted.reason
+    };
+  }
+  return {
+    coverage: "mapped",
+    arborComponentName: lookup.arborComponentName,
+    snippet: lookup.snippet,
+    url: minted.url,
+    source: minted.source,
+    slug: minted.slug
+  };
+}
+
+// src/server.ts
+var packageJsonPath = join(
+  dirname(fileURLToPath(import.meta.url)),
+  "..",
+  "package.json"
+);
+var { version: packageJsonVersion } = JSON.parse(
+  readFileSync(packageJsonPath, "utf-8")
+);
+var SERVER_NAME = "arbor";
+var SERVER_VERSION = packageJsonVersion;
+function createArborMcpServer() {
+  const server = new Server(
+    { name: SERVER_NAME, version: SERVER_VERSION },
+    { capabilities: { tools: {} } }
+  );
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools: [
+      {
+        name: TOOL_NAME,
+        description: TOOL_DESCRIPTION,
+        inputSchema: TOOL_INPUT_SCHEMA
+      }
+    ]
+  }));
+  server.setRequestHandler(CallToolRequestSchema, async (req) => {
+    const { name, arguments: args } = req.params;
+    if (name === TOOL_NAME) {
+      const result = await runOpenInPlayroom(args);
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    }
+    throw new Error(`Unknown tool: ${name}`);
+  });
+  return server;
+}
+
+// src/index.ts
+async function main() {
+  const server = createArborMcpServer();
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  process.stderr.write("arbor-mcp: ready\n");
+}
+main().catch((err) => {
+  process.stderr.write(`arbor-mcp: fatal: ${err instanceof Error ? err.message : String(err)}
+`);
+  process.exit(1);
+});