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

package/dist/plugins/devtools/ui/layout/Card.svelte

@@ -0,0 +1,55 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/layout/card.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
+    header?: Snippet
+    subdued?: boolean
+    sectioned?: boolean
+  }
+
+  let { children, header, subdued = false, sectioned = false }: Props = $props()
+</script>
+
+<div class="card" class:subdued class:sectioned>
+  {#if header}
+    <div class="card-header">
+      {@render header()}
+    </div>
+  {/if}
+  <div class="card-body">
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  .card {
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-gray-200);
+    box-shadow: var(--shadow-card);
+    background-color: var(--color-white);
+  }
+
+  .card.subdued {
+    background-color: var(--color-gray-50);
+  }
+
+  .card:not(.sectioned) .card-body {
+    padding: var(--space-4);
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--color-gray-200);
+    padding: var(--space-3) var(--space-4);
+  }
+</style>

package/dist/plugins/devtools/ui/layout/Divider.svelte

@@ -0,0 +1,34 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/layout/divider.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 {
+    orientation?: 'horizontal' | 'vertical'
+  }
+
+  let { orientation = 'horizontal' }: Props = $props()
+</script>
+
+{#if orientation === 'horizontal'}
+  <hr class="divider-horizontal" />
+{:else}
+  <div class="divider-vertical" role="separator" aria-orientation="vertical"></div>
+{/if}
+
+<style>
+  .divider-horizontal {
+    width: 100%;
+    border: none;
+    border-top: 1px solid var(--color-gray-200);
+    margin: 0;
+  }
+
+  .divider-vertical {
+    width: 1px;
+    align-self: stretch;
+    background-color: var(--color-gray-200);
+  }
+</style>

package/dist/plugins/devtools/ui/layout/Spacer.svelte

@@ -0,0 +1,11 @@
+<!--
+  Flexible spacer that expands to fill available space in a flex container.
+  Useful for pushing sibling elements to opposite ends.
+-->
+<div class="spacer"></div>
+
+<style>
+  .spacer {
+    flex: 1;
+  }
+</style>

package/dist/plugins/devtools/ui/layout/Stack.svelte

@@ -0,0 +1,129 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/layout/stack.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
+    direction?: 'horizontal' | 'vertical'
+    gap?: 'none' | 'small' | 'medium' | 'large'
+    align?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
+    justify?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+    wrap?: boolean
+    padding?: 'none' | 'small' | 'medium' | 'large'
+    fill?: boolean
+  }
+
+  let {
+    children,
+    direction = 'vertical',
+    gap = 'medium',
+    align = 'start',
+    justify = 'stretch',
+    wrap = false,
+    padding = 'none',
+    fill = false,
+  }: Props = $props()
+</script>
+
+<div
+  class="stack direction-{direction} gap-{gap} align-{align} justify-{justify} padding-{padding}"
+  class:wrap
+  class:fill
+>
+  {@render children()}
+</div>
+
+<style>
+  .stack {
+    display: flex;
+  }
+
+  /* Direction */
+  .direction-horizontal {
+    flex-direction: row;
+  }
+  .direction-vertical {
+    flex-direction: column;
+  }
+
+  /* Gap */
+  .gap-none {
+    gap: 0;
+  }
+  .gap-small {
+    gap: var(--space-2);
+  }
+  .gap-medium {
+    gap: var(--space-4);
+  }
+  .gap-large {
+    gap: var(--space-8);
+  }
+
+  /* Align (main axis — justify-content) */
+  .align-start {
+    justify-content: flex-start;
+  }
+  .align-center {
+    justify-content: center;
+  }
+  .align-end {
+    justify-content: flex-end;
+  }
+  .align-space-between {
+    justify-content: space-between;
+  }
+  .align-space-around {
+    justify-content: space-around;
+  }
+  .align-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  /* Justify (cross axis — align-items) */
+  .justify-start {
+    align-items: flex-start;
+  }
+  .justify-center {
+    align-items: center;
+  }
+  .justify-end {
+    align-items: flex-end;
+  }
+  .justify-stretch {
+    align-items: stretch;
+  }
+  .justify-baseline {
+    align-items: baseline;
+  }
+
+  /* Padding */
+  .padding-none {
+    padding: 0;
+  }
+  .padding-small {
+    padding: var(--space-2);
+  }
+  .padding-medium {
+    padding: var(--space-4);
+  }
+  .padding-large {
+    padding: var(--space-8);
+  }
+
+  /* Fill (flex: 1 to expand within a flex/grid parent) */
+  .fill {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Wrap */
+  .wrap {
+    flex-wrap: wrap;
+  }
+</style>

package/dist/plugins/devtools/ui/overlays/Tooltip.svelte

@@ -0,0 +1,90 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/overlays/tooltip.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
+    content: string
+    placement?: 'top' | 'bottom' | 'left' | 'right'
+    isDisabled?: boolean
+  }
+
+  let { children, content, placement = 'top', isDisabled = false }: Props = $props()
+
+  const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+{#if isDisabled}
+  {@render children()}
+{:else}
+  <span class="tooltip-wrapper" aria-describedby={tooltipId}>
+    {@render children()}
+    <span
+      id={tooltipId}
+      class="tooltip placement-{placement}"
+      role="tooltip"
+    >
+      {content}
+    </span>
+  </span>
+{/if}
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .tooltip {
+    pointer-events: none;
+    position: absolute;
+    z-index: 50;
+    white-space: nowrap;
+    border-radius: var(--radius-md);
+    background-color: var(--color-gray-900);
+    padding: var(--space-1-5) var(--space-2-5);
+    font-size: var(--text-sm);
+    color: var(--color-white);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .tooltip-wrapper:hover .tooltip,
+  .tooltip-wrapper:focus-within .tooltip {
+    opacity: 1;
+  }
+
+  .placement-top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--space-2);
+  }
+
+  .placement-bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--space-2);
+  }
+
+  .placement-left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--space-2);
+  }
+
+  .placement-right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--space-2);
+  }
+</style>

package/dist/plugins/devtools/ui/tokens.css

@@ -0,0 +1,144 @@
+.devtools {
+  /* Colors — match Tailwind's default palette exactly */
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-900: #111827;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-green-100: #dcfce7;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Typography — match Tailwind's type scale */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+
+  /* Spacing — match Tailwind's spacing scale */
+  --space-0: 0;
+  --space-0-5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-1-5: 0.375rem;
+  --space-2: 0.5rem;
+  --space-2-5: 0.625rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+
+  /* Radii */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+  /* Focus ring — matches dashboard's ring-2 ring-blue-500 ring-offset-2 */
+  --ring-color: var(--color-blue-500);
+  --ring-width: 2px;
+  --ring-offset: 2px;
+
+  /* Base typography reset */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  color: var(--color-gray-900);
+}
+
+/** Compact inline form elements for use within table cells */
+.devtools .inline-select,
+.devtools .inline-input {
+  font-size: var(--text-xs);
+  padding: var(--space-0-5) var(--space-1);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+}
+
+.devtools .inline-input {
+  width: 100%;
+}
+
+.devtools .inline-select:focus,
+.devtools .inline-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+}
+
+/** Textarea elements within devtools */
+.devtools textarea {
+  width: 100%;
+  min-height: 60px;
+  font-family: monospace;
+  font-size: var(--text-xs);
+  padding: var(--space-1);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+}
+
+.devtools textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+}
+
+/** Event detail panel styling */
+.devtools .details-cell {
+  background-color: var(--color-gray-50);
+  padding: var(--space-4);
+  border-left: 3px solid var(--color-blue-500);
+}
+
+/** Expand/collapse icon for table rows */
+.devtools .expand-icon {
+  margin-right: var(--space-2);
+  display: inline-block;
+  width: 12px;
+}
+
+/** Clickable table rows (e.g., expandable event rows) */
+.devtools .event-row {
+  cursor: pointer;
+}
+
+/** Centered checkbox cell in tables */
+.devtools .include-cell {
+  text-align: center;
+  width: 2.5rem;
+}
+
+/** Inline option label for checkbox/radio lists in table cells */
+.devtools .option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}

package/dist/plugins/devtools/ui/tokens.css.js

@@ -0,0 +1 @@
+const e=".devtools{--color-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-blue-700: #1d4ed8;--color-blue-800: #1e40af;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-900: #111827;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-green-100: #dcfce7;--color-green-700: #15803d;--color-green-800: #166534;--color-yellow-100: #fef9c3;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-white: #ffffff;--color-black: #000000;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--space-0: 0;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-full: 9999px;--shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ring-color: var(--color-blue-500);--ring-width: 2px;--ring-offset: 2px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:1.5;color:var(--color-gray-900)}.devtools .inline-select,.devtools .inline-input{font-size:var(--text-xs);padding:var(--space-0-5) var(--space-1);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-family:inherit}.devtools .inline-input{width:100%}.devtools .inline-select:focus,.devtools .inline-input:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.devtools textarea{width:100%;min-height:60px;font-family:monospace;font-size:var(--text-xs);padding:var(--space-1);border:1px solid var(--color-gray-300);border-radius:var(--radius-md)}.devtools textarea:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.devtools .details-cell{background-color:var(--color-gray-50);padding:var(--space-4);border-left:3px solid var(--color-blue-500)}.devtools .expand-icon{margin-right:var(--space-2);display:inline-block;width:12px}.devtools .event-row{cursor:pointer}.devtools .include-cell{text-align:center;width:2.5rem}.devtools .option-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}";export{e as default};

package/dist/plugins/devtools/ui/typography/Heading.svelte

@@ -0,0 +1,55 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/typography/heading.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
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+    size?: 'large' | 'medium' | 'small'
+    align?: 'start' | 'center' | 'end'
+  }
+
+  let { children, level = 2, size = 'medium', align = 'start' }: Props = $props()
+</script>
+
+<svelte:element
+  this={`h${level}`}
+  class="heading size-{size} align-{align}"
+>
+  {@render children()}
+</svelte:element>
+
+<style>
+  .heading {
+    color: var(--color-gray-900);
+    margin: 0;
+  }
+
+  .size-large {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-semibold);
+  }
+  .size-medium {
+    font-size: var(--text-xl);
+    font-weight: var(--font-semibold);
+  }
+  .size-small {
+    font-size: var(--text-lg);
+    font-weight: var(--font-medium);
+  }
+
+  .align-start {
+    text-align: start;
+  }
+  .align-center {
+    text-align: center;
+  }
+  .align-end {
+    text-align: end;
+  }
+</style>

package/dist/plugins/devtools/ui/typography/Text.svelte

@@ -0,0 +1,93 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/typography/text.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
+    size?: 'large' | 'medium' | 'small' | 'caption'
+    color?: 'default' | 'subdued' | 'success' | 'warning' | 'error'
+    weight?: 'regular' | 'medium' | 'semibold'
+    align?: 'start' | 'center' | 'end'
+    inline?: boolean
+  }
+
+  let {
+    children,
+    size = 'medium',
+    color = 'default',
+    weight = 'regular',
+    align = 'start',
+    inline = false,
+  }: Props = $props()
+</script>
+
+<svelte:element
+  this={inline ? 'span' : 'p'}
+  class="text size-{size} color-{color} weight-{weight} align-{align}"
+>
+  {@render children()}
+</svelte:element>
+
+<style>
+  .text {
+    margin: 0;
+  }
+
+  /* Sizes */
+  .size-large {
+    font-size: var(--text-base);
+  }
+  .size-medium {
+    font-size: var(--text-sm);
+  }
+  .size-small {
+    font-size: var(--text-xs);
+  }
+  .size-caption {
+    font-size: var(--text-xs);
+  }
+
+  /* Colors */
+  .color-default {
+    color: var(--color-gray-900);
+  }
+  .color-subdued {
+    color: var(--color-gray-600);
+  }
+  .color-success {
+    color: var(--color-green-700);
+  }
+  .color-warning {
+    color: var(--color-yellow-700);
+  }
+  .color-error {
+    color: var(--color-red-600);
+  }
+
+  /* Weights */
+  .weight-regular {
+    font-weight: var(--font-normal);
+  }
+  .weight-medium {
+    font-weight: var(--font-medium);
+  }
+  .weight-semibold {
+    font-weight: var(--font-semibold);
+  }
+
+  /* Alignment */
+  .align-start {
+    text-align: start;
+  }
+  .align-center {
+    text-align: center;
+  }
+  .align-end {
+    text-align: end;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.45-next.1",
+  "version": "0.0.45-next.3",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -79,11 +79,14 @@
       "jscpd",
       "eslint",
       "tsc"
+    ],
+    "entry": [
+      "src/plugins/devtools/ui/index.ts"
     ]
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.45-next.1",
+    "@picked/client": "0.0.45-next.3",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },