@svgrid/grid 1.2.33 → 2.0.0

package/dist/SvScrollArea.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  /**
+   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
+   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
+   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
+   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
+   * adapts to light/dark when no preset defines the tokens.
+   *
+   * ```svelte
+   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    maxHeight?: string
+    height?: string
+    /** Scroll horizontally instead of vertically. */
+    horizontal?: boolean
+    children?: Snippet
+  }
+
+  let { maxHeight, height, horizontal = false, children }: Props = $props()
+</script>
+
+<div class="sv-scroll" class:is-x={horizontal} style:max-height={maxHeight} style:height={height}>
+  {@render children?.()}
+</div>
+
+<style>
+  .sv-scroll {
+    overflow: auto; overscroll-behavior: contain; min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent)) var(--sg-scrollbar-bg, transparent);
+  }
+  .sv-scroll.is-x { overflow: auto hidden; }
+  .sv-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
+  .sv-scroll::-webkit-scrollbar-track {
+    background: var(--sg-scrollbar-bg, transparent);
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, transparent);
+  }
+  .sv-scroll::-webkit-scrollbar-thumb {
+    background: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent));
+    border-radius: var(--sg-scrollbar-thumb-radius, 6px);
+    border: 3px solid transparent; background-clip: padding-box;
+  }
+  .sv-scroll::-webkit-scrollbar-thumb:hover { background: var(--sg-scrollbar-thumb-hover, color-mix(in srgb, var(--sg-fg, #0f172a) 38%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-thumb:active { background: var(--sg-scrollbar-thumb-active, color-mix(in srgb, var(--sg-fg, #0f172a) 50%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-corner { background: var(--sg-scrollbar-bg, transparent); }
+</style>

package/dist/SvScrollArea.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
+   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
+   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
+   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
+   * adapts to light/dark when no preset defines the tokens.
+   *
+   * ```svelte
+   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    maxHeight?: string;
+    height?: string;
+    /** Scroll horizontally instead of vertically. */
+    horizontal?: boolean;
+    children?: Snippet;
+};
+declare const SvScrollArea: import("svelte").Component<Props, {}, "">;
+type SvScrollArea = ReturnType<typeof SvScrollArea>;
+export default SvScrollArea;

package/dist/SvSkeleton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * SvSkeleton - a shimmering loading placeholder. Use it while data is in
+   * flight; it respects `prefers-reduced-motion` (falls back to a static tint).
+   * Parity: Smart skeleton / loading indicators.
+   *
+   * ```svelte
+   * <SvSkeleton variant="text" lines={3} />
+   * <SvSkeleton variant="circle" width="40px" height="40px" />
+   * ```
+   */
+  type Props = {
+    variant?: 'text' | 'rect' | 'circle'
+    /** Any CSS length. Defaults suit the variant. */
+    width?: string
+    height?: string
+    /** Corner radius (rect/text). */
+    radius?: string
+    /** Number of text lines (variant="text" only). The last line is shorter. */
+    lines?: number
+    /** Turn the shimmer off (static tint only). */
+    animated?: boolean
+  }
+
+  let { variant = 'text', width, height, radius, lines = 1, animated = true }: Props = $props()
+
+  const isText = $derived(variant === 'text')
+  const rowCount = $derived(isText ? Math.max(1, lines) : 1)
+</script>
+
+<div class="sv-skel" role="status" aria-busy="true" aria-live="polite">
+  <span class="sv-skel__sr">Loading</span>
+  {#each Array(rowCount) as _, i (i)}
+    <span
+      class="sv-skel__box sv-skel__box--{variant}"
+      class:is-animated={animated}
+      class:is-last={isText && i === rowCount - 1 && rowCount > 1}
+      style:width={width}
+      style:height={height}
+      style:border-radius={variant === 'circle' ? '50%' : radius}
+      aria-hidden="true"
+    ></span>
+  {/each}
+</div>
+
+<style>
+  .sv-skel { display: flex; flex-direction: column; gap: 8px; }
+  .sv-skel__sr {
+    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+  .sv-skel__box {
+    display: block;
+    background: var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0));
+    border-radius: var(--sg-radius, 8px);
+  }
+  .sv-skel__box--text { width: 100%; height: 0.85em; }
+  .sv-skel__box--rect { width: 100%; height: 120px; }
+  .sv-skel__box--circle { width: 40px; height: 40px; border-radius: 50%; }
+  .sv-skel__box.is-last { width: 60%; }
+
+  .sv-skel__box.is-animated {
+    background: linear-gradient(
+      90deg,
+      var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)) 25%,
+      color-mix(in srgb, var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)) 55%, var(--sg-bg, #fff)) 37%,
+      var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)) 63%
+    );
+    background-size: 400% 100%;
+    animation: sv-skel-shimmer 1.4s ease-in-out infinite;
+  }
+  @keyframes sv-skel-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-skel__box.is-animated { animation: none; background: var(--sg-skeleton-bg, var(--sg-row-hover-bg, #e2e8f0)); }
+  }
+</style>

package/dist/SvSkeleton.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * SvSkeleton - a shimmering loading placeholder. Use it while data is in
+ * flight; it respects `prefers-reduced-motion` (falls back to a static tint).
+ * Parity: Smart skeleton / loading indicators.
+ *
+ * ```svelte
+ * <SvSkeleton variant="text" lines={3} />
+ * <SvSkeleton variant="circle" width="40px" height="40px" />
+ * ```
+ */
+type Props = {
+    variant?: 'text' | 'rect' | 'circle';
+    /** Any CSS length. Defaults suit the variant. */
+    width?: string;
+    height?: string;
+    /** Corner radius (rect/text). */
+    radius?: string;
+    /** Number of text lines (variant="text" only). The last line is shorter. */
+    lines?: number;
+    /** Turn the shimmer off (static tint only). */
+    animated?: boolean;
+};
+declare const SvSkeleton: import("svelte").Component<Props, {}, "">;
+type SvSkeleton = ReturnType<typeof SvSkeleton>;
+export default SvSkeleton;

package/dist/SvSlider.svelte

@@ -7,9 +7,11 @@
    * The behavior lives in the headless `createSlider` core; this component is
    * just one styled renderer over it (it only owns pointer/DOM measurement).
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createSlider } from './createSlider.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     value?: number | [number, number]
     onChange?: (value: any) => void
     min?: number
@@ -18,12 +20,11 @@
     range?: boolean
     /** Show evenly spaced tick marks (count or explicit values). */
     ticks?: number | number[]
+    /** Numeric scale labels under the track: 'endpoints' (min/max), 'all' (per tick), or 'none'. */
+    labels?: 'none' | 'endpoints' | 'all'
     /** Show the value bubble above the thumb. */
     showValue?: boolean
-    disabled?: boolean
     orientation?: 'horizontal' | 'vertical'
-    name?: string
-    ariaLabel?: string
     formatValue?: (v: number) => string
   }
 
@@ -35,14 +36,26 @@
     step = 1,
     range = false,
     ticks,
+    labels = 'none',
     showValue = false,
     disabled = false,
     orientation = 'horizontal',
     name,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
     formatValue,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-slider')
+  const uid = $derived(id ?? autoId)
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
   // Behavior (value<->position math, stepping, keyboard, drag state, ARIA) lives
   // in the headless `createSlider` core; the component keeps the DOM measuring.
   const slider = createSlider({
@@ -54,7 +67,8 @@
     range: () => range,
     orientation: () => orientation,
     disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
+    ariaLabel: () => ariaLabel ?? label,
+    rtl: () => resolvedDir === 'rtl',
   })
   const lo = $derived(slider.lo)
   const hi = $derived(slider.hi)
@@ -65,6 +79,10 @@
     if (Array.isArray(ticks)) return ticks
     return Array.from({ length: ticks }, (_, i) => min + ((max - min) / (ticks - 1)) * i)
   })
+  const labelValues = $derived.by<number[]>(() => {
+    if (labels === 'all') return tickValues.length ? tickValues : [min, max]
+    return [] // 'endpoints' renders min/max directly; 'none' renders nothing
+  })
 
   // The rect is measured here (a DOM concern) and passed INTO the core.
   let trackEl: HTMLDivElement | null = null
@@ -82,10 +100,11 @@
   const fmt = (v: number) => (formatValue ? formatValue(v) : String(v))
 </script>
 
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
 <div
   class="sv-slider sv-slider--{orientation}"
   class:is-disabled={disabled}
-  aria-label={ariaLabel}
+  dir={resolvedDir}
 >
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
@@ -119,8 +138,18 @@
       </div>
     {/if}
   </div>
+  {#if labels !== 'none' && orientation === 'horizontal'}
+    {#if labels === 'endpoints'}
+      <div class="sv-slider__scale sv-slider__scale--ends" aria-hidden="true"><span>{fmt(min)}</span><span>{fmt(max)}</span></div>
+    {:else}
+      <div class="sv-slider__scale" aria-hidden="true">
+        {#each labelValues as lv (lv)}<span class="sv-slider__scale-lbl" style:--p={`${pct(lv)}%`}>{fmt(lv)}</span>{/each}
+      </div>
+    {/if}
+  {/if}
   {#if name}<input type="hidden" {name} value={range ? `${lo},${hi}` : hi} />{/if}
 </div>
+</SvField>
 
 <style>
   .sv-slider { --_accent: var(--sg-accent, #2563eb); --_track: var(--sg-border, #e2e8f0); padding: 10px; }
@@ -132,15 +161,18 @@
   }
   .sv-slider--horizontal .sv-slider__track { height: 6px; }
   .sv-slider--vertical .sv-slider__track { width: 6px; height: 100%; margin: 0 auto; }
+  .sv-slider__scale { position: relative; height: 15px; margin-top: 8px; font-size: 11px; color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums; }
+  .sv-slider__scale--ends { display: flex; justify-content: space-between; }
+  .sv-slider__scale-lbl { position: absolute; inset-inline-start: var(--p); transform: translateX(-50%); white-space: nowrap; }
   .sv-slider__fill { position: absolute; background: var(--_accent); border-radius: 999px; }
-  .sv-slider--horizontal .sv-slider__fill { left: var(--a); right: calc(100% - var(--b)); top: 0; bottom: 0; }
+  .sv-slider--horizontal .sv-slider__fill { inset-inline-start: var(--a); inset-inline-end: calc(100% - var(--b)); top: 0; bottom: 0; }
   .sv-slider--vertical .sv-slider__fill { bottom: var(--a); top: calc(100% - var(--b)); left: 0; right: 0; }
   .sv-slider__thumb {
     position: absolute; width: 16px; height: 16px; border-radius: 50%;
     background: #fff; border: 2px solid var(--_accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     cursor: grab; touch-action: none;
   }
-  .sv-slider--horizontal .sv-slider__thumb { left: var(--p); top: 50%; transform: translate(-50%, -50%); }
+  .sv-slider--horizontal .sv-slider__thumb { inset-inline-start: var(--p); top: 50%; transform: translate(-50%, -50%); }
   .sv-slider--vertical .sv-slider__thumb { bottom: var(--p); left: 50%; transform: translate(-50%, 50%); }
   .sv-slider__thumb:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
   .sv-slider__thumb:active { cursor: grabbing; }
@@ -150,6 +182,6 @@
     padding: 2px 6px; border-radius: 5px; white-space: nowrap;
   }
   .sv-slider__tick { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--sg-muted, #94a3b8); }
-  .sv-slider--horizontal .sv-slider__tick { left: var(--p); top: 50%; transform: translate(-50%, -50%); }
+  .sv-slider--horizontal .sv-slider__tick { inset-inline-start: var(--p); top: 50%; transform: translate(-50%, -50%); }
   .sv-slider--vertical .sv-slider__tick { bottom: var(--p); left: 50%; transform: translate(-50%, 50%); }
 </style>

package/dist/SvSlider.svelte.d.ts

@@ -1,4 +1,5 @@
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+type Props = SvEditorProps & {
     value?: number | [number, number];
     onChange?: (value: any) => void;
     min?: number;
@@ -7,12 +8,11 @@ type Props = {
     range?: boolean;
     /** Show evenly spaced tick marks (count or explicit values). */
     ticks?: number | number[];
+    /** Numeric scale labels under the track: 'endpoints' (min/max), 'all' (per tick), or 'none'. */
+    labels?: 'none' | 'endpoints' | 'all';
     /** Show the value bubble above the thumb. */
     showValue?: boolean;
-    disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
-    name?: string;
-    ariaLabel?: string;
     formatValue?: (v: number) => string;
 };
 declare const SvSlider: import("svelte").Component<Props, {}, "">;

package/dist/SvSparkline.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  /**
+   * SvSparkline - a tiny inline chart (line / area / bar / win-loss) from a number
+   * array. A thin SVG renderer over the pure `buildSparkline` geometry (shared
+   * with the grid's sparkline cell). Theme-driven (defaults to `--sg-accent`).
+   *
+   * ```svelte
+   * <SvSparkline data={[3, 7, 4, 9, 6, 11, 8]} type="area" />
+   * ```
+   */
+  import { buildSparkline, type SparklineType } from './sparkline'
+
+  type Props = {
+    data: ReadonlyArray<number>
+    type?: SparklineType
+    width?: number
+    height?: number
+    color?: string
+    negativeColor?: string
+    lineWidth?: number
+    /** Fix the value scale instead of deriving it from the data. */
+    min?: number
+    max?: number
+    /** End-cap dot on the last point (line / area). Default true. */
+    lastPoint?: boolean
+    ariaLabel?: string
+  }
+
+  let {
+    data,
+    type = 'line',
+    width = 88,
+    height = 22,
+    color,
+    negativeColor,
+    lineWidth,
+    min,
+    max,
+    lastPoint = true,
+    ariaLabel,
+  }: Props = $props()
+
+  const geo = $derived(
+    buildSparkline([...data], { type, width, height, color, negativeColor, lineWidth, min, max, lastPoint }),
+  )
+</script>
+
+{#if geo}
+  <svg
+    class="sv-spark"
+    width={geo.width}
+    height={geo.height}
+    viewBox={`0 0 ${geo.width} ${geo.height}`}
+    preserveAspectRatio="none"
+    role="img"
+    aria-label={ariaLabel ?? 'sparkline'}
+  >
+    {#if type === 'area' && geo.areaPath}
+      <path d={geo.areaPath} fill={geo.color} fill-opacity="0.15" stroke="none" />
+    {/if}
+    {#if (type === 'line' || type === 'area') && geo.linePath}
+      <path d={geo.linePath} fill="none" stroke={geo.color} stroke-width={geo.lineWidth} stroke-linejoin="round" stroke-linecap="round" />
+    {/if}
+    {#if type === 'bar' || type === 'winloss'}
+      {#each geo.bars as b, i (i)}
+        <rect x={b.x} y={b.y} width={b.w} height={b.h} rx="0.5" fill={b.negative ? geo.negativeColor : geo.color} />
+      {/each}
+    {/if}
+    {#if lastPoint && geo.lastPoint && (type === 'line' || type === 'area')}
+      <circle cx={geo.lastPoint.x} cy={geo.lastPoint.y} r={geo.lineWidth + 0.8} fill={geo.color} />
+    {/if}
+  </svg>
+{/if}
+
+<style>
+  .sv-spark { display: inline-block; vertical-align: middle; overflow: visible; }
+</style>

package/dist/SvSparkline.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+   * SvSparkline - a tiny inline chart (line / area / bar / win-loss) from a number
+   * array. A thin SVG renderer over the pure `buildSparkline` geometry (shared
+   * with the grid's sparkline cell). Theme-driven (defaults to `--sg-accent`).
+   *
+   * ```svelte
+   * <SvSparkline data={[3, 7, 4, 9, 6, 11, 8]} type="area" />
+   * ```
+   */
+import { type SparklineType } from './sparkline';
+type Props = {
+    data: ReadonlyArray<number>;
+    type?: SparklineType;
+    width?: number;
+    height?: number;
+    color?: string;
+    negativeColor?: string;
+    lineWidth?: number;
+    /** Fix the value scale instead of deriving it from the data. */
+    min?: number;
+    max?: number;
+    /** End-cap dot on the last point (line / area). Default true. */
+    lastPoint?: boolean;
+    ariaLabel?: string;
+};
+declare const SvSparkline: import("svelte").Component<Props, {}, "">;
+type SvSparkline = ReturnType<typeof SvSparkline>;
+export default SvSparkline;

package/dist/SvSplitter.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+  export type { SplitterOrientation } from './createSplitter.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvSplitter - two resizable panes with a draggable separator (WAI-ARIA
+   * `separator`), pointer drag + keyboard resize. Parity: Smart `smart-splitter`.
+   * Controlled via `fraction` (0..1 of the first pane) + `onChange`; the two panes
+   * are the `start` and `end` snippets.
+   *
+   * Behavior (clamp, keyboard, ARIA, RTL) lives in the headless `createSplitter`
+   * core; this component owns only the container measurement for pointer drags.
+   */
+  import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
+  import { createSplitter, type SplitterOrientation } from './createSplitter.svelte'
+
+  type Props = {
+    /** Size of the first pane as a fraction of the container (0..1). */
+    fraction?: number
+    onChange?: (fraction: number) => void
+    /** 'horizontal' = left/right panes (default); 'vertical' = top/bottom. */
+    orientation?: SplitterOrientation
+    min?: number
+    max?: number
+    /** Keyboard resize step as a fraction (default 0.02 = 2%). */
+    step?: number
+    disabled?: boolean
+    dir?: EditorDir
+    ariaLabel?: string
+    start?: Snippet
+    end?: Snippet
+  }
+
+  let {
+    fraction = $bindable(0.5),
+    onChange,
+    orientation = 'horizontal',
+    min = 0.1,
+    max = 0.9,
+    step = 0.02,
+    disabled = false,
+    dir,
+    ariaLabel,
+    start,
+    end,
+  }: Props = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  const sp = createSplitter({
+    fraction: () => fraction,
+    onChange: (f) => { fraction = f; onChange?.(f) },
+    orientation: () => orientation,
+    min: () => min,
+    max: () => max,
+    step: () => step,
+    disabled: () => disabled,
+    dir: () => dir,
+    ariaLabel: () => ariaLabel,
+  })
+
+  // The container rect is measured here (a DOM concern) and passed INTO the core.
+  let rootEl: HTMLDivElement | null = null
+  let sepEl: HTMLDivElement | null = null
+
+  function onSepDown(e: PointerEvent) {
+    if (disabled) return
+    sp.pointerDown()
+    sepEl?.setPointerCapture(e.pointerId)
+  }
+  function onMove(e: PointerEvent) {
+    if (!sp.dragging || !rootEl) return
+    sp.setFromPointer({ x: e.clientX, y: e.clientY }, rootEl.getBoundingClientRect())
+  }
+  function onUp(e: PointerEvent) {
+    if (!sp.dragging) return
+    sp.endDrag()
+    sepEl?.releasePointerCapture(e.pointerId)
+  }
+</script>
+
+<div
+  bind:this={rootEl}
+  class="sv-split sv-split--{orientation}"
+  class:is-disabled={disabled}
+  class:is-dragging={sp.dragging}
+  dir={resolvedDir}
+>
+  <div class="sv-split__pane" style:flex-basis={`${sp.percent}%`}>
+    {#if start}{@render start()}{/if}
+  </div>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={sepEl}
+    class="sv-split__sep"
+    {...sp.separatorProps()}
+    onpointerdown={onSepDown}
+    onpointermove={onMove}
+    onpointerup={onUp}
+    onpointercancel={onUp}
+  ><span class="sv-split__grip" aria-hidden="true"></span></div>
+  <div class="sv-split__pane sv-split__pane--end">
+    {#if end}{@render end()}{/if}
+  </div>
+</div>
+
+<style>
+  .sv-split {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #e2e8f0);
+    display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden;
+  }
+  .sv-split--vertical { flex-direction: column; }
+  .sv-split.is-disabled { opacity: 0.7; }
+  .sv-split__pane { flex-grow: 0; flex-shrink: 0; min-width: 0; min-height: 0; overflow: auto; }
+  .sv-split__pane--end { flex: 1 1 0; }
+  /* The gutter is a solid divider-toned bar (--sg-border is the one token that
+     reliably contrasts against panes in BOTH light and dark themes - it draws the
+     visible card outline too). It turns accent on hover / drag. */
+  .sv-split__sep {
+    flex: 0 0 auto; position: relative; background: var(--sg-border, #cbd5e1);
+    display: grid; place-items: center; touch-action: none; transition: background 0.12s;
+  }
+  /* Orientation rules MUST target the splitter's OWN separator only (direct
+     child). With a descendant combinator a nested splitter of the opposite
+     orientation inherits the wrong sizing - e.g. a vertical split inside a
+     horizontal one would get width:8px and collapse its horizontal bar. */
+  .sv-split--horizontal > .sv-split__sep { width: 8px; min-width: 8px; cursor: col-resize; }
+  .sv-split--vertical > .sv-split__sep { height: 8px; min-height: 8px; cursor: row-resize; }
+  .sv-split__sep:hover, .sv-split.is-dragging > .sv-split__sep { background: var(--_accent); }
+  .sv-split__sep:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 1px; z-index: 1; }
+  /* Grip dots: the pane background color, so they read as notches cut into the bar. */
+  .sv-split__grip { background: var(--sg-bg, #fff); border-radius: 3px; opacity: 0.9; transition: background 0.12s; }
+  .sv-split--horizontal > .sv-split__sep > .sv-split__grip { width: 2px; height: 24px; }
+  .sv-split--vertical > .sv-split__sep > .sv-split__grip { width: 24px; height: 2px; }
+</style>

package/dist/SvSplitter.svelte.d.ts

@@ -0,0 +1,32 @@
+export type { SplitterOrientation } from './createSplitter.svelte';
+/**
+   * SvSplitter - two resizable panes with a draggable separator (WAI-ARIA
+   * `separator`), pointer drag + keyboard resize. Parity: Smart `smart-splitter`.
+   * Controlled via `fraction` (0..1 of the first pane) + `onChange`; the two panes
+   * are the `start` and `end` snippets.
+   *
+   * Behavior (clamp, keyboard, ARIA, RTL) lives in the headless `createSplitter`
+   * core; this component owns only the container measurement for pointer drags.
+   */
+import type { Snippet } from 'svelte';
+import { type EditorDir } from './editor-contract';
+import { type SplitterOrientation } from './createSplitter.svelte';
+type Props = {
+    /** Size of the first pane as a fraction of the container (0..1). */
+    fraction?: number;
+    onChange?: (fraction: number) => void;
+    /** 'horizontal' = left/right panes (default); 'vertical' = top/bottom. */
+    orientation?: SplitterOrientation;
+    min?: number;
+    max?: number;
+    /** Keyboard resize step as a fraction (default 0.02 = 2%). */
+    step?: number;
+    disabled?: boolean;
+    dir?: EditorDir;
+    ariaLabel?: string;
+    start?: Snippet;
+    end?: Snippet;
+};
+declare const SvSplitter: import("svelte").Component<Props, {}, "fraction">;
+type SvSplitter = ReturnType<typeof SvSplitter>;
+export default SvSplitter;