@happyvertical/smrt-playground 0.38.26 → 0.39.1

package/dist/index.js

@@ -40,7 +40,7 @@ import { playgroundModules } from 'virtual:smrt-playground/modules';
 <\/script>
 
 <PlaygroundHost
-  title="SMRT Playground"
+  title="s-m-r-t playground"
   subtitle="Package previews and local app overrides"
   modules={playgroundModules}
 />

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/templates.ts"],"sourcesContent":["import {\n  displayNameForScopedPackage,\n  displayNameForSmrtPackage,\n} from './utils.js';\n\nexport function createPackagePlaygroundTemplate(packageName: string): string {\n  const displayName = displayNameForSmrtPackage(packageName);\n\n  return `/**\n * ${displayName} playground definitions\n *\n * Export preview entries for the shared SMRT playground host here.\n */\n\nexport default {\n  packageName: '${packageName}',\n  displayName: '${displayName}',\n  entries: [],\n};\n`;\n}\n\nexport function createAppPlaygroundTemplate(packageName: string): string {\n  const displayName = displayNameForScopedPackage(packageName);\n\n  return `/**\n * Local app playground overrides\n *\n * Add app-specific previews here, or override installed package entries by\n * exporting an additional module with the same packageName + entry id.\n */\n\nexport default [\n  {\n    packageName: '${packageName}',\n    displayName: '${displayName}',\n    entries: [],\n  },\n];\n`;\n}\n\nexport function createAppPlaygroundRouteTemplate(): string {\n  return `<script lang=\"ts\">\nimport { PlaygroundHost } from '@happyvertical/smrt-playground/svelte';\nimport { playgroundModules } from 'virtual:smrt-playground/modules';\n</script>\n\n<PlaygroundHost\n  title=\"SMRT Playground\"\n  subtitle=\"Package previews and local app overrides\"\n  modules={playgroundModules}\n/>\n`;\n}\n"],"mappings":";;;AAKO,SAAS,gCAAgC,aAA6B;CAC3E,MAAM,cAAc,0BAA0B,WAAW;CAEzD,OAAO;KACJ,YAAW;;;;;;kBAME,YAAW;kBACX,YAAW;;;;AAI7B;AAEO,SAAS,4BAA4B,aAA6B;CAGvE,OAAO;;;;;;;;;oBASW,YAAW;oBAXT,4BAA4B,WAY9B,EAAW;;;;;AAK/B;AAEO,SAAS,mCAA2C;CACzD,OAAO;;;;;;;;;;;AAWT"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/templates.ts"],"sourcesContent":["import {\n  displayNameForScopedPackage,\n  displayNameForSmrtPackage,\n} from './utils.js';\n\nexport function createPackagePlaygroundTemplate(packageName: string): string {\n  const displayName = displayNameForSmrtPackage(packageName);\n\n  return `/**\n * ${displayName} playground definitions\n *\n * Export preview entries for the shared SMRT playground host here.\n */\n\nexport default {\n  packageName: '${packageName}',\n  displayName: '${displayName}',\n  entries: [],\n};\n`;\n}\n\nexport function createAppPlaygroundTemplate(packageName: string): string {\n  const displayName = displayNameForScopedPackage(packageName);\n\n  return `/**\n * Local app playground overrides\n *\n * Add app-specific previews here, or override installed package entries by\n * exporting an additional module with the same packageName + entry id.\n */\n\nexport default [\n  {\n    packageName: '${packageName}',\n    displayName: '${displayName}',\n    entries: [],\n  },\n];\n`;\n}\n\nexport function createAppPlaygroundRouteTemplate(): string {\n  return `<script lang=\"ts\">\nimport { PlaygroundHost } from '@happyvertical/smrt-playground/svelte';\nimport { playgroundModules } from 'virtual:smrt-playground/modules';\n</script>\n\n<PlaygroundHost\n  title=\"s-m-r-t playground\"\n  subtitle=\"Package previews and local app overrides\"\n  modules={playgroundModules}\n/>\n`;\n}\n"],"mappings":";;;AAKO,SAAS,gCAAgC,aAA6B;CAC3E,MAAM,cAAc,0BAA0B,WAAW;CAEzD,OAAO;KACJ,YAAW;;;;;;kBAME,YAAW;kBACX,YAAW;;;;AAI7B;AAEO,SAAS,4BAA4B,aAA6B;CAGvE,OAAO;;;;;;;;;oBASW,YAAW;oBAXT,4BAA4B,WAY9B,EAAW;;;;;AAK/B;AAEO,SAAS,mCAA2C;CACzD,OAAO;;;;;;;;;;;AAWT"}

package/dist/svelte/PlaygroundHost.svelte

@@ -22,41 +22,110 @@ export interface Props {
 
 let {
   modules = [],
-  title = 'SMRT Playground',
+  title = 's-m-r-t playground',
   subtitle = 'Shared package previews with app-local overrides',
 }: Props = $props();
 
-const normalizedModules = $derived(mergePlaygroundModules(modules));
-const filteredModules = $derived(
-  normalizedModules.filter((module) => {
-    if (!searchTerm) {
-      return true;
-    }
-
-    const query = searchTerm.toLowerCase();
-    return (
-      module.displayName.toLowerCase().includes(query) ||
-      module.entries.some(
-        (entry) =>
-          entry.title.toLowerCase().includes(query) ||
-          entry.id.toLowerCase().includes(query),
-      )
-    );
-  }),
-);
+const foundationPackageName = '@happyvertical/smrt-ui';
+const foundationGroupOrder = [
+  'Inputs & controls',
+  'Feedback & overlays',
+  'Collections & data',
+] as const;
 
+let searchTerm = $state('');
 let selectedModuleName = $state<string | null>(null);
 let selectedEntryId = $state<string | null>(null);
 let selectedMode = $state<SmrtPlaygroundMode>('mock');
-let searchTerm = $state('');
 let isHydrated = $state(false);
 
 onMount(() => {
   isHydrated = true;
 });
 
+const normalizedModules = $derived(mergePlaygroundModules(modules));
+const orderedModules = $derived([
+  ...normalizedModules.filter(
+    (module) => module.packageName === foundationPackageName,
+  ),
+  ...normalizedModules.filter(
+    (module) => module.packageName !== foundationPackageName,
+  ),
+]);
+
+const filteredModules = $derived.by(() => {
+  const query = searchTerm.trim().toLowerCase();
+  if (!query) {
+    return orderedModules;
+  }
+
+  return orderedModules
+    .map((module) => {
+      const moduleMatches = [
+        module.displayName,
+        module.packageName,
+        module.description,
+      ].some((value) => value?.toLowerCase().includes(query));
+
+      if (moduleMatches) {
+        return module;
+      }
+
+      return {
+        ...module,
+        entries: module.entries.filter((entry) =>
+          [
+            entry.title,
+            entry.id,
+            entry.description,
+            ...(entry.tags ?? []),
+          ].some((value) => value?.toLowerCase().includes(query)),
+        ),
+      };
+    })
+    .filter((module) => module.entries.length > 0);
+});
+
+const filteredFoundation = $derived(
+  filteredModules.find(
+    (module) => module.packageName === foundationPackageName,
+  ) ?? null,
+);
+const filteredPackageModules = $derived(
+  filteredModules.filter(
+    (module) => module.packageName !== foundationPackageName,
+  ),
+);
+
+function foundationGroup(entry: ResolvedSmrtPlaygroundEntry) {
+  const tags = entry.tags ?? [];
+  if (tags.includes('feedback') || tags.includes('overlays')) {
+    return 'Feedback & overlays';
+  }
+  if (
+    tags.some((tag) =>
+      ['content', 'data', 'grid', 'list', 'table'].includes(tag),
+    )
+  ) {
+    return 'Collections & data';
+  }
+  return 'Inputs & controls';
+}
+
+const foundationGroups = $derived.by(() => {
+  const grouped = new Map<string, ResolvedSmrtPlaygroundEntry[]>();
+  for (const entry of filteredFoundation?.entries ?? []) {
+    const group = foundationGroup(entry);
+    grouped.set(group, [...(grouped.get(group) ?? []), entry]);
+  }
+
+  return foundationGroupOrder
+    .map((group) => [group, grouped.get(group) ?? []] as const)
+    .filter(([, entries]) => entries.length > 0);
+});
+
 $effect(() => {
-  const firstModule = filteredModules[0] ?? normalizedModules[0] ?? null;
+  const firstModule = orderedModules[0] ?? null;
   if (!firstModule) {
     selectedModuleName = null;
     selectedEntryId = null;
@@ -64,67 +133,66 @@ $effect(() => {
   }
 
   const activeModule =
-    filteredModules.find(
+    orderedModules.find(
       (module) => module.packageName === selectedModuleName,
-    ) ||
-    normalizedModules.find(
-      (module) => module.packageName === selectedModuleName,
-    ) ||
-    firstModule;
+    ) ?? firstModule;
 
   if (activeModule.packageName !== selectedModuleName) {
     selectedModuleName = activeModule.packageName;
+    selectedEntryId =
+      activeModule.packageName === foundationPackageName
+        ? (activeModule.entries[0]?.qualifiedId ?? null)
+        : null;
+    selectedMode = activeModule.entries[0]?.availableModes[0] ?? 'mock';
+    return;
+  }
+
+  if (selectedEntryId === null) {
+    return;
   }
 
   const activeEntry =
     activeModule.entries.find(
       (entry) => entry.qualifiedId === selectedEntryId,
-    ) ||
-    activeModule.entries[0] ||
-    null;
+    ) ?? null;
 
-  if (activeEntry && activeEntry.qualifiedId !== selectedEntryId) {
-    selectedEntryId = activeEntry.qualifiedId;
+  if (!activeEntry) {
+    selectedEntryId = null;
+    return;
   }
 
-  if (activeEntry && !activeEntry.availableModes.includes(selectedMode)) {
+  selectedEntryId = activeEntry.qualifiedId;
+  if (!activeEntry.availableModes.includes(selectedMode)) {
     selectedMode = activeEntry.availableModes[0] ?? 'mock';
   }
 });
 
 const selectedModule = $derived(
-  normalizedModules.find(
-    (module) => module.packageName === selectedModuleName,
-  ) ||
-    normalizedModules[0] ||
+  orderedModules.find((module) => module.packageName === selectedModuleName) ??
+    orderedModules[0] ??
     null,
 );
-
 const selectedEntry = $derived(
   selectedModule?.entries.find(
     (entry) => entry.qualifiedId === selectedEntryId,
-  ) ||
-    selectedModule?.entries[0] ||
-    null,
+  ) ?? null,
+);
+const selectedModeConfig = $derived(
+  selectedEntry ? (selectedEntry.modes[selectedMode] ?? null) : null,
 );
-
-let PreviewComponent = $state<Component<Record<string, unknown>> | null>(null);
-let previewComponentEntryId = $state<string | null>(null);
-let previewLoadError = $state<string | null>(null);
-let previewIsLoading = $state(false);
-
 const selectedProps = $derived(
   selectedEntry
     ? {
-        ...(selectedEntry.props || {}),
-        ...(selectedEntry.modes[selectedMode]?.props || {}),
+        ...(selectedEntry.props ?? {}),
+        ...(selectedModeConfig?.props ?? {}),
       }
     : {},
 );
 
-const selectedModeConfig = $derived(
-  selectedEntry ? (selectedEntry.modes[selectedMode] ?? null) : null,
-);
+let PreviewComponent = $state<Component<Record<string, unknown>> | null>(null);
+let previewComponentEntryId = $state<string | null>(null);
+let previewLoadError = $state<string | null>(null);
+let previewIsLoading = $state(false);
 
 function resolvePreviewComponent(
   loaded: PlaygroundComponentModule,
@@ -146,7 +214,6 @@ $effect(() => {
   let cancelled = false;
 
   previewLoadError = null;
-
   if (!entry) {
     PreviewComponent = null;
     previewComponentEntryId = null;
@@ -179,7 +246,6 @@ $effect(() => {
       if (cancelled) {
         return;
       }
-
       PreviewComponent = resolvePreviewComponent(loaded);
       previewComponentEntryId = entry.qualifiedId;
       previewIsLoading = false;
@@ -188,7 +254,6 @@ $effect(() => {
       if (cancelled) {
         return;
       }
-
       PreviewComponent = null;
       previewComponentEntryId = null;
       previewLoadError =
@@ -202,8 +267,15 @@ $effect(() => {
 });
 
 function selectModule(packageName: string) {
+  const module = orderedModules.find(
+    (candidate) => candidate.packageName === packageName,
+  );
   selectedModuleName = packageName;
-  selectedEntryId = null;
+  selectedEntryId =
+    packageName === foundationPackageName
+      ? (module?.entries[0]?.qualifiedId ?? null)
+      : null;
+  selectedMode = module?.entries[0]?.availableModes[0] ?? 'mock';
 }
 
 function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
@@ -213,137 +285,188 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
 }
 </script>
 
+{#snippet entryButton(entry: ResolvedSmrtPlaygroundEntry)}
+  <button
+    type="button"
+    class:active={entry.qualifiedId === selectedEntry?.qualifiedId}
+    aria-pressed={entry.qualifiedId === selectedEntry?.qualifiedId}
+    data-playground-entry={entry.qualifiedId}
+    onclick={() => selectEntry(entry)}
+  >
+    {entry.title}
+  </button>
+{/snippet}
+
 <ThemeProvider colorScheme="system" persist={true}>
   <div class="playground-shell" data-hydrated={isHydrated ? 'true' : 'false'}>
-    <aside class="sidebar">
-      <div class="sidebar__header">
-        <p class="eyebrow">Shared Host</p>
-        <h1>{title}</h1>
-        <p>{subtitle}</p>
-      </div>
-
-      <div class="theme-controls" data-testid="playground-theme-controls">
-        <ThemeSwitcher variant="select" label="Theme" />
-        <ColorSchemeToggle />
-      </div>
+    <aside class="catalog-nav">
+      <header class="brand">
+        <span class="brand__mark" aria-hidden="true">S</span>
+        <div>
+          <h1>{title}</h1>
+          <p>{subtitle}</p>
+        </div>
+      </header>
 
-      <label class="search">
-        <span>Filter previews</span>
-        <input bind:value={searchTerm} placeholder="Search packages or entries" />
+      <label class="search-field">
+        <span>Find a component</span>
+        <input bind:value={searchTerm} placeholder="Search" />
       </label>
 
-      <div class="module-list" data-testid="playground-modules">
+      <div class="catalog-scroll" data-testid="playground-modules">
         {#if filteredModules.length === 0}
-          <div class="empty-card">
-            <strong>No previews found</strong>
-            <p>Add a `src/svelte/playground.ts` file to a package, or scaffold `src/playground.ts` in your app.</p>
+          <div class="empty-state">
+            <strong>No components found</strong>
+            <p>Try another component, package, or tag.</p>
           </div>
         {:else}
-          {#each filteredModules as module (module.packageName)}
-            <button
-              type="button"
-              class:selected={module.packageName === selectedModule?.packageName}
-              data-playground-module={module.packageName}
-              onclick={() => selectModule(module.packageName)}
-            >
-              <strong>{module.displayName}</strong>
-              <span>{module.entries.length} preview{module.entries.length === 1 ? '' : 's'}</span>
-            </button>
-          {/each}
+          <nav aria-label="Component catalog" data-testid="playground-entries">
+            {#if filteredFoundation}
+              <section class="foundation-catalog">
+                <button
+                  type="button"
+                  class="foundation-heading"
+                  data-playground-module={filteredFoundation.packageName}
+                  onclick={() => selectModule(filteredFoundation.packageName)}
+                >
+                  <span>Foundation</span>
+                  <small>{filteredFoundation.entries.length}</small>
+                </button>
+
+                {#each foundationGroups as [group, entries]}
+                  <section class="nav-group">
+                    <h2>{group}</h2>
+                    {#each entries as entry (entry.qualifiedId)}
+                      {@render entryButton(entry)}
+                    {/each}
+                  </section>
+                {/each}
+              </section>
+            {/if}
+
+            {#if filteredPackageModules.length > 0}
+              <section class="package-groups">
+                <h2>Package components</h2>
+                {#each filteredPackageModules as module (module.packageName)}
+                  <details open={module.packageName === selectedModule?.packageName}>
+                    <summary
+                      data-playground-module={module.packageName}
+                      onclick={(event) => {
+                        event.preventDefault();
+                        selectModule(module.packageName);
+                      }}
+                    >
+                      <span>{module.displayName}</span>
+                      <small>{module.entries.length}</small>
+                    </summary>
+                    <div>
+                      {#each module.entries as entry (entry.qualifiedId)}
+                        {@render entryButton(entry)}
+                      {/each}
+                    </div>
+                  </details>
+                {/each}
+              </section>
+            {/if}
+          </nav>
         {/if}
       </div>
+
+      <footer class="theme-controls" data-testid="playground-theme-controls">
+        <ThemeSwitcher variant="select" label="Theme" />
+        <ColorSchemeToggle />
+      </footer>
     </aside>
 
-    <main class="content">
+    <main class="workspace">
       {#if selectedModule}
-        <header class="content__header">
-          <div>
-            <p class="eyebrow" data-testid="playground-selected-package">{selectedModule.packageName}</p>
-            <h2 data-testid="playground-selected-module">{selectedModule.displayName}</h2>
-            {#if selectedModule.description}
-              <p>{selectedModule.description}</p>
-            {/if}
+        <header class="workspace-header">
+          <div class="breadcrumbs">
+            <span data-testid="playground-selected-module">{selectedModule.displayName}</span>
+            <i aria-hidden="true">/</i>
+            <strong>{selectedEntry?.title ?? 'Overview'}</strong>
           </div>
+
+          {#if selectedEntry && selectedEntry.availableModes.length > 1}
+            <div class="mode-control" role="group" aria-label="Preview mode">
+              {#each selectedEntry.availableModes as mode}
+                <button
+                  type="button"
+                  class:active={mode === selectedMode}
+                  aria-pressed={mode === selectedMode}
+                  data-playground-mode={mode}
+                  onclick={() => (selectedMode = mode)}
+                >
+                  {mode}
+                </button>
+              {/each}
+            </div>
+          {/if}
         </header>
 
-        <div class="content__body">
-          <section class="entry-list" data-testid="playground-entries">
-            {#each selectedModule.entries as entry (entry.qualifiedId)}
-              <button
-                type="button"
-                class:selected={entry.qualifiedId === selectedEntry?.qualifiedId}
-                aria-pressed={entry.qualifiedId === selectedEntry?.qualifiedId}
-                data-playground-entry={entry.qualifiedId}
-                onclick={() => selectEntry(entry)}
-              >
-                <div>
-                  <strong>{entry.title}</strong>
-                  <span>{entry.id}</span>
-                </div>
-                <div class="mode-pills">
-                  {#each entry.availableModes as mode}
-                    <span>{mode}</span>
-                  {/each}
-                </div>
-              </button>
-            {/each}
-          </section>
+        {#if selectedEntry}
+          <div class="preview-heading">
+            <p data-testid="playground-selected-package">{selectedModule.packageName}</p>
+            <h2 data-testid="playground-preview-title">{selectedEntry.title}</h2>
+            {#if selectedEntry.description}
+              <span>{selectedEntry.description}</span>
+            {/if}
+            {#if selectedModeConfig?.description}
+              <span class="mode-description">{selectedModeConfig.description}</span>
+            {/if}
+          </div>
 
           <section class="preview-panel" data-testid="playground-preview-panel">
-            {#if selectedEntry && PreviewComponent && previewComponentEntryId === selectedEntry.qualifiedId}
-              <div class="preview-panel__meta">
-                <div>
-                  <h3 data-testid="playground-preview-title">{selectedEntry.title}</h3>
-                  {#if selectedEntry.description}
-                    <p>{selectedEntry.description}</p>
-                  {/if}
-                  {#if selectedModeConfig?.description}
-                    <p class="mode-description">{selectedModeConfig.description}</p>
-                  {/if}
-                </div>
-
-                {#if selectedEntry.availableModes.length > 1}
-                  <div class="mode-toggle" role="group" aria-label="Preview mode">
-                    {#each selectedEntry.availableModes as mode}
-                      <button
-                        type="button"
-                        class:active={mode === selectedMode}
-                        aria-pressed={mode === selectedMode}
-                        data-playground-mode={mode}
-                        onclick={() => (selectedMode = mode)}
-                      >
-                        {mode}
-                      </button>
-                    {/each}
-                  </div>
-                {/if}
-              </div>
-
-              <div class="preview-stage" data-testid="playground-preview-stage">
+            <div class="preview-stage" data-testid="playground-preview-stage">
+              {#if PreviewComponent && previewComponentEntryId === selectedEntry.qualifiedId}
                 <PreviewComponent {...selectedProps} />
-              </div>
-            {:else if selectedEntry && previewIsLoading}
-              <div class="empty-card">
-                <strong>Loading preview...</strong>
-                <p>{selectedEntry.title} is being loaded for the selected mode.</p>
-              </div>
-            {:else if selectedEntry && previewLoadError}
-              <div class="empty-card">
-                <strong>Preview failed to load</strong>
-                <p>{previewLoadError}</p>
-              </div>
-            {:else}
-              <div class="empty-card">
-                <strong>No preview selected</strong>
-                <p>Select a preview entry from the left to render it.</p>
-              </div>
-            {/if}
+              {:else if previewIsLoading}
+                <div class="preview-state">
+                  <span class="loader" aria-hidden="true"></span>
+                  <p>Loading {selectedEntry.title}…</p>
+                </div>
+              {:else}
+                <div class="preview-state">
+                  <strong>Preview unavailable</strong>
+                  <p>{previewLoadError ?? 'Select a component to begin.'}</p>
+                </div>
+              {/if}
+            </div>
           </section>
-        </div>
+        {:else}
+          <section class="package-landing" data-testid="playground-package-landing">
+            <header>
+              <p data-testid="playground-selected-package">{selectedModule.packageName}</p>
+              <h2>{selectedModule.displayName}</h2>
+              {#if selectedModule.description}
+                <span>{selectedModule.description}</span>
+              {/if}
+              <small>{selectedModule.entries.length} component{selectedModule.entries.length === 1 ? '' : 's'}</small>
+            </header>
+
+            <div class="package-index">
+              <h3>Components</h3>
+              {#each selectedModule.entries as entry (entry.qualifiedId)}
+                <button
+                  type="button"
+                  data-playground-landing-entry={entry.qualifiedId}
+                  onclick={() => selectEntry(entry)}
+                >
+                  <span class="package-index__copy">
+                    <strong>{entry.title}</strong>
+                    <small>{entry.description ?? entry.id}</small>
+                  </span>
+                  <span class="package-index__modes">{entry.availableModes.join(' · ')}</span>
+                  <span class="package-index__arrow" aria-hidden="true">→</span>
+                </button>
+              {/each}
+            </div>
+          </section>
+        {/if}
       {:else}
-        <div class="empty-card full-height">
+        <div class="preview-state full-height">
           <strong>No playground modules discovered</strong>
-          <p>The shared host is ready, but nothing is exporting playground entries yet.</p>
+          <p>The shared host is ready, but nothing exports playground entries yet.</p>
         </div>
       {/if}
     </main>
@@ -356,234 +479,536 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     min-height: 100vh;
   }
 
+  :global(*) {
+    box-sizing: border-box;
+  }
+
   .playground-shell {
     display: grid;
-    grid-template-columns: 20rem minmax(0, 1fr);
+    grid-template-columns: 17rem minmax(0, 1fr);
     min-height: 100vh;
     background: var(--smrt-color-background);
     color: var(--smrt-color-on-background);
     font-family: var(--smrt-font-family);
   }
 
-  .sidebar {
-    display: grid;
-    align-content: start;
-    gap: 1.25rem;
-    padding: 1.5rem;
+  button,
+  input {
+    font: inherit;
+  }
+
+  button {
+    color: inherit;
+  }
+
+  .catalog-nav {
+    position: sticky;
+    top: 0;
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+    gap: 1.4rem;
+    padding: 1.25rem;
+    overflow: hidden;
     border-right: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface-container);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface);
-    backdrop-filter: blur(18px);
   }
 
-  .sidebar__header h1,
-  .content__header h2,
-  .preview-panel__meta h3 {
-    margin: 0;
+  .brand {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.75rem;
   }
 
-  .sidebar__header,
-  .search,
-  .module-list,
-  .content,
-  .content__body,
-  .entry-list,
-  .preview-panel {
+  .brand__mark {
     display: grid;
-    gap: 0.9rem;
+    width: 2rem;
+    height: 2rem;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 0.55rem;
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    font-weight: 700;
   }
 
-  .eyebrow {
-    margin: 0 0 0.35rem;
-    font-size: 0.75rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--smrt-color-primary);
+  .brand > div {
+    min-width: 0;
   }
 
-  .sidebar__header p:last-child,
-  .content__header p,
-  .preview-panel__meta p,
-  .empty-card p {
+  .brand h1 {
     margin: 0;
-    line-height: 1.55;
+    overflow: hidden;
+    font-size: 0.9rem;
+    letter-spacing: 0.035em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .theme-controls {
-    display: flex;
-    align-items: flex-end;
-    gap: 0.6rem;
-    flex-wrap: wrap;
-  }
-
-  .theme-controls :global(.smrt-theme-switcher) {
-    flex: 1;
+  .brand p {
+    margin: 0.12rem 0 0;
+    overflow: hidden;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.72rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .theme-controls :global(.smrt-theme-switcher__select) {
-    width: 100%;
+  .search-field {
+    display: grid;
+    gap: 0.4rem;
   }
 
-  .search span {
-    font-size: 0.82rem;
+  .search-field span {
     color: var(--smrt-color-on-surface-variant);
+    font-size: 0.72rem;
   }
 
-  .search input {
+  .search-field input {
     width: 100%;
-    box-sizing: border-box;
+    padding: 0.65rem 0.75rem;
     border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: 0.9rem;
-    background: var(--smrt-color-surface-container-lowest);
+    border-radius: 0.55rem;
+    background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
-    padding: 0.8rem 0.95rem;
   }
 
-  .search input::placeholder {
-    color: var(--smrt-color-on-surface-variant);
-    opacity: 0.72;
+  .catalog-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  .catalog-scroll nav,
+  .foundation-catalog,
+  .nav-group,
+  .package-groups {
+    display: grid;
+  }
+
+  .catalog-scroll nav {
+    gap: 1.15rem;
   }
 
-  .module-list button,
-  .entry-list button,
-  .mode-toggle button {
+  .foundation-catalog {
+    gap: 0.95rem;
+  }
+
+  .foundation-heading,
+  .nav-group button,
+  details button {
+    width: 100%;
     border: 0;
+    background: transparent;
+    text-align: left;
     cursor: pointer;
-    transition:
-      transform 140ms ease,
-      background 140ms ease,
-      border-color 140ms ease;
   }
 
-  .module-list button,
-  .entry-list button {
-    display: grid;
-    gap: 0.25rem;
-    text-align: left;
-    padding: 0.9rem 1rem;
-    border-radius: 1rem;
+  .foundation-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0 0.7rem;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    font-size: 0.82rem;
+    font-weight: 650;
   }
 
-  .module-list button {
-    background: var(--smrt-color-surface-container-low);
-    color: var(--smrt-color-on-surface);
-    border: 1px solid transparent;
+  .foundation-heading small,
+  details summary small {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.7rem;
+    font-weight: 500;
   }
 
-  .module-list button.selected,
-  .module-list button:hover {
-    border-color: var(--smrt-color-primary);
-    background: var(--smrt-color-primary-container);
-    color: var(--smrt-color-on-primary-container);
+  .nav-group {
+    gap: 0.12rem;
   }
 
-  .module-list button span,
-  .entry-list button span {
+  .nav-group h2,
+  .package-groups > h2 {
+    margin: 0 0 0.35rem;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.66rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .nav-group button,
+  details button {
+    padding: 0.52rem 0.6rem;
+    border-radius: 0.45rem;
     font-size: 0.82rem;
-    opacity: 0.78;
   }
 
-  .content {
-    padding: 1.75rem;
-    align-content: start;
+  .nav-group button:hover,
+  .nav-group button.active,
+  details button:hover,
+  details button.active {
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
   }
 
-  .content__body {
-    grid-template-columns: 18rem minmax(0, 1fr);
-    align-items: start;
+  .package-groups {
+    gap: 0.15rem;
+    padding-top: 0.4rem;
   }
 
-  .entry-list button {
-    border: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    box-shadow: 0 18px 45px color-mix(in srgb, var(--smrt-color-shadow) 5%, transparent);
+  details summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.58rem 0.3rem;
+    cursor: pointer;
+    font-size: 0.82rem;
+    list-style: none;
   }
 
-  .entry-list button.selected,
-  .entry-list button:hover {
-    transform: translateY(-1px);
-    border-color: var(--smrt-color-primary);
-    background: var(--smrt-color-primary-container);
-    color: var(--smrt-color-on-primary-container);
-    box-shadow: 0 18px 45px color-mix(in srgb, var(--smrt-color-primary) 14%, transparent);
+  details summary::-webkit-details-marker {
+    display: none;
   }
 
-  .mode-pills {
+  details > div {
+    padding-left: 0.45rem;
+  }
+
+  .theme-controls {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.35rem;
+    align-items: end;
+    gap: 0.5rem;
+    padding-top: 0.8rem;
+    border-top: 1px solid var(--smrt-color-outline-variant);
   }
 
-  .mode-pills span,
-  .mode-toggle button {
-    border-radius: 999px;
-    padding: 0.25rem 0.6rem;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+  .theme-controls :global(.smrt-theme-switcher__label) {
+    display: none;
   }
 
-  .mode-pills span {
-    background: var(--smrt-color-primary-container);
-    color: var(--smrt-color-on-primary-container);
+  .theme-controls :global(.smrt-theme-switcher__select) {
+    min-width: 7rem;
+    padding-block: 0.48rem;
   }
 
-  .preview-panel,
-  .empty-card {
-    padding: 1.1rem;
-    border-radius: 1.25rem;
-    border: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    box-shadow: 0 24px 60px color-mix(in srgb, var(--smrt-color-shadow) 8%, transparent);
-    backdrop-filter: blur(18px);
+  .workspace {
+    display: grid;
+    min-width: 0;
+    align-content: start;
+    gap: 1.25rem;
+    padding: 1.25rem clamp(1.25rem, 3vw, 3rem) 3rem;
   }
 
-  .preview-panel__meta {
+  .workspace-header {
     display: flex;
-    flex-wrap: wrap;
+    min-height: 2.75rem;
+    align-items: center;
     justify-content: space-between;
     gap: 1rem;
-    align-items: start;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .breadcrumbs {
+    display: flex;
+    min-width: 0;
+    gap: 0.55rem;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.76rem;
+  }
+
+  .breadcrumbs span,
+  .breadcrumbs strong {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .mode-toggle {
-    display: inline-flex;
-    gap: 0.45rem;
+  .breadcrumbs i {
+    opacity: 0.5;
+  }
+
+  .breadcrumbs strong {
+    color: var(--smrt-color-on-surface);
+  }
+
+  .mode-control {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 0.25rem;
     padding: 0.2rem;
     border-radius: 999px;
-    background: var(--smrt-color-surface-container-high);
+    background: var(--smrt-color-surface-container);
   }
 
-  .mode-toggle button {
+  .mode-control button {
+    padding: 0.4rem 0.7rem;
+    border: 0;
+    border-radius: 999px;
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
+    cursor: pointer;
+    font-size: 0.72rem;
+    text-transform: capitalize;
   }
 
-  .mode-toggle button.active {
-    background: var(--smrt-color-primary);
-    color: var(--smrt-color-on-primary);
+  .mode-control button.active {
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .package-landing {
+    width: min(68rem, 100%);
+    padding: clamp(1.5rem, 4vw, 3.5rem) 0 2rem;
+  }
+
+  .package-landing > header {
+    position: relative;
+    display: grid;
+    gap: 0.55rem;
+    padding-bottom: clamp(1.75rem, 4vw, 3rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .package-landing > header p {
+    margin: 0;
+    color: var(--smrt-color-primary);
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    text-transform: none;
+  }
+
+  .package-landing > header h2 {
+    max-width: 48rem;
+    margin: 0;
+    font-size: clamp(2rem, 5vw, 4rem);
+    font-weight: 520;
+    letter-spacing: -0.045em;
+    line-height: 1;
+  }
+
+  .package-landing > header span {
+    max-width: 42rem;
+    color: var(--smrt-color-on-surface-variant);
+    line-height: 1.55;
+  }
+
+  .package-landing > header > small {
+    position: absolute;
+    right: 0;
+    bottom: 1rem;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.75rem;
+  }
+
+  .package-index {
+    padding-top: 2rem;
+  }
+
+  .package-index > h3 {
+    margin: 0 0 0.65rem;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .package-index > button {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr) auto 1.5rem;
+    align-items: center;
+    gap: 1.25rem;
+    padding: 1.15rem 0;
+    border: 0;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .package-index__copy {
+    display: grid;
+    min-width: 0;
+    gap: 0.25rem;
+  }
+
+  .package-index__copy strong {
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  .package-index__copy small,
+  .package-index__modes {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: 0.76rem;
+    line-height: 1.4;
+  }
+
+  .package-index__modes {
+    text-transform: capitalize;
+  }
+
+  .package-index__arrow {
+    color: var(--smrt-color-primary);
+    transition: transform 140ms ease;
+  }
+
+  .package-index > button:hover .package-index__copy strong,
+  .package-index > button:focus-visible .package-index__copy strong {
+    color: var(--smrt-color-primary);
+  }
+
+  .package-index > button:hover .package-index__arrow,
+  .package-index > button:focus-visible .package-index__arrow {
+    transform: translateX(0.2rem);
+  }
+
+  .preview-heading {
+    padding: 1rem 0 0.25rem;
+  }
+
+  .preview-heading p {
+    margin: 0 0 0.35rem;
+    color: var(--smrt-color-primary);
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    text-transform: none;
+  }
+
+  .preview-heading h2 {
+    margin: 0;
+    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
+    font-weight: 550;
+    letter-spacing: -0.025em;
+  }
+
+  .preview-heading span {
+    display: block;
+    max-width: 48rem;
+    margin-top: 0.45rem;
+    color: var(--smrt-color-on-surface-variant);
+    line-height: 1.5;
+  }
+
+  .preview-heading .mode-description {
+    font-size: 0.85rem;
+  }
+
+  .preview-panel {
+    min-width: 0;
   }
 
   .preview-stage {
-    padding: 1rem;
-    border-radius: 1rem;
-    border: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface-container-lowest);
+    min-width: 0;
+    min-height: 30rem;
+    padding: clamp(1rem, 2.2vw, 2rem);
     overflow: auto;
-    min-height: 24rem;
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: 1rem;
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .preview-state {
+    display: grid;
+    min-height: 25rem;
+    place-content: center;
+    justify-items: center;
+    padding: 1rem;
+    color: var(--smrt-color-on-surface-variant);
+    text-align: center;
+  }
+
+  .preview-state p,
+  .empty-state p {
+    margin: 0.4rem 0 0;
+    line-height: 1.5;
   }
 
   .full-height {
     min-height: 60vh;
-    align-content: center;
   }
 
-  @media (max-width: 1040px) {
-    .playground-shell,
-    .content__body {
+  .empty-state {
+    padding: 1rem 0.25rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .loader {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (max-width: 900px) {
+    .playground-shell {
       grid-template-columns: 1fr;
     }
+
+    .catalog-nav {
+      position: static;
+      height: auto;
+      border-right: 0;
+      border-bottom: 1px solid var(--smrt-color-outline-variant);
+    }
+
+    .catalog-scroll {
+      max-height: 18rem;
+    }
+
+    .catalog-scroll nav {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .theme-controls :global(.smrt-theme-switcher) {
+      display: none;
+    }
+
+    .workspace-header {
+      align-items: flex-start;
+    }
+
+    .breadcrumbs {
+      display: grid;
+      gap: 0.15rem;
+    }
+
+    .breadcrumbs i {
+      display: none;
+    }
+
+    .package-landing > header > small {
+      position: static;
+      margin-top: 0.35rem;
+    }
+
+    .package-index > button {
+      grid-template-columns: minmax(0, 1fr) 1.5rem;
+    }
+
+    .package-index__modes {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .loader {
+      animation: none;
+    }
   }
 </style>

package/dist/svelte/PlaygroundHost.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaygroundHost.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/PlaygroundHost.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,KAAK,EAIV,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsUD,QAAA,MAAM,cAAc,0BAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PlaygroundHost.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/PlaygroundHost.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,KAAK,EAIV,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0bD,QAAA,MAAM,cAAc,0BAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-playground",
-  "version": "0.38.26",
+  "version": "0.39.1",
   "description": "Shared playground discovery, runtime, and host components for SMRT UI packages",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,7 +29,7 @@
   "dependencies": {
     "fast-glob": "3.3.3",
     "tsx": "^4.23.0",
-    "@happyvertical/smrt-ui": "0.38.26"
+    "@happyvertical/smrt-ui": "0.39.1"
   },
   "peerDependencies": {
     "svelte": "^5.56.4",