@picked/svelte 0.0.45-next.1 → 0.0.45-next.3

package/dist/plugins/devtools/ui/data/CodeBlock.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Props {
+    code: string
+    inline?: boolean
+  }
+
+  let { code, inline = false }: Props = $props()
+</script>
+
+{#if inline}
+  <code class="code-inline">{code}</code>
+{:else}
+  <pre class="code-block"><code>{code}</code></pre>
+{/if}
+
+<style>
+  .code-inline {
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+    font-size: var(--text-xs);
+    background-color: var(--color-gray-100);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    padding: var(--space-0-5) var(--space-1);
+  }
+
+  .code-block {
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+    font-size: var(--text-xs);
+    background-color: var(--color-gray-50);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    padding: var(--space-3);
+    margin: 0;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>

package/dist/plugins/devtools/ui/data/DataTable.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Column {
+    key: string
+    header: string
+    sortable?: boolean
+  }
+
+  interface Props {
+    columns: Column[]
+    rows: unknown[]
+    row: Snippet<[unknown, number]>
+    empty?: Snippet
+    sortKey?: string | null
+    sortDirection?: 'asc' | 'desc'
+    onSort?: (key: string) => void
+  }
+
+  let {
+    columns,
+    rows,
+    row,
+    empty,
+    sortKey = null,
+    sortDirection = 'asc',
+    onSort,
+  }: Props = $props()
+
+  function handleHeaderClick(column: Column): void {
+    if (column.sortable && onSort) {
+      onSort(column.key)
+    }
+  }
+
+  function handleHeaderKeydown(event: KeyboardEvent, column: Column): void {
+    if ((event.key === 'Enter' || event.key === ' ') && column.sortable && onSort) {
+      event.preventDefault()
+      onSort(column.key)
+    }
+  }
+</script>
+
+<table class="data-table">
+  <thead>
+    <tr>
+      {#each columns as column}
+        <th
+          class:sortable={column.sortable}
+          aria-sort={column.sortable && sortKey === column.key
+            ? sortDirection === 'asc' ? 'ascending' : 'descending'
+            : undefined}
+          onclick={() => handleHeaderClick(column)}
+          onkeydown={(e: KeyboardEvent) => handleHeaderKeydown(e, column)}
+          tabindex={column.sortable ? 0 : undefined}
+          role={column.sortable ? 'columnheader button' : 'columnheader'}
+        >
+          {column.header}
+          {#if column.sortable && sortKey === column.key}
+            <span class="sort-indicator">{sortDirection === 'asc' ? '↑' : '↓'}</span>
+          {/if}
+        </th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#if rows.length === 0 && empty}
+      <tr>
+        <td colspan={columns.length} class="empty-cell">
+          {@render empty()}
+        </td>
+      </tr>
+    {:else}
+      {#each rows as item, index}
+        {@render row(item, index)}
+      {/each}
+    {/if}
+  </tbody>
+</table>
+
+<style>
+  .data-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th {
+    padding: var(--space-2);
+    text-align: left;
+    font-weight: var(--font-medium);
+    font-size: var(--text-sm);
+    color: var(--color-gray-700);
+    background-color: var(--color-gray-50);
+    border-bottom: 1px solid var(--color-gray-200);
+  }
+
+  th.sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  th.sortable:hover {
+    background-color: var(--color-gray-100);
+  }
+
+  th.sortable:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: calc(-1 * var(--ring-width));
+  }
+
+  .sort-indicator {
+    margin-left: var(--space-1);
+  }
+
+  .empty-cell {
+    padding: 0;
+  }
+
+  :global(tbody td) {
+    padding: var(--space-2);
+    text-align: left;
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
+    border-bottom: 1px solid var(--color-gray-200);
+  }
+
+  :global(tbody tr:hover) {
+    background-color: var(--color-gray-50);
+  }
+
+  :global(tbody tr.selected) {
+    background-color: color-mix(in srgb, var(--color-blue-500) 8%, var(--color-white));
+  }
+</style>

package/dist/plugins/devtools/ui/data/EmptyState.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    message: string
+  }
+
+  let { message }: Props = $props()
+</script>
+
+<div class="empty-state">
+  <p class="message">{message}</p>
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-8);
+  }
+
+  .message {
+    color: var(--color-gray-500);
+    font-size: var(--text-sm);
+    margin: 0;
+  }
+</style>

package/dist/plugins/devtools/ui/data/ExpandableRow.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    expanded?: boolean
+    onToggle?: () => void
+    summary: Snippet
+    details: Snippet
+    colspan?: number
+  }
+
+  let {
+    expanded = false,
+    onToggle,
+    summary,
+    details,
+    colspan = 1,
+  }: Props = $props()
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onToggle?.()
+    }
+  }
+</script>
+
+<tr
+  class="expandable-row"
+  class:expanded
+  role="button"
+  tabindex="0"
+  aria-expanded={expanded}
+  onclick={() => onToggle?.()}
+  onkeydown={handleKeydown}
+>
+  {@render summary()}
+</tr>
+{#if expanded}
+  <tr class="details-row">
+    <td {colspan} class="details-cell">
+      {@render details()}
+    </td>
+  </tr>
+{/if}
+
+<style>
+  .expandable-row {
+    cursor: pointer;
+  }
+
+  .expandable-row:hover {
+    background-color: var(--color-gray-50);
+  }
+
+  .expandable-row:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: calc(-1 * var(--ring-width));
+  }
+
+  .details-cell {
+    background-color: var(--color-gray-50);
+    border-left: 3px solid var(--color-blue-500);
+    padding: var(--space-3);
+  }
+</style>

package/dist/plugins/devtools/ui/data/VisualizationContainer.svelte

@@ -0,0 +1,55 @@
+<!--
+  Container for interactive visualizations (e.g., D3 tree graphs).
+  Provides a bordered frame with an optional controls overlay.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    controls?: Snippet
+  }
+
+  let { children, controls }: Props = $props()
+</script>
+
+<div class="visualization">
+  {#if controls}
+    <div class="controls">
+      {@render controls()}
+    </div>
+  {/if}
+  <div class="content">
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  .visualization {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--color-gray-300);
+    overflow: hidden;
+  }
+
+  .controls {
+    position: absolute;
+    right: var(--space-4);
+    top: var(--space-4);
+    z-index: 10;
+    display: flex;
+    gap: var(--space-2);
+  }
+
+  .content {
+    height: 100%;
+    width: 100%;
+  }
+
+  .content :global(svg) {
+    height: 100%;
+    width: 100%;
+    background-color: var(--color-white);
+  }
+</style>

package/dist/plugins/devtools/ui/feedback/Banner.svelte

@@ -0,0 +1,116 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/feedback/banner.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    status?: 'info' | 'success' | 'warning' | 'error'
+    title?: string
+    onDismiss?: () => void
+  }
+
+  let { children, status = 'info', title, onDismiss }: Props = $props()
+
+  const bannerRole = $derived(
+    status === 'error' || status === 'warning' ? 'alert' : 'status',
+  )
+</script>
+
+<div class="banner status-{status}" role={bannerRole}>
+  <div class="banner-content">
+    {#if title}
+      <p class="banner-title">{title}</p>
+    {/if}
+    <div class="banner-body">
+      {@render children()}
+    </div>
+  </div>
+  {#if onDismiss}
+    <button
+      class="dismiss-button"
+      onclick={onDismiss}
+      aria-label="Dismiss"
+    >
+      <svg class="dismiss-icon" viewBox="0 0 20 20" fill="currentColor">
+        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+      </svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .banner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    border-radius: var(--radius-md);
+    border: 1px solid;
+    padding: var(--space-4);
+    background-color: var(--color-white);
+  }
+
+  .status-info {
+    border-color: #bfdbfe;
+    color: var(--color-blue-800, #1e40af);
+  }
+  .status-success {
+    border-color: #bbf7d0;
+    color: var(--color-green-800);
+  }
+  .status-warning {
+    border-color: #fef08a;
+    color: var(--color-yellow-800);
+  }
+  .status-error {
+    border-color: #fecaca;
+    color: var(--color-red-700);
+  }
+
+  .banner-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .banner-title {
+    font-weight: var(--font-semibold);
+    font-size: var(--text-sm);
+    margin: 0;
+  }
+
+  .banner-body {
+    font-size: var(--text-sm);
+  }
+
+  .dismiss-button {
+    margin-left: var(--space-4);
+    border-radius: var(--radius-sm);
+    background: none;
+    border: none;
+    color: currentColor;
+    opacity: 0.7;
+    cursor: pointer;
+    padding: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .dismiss-button:hover {
+    opacity: 1;
+  }
+
+  .dismiss-button:focus-visible {
+    outline: var(--ring-width) solid currentColor;
+    outline-offset: var(--ring-offset);
+  }
+
+  .dismiss-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+</style>

package/dist/plugins/devtools/ui/feedback/Spinner.svelte

@@ -0,0 +1,79 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/feedback/spinner.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  interface Props {
+    size?: 'small' | 'medium' | 'large'
+    label?: string
+    color?: 'primary' | 'current'
+  }
+
+  let { size = 'medium', label = 'Loading', color = 'primary' }: Props = $props()
+
+  const dimensions = $derived(
+    size === 'small' ? 16 : size === 'large' ? 32 : 24,
+  )
+  const strokeWidth = $derived(
+    size === 'small' ? 2 : size === 'large' ? 4 : 3,
+  )
+  const r = $derived((dimensions - strokeWidth) / 2)
+  const circumference = $derived(2 * Math.PI * r)
+</script>
+
+<svg
+  class="spinner color-{color}"
+  width={dimensions}
+  height={dimensions}
+  viewBox="0 0 {dimensions} {dimensions}"
+  role="progressbar"
+  aria-label={label}
+>
+  <circle
+    class="track"
+    cx={dimensions / 2}
+    cy={dimensions / 2}
+    r={r}
+    fill="none"
+    stroke="currentColor"
+    stroke-width={strokeWidth}
+  />
+  <circle
+    class="arc"
+    cx={dimensions / 2}
+    cy={dimensions / 2}
+    r={r}
+    fill="none"
+    stroke="currentColor"
+    stroke-width={strokeWidth}
+    stroke-dasharray="{circumference * 0.25} {circumference * 0.75}"
+    transform="rotate(-90 {dimensions / 2} {dimensions / 2})"
+  >
+    <animateTransform
+      attributeName="transform"
+      type="rotate"
+      from="0 {dimensions / 2} {dimensions / 2}"
+      to="360 {dimensions / 2} {dimensions / 2}"
+      dur="1s"
+      repeatCount="indefinite"
+    />
+  </circle>
+</svg>
+
+<style>
+  .color-primary {
+    color: var(--color-blue-600);
+  }
+  .color-current {
+    color: currentColor;
+  }
+
+  .track {
+    opacity: 0.25;
+  }
+  .arc {
+    opacity: 0.75;
+  }
+</style>

package/dist/plugins/devtools/ui/forms/Checkbox.svelte

@@ -0,0 +1,139 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/forms/checkbox.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  interface Props {
+    label: string
+    name: string
+    checked?: boolean
+    onchange?: (checked: boolean) => void
+    helpText?: string
+    disabled?: boolean
+  }
+
+  let {
+    label,
+    name,
+    checked = false,
+    onchange,
+    helpText,
+    disabled = false,
+  }: Props = $props()
+
+  function handleChange(event: Event): void {
+    if (event.target instanceof HTMLInputElement) {
+      onchange?.(event.target.checked)
+    }
+  }
+</script>
+
+<div class="checkbox-field">
+  <label class="checkbox-label" class:is-disabled={disabled}>
+    <span class="checkbox-wrapper">
+      <input
+        type="checkbox"
+        class="checkbox-input"
+        {name}
+        {checked}
+        {disabled}
+        onchange={handleChange}
+      />
+      <span class="checkbox-box" class:checked aria-hidden="true">
+        {#if checked}
+          <svg class="checkmark" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="2,6 5,9 10,3" />
+          </svg>
+        {/if}
+      </span>
+    </span>
+    <span class="label-text">{label}</span>
+  </label>
+  {#if helpText}
+    <p class="help-text">{helpText}</p>
+  {/if}
+</div>
+
+<style>
+  .checkbox-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .checkbox-label {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .checkbox-label.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .checkbox-wrapper {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .checkbox-input {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    cursor: pointer;
+    opacity: 0;
+    margin: 0;
+  }
+
+  .checkbox-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .checkbox-box {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-gray-300);
+    background-color: var(--color-white);
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+  }
+
+  .checkbox-box.checked {
+    border-color: var(--color-blue-600);
+    background-color: var(--color-blue-600);
+  }
+
+  .checkbox-input:focus-visible + .checkbox-box {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
+  }
+
+  .checkmark {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: var(--color-white);
+  }
+
+  .label-text {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+  }
+
+  .help-text {
+    margin: 0;
+    margin-left: 1.5rem;
+    font-size: var(--text-sm);
+    color: var(--color-gray-500);
+  }
+</style>