@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/sections/IconShowcase.tsx

@@ -1,247 +1,230 @@
-/**
- * Bespoke Lemon glyphs from PostHog open source — filled Material / product paths,
- * not Lucide stroke icons.
- */
+import type { ComponentType, CSSProperties } from "react";
 import {
-  IconActivity,
-  IconAreaChart,
-  IconArrowDown,
-  IconArrowUp,
-  IconBell,
-  IconBellOff,
-  IconBolt,
-  IconBox,
-  IconCancel,
-  IconCheck,
-  IconCheckCircle,
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconClipboardEdit,
-  IconClose,
-  IconCohort,
-  IconCopy,
-  IconCumulativeChart,
-  IconDatabase,
-  IconDownload,
-  IconEdit,
-  IconErrorOutline,
-  IconExclamation,
-  IconFlag,
-  IconFlare,
-  IconFlask,
-  IconGift,
-  IconGridView,
-  IconHandClick,
-  IconHome,
-  IconLayers,
-  IconListView,
-  IconLogout,
-  IconMail,
-  IconMoon,
-  IconPanelRight,
-  IconPerson,
-  IconPlayCircle,
-  IconPlus,
-  IconPremium,
-  IconQueryEditor,
-  IconRadar,
-  IconRecording,
-  IconRobot,
-  IconRocket,
-  IconSave,
-  IconSearch,
-  IconSelectEvents,
-  IconStar,
-  IconSubArrowRight,
-  IconSun,
-  IconSurveys,
-  IconSync,
-  IconTableChart,
-  IconTerminal,
-  IconToggle,
-  IconTrash,
-  IconTuning,
-  IconUpload,
-  IconVolume,
-  IconVolumeOff,
-  PH_ICONS,
-  type IconName,
+  CANONICAL_ICONS,
+  OLD_UI_ICONS,
+  IconAreaChart, IconDatabase, IconFlag, IconFlask, IconGridView, IconRecording, IconSurveys,
+  IconChrome, IconFirefox, IconSafari, IconFacebook, IconGoogle, IconGitlab, IconSlack, IconMicrosoftTeams,
+  IconMacOS, IconAppleIOS, IconWindows, IconLinux, IconAndroidOS,
+  IconWeb, IconMonitor, IconBold, IconItalic, IconLink, IconPreview, IconEyeHidden,
+  IconFullScreen, IconMenu, IconGhost, IconReplay, IconHeatmap, IconPauseCircle,
+  IconSkipBackward, IconSkipStart, IconSkipEnd, IconDragHandle, IconFingerprint, IconNodeJS, IconStamphog,
+  IconPalette, IconMegaphone, IconMap, IconMapPin, IconCoffee, IconBook, IconCalendar,
+  IconClock, IconGlobe, IconCloud, IconBug, IconCrown, IconConfetti, IconLightBulb,
+  IconHourglass, IconStore, IconCart, IconEye, IconPeople, IconGroups, IconDocument,
+  IconAI, IconArchive, IconAtSign, IconBinary, IconGear, IconChat, IconFolder,
+  IconHeart, IconHomeFilled, IconImage, IconLock, IconMic, IconMusic, IconPhone,
+  IconRefresh, IconReply, IconReport, IconFilter, IconPlus, IconCheck, IconClose,
+  type CanonicalIconName,
+  type IconProps,
 } from "@/components/icons";
-import { ShowcaseWrapper } from "@/components/ui";
+import { Kbd, ShowcaseWrapper } from "@/components/ui";
 
-const iconCells: { name: IconName; Icon: (typeof PH_ICONS)[IconName] }[] = [
-  { name: "activity", Icon: IconActivity },
-  { name: "areaChart", Icon: IconAreaChart },
-  { name: "arrowUp", Icon: IconArrowUp },
-  { name: "arrowDown", Icon: IconArrowDown },
-  { name: "bell", Icon: IconBell },
-  { name: "bellOff", Icon: IconBellOff },
-  { name: "bolt", Icon: IconBolt },
-  { name: "box", Icon: IconBox },
-  { name: "cancel", Icon: IconCancel },
-  { name: "check", Icon: IconCheck },
-  { name: "checkCircle", Icon: IconCheckCircle },
-  { name: "chevronDown", Icon: IconChevronDown },
-  { name: "chevronLeft", Icon: IconChevronLeft },
-  { name: "chevronRight", Icon: IconChevronRight },
-  { name: "clipboard", Icon: IconClipboardEdit },
-  { name: "close", Icon: IconClose },
-  { name: "cohort", Icon: IconCohort },
-  { name: "copy", Icon: IconCopy },
-  { name: "cumulativeChart", Icon: IconCumulativeChart },
-  { name: "database", Icon: IconDatabase },
-  { name: "download", Icon: IconDownload },
-  { name: "edit", Icon: IconEdit },
-  { name: "errorOutline", Icon: IconErrorOutline },
-  { name: "exclamation", Icon: IconExclamation },
-  { name: "flag", Icon: IconFlag },
-  { name: "flare", Icon: IconFlare },
-  { name: "flask", Icon: IconFlask },
-  { name: "gift", Icon: IconGift },
-  { name: "grid", Icon: IconGridView },
-  { name: "handClick", Icon: IconHandClick },
-  { name: "home", Icon: IconHome },
-  { name: "layers", Icon: IconLayers },
-  { name: "list", Icon: IconListView },
-  { name: "logout", Icon: IconLogout },
-  { name: "mail", Icon: IconMail },
-  { name: "moon", Icon: IconMoon },
-  { name: "panelRight", Icon: IconPanelRight },
-  { name: "person", Icon: IconPerson },
-  { name: "play", Icon: IconPlayCircle },
-  { name: "plus", Icon: IconPlus },
-  { name: "premium", Icon: IconPremium },
-  { name: "queryEditor", Icon: IconQueryEditor },
-  { name: "radar", Icon: IconRadar },
-  { name: "recording", Icon: IconRecording },
-  { name: "robot", Icon: IconRobot },
-  { name: "rocket", Icon: IconRocket },
-  { name: "save", Icon: IconSave },
-  { name: "search", Icon: IconSearch },
-  { name: "selectEvents", Icon: IconSelectEvents },
-  { name: "settings", Icon: IconTuning },
-  { name: "star", Icon: IconStar },
-  { name: "subArrowRight", Icon: IconSubArrowRight },
-  { name: "sun", Icon: IconSun },
-  { name: "surveys", Icon: IconSurveys },
-  { name: "sync", Icon: IconSync },
-  { name: "tableChart", Icon: IconTableChart },
-  { name: "terminal", Icon: IconTerminal },
-  { name: "toggle", Icon: IconToggle },
-  { name: "trash", Icon: IconTrash },
-  { name: "upload", Icon: IconUpload },
-  { name: "volume", Icon: IconVolume },
-  { name: "volumeOff", Icon: IconVolumeOff },
-];
+const iconCells = Object.entries(CANONICAL_ICONS) as Array<[
+  CanonicalIconName,
+  ComponentType<IconProps>,
+]>;
+
+const originalIcons = Object.entries(OLD_UI_ICONS) as Array<[
+  keyof typeof OLD_UI_ICONS,
+  ComponentType<IconProps>,
+]>;
 
-const colourTiles = [
-  { label: "Session replay", Icon: IconRecording, fg: "--ph-product-session-replay" as const },
-  { label: "Product analytics", Icon: IconAreaChart, fg: "--ph-product-product-analytics" as const },
-  { label: "Data pipeline", Icon: IconGridView, fg: "--ph-product-data-pipeline" as const },
-  { label: "Feature flags", Icon: IconFlag, fg: "--ph-product-feature-flags" as const },
-  { label: "Experiments", Icon: IconFlask, fg: "--ph-product-experiments" as const },
-  { label: "Data warehouse", Icon: IconDatabase, fg: "--ph-product-data-warehouse" as const },
-  { label: "Surveys", Icon: IconSurveys, fg: "--ph-product-surveys" as const },
+const categoryIcons = [
+  { Icon: IconPalette, label: "Palette" }, { Icon: IconMegaphone, label: "Megaphone" },
+  { Icon: IconMap, label: "Map" }, { Icon: IconMapPin, label: "Pin" },
+  { Icon: IconCoffee, label: "Coffee" }, { Icon: IconBook, label: "Book" },
+  { Icon: IconCalendar, label: "Calendar" }, { Icon: IconClock, label: "Clock" },
+  { Icon: IconGlobe, label: "Globe" }, { Icon: IconCloud, label: "Cloud" },
+  { Icon: IconBug, label: "Bug" }, { Icon: IconCrown, label: "Crown" },
+  { Icon: IconConfetti, label: "Confetti" }, { Icon: IconLightBulb, label: "Bulb" },
+  { Icon: IconHourglass, label: "Hourglass" }, { Icon: IconStore, label: "Store" },
+  { Icon: IconCart, label: "Cart" }, { Icon: IconEye, label: "Eye" },
+  { Icon: IconPeople, label: "People" }, { Icon: IconGroups, label: "Groups" },
+  { Icon: IconDocument, label: "Document" }, { Icon: IconAI, label: "AI" },
+  { Icon: IconArchive, label: "Archive" }, { Icon: IconAtSign, label: "At" },
+  { Icon: IconBinary, label: "Binary" }, { Icon: IconGear, label: "Gear" },
+  { Icon: IconChat, label: "Chat" }, { Icon: IconFolder, label: "Folder" },
+  { Icon: IconHeart, label: "Heart" }, { Icon: IconImage, label: "Image" },
+  { Icon: IconLock, label: "Lock" }, { Icon: IconMic, label: "Mic" },
+  { Icon: IconMusic, label: "Music" }, { Icon: IconPhone, label: "Phone" },
+  { Icon: IconRefresh, label: "Refresh" }, { Icon: IconReply, label: "Reply" },
+  { Icon: IconReport, label: "Report" }, { Icon: IconFilter, label: "Filter" },
 ];
 
-export default function IconShowcase() {
-  const code = `import { IconActivity, IconAreaChart, IconArrowDown, IconArrowUp, IconBell, IconBellOff, IconBolt, IconBox, IconCancel, IconCheck, IconCheckCircle, IconChevronDown, IconChevronLeft, IconChevronRight, IconClipboardEdit, IconClose, IconCohort, IconCopy, IconCumulativeChart, IconDatabase, IconDownload, IconEdit, IconErrorOutline, IconExclamation, IconFlag, IconFlare, IconFlask, IconGift, IconGridView, IconHandClick, IconHome, IconLayers, IconListView, IconLogout, IconMail, IconMoon, IconPanelRight, IconPerson, IconPlayCircle, IconPlus, IconPremium, IconQueryEditor, IconRadar, IconRecording, IconRobot, IconRocket, IconSave, IconSearch, IconSelectEvents, IconStar, IconSubArrowRight, IconSun, IconSurveys, IconSync, IconTableChart, IconTerminal, IconToggle, IconTrash, IconTuning, IconUpload, IconVolume, IconVolumeOff, PH_ICONS, type IconName } from "the-old-ui";
+const lemonIcons = [
+  { Icon: IconChrome, label: "Chrome" },
+  { Icon: IconFirefox, label: "Firefox" },
+  { Icon: IconSafari, label: "Safari" },
+  { Icon: IconFacebook, label: "Facebook" },
+  { Icon: IconGoogle, label: "Google" },
+  { Icon: IconGitlab, label: "Gitlab" },
+  { Icon: IconSlack, label: "Slack" },
+  { Icon: IconMicrosoftTeams, label: "Teams" },
+  { Icon: IconMacOS, label: "macOS" },
+  { Icon: IconAppleIOS, label: "iOS" },
+  { Icon: IconWindows, label: "Windows" },
+  { Icon: IconLinux, label: "Linux" },
+  { Icon: IconAndroidOS, label: "Android" },
+  { Icon: IconWeb, label: "Web" },
+  { Icon: IconMonitor, label: "Monitor" },
+  { Icon: IconBold, label: "Bold" },
+  { Icon: IconItalic, label: "Italic" },
+  { Icon: IconLink, label: "Link" },
+  { Icon: IconPreview, label: "Preview" },
+  { Icon: IconEyeHidden, label: "EyeHidden" },
+  { Icon: IconFullScreen, label: "FullScreen" },
+  { Icon: IconMenu, label: "Menu" },
+  { Icon: IconGhost, label: "Ghost" },
+  { Icon: IconReplay, label: "Replay" },
+  { Icon: IconHeatmap, label: "Heatmap" },
+  { Icon: IconPauseCircle, label: "Pause" },
+  { Icon: IconSkipBackward, label: "SkipBack" },
+  { Icon: IconSkipStart, label: "SkipStart" },
+  { Icon: IconSkipEnd, label: "SkipEnd" },
+  { Icon: IconDragHandle, label: "DragHandle" },
+  { Icon: IconFingerprint, label: "Fingerprint" },
+  { Icon: IconNodeJS, label: "NodeJS" },
+  { Icon: IconStamphog, label: "Stamphog" },
+];
 
-<div className="space-y-8">
-  <div className="ph-panel space-y-4">
-    <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Bespoke Lemon glyphs</h3>
-    <p className="text-sm leading-relaxed text-ph-subtle">
-      Paths mirror PostHog&apos;s Lemon UI — filled{" "}
-      <code className="ph-kbd">currentColor</code> SVGs at <code className="ph-kbd">1em</code>, vendored in{" "}
-      <code className="ph-kbd">the-old-ui</code> (no Lucide).
-    </p>
+const productTiles = [
+  { label: "Session replay", Icon: IconRecording, color: "--ph-product-session-replay" },
+  { label: "Product analytics", Icon: IconAreaChart, color: "--ph-product-product-analytics" },
+  { label: "Data pipeline", Icon: IconGridView, color: "--ph-product-data-pipeline" },
+  { label: "Feature flags", Icon: IconFlag, color: "--ph-product-feature-flags" },
+  { label: "Experiments", Icon: IconFlask, color: "--ph-product-experiments" },
+  { label: "Data warehouse", Icon: IconDatabase, color: "--ph-product-data-warehouse" },
+  { label: "Surveys", Icon: IconSurveys, color: "--ph-product-surveys" },
+];
 
-    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
-      {iconCells.map(({ name, Icon }) => (
-        <div
-          key={name}
-          className="flex flex-col items-center gap-2 rounded-[var(--ph-radius-app)] border border-ph-border bg-ph-surface p-4 text-center"
-          style={{ boxShadow: "var(--ph-shadow-elevation-3000)" }}
-        >
-          <Icon className="h-6 w-6 text-ph-ink" />
-          <span className="text-[10px] font-medium uppercase tracking-wide text-ph-mutedtext">{name}</span>
-        </div>
-      ))}
-    </div>
-  </div>
+export default function IconShowcase() {
+  const code = `import {
+  IconCommandCursor,
+  IconDataReel,
+  IconInsightBoard,
+  IconOldWindow,
+} from "@xenide-io/the-old-ui-theme";
 
-  <div className="ph-panel space-y-4">
-    <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product rail hues</h3>
-    <p className="text-sm leading-relaxed text-ph-subtle">
-      In-app nav tiles use saturated backgrounds with light glyphs — tokens map to{" "}
-      <code className="ph-kbd">--ph-product-*</code> in <code className="ph-kbd">globals.css</code>.
-    </p>
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
-      {colourTiles.map(({ label, Icon, fg }) => (
-        <div
-          key={label}
-          className="ph-icon-tile border-white/15 text-white"
-          style={{ backgroundColor: \`var(\${fg})\` }}
-        >
-          <Icon className="mb-1 h-7 w-7 drop-shadow-sm" />
-          <span className="max-w-full truncate px-1 text-center normal-case tracking-normal">{label}</span>
-        </div>
-      ))}
-    </div>
-  </div>
+<div className="flex items-center gap-4 text-ph-ink">
+  <IconOldWindow size={16} />
+  <IconCommandCursor size={20} />
+  <IconDataReel size={24} />
+  <IconInsightBoard size={24} aria-label="Insights" />
 </div>`;
 
   return (
     <ShowcaseWrapper
       title="Icons"
-      description="Bespoke Lemon glyphs from PostHog open source — filled Material / product paths, not Lucide stroke icons."
+      description="A canonical filled SVG registry with PostHog/Material foundations and clearly identified Old UI originals."
       code={code}
       filename="IconExample.tsx"
     >
       <div className="space-y-8">
-        <div className="ph-panel space-y-4">
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Bespoke Lemon glyphs</h3>
-          <p className="text-sm leading-relaxed text-ph-subtle">
-            Paths mirror PostHog&apos;s Lemon UI — filled{" "}
-            <code className="ph-kbd">currentColor</code> SVGs at <code className="ph-kbd">1em</code>, vendored in{" "}
-            <code className="ph-kbd">the-old-ui</code> (no Lucide).
-          </p>
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Old UI originals</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Authored 24px glyphs for retro interface and analytics concepts. Each uses <Kbd variant="token">currentColor</Kbd>, a filled silhouette, and enough negative space to survive at 16px.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+            {originalIcons.map(([name, Icon]) => (
+              <div key={name} className="flex flex-col items-center gap-3 rounded-lg border border-ph-border-subtle bg-ph-raised p-4 text-center">
+                <div className="flex h-9 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-xs font-medium text-ph-subtle">{formatName(name)}</span>
+              </div>
+            ))}
+          </div>
+        </section>
 
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Canonical registry</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Documentation is generated from <Kbd variant="token">CANONICAL_ICONS</Kbd>. Compatibility aliases remain available through <Kbd variant="token">PH_ICONS</Kbd> without duplicating this inventory.
+            </p>
+          </div>
           <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
-            {iconCells.map(({ name, Icon }) => (
-              <div
-                key={name}
-                className="flex flex-col items-center gap-2 rounded-[var(--ph-radius-app)] border border-ph-border bg-ph-surface p-4 text-center"
-                style={{ boxShadow: "var(--ph-shadow-elevation-3000)" }}
-              >
-                <Icon className="h-6 w-6 text-ph-ink" />
-                <span className="text-[10px] font-medium uppercase tracking-wide text-ph-mutedtext">{name}</span>
+            {iconCells.map(([name, Icon]) => (
+              <div key={name} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
+                <div className="flex h-8 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{name}</span>
               </div>
             ))}
           </div>
-        </div>
+        </section>
 
-        <div className="ph-panel space-y-4">
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product rail hues</h3>
-          <p className="text-sm leading-relaxed text-ph-subtle">
-            In-app nav tiles use saturated backgrounds with light glyphs — tokens map to{" "}
-            <code className="ph-kbd">--ph-product-*</code> in <code className="ph-kbd">globals.css</code>.
-          </p>
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Common icons (PostHog categories)</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Everyday UI icons ported from PostHog&apos;s categories set.
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10">
+            {categoryIcons.map(({ Icon, label }) => (
+              <div key={label} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
+                <div className="flex h-8 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{label}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon icons (PostHog port)</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Browser, OS, brand, and UI icons ported from PostHog&apos;s lemon-ui icon set.
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10">
+            {lemonIcons.map(({ Icon, label }) => (
+              <div key={label} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
+                <div className="flex h-8 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{label}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product hues</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Product color is used as a subtle tint and icon accent instead of assuming white foregrounds on every theme.
+            </p>
+          </div>
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
-            {colourTiles.map(({ label, Icon, fg }) => (
+            {productTiles.map(({ label, Icon, color }) => (
               <div
                 key={label}
-                className="ph-icon-tile border-white/15 text-white"
-                style={{ backgroundColor: `var(${fg})` }}
+                className="ph-icon-tile ph-product-icon-tile"
+                style={{ "--ph-icon-tile-color": `var(${color})` } as CSSProperties}
               >
-                <Icon className="mb-1 h-7 w-7 drop-shadow-sm" />
-                <span className="max-w-full truncate px-1 text-center normal-case tracking-normal">{label}</span>
+                <Icon className="mb-1" size={28} />
+                <span className="max-w-full px-1 text-center normal-case tracking-normal">{label}</span>
               </div>
             ))}
           </div>
-        </div>
+        </section>
       </div>
     </ShowcaseWrapper>
   );
 }
+
+function formatName(name: string) {
+  return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (letter) => letter.toUpperCase());
+}

package/src/components/sections/KbdShowcase.tsx

@@ -1,30 +1,56 @@
-import { Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
+import { ComponentDocs, Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
 
 export default function KbdShowcase() {
-  const code = `import { Kbd, Panel } from "the-old-ui";
+  const code = `import { Kbd, Panel } from "@xenide-io/the-old-ui-theme";
 
-<Panel className="flex flex-wrap items-center gap-3 text-ph-subtle">
-  <Kbd keys={["⌘", "K"]} />
-  <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-  <Kbd keys={["⌥", "⇧", "E"]} />
-  <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-  <Kbd variant="token">HogQL</Kbd>
-  <p className="w-full pt-5 text-xs text-ph-mutedtext">
-    Keyboard hints and code tokens are rendered through the same reusable component.
-  </p>
+<Panel className="space-y-5">
+  <div className="flex flex-wrap items-center gap-4">
+    <Kbd keys={["Command", "K"]} platform="mac" />
+    <Kbd keys={["Control", "K"]} platform="windows" />
+    <Kbd keys={["Control", "K"]} />
+  </div>
+  <div className="flex flex-wrap items-center gap-3">
+    <Kbd variant="key">Escape</Kbd>
+    <Kbd variant="key">↵</Kbd>
+    <Kbd variant="token">HogQL</Kbd>
+  </div>
 </Panel>`;
 
   return (
-    <ShowcaseWrapper title="Keyboard glyphs" code={code} filename="KbdExample.tsx">
-      <Panel className="flex flex-wrap items-center gap-3 text-ph-subtle">
-        <Kbd keys={["⌘", "K"]} />
-        <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-        <Kbd keys={["⌥", "⇧", "E"]} />
-        <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-        <Kbd variant="token">HogQL</Kbd>
-        <p className="w-full pt-5 text-xs text-ph-mutedtext">
-          Keyboard hints and code tokens are rendered through the same reusable component.
-        </p>
+    <ShowcaseWrapper
+      title="Keyboard glyphs"
+      description="PostHog-style joined shortcut caps with crisp lower borders, monospace type, and separate inline code tokens."
+      code={code}
+      filename="KbdExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "variant", type: "shortcut | key | token", defaultValue: "shortcut", description: "Chooses a shortcut group, single physical key, or inline code token." },
+            { name: "keys", type: "readonly ReactNode[]", description: "Joins a shortcut chord inside one compact cap without stringifying React nodes." },
+            { name: "platform", type: "text | mac | windows", defaultValue: "text", description: "Converts named modifier keys only when explicitly requested." },
+            { name: "separator", type: "ReactNode", description: "Optional visual separator inside the joined shortcut cap." },
+            { name: "aria-label", type: "string", description: "Optional spoken shortcut override; textual keys generate one automatically." },
+          ]}
+        />
+      }
+    >
+      <Panel className="space-y-5">
+        <div>
+          <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Platform shortcuts</h3>
+          <div className="flex flex-wrap items-center gap-4">
+            <Kbd keys={["Command", "K"]} platform="mac" />
+            <Kbd keys={["Control", "K"]} platform="windows" />
+            <Kbd keys={["Control", "K"]} />
+          </div>
+        </div>
+        <div>
+          <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Keys and tokens</h3>
+          <div className="flex flex-wrap items-center gap-3">
+            <Kbd variant="key">Escape</Kbd>
+            <Kbd variant="key">↵</Kbd>
+            <Kbd variant="token">HogQL</Kbd>
+          </div>
+        </div>
       </Panel>
     </ShowcaseWrapper>
   );

package/src/components/sections/ModalShowcase.tsx

@@ -9,8 +9,7 @@ export default function ModalShowcase() {
 
   const close = () => setOpenModal(null);
 
-  const code = `import { IconCheck, IconClose, IconPlus } from "the-old-ui";
-import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
+  const code = `import { Button, IconCheck, IconClose, IconPlus, Input, Modal, Select, Textarea } from "@xenide-io/the-old-ui-theme";
 
 <div className="ph-panel space-y-4">
   <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
@@ -45,7 +44,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
     footer={<Button variant="success" onClick={close}>Continue</Button>}
   >
     <div className="flex items-start gap-3">
-      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-ph-success">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
         <IconCheck className="h-5 w-5" />
       </div>
       <div>
@@ -67,7 +66,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
     }
   >
     <div className="flex items-start gap-3">
-      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-red-100 text-ph-danger">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
         <IconClose className="h-5 w-5" />
       </div>
       <div>
@@ -114,6 +113,8 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
             { name: "size", type: "sm | md | lg | xl | full", defaultValue: "md", description: "Controls panel max width." },
             { name: "title", type: "string", description: "Accessible dialog heading." },
             { name: "footer", type: "ReactNode", description: "Renders action row with consistent spacing." },
+            { name: "closeOnOutsideClick", type: "boolean", defaultValue: "true", description: "Controls pointer dismissal outside the dialog." },
+            { name: "closeOnEscape", type: "boolean", defaultValue: "true", description: "Controls Escape-key dismissal." },
           ]}
         />
       }
@@ -151,7 +152,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
           footer={<Button variant="success" onClick={close}>Continue</Button>}
         >
           <div className="flex items-start gap-3">
-            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-ph-success">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
               <IconCheck className="h-5 w-5" />
             </div>
             <div>
@@ -173,7 +174,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
           }
         >
           <div className="flex items-start gap-3">
-            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-red-100 text-ph-danger">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
               <IconClose className="h-5 w-5" />
             </div>
             <div>