@picked/svelte 0.0.1-dev.1788925875333 → 0.0.1-next.1

package/dist/hooks/reference.d.ts

@@ -1,61 +0,0 @@
-/**
- * @file Svelte lookup helpers for `reference` field values. A `reference` field
- * delivers a pointer at another Content record; the record itself is registered
- * separately, so resolving a pointer is a lookup against the content registry.
- */
-import type { Store } from 'effector';
-import { type ReferencedContent } from '@picked/client';
-/**
- * Resolves a single `reference` field value to the Content record it points at.
- *
- * Call it during component initialisation, like every `get*` helper — it reads
- * Svelte context. Pass a *store* of the field rather than a snapshot of it:
- * content loads asynchronously, so the blob is still `null` at initialisation
- * and a snapshot would pin the lookup to "unset".
- *
- * When the workspace schema has been generated, the record narrows to the Content Model the
- * field targets; otherwise it stays the untyped `Content`.
- *
- * @template TValue
- * @param {TValue} value - The raw `reference` value, or an Effector store carrying one. A
- *   store keeps the lookup live when the field arrives after this call.
- * @returns {Store<ReferencedContent<TValue> | null>} The referenced record, or `null` when the field is unset or its target is not registered.
- * @example
- * ```svelte
- * <script>
- *   import { getStepContent, getReference } from '@picked/svelte/hooks'
- *   const content = getStepContent()
- *   const author = getReference(content.map((c) => c?.author ?? null, { skipVoid: false }))
- * </script>
- * <span>{$author?.data.name ?? ''}</span>
- * ```
- */
-export declare function getReference<TValue>(value: TValue): Store<ReferencedContent<TValue> | null>;
-/**
- * Resolves a repeatable `reference` field to the Content records it points at,
- * in field order. A single (non-repeatable) value resolves to a one-element list.
- *
- * The list is dense: a pointer whose target did not resolve is skipped rather
- * than held as a hole, so `{#each}` needs no null check per item.
- *
- * Call it during component initialisation and pass a store of the field, for the
- * same reasons as {@link getReference}.
- *
- * When the workspace schema has been generated, each record narrows to the Content Model the
- * field targets; otherwise they stay the untyped `Content`.
- *
- * @template TValue
- * @param {TValue} value - The raw `reference` value, or an Effector store carrying one. A
- *   store keeps the lookup live when the field arrives after this call.
- * @returns {Store<ReferencedContent<TValue>[]>} The referenced records that resolved.
- * @example
- * ```svelte
- * <script>
- *   import { getStepContent, getReferences } from '@picked/svelte/hooks'
- *   const content = getStepContent()
- *   const authors = getReferences(content.map((c) => c?.authors ?? null, { skipVoid: false }))
- * </script>
- * {#each $authors as author (author.id)}<li>{author.data.name}</li>{/each}
- * ```
- */
-export declare function getReferences<TValue>(value: TValue): Store<ReferencedContent<TValue>[]>;

package/dist/hooks/reference.js

@@ -1 +0,0 @@
-import{getPicked as e}from"./client.js";import{deriveReference as t,deriveReferences as n}from"@picked/client";function r(n){return t(e().contents,n)}function i(t){return n(e().contents,t)}export{r as getReference,i as getReferences};

package/dist/plugins/devtools/PickedIcon.svelte

@@ -1,19 +0,0 @@
-<!-- PickedIcon.svelte -->
-<script lang="ts">
-  export let width = 48
-  export let height = 48
-</script>
-
-<svg {width} {height} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g opacity="0.5">
-    <ellipse opacity="0.8" cx="32.5807" cy="7.38424" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
-    <circle opacity="0.6" cx="31.4947" cy="8.47015" r="6.29832" fill="#01AD7A"/>
-    <ellipse opacity="0.4" cx="30.4088" cy="9.55607" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
-    <ellipse opacity="0.2" cx="29.3229" cy="10.642" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
-    <circle opacity="0.1" cx="28.237" cy="11.7279" r="6.29832" fill="#01AD7A"/>
-  </g>
-  <ellipse cx="33.6664" cy="6.29832" rx="6.29832" ry="6.29832" fill="#00CD90"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 16.1802C14.5788 16.1802 16.1832 14.5758 16.1832 12.5967C16.1832 10.6175 14.5788 9.01315 12.5997 9.01315C10.6206 9.01315 9.01617 10.6175 9.01617 12.5967C9.01617 14.5758 10.6206 16.1802 12.5997 16.1802ZM12.5997 18.895C16.0782 18.895 18.898 16.0751 18.898 12.5967C18.898 9.11821 16.0782 6.29836 12.5997 6.29836C9.12123 6.29836 6.30138 9.11821 6.30138 12.5967C6.30138 16.0751 9.12123 18.895 12.5997 18.895Z" fill="#1549FF"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 30.9486C14.5788 30.9486 16.1832 29.3442 16.1832 27.3651C16.1832 25.386 14.5788 23.7816 12.5997 23.7816C10.6206 23.7816 9.01617 25.386 9.01617 27.3651C9.01617 29.3442 10.6206 30.9486 12.5997 30.9486ZM12.5997 33.6634C16.0782 33.6634 18.898 30.8436 18.898 27.3651C18.898 23.8866 16.0782 21.0668 12.5997 21.0668C9.12123 21.0668 6.30138 23.8866 6.30138 27.3651C6.30138 30.8436 9.12123 33.6634 12.5997 33.6634Z" fill="#1549FF"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.3683 30.9486C29.3474 30.9486 30.9518 29.3442 30.9518 27.3651C30.9518 25.386 29.3474 23.7816 27.3683 23.7816C25.3891 23.7816 23.7847 25.386 23.7847 27.3651C23.7847 29.3442 25.3891 30.9486 27.3683 30.9486ZM27.3683 33.6634C30.8467 33.6634 33.6666 30.8436 33.6666 27.3651C33.6666 23.8866 30.8467 21.0668 27.3683 21.0668C23.8898 21.0668 21.0699 23.8866 21.0699 27.3651C21.0699 30.8436 23.8898 33.6634 27.3683 33.6634Z" fill="#1549FF"/>
-</svg>

package/dist/plugins/devtools/components/AdaptedToolHost.svelte

@@ -1,103 +0,0 @@
-<script lang="ts">
-  /** @file Renders a custom devtools tool by delegating to its framework's registered renderer. */
-  import { onDestroy } from 'svelte'
-  import type { Framework } from '@picked/client'
-  import { getExperience, getPicked } from '../../../hooks'
-  import type { CustomTool } from '../customTools'
-  import { Banner } from '../ui'
-
-  export let tool: CustomTool
-
-  const client = getPicked()
-  const experience = getExperience()
-  const frameworkStore = client.frameworks.getByName(tool.component.frameworkName)
-
-  let host: HTMLDivElement | undefined
-  let rendered = false
-  let renderFailed = false
-  let destroyed = false
-  let activeFramework: Framework | undefined
-  let activeShadow: ShadowRoot | undefined
-
-  /**
-   * Records a tool render failure: surfaces a banner and logs to the console. A consumer tool's
-   * render failure is deliberately not routed through the client event bus, so a third-party tool
-   * bug never reaches the platform's Sentry exception stream.
-   *
-   * @param {unknown} error - The error thrown or rejected by the framework renderer.
-   * @example
-   * handleRenderError(new Error('tool blew up'))
-   */
-  function handleRenderError(error: unknown) {
-    renderFailed = true
-    // eslint-disable-next-line no-console -- surface tool failures locally; consumer errors must not reach Sentry
-    console.error(`Custom devtools tool "${tool.label}" failed to render`, error)
-  }
-
-  /**
-   * Tears down the tool's mounted instance using the framework that rendered it. Idempotent: the
-   * renderer's unmount is a no-op once the instance is gone, so calling it twice is safe.
-   *
-   * @example
-   * teardown()
-   */
-  function teardown() {
-    if (activeShadow && activeFramework?.unmount) {
-      activeFramework.unmount(activeShadow)
-    }
-  }
-
-  $: framework = $frameworkStore
-
-  $: if (framework && host && !rendered) {
-    rendered = true
-    const shadow = host.shadowRoot ?? host.attachShadow({ mode: 'open' })
-    const fw = framework
-    activeFramework = fw
-    activeShadow = shadow
-    try {
-      void Promise.resolve(fw.render(shadow, tool.component, client, experience))
-        .then(() => {
-          if (destroyed) teardown()
-        })
-        .catch(handleRenderError)
-    } catch (error) {
-      handleRenderError(error)
-    }
-  }
-
-  onDestroy(() => {
-    destroyed = true
-    teardown()
-  })
-</script>
-
-{#if framework}
-  <div class="adapted-tool-host" bind:this={host} hidden={renderFailed}></div>
-  {#if renderFailed}
-    <div class="adapted-tool-fallback">
-      <Banner status="error" title="Tool failed to render">
-        The "{tool.label}" tool threw while rendering. See the browser console for details.
-      </Banner>
-    </div>
-  {/if}
-{:else}
-  <div class="adapted-tool-fallback">
-    <Banner status="warning" title="Framework not registered">
-      This tool renders a "{tool.component.frameworkName}" component, but no matching framework is
-      registered with the Picked client. Add the corresponding framework plugin to use it.
-    </Banner>
-  </div>
-{/if}
-
-<style>
-  .adapted-tool-host {
-    height: 100%;
-    padding: var(--space-4);
-    box-sizing: border-box;
-  }
-
-  .adapted-tool-fallback {
-    padding: var(--space-4);
-  }
-</style>

package/dist/plugins/devtools/customTools.d.ts

@@ -1,27 +0,0 @@
-/** @file Registry helpers for the devtools "Custom Tools" tab — user-supplied, framework-adapted dev tools. */
-import type { AdaptedComponent, Picked } from '@picked/client';
-/**
- * A user-defined developer tool surfaced under the devtools "Custom Tools" tab.
- *
- * The component is framework-adapted (via `adaptReactComponent` or `adaptSvelteComponent`), so
- * tools can be authored in the host app's framework and still receive the live Picked client the
- * way an experience component does.
- */
-export interface CustomTool {
-    id: string;
-    label: string;
-    component: AdaptedComponent;
-}
-/**
- * Reads the custom tools registered with the devtools plugin for a given client.
- *
- * Malformed entries are dropped, and entries that repeat an already-seen `id` are dropped
- * (first registration wins), so a single bad or duplicate registration can't break the tab — the
- * `id` is used as a keyed-each key when the tools are rendered as tabs.
- *
- * @param {Picked} client - The Picked client whose plugin config holds the registered tools.
- * @returns {CustomTool[]} The valid, id-unique registered custom tools, or an empty array when none exist.
- * @example
- * const tools = readCustomTools(getPicked())
- */
-export declare function readCustomTools(client: Picked): CustomTool[];

package/dist/plugins/devtools/customTools.js

@@ -1 +0,0 @@
-import{DEVTOOLS_PLUGIN_NAME as e}from"./plugin.js";function t(e){return typeof e==`object`&&!!e&&`frameworkName`in e&&typeof e.frameworkName==`string`&&`component`in e}function n(e){return typeof e==`object`&&!!e&&`id`in e&&typeof e.id==`string`&&`label`in e&&typeof e.label==`string`&&`component`in e&&t(e.component)}function r(t){let r=t.getPluginConfig(e).customTools;if(!Array.isArray(r))return[];let i=new Set;return r.filter(n).filter(e=>!i.has(e.id)&&(i.add(e.id),!0))}export{r as readCustomTools};

package/dist/plugins/devtools/screens/config/ConfigScreen.svelte

@@ -1,160 +0,0 @@
-<script lang="ts">
-  /** @file Devtools screen for the resolved Picked client configuration and reactive lifecycle state. */
-  import { getPicked } from '../../../../hooks'
-  import { Badge, Card, CodeBlock, DataTable, EmptyState, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-  const lifecycleStageStore = client.lifecycleStageStore
-  const readyStore = client.readyStore
-  const preconditionPassedStore = client.preconditionPassedStore
-  const conditionPassedStore = client.conditionPassedStore
-
-  const searchParamEntries = Object.entries(client.searchParams ?? {}).map(([key, value]) => ({
-    key,
-    value: Array.isArray(value) ? value.join(', ') : String(value ?? ''),
-  }))
-
-  const staticRows = [
-    { label: 'Project ID', value: client.projectId },
-    { label: 'API URL', value: client.apiUrl },
-    { label: 'Dashboard URL', value: client.dashboardUrl },
-    { label: 'Documentation URL', value: client.documentationSiteUrl },
-    { label: 'Data source', value: client.dataSource === null ? '—' : JSON.stringify(client.dataSource) },
-    {
-      label: 'Version skew',
-      value:
-        client.versionSkew === null
-          ? '—'
-          : `snapshot ${client.versionSkew.seeded} kept over resolved ${client.versionSkew.resolved}`,
-    },
-  ]
-
-  const configColumns = [
-    { key: 'label', header: 'Property' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  const searchParamColumns = [
-    { key: 'key', header: 'Key' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  /**
-   * Maps a lifecycle stage to a Badge status colour.
-   *
-   * @param {'idle' | 'starting' | 'ready' | 'failed'} stage - The current lifecycle stage.
-   * @returns {'default' | 'info' | 'success' | 'error'} The Badge status variant.
-   * @example
-   * ```typescript
-   * stageStatus('ready') // 'success'
-   * ```
-   */
-  function stageStatus(
-    stage: 'idle' | 'starting' | 'ready' | 'failed',
-  ): 'default' | 'info' | 'success' | 'error' {
-    if (stage === 'ready') return 'success'
-    if (stage === 'starting') return 'info'
-    if (stage === 'failed') return 'error'
-    return 'default'
-  }
-
-  /**
-   * Maps a tri-state boolean gate result to a Badge status colour.
-   *
-   * @param {boolean | undefined} value - The gate value: true (passed), false (blocked), or undefined (unevaluated).
-   * @returns {'default' | 'success' | 'error'} The Badge status variant.
-   * @example
-   * ```typescript
-   * gateStatus(undefined) // 'default'
-   * gateStatus(true) // 'success'
-   * ```
-   */
-  function gateStatus(value: boolean | undefined): 'default' | 'success' | 'error' {
-    if (value === true) return 'success'
-    if (value === false) return 'error'
-    return 'default'
-  }
-
-  /**
-   * Renders a tri-state boolean gate as a short label.
-   *
-   * @param {boolean | undefined} value - The gate value.
-   * @returns {string} The label text.
-   * @example
-   * ```typescript
-   * gateLabel(undefined) // 'pending'
-   * ```
-   */
-  function gateLabel(value: boolean | undefined): string {
-    if (value === true) return 'passed'
-    if (value === false) return 'blocked'
-    return 'pending'
-  }
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    The resolved configuration and live lifecycle state for this Picked client instance.
-  </Text>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">CONFIGURATION</Text>
-    {/snippet}
-    <DataTable columns={configColumns} rows={staticRows}>
-      {#snippet row(item)}
-        <tr>
-          <td><Text size="small" weight="medium">{item.label}</Text></td>
-          <td><CodeBlock code={item.value} inline /></td>
-        </tr>
-      {/snippet}
-    </DataTable>
-  </Card>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">LIFECYCLE</Text>
-    {/snippet}
-    <Stack direction="vertical" gap="small" padding="medium">
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Stage:</Text>
-        <Badge status={stageStatus($lifecycleStageStore)} size="small">{$lifecycleStageStore}</Badge>
-      </Stack>
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Ready:</Text>
-        <Badge status={$readyStore ? 'success' : 'default'} size="small">{$readyStore ? 'true' : 'false'}</Badge>
-      </Stack>
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Precondition:</Text>
-        <Badge status={gateStatus($preconditionPassedStore)} size="small">
-          {gateLabel($preconditionPassedStore)}
-        </Badge>
-      </Stack>
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Condition:</Text>
-        <Badge status={gateStatus($conditionPassedStore)} size="small">
-          {gateLabel($conditionPassedStore)}
-        </Badge>
-      </Stack>
-    </Stack>
-  </Card>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">
-        PICKED SEARCH PARAMS ({searchParamEntries.length})
-      </Text>
-    {/snippet}
-    <DataTable columns={searchParamColumns} rows={searchParamEntries}>
-      {#snippet row(entry)}
-        <tr>
-          <td><CodeBlock code={entry.key} inline /></td>
-          <td><CodeBlock code={entry.value} inline /></td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No picked-* search params on the current URL" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>

package/dist/plugins/devtools/screens/content/ContentListScreen.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  /** @file Devtools screen listing CMS content records registered with the client. */
-  import type { Content } from '@picked/client'
-  import { getPicked } from '../../../../hooks'
-  import { Badge, Card, CodeBlock, DataTable, EmptyState, ExpandableRow, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-  const contentsStore = client.contents.listStore
-
-  let expandedId: string | null = null
-
-  const columns = [
-    { key: 'id', header: 'ID' },
-    { key: 'keys', header: 'Top-level keys' },
-  ]
-
-  /**
-   * Returns the top-level keys of a content record's `data` object, used to give a quick
-   * shape preview in the row summary without expanding.
-   *
-   * @param {Content} content - The content record.
-   * @returns {string[]} The data object's top-level keys.
-   * @example
-   * ```typescript
-   * dataKeys({ id: 'c1', data: { headline: 'hi' } }) // ['headline']
-   * ```
-   */
-  function dataKeys(content: Content): string[] {
-    return Object.keys(content.data ?? {})
-  }
-
-  /**
-   * Pretty-prints the content record's `data` object for use inside a multi-line CodeBlock.
-   *
-   * @param {Content} content - The content record.
-   * @returns {string} A two-space-indented JSON representation of `data`.
-   * @example
-   * ```typescript
-   * formatData({ id: 'c1', data: { a: 1 } }) // '{\n  "a": 1\n}'
-   * ```
-   */
-  function formatData(content: Content): string {
-    return JSON.stringify(content.data, null, 2)
-  }
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    Content records registered with the client by the active content loader.
-  </Text>
-
-  <Card sectioned>
-    <DataTable {columns} rows={$contentsStore}>
-      {#snippet row(content)}
-        {@const expanded = expandedId === content.id}
-        {@const keys = dataKeys(content)}
-        <ExpandableRow
-          {expanded}
-          onToggle={() => { expandedId = expanded ? null : content.id }}
-          colspan={columns.length}
-        >
-          {#snippet summary()}
-            <td><CodeBlock code={content.id} inline /></td>
-            <td>
-              {#if keys.length > 0}
-                <Stack direction="horizontal" gap="small" wrap={true}>
-                  {#each keys as key (key)}
-                    <Badge status="default" size="small">{key}</Badge>
-                  {/each}
-                </Stack>
-              {:else}
-                <Text size="small" color="subdued">—</Text>
-              {/if}
-            </td>
-          {/snippet}
-          {#snippet details()}
-            <Stack direction="vertical" gap="small">
-              <Text size="caption" weight="semibold" color="subdued">DATA</Text>
-              <CodeBlock code={formatData(content)} />
-            </Stack>
-          {/snippet}
-        </ExpandableRow>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No content registered" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>

package/dist/plugins/devtools/screens/custom-tools/CustomToolsScreen.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  /** @file Screen hosting user-registered custom devtools tools as nested tabs. */
-  import { getPicked } from '../../../../hooks'
-  import AdaptedToolHost from '../../components/AdaptedToolHost.svelte'
-  import Tabs from '../../components/Tabs.svelte'
-  import { readCustomTools } from '../../customTools'
-  import { Button, EmptyState, Stack } from '../../ui'
-
-  const client = getPicked()
-  const docsUrl = `${client.documentationSiteUrl}/chrome-extension#custom-tools`
-  const tools = readCustomTools(client)
-  const tabs = tools.map((tool) => ({
-    id: tool.id,
-    label: tool.label,
-    component: AdaptedToolHost,
-    props: { tool },
-  }))
-</script>
-
-{#if tabs.length > 0}
-  <Tabs {tabs} />
-{:else}
-  <Stack direction="vertical" gap="medium" padding="medium" justify="center">
-    <EmptyState message="No custom tools registered." />
-    <Button variant="ghost" size="small" href={docsUrl} target="_blank">
-      Learn how to add custom tools
-    </Button>
-  </Stack>
-{/if}