@happyvertical/smrt-playground 0.30.0

package/dist/svelte/PlaygroundHost.svelte

@@ -0,0 +1,563 @@
+<script lang="ts">
+import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
+import type { Component } from 'svelte';
+import { onMount } from 'svelte';
+import { mergePlaygroundModules } from './runtime.js';
+import type {
+  PlaygroundComponentModule,
+  ResolvedSmrtPlaygroundEntry,
+  SmrtPlaygroundMode,
+  SmrtPlaygroundModule,
+} from './types.js';
+
+export interface Props {
+  modules?: SmrtPlaygroundModule[];
+  title?: string;
+  subtitle?: string;
+}
+
+let {
+  modules = [],
+  title = 'SMRT 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),
+      )
+    );
+  }),
+);
+
+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;
+});
+
+$effect(() => {
+  const firstModule = filteredModules[0] ?? normalizedModules[0] ?? null;
+  if (!firstModule) {
+    selectedModuleName = null;
+    selectedEntryId = null;
+    return;
+  }
+
+  const activeModule =
+    filteredModules.find(
+      (module) => module.packageName === selectedModuleName,
+    ) ||
+    normalizedModules.find(
+      (module) => module.packageName === selectedModuleName,
+    ) ||
+    firstModule;
+
+  if (activeModule.packageName !== selectedModuleName) {
+    selectedModuleName = activeModule.packageName;
+  }
+
+  const activeEntry =
+    activeModule.entries.find(
+      (entry) => entry.qualifiedId === selectedEntryId,
+    ) ||
+    activeModule.entries[0] ||
+    null;
+
+  if (activeEntry && activeEntry.qualifiedId !== selectedEntryId) {
+    selectedEntryId = activeEntry.qualifiedId;
+  }
+
+  if (activeEntry && !activeEntry.availableModes.includes(selectedMode)) {
+    selectedMode = activeEntry.availableModes[0] ?? 'mock';
+  }
+});
+
+const selectedModule = $derived(
+  normalizedModules.find(
+    (module) => module.packageName === selectedModuleName,
+  ) ||
+    normalizedModules[0] ||
+    null,
+);
+
+const selectedEntry = $derived(
+  selectedModule?.entries.find(
+    (entry) => entry.qualifiedId === selectedEntryId,
+  ) ||
+    selectedModule?.entries[0] ||
+    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 || {}),
+      }
+    : {},
+);
+
+const selectedModeConfig = $derived(
+  selectedEntry ? (selectedEntry.modes[selectedMode] ?? null) : null,
+);
+
+function resolvePreviewComponent(
+  loaded: PlaygroundComponentModule,
+): Component<Record<string, unknown>> {
+  if (
+    loaded &&
+    typeof loaded === 'object' &&
+    'default' in loaded &&
+    loaded.default
+  ) {
+    return loaded.default as Component<Record<string, unknown>>;
+  }
+
+  return loaded as Component<Record<string, unknown>>;
+}
+
+$effect(() => {
+  const entry = selectedEntry;
+  let cancelled = false;
+
+  previewLoadError = null;
+
+  if (!entry) {
+    PreviewComponent = null;
+    previewComponentEntryId = null;
+    previewIsLoading = false;
+    return;
+  }
+
+  if (entry.component) {
+    PreviewComponent = entry.component as Component<Record<string, unknown>>;
+    previewComponentEntryId = entry.qualifiedId;
+    previewIsLoading = false;
+    return;
+  }
+
+  if (!entry.loadComponent) {
+    PreviewComponent = null;
+    previewComponentEntryId = null;
+    previewIsLoading = false;
+    previewLoadError = 'This preview does not declare a renderable component.';
+    return;
+  }
+
+  PreviewComponent = null;
+  previewComponentEntryId = null;
+  previewIsLoading = true;
+
+  void entry
+    .loadComponent()
+    .then((loaded) => {
+      if (cancelled) {
+        return;
+      }
+
+      PreviewComponent = resolvePreviewComponent(loaded);
+      previewComponentEntryId = entry.qualifiedId;
+      previewIsLoading = false;
+    })
+    .catch((error) => {
+      if (cancelled) {
+        return;
+      }
+
+      PreviewComponent = null;
+      previewComponentEntryId = null;
+      previewLoadError =
+        error instanceof Error ? error.message : 'Failed to load preview.';
+      previewIsLoading = false;
+    });
+
+  return () => {
+    cancelled = true;
+  };
+});
+
+function selectModule(packageName: string) {
+  selectedModuleName = packageName;
+  selectedEntryId = null;
+}
+
+function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
+  selectedModuleName = entry.packageName;
+  selectedEntryId = entry.qualifiedId;
+  selectedMode = entry.availableModes[0] ?? 'mock';
+}
+</script>
+
+<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>
+
+      <label class="search">
+        <span>Filter previews</span>
+        <input bind:value={searchTerm} placeholder="Search packages or entries" />
+      </label>
+
+      <div class="module-list" 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>
+        {: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}
+        {/if}
+      </div>
+    </aside>
+
+    <main class="content">
+      {#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}
+          </div>
+        </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>
+
+          <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">
+                <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}
+          </section>
+        </div>
+      {:else}
+        <div class="empty-card full-height">
+          <strong>No playground modules discovered</strong>
+          <p>The shared host is ready, but nothing is exporting playground entries yet.</p>
+        </div>
+      {/if}
+    </main>
+  </div>
+</ThemeProvider>
+
+<style>
+  :global(body) {
+    margin: 0;
+    font-family:
+      "IBM Plex Sans",
+      "Inter",
+      system-ui,
+      sans-serif;
+    background:
+      radial-gradient(circle at top left, rgba(30, 96, 145, 0.16), transparent 28rem),
+      linear-gradient(180deg, #f4f7fb 0%, #eef2f8 100%);
+    color: #0f1722;
+    min-height: 100vh;
+  }
+
+  .playground-shell {
+    display: grid;
+    grid-template-columns: 20rem minmax(0, 1fr);
+    min-height: 100vh;
+  }
+
+  .sidebar {
+    display: grid;
+    align-content: start;
+    gap: 1.25rem;
+    padding: 1.5rem;
+    background: rgba(7, 15, 26, 0.92);
+    color: #ecf2ff;
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(18px);
+  }
+
+  .sidebar__header h1,
+  .content__header h2,
+  .preview-panel__meta h3 {
+    margin: 0;
+  }
+
+  .sidebar__header,
+  .search,
+  .module-list,
+  .content,
+  .content__body,
+  .entry-list,
+  .preview-panel {
+    display: grid;
+    gap: 0.9rem;
+  }
+
+  .eyebrow {
+    margin: 0 0 0.35rem;
+    font-size: 0.75rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #6aa4ff;
+  }
+
+  .sidebar__header p:last-child,
+  .content__header p,
+  .preview-panel__meta p,
+  .empty-card p {
+    margin: 0;
+    line-height: 1.55;
+  }
+
+  .search span {
+    font-size: 0.82rem;
+    color: rgba(236, 242, 255, 0.72);
+  }
+
+  .search input {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 0.9rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: inherit;
+    padding: 0.8rem 0.95rem;
+  }
+
+  .module-list button,
+  .entry-list button,
+  .mode-toggle button {
+    border: 0;
+    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;
+  }
+
+  .module-list button {
+    background: rgba(255, 255, 255, 0.06);
+    color: inherit;
+    border: 1px solid transparent;
+  }
+
+  .module-list button.selected,
+  .module-list button:hover {
+    background: rgba(106, 164, 255, 0.14);
+    border-color: rgba(106, 164, 255, 0.34);
+  }
+
+  .module-list button span,
+  .entry-list button span {
+    font-size: 0.82rem;
+    opacity: 0.78;
+  }
+
+  .content {
+    padding: 1.75rem;
+    align-content: start;
+  }
+
+  .content__body {
+    grid-template-columns: 18rem minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .entry-list button {
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(15, 23, 34, 0.08);
+    box-shadow: 0 18px 45px rgba(15, 23, 34, 0.05);
+  }
+
+  .entry-list button.selected,
+  .entry-list button:hover {
+    transform: translateY(-1px);
+    border-color: rgba(14, 93, 224, 0.25);
+    box-shadow: 0 18px 45px rgba(14, 93, 224, 0.12);
+  }
+
+  .mode-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+  }
+
+  .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;
+  }
+
+  .mode-pills span {
+    background: rgba(14, 93, 224, 0.08);
+    color: #0e5de0;
+  }
+
+  .preview-panel,
+  .empty-card {
+    padding: 1.1rem;
+    border-radius: 1.25rem;
+    background: rgba(255, 255, 255, 0.82);
+    border: 1px solid rgba(15, 23, 34, 0.08);
+    box-shadow: 0 24px 60px rgba(15, 23, 34, 0.08);
+    backdrop-filter: blur(18px);
+  }
+
+  .preview-panel__meta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .mode-toggle {
+    display: inline-flex;
+    gap: 0.45rem;
+    padding: 0.2rem;
+    border-radius: 999px;
+    background: #e6edf9;
+  }
+
+  .mode-toggle button {
+    background: transparent;
+    color: #36527b;
+  }
+
+  .mode-toggle button.active {
+    background: #0e5de0;
+    color: white;
+  }
+
+  .preview-stage {
+    padding: 1rem;
+    border-radius: 1rem;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(245, 248, 252, 0.94)),
+      radial-gradient(circle at top, rgba(106, 164, 255, 0.12), transparent 28rem);
+    border: 1px solid rgba(15, 23, 34, 0.06);
+    overflow: auto;
+    min-height: 24rem;
+  }
+
+  .full-height {
+    min-height: 60vh;
+    align-content: center;
+  }
+
+  @media (max-width: 1040px) {
+    .playground-shell,
+    .content__body {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { SmrtPlaygroundModule } from './types.js';
+export interface Props {
+    modules?: SmrtPlaygroundModule[];
+    title?: string;
+    subtitle?: string;
+}
+declare const PlaygroundHost: Component<Props, {}, "">;
+type PlaygroundHost = ReturnType<typeof PlaygroundHost>;
+export default PlaygroundHost;
+//# sourceMappingURL=PlaygroundHost.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundHost.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/PlaygroundHost.svelte.ts"],"names":[],"mappings":"AAIA,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;AAiUD,QAAA,MAAM,cAAc,0BAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PlaygroundHost } from './PlaygroundHost.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1 @@
+export { default as PlaygroundHost } from './PlaygroundHost.svelte';

package/dist/svelte/runtime.d.ts

@@ -0,0 +1,2 @@
+export { mergePlaygroundModules } from '../runtime.js';
+//# sourceMappingURL=runtime.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/svelte/runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}

package/dist/svelte/runtime.js

@@ -0,0 +1 @@
+export { mergePlaygroundModules } from '../runtime.js';

package/dist/svelte/types.d.ts

@@ -0,0 +1,2 @@
+export type { PlaygroundComponentLoader, PlaygroundComponentModule, PlaygroundComponentType, PlaygroundModuleMeta, ResolvedSmrtPlaygroundEntry, ResolvedSmrtPlaygroundModule, SmrtPlaygroundEntry, SmrtPlaygroundMode, SmrtPlaygroundModeConfig, SmrtPlaygroundModule, SmrtPlaygroundModuleExport, } from '../types.js';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/svelte/types.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,oBAAoB,EACpB,2BAA2B,EAC3B,4BAA4B,EAC5B,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,EACpB,0BAA0B,GAC3B,MAAM,aAAa,CAAC"}

package/dist/svelte/types.js

@@ -0,0 +1 @@
+export {};

package/dist/templates.d.ts

@@ -0,0 +1,4 @@
+export declare function createPackagePlaygroundTemplate(packageName: string): string;
+export declare function createAppPlaygroundTemplate(packageName: string): string;
+export declare function createAppPlaygroundRouteTemplate(): string;
+//# sourceMappingURL=templates.d.ts.map

package/dist/templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAKA,wBAAgB,+BAA+B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAe3E;AAED,wBAAgB,2BAA2B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAkBvE;AAED,wBAAgB,gCAAgC,IAAI,MAAM,CAYzD"}

package/dist/types.d.ts

@@ -0,0 +1,76 @@
+export type PlaygroundComponentType = (...args: any[]) => any;
+export type PlaygroundComponentModule = PlaygroundComponentType | {
+    default: PlaygroundComponentType;
+};
+export type PlaygroundComponentLoader = () => Promise<PlaygroundComponentModule>;
+export interface PlaygroundModuleMeta {
+    name: string;
+    displayName: string;
+    description?: string;
+    uiSlots?: Record<string, unknown>;
+    models?: string[];
+    collections?: string[];
+}
+export type SmrtPlaygroundMode = 'mock' | 'live';
+export interface SmrtPlaygroundModeConfig {
+    label?: string;
+    description?: string;
+    props?: Record<string, unknown>;
+}
+export interface SmrtPlaygroundEntry {
+    id: string;
+    title: string;
+    description?: string;
+    component?: PlaygroundComponentType;
+    loadComponent?: PlaygroundComponentLoader;
+    slotId?: string;
+    order?: number;
+    props?: Record<string, unknown>;
+    tags?: string[];
+    modes?: Partial<Record<SmrtPlaygroundMode, SmrtPlaygroundModeConfig | true>>;
+}
+export interface SmrtPlaygroundModule {
+    packageName: string;
+    displayName?: string;
+    description?: string;
+    moduleMeta?: PlaygroundModuleMeta;
+    entries: SmrtPlaygroundEntry[];
+}
+export type SmrtPlaygroundModuleExport = SmrtPlaygroundModule | SmrtPlaygroundModule[] | {
+    modules: SmrtPlaygroundModule[];
+};
+export interface ResolvedSmrtPlaygroundEntry extends Omit<SmrtPlaygroundEntry, 'modes'> {
+    packageName: string;
+    displayName: string;
+    qualifiedId: string;
+    availableModes: SmrtPlaygroundMode[];
+    modes: Partial<Record<SmrtPlaygroundMode, SmrtPlaygroundModeConfig>>;
+}
+export interface ResolvedSmrtPlaygroundModule extends Omit<SmrtPlaygroundModule, 'displayName' | 'entries'> {
+    displayName: string;
+    entries: ResolvedSmrtPlaygroundEntry[];
+}
+export interface DiscoveredWorkspacePlayground {
+    packageName: string;
+    packageDir: string;
+    sourcePath: string;
+    runtimePath: string | null;
+}
+export interface DiscoveredInstalledPlayground {
+    packageName: string;
+    importSpecifier: string;
+}
+export interface DiscoveredPlaygroundTarget {
+    packageName?: string;
+    source: 'workspace' | 'package' | 'app';
+    sourcePath?: string;
+    runtimePath?: string;
+    importSpecifier?: string;
+}
+export interface SmrtPlaygroundVitePluginOptions {
+    mode?: 'auto' | 'workspace' | 'consumer';
+    workspaceRoot?: string;
+    packagesPattern?: string;
+    localPlaygroundPath?: string;
+}
+//# sourceMappingURL=types.d.ts.map