@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/app/src/composites/ContextMenu.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { ContextMenuContract } from "../core/contracts/contextmenu";
+  import type { Snippet } from "svelte";
+  import { ContextMenu as Bits } from "bits-ui";
+  import {
+    portalAppearance,
+    Button,
+    Icon,
+    dropdownMenuGroups,
+    dropdownMenuItems,
+    type DropdownMenuItem,
+  } from "@reddb-io/design-system/base";
+  import type { ContextMenuEntry } from "./command-surfaces.behavior";
+  import { contextMenu, type ContextMenuSize } from "./context-menu.variants";
+
+  interface Props extends ContextMenuContract {
+    /** Called with the new open state whenever the menu opens or closes. */
+    onopenchange?: (open: boolean) => void;
+    /**
+     * Custom content for the trigger Button; `triggerLabel` is shown when omitted and stays its
+     * accessible name, so words it shows must appear, in order, in `triggerLabel`, ideally first
+     * (WCAG 2.5.3, Label in Name).
+     */
+    children?: Snippet;
+    /** Extra classes, merged over the content slot's own, onto the menu surface. */
+    class?: string;
+  }
+
+  let {
+    triggerLabel,
+    contentLabel,
+    items = [],
+    open = $bindable(false),
+    onopenchange,
+    disabled = false,
+    size = "md",
+    collisionPadding = 8,
+    children,
+    class: className,
+    targetClass,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const contentId = `${uid}-context-menu`;
+  const groups = $derived(dropdownMenuGroups(items));
+  const hasIcons = $derived(dropdownMenuItems(items).some((item) => item.icon !== undefined));
+  const slots = $derived(contextMenu({ size }));
+  function choose(item: DropdownMenuItem): void {
+    item.onselect?.();
+  }
+
+  function openFromKeyboard(event: KeyboardEvent): void {
+    if (disabled || !(event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey))) return;
+    event.preventDefault();
+    const target = event.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    target.dispatchEvent(new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      clientX: rect.left,
+      clientY: rect.bottom,
+    }));
+  }
+  const portal = portalAppearance(() => open);
+</script>
+
+{#snippet row(item: DropdownMenuItem)}
+  {#if hasIcons}
+    <span data-menu-item-icon aria-hidden="true" class={slots.icon()}>
+      {#if item.icon !== undefined}<Icon icon={item.icon} {size} aria-hidden="true" />{/if}
+    </span>
+  {/if}
+  {item.label}
+{/snippet}
+
+<Bits.Root bind:open onOpenChange={onopenchange}>
+  <Bits.Trigger {disabled}>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        {...portal.anchor}
+        data-context-menu-trigger
+        tabindex={disabled ? -1 : 0}
+        aria-label={triggerLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={contentId}
+        aria-disabled={disabled ? "true" : undefined}
+        variant="secondary"
+        {size}
+        class={targetClass}
+        onkeydown={openFromKeyboard}
+      >
+        {#if children}{@render children()}{:else}{triggerLabel}{/if}
+      </Button>
+    {/snippet}
+  </Bits.Trigger>
+
+  <Bits.Portal to={portal.container}>
+    <Bits.Content id={contentId} avoidCollisions={true} {collisionPadding} loop={true}>
+      {#snippet child({ props, wrapperProps })}
+        <div {...wrapperProps} {...portal.attributes}>
+          <div
+            {...props}
+            id={contentId}
+            data-context-menu-surface
+            aria-label={contentLabel}
+            class={slots.content({ class: className })}
+          >
+            {#each groups as group, index (index)}
+              {#if index > 0}<Bits.Separator class={slots.separator()} />{/if}
+              {@const headingId = `${contentId}-group-${index}`}
+              <Bits.Group
+                class={slots.group()}
+                aria-labelledby={group.heading === undefined ? undefined : headingId}
+              >
+                {#if group.heading !== undefined}
+                  <Bits.GroupHeading id={headingId} class={slots.heading()}>{group.heading}</Bits.GroupHeading>
+                {/if}
+                {#each group.items as item (item.id)}
+                  <Bits.Item disabled={item.disabled} onSelect={() => choose(item)}>
+                    {#snippet child({ props: itemProps })}
+                      {#if item.href !== undefined}
+                        <a {...itemProps} href={item.href} class={slots.item()}>{@render row(item)}</a>
+                      {:else}
+                        <div {...itemProps} class={slots.item()}>{@render row(item)}</div>
+                      {/if}
+                    {/snippet}
+                  </Bits.Item>
+                {/each}
+              </Bits.Group>
+            {/each}
+          </div>
+        </div>
+      {/snippet}
+    </Bits.Content>
+  </Bits.Portal>
+</Bits.Root>

package/vendor/ds/kits/app/src/composites/Diff.svelte

@@ -0,0 +1,146 @@
+<!-- Change rows whose meaning survives when feedback colours do not. -->
+<script module lang="ts">
+  import type { DiffRow } from "../core/diff";
+  export type { DiffRow } from "../core/diff";
+</script>
+
+<script lang="ts">
+  import type { DiffContract } from "../core/contracts/diff";
+  import type { HTMLAttributes } from "svelte/elements";
+  import SplitView from "../primitives/SplitView.svelte";
+  import { diff, type DiffMode } from "./diff.variants";
+
+  interface Props extends DiffContract, Omit<HTMLAttributes<HTMLDivElement>, "class" | "role"> {
+    /** Extra classes merged over the comparison surface. */
+    class?: string;
+  }
+
+  let {
+    label = "Changes",
+    rows,
+    mode = "inline",
+    beforeLabel = "Before",
+    afterLabel = "After",
+    separatorLabel = "Resize before and after panes",
+    class: className,
+    ...rest
+  }: Props = $props();
+  const styles = $derived(diff());
+</script>
+
+{#snippet beforePane()}
+  <section
+    data-diff-pane="before"
+    aria-label={beforeLabel}
+    class={styles.pane()}
+  >
+    <div data-diff-pane-heading aria-hidden="true" class={styles.heading()}>{beforeLabel}</div>
+    <div role="list" class={styles.lines()}>
+      {#each rows as row}
+        {#if row.before === undefined}
+          <div data-diff-line data-change-kind="empty" aria-hidden="true" class={styles.line({ change: "empty" })}>
+            <span data-diff-marker class={styles.marker()}></span><code></code>
+          </div>
+        {:else if row.before === row.after}
+          <div data-diff-line data-change-kind="context" role="listitem" class={styles.line({ change: "context" })}>
+            <span data-diff-marker aria-hidden="true" class={styles.marker()}></span><code>{row.before}</code>
+          </div>
+        {:else}
+          <div
+            data-diff-line
+            data-change-kind="removal"
+            role="listitem"
+            aria-label={`Removed: ${row.before}`}
+            class={styles.line({ change: "removal" })}
+          >
+            <span data-diff-marker aria-hidden="true" class={styles.marker()}>−</span><code>{row.before}</code>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  </section>
+{/snippet}
+
+{#snippet afterPane()}
+  <section
+    data-diff-pane="after"
+    aria-label={afterLabel}
+    class={styles.pane()}
+  >
+    <div data-diff-pane-heading aria-hidden="true" class={styles.heading()}>{afterLabel}</div>
+    <div role="list" class={styles.lines()}>
+      {#each rows as row}
+        {#if row.after === undefined}
+          <div data-diff-line data-change-kind="empty" aria-hidden="true" class={styles.line({ change: "empty" })}>
+            <span data-diff-marker class={styles.marker()}></span><code></code>
+          </div>
+        {:else if row.before === row.after}
+          <div data-diff-line data-change-kind="context" role="listitem" class={styles.line({ change: "context" })}>
+            <span data-diff-marker aria-hidden="true" class={styles.marker()}></span><code>{row.after}</code>
+          </div>
+        {:else}
+          <div
+            data-diff-line
+            data-change-kind="addition"
+            role="listitem"
+            aria-label={`Added: ${row.after}`}
+            class={styles.line({ change: "addition" })}
+          >
+            <span data-diff-marker aria-hidden="true" class={styles.marker()}>+</span><code>{row.after}</code>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  </section>
+{/snippet}
+
+<div
+  {...rest}
+  data-diff
+  data-mode={mode}
+  role="region"
+  aria-label={label}
+  class={styles.root({ class: className })}
+>
+  {#if mode === "side-by-side"}
+    <SplitView
+      start={beforePane}
+      end={afterPane}
+      label={separatorLabel}
+      class={styles.split()}
+    />
+  {:else}
+    <div role="list" class={styles.lines()}>
+      {#each rows as row}
+        {#if row.before !== undefined && row.before === row.after}
+          <div data-diff-line data-change-kind="context" role="listitem" class={styles.line({ change: "context" })}>
+            <span data-diff-marker aria-hidden="true" class={styles.marker()}></span><code>{row.before}</code>
+          </div>
+        {:else}
+          {#if row.before !== undefined}
+            <div
+              data-diff-line
+              data-change-kind="removal"
+              role="listitem"
+              aria-label={`Removed: ${row.before}`}
+              class={styles.line({ change: "removal" })}
+            >
+              <span data-diff-marker aria-hidden="true" class={styles.marker()}>−</span><code>{row.before}</code>
+            </div>
+          {/if}
+          {#if row.after !== undefined}
+            <div
+              data-diff-line
+              data-change-kind="addition"
+              role="listitem"
+              aria-label={`Added: ${row.after}`}
+              class={styles.line({ change: "addition" })}
+            >
+              <span data-diff-marker aria-hidden="true" class={styles.marker()}>+</span><code>{row.after}</code>
+            </div>
+          {/if}
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>

package/vendor/ds/kits/app/src/composites/EntityInspector.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  export type { InspectorEntity } from "../core/entity-inspector";
+</script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Button } from "@reddb-io/design-system/base";
+  import type { EntityInspectorContract } from "../core/contracts/entityinspector";
+  import { inspectedEntity } from "../core/entity-inspector";
+  import { entityInspector } from "../entity-inspector.variants";
+  interface Props extends EntityInspectorContract {
+    /** Caller-owned details for the selected entity. */
+    children?: Snippet;
+    /** Caller-owned actions below the selected entity details. */
+    actions?: Snippet;
+    /** Additional root classes, including application-owned height constraints. */
+    class?: string;
+  }
+  let { label, items, selected, context, onselectedchange, ondismiss, previousLabel = "Previous", nextLabel = "Next", closeLabel = "Close", emptyLabel = "Select an item to inspect", headingLevel = 2, children, actions, class: className }: Props = $props();
+  const s = entityInspector();
+  const current = $derived(inspectedEntity(items, selected));
+</script>
+<section data-entity-inspector data-entity-id={current.entity?.id} aria-label={label} class={s.root({ class: className })}>
+  <div class={s.toolbar()}>
+    <div class={s.navigation()}>
+      <Button variant="ghost" size="sm" disabled={!onselectedchange || !current.previous} onclick={() => current.previous && onselectedchange?.(current.previous)}>{previousLabel}</Button>
+      <span class={s.position()}>{current.index < 0 ? 0 : current.index + 1} / {items.length}</span>
+      <Button variant="ghost" size="sm" disabled={!onselectedchange || !current.next} onclick={() => current.next && onselectedchange?.(current.next)}>{nextLabel}</Button>
+    </div>
+    {#if ondismiss}<Button variant="ghost" size="sm" onclick={ondismiss}>{closeLabel}</Button>{/if}
+  </div>
+  <div class={s.body()}>
+    {#if current.entity}
+      {#if context}<p class={s.context()}>{context}</p>{/if}
+      <svelte:element this={`h${headingLevel}`} class={s.title()}>{current.entity.label}</svelte:element>
+      {#if current.entity.description}<p class={s.context()}>{current.entity.description}</p>{/if}
+      {@render children?.()}
+      {#if actions}<div class={s.actions()}>{@render actions()}</div>{/if}
+    {:else}<p class={s.context()}>{emptyLabel}</p>{/if}
+  </div>
+</section>

package/vendor/ds/kits/app/src/composites/EntityJourney.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+  export type { JourneyStage, JourneyState } from "../core/entity-journey";
+</script>
+
+<script lang="ts">
+  import { StatusIndicator, quietControl } from "@reddb-io/design-system/base";
+  import type { EntityJourneyContract } from "../core/contracts/entityjourney";
+  import { journeyStages } from "../core/entity-journey";
+  import { entityJourney } from "../entity-journey.variants";
+  interface Props extends EntityJourneyContract {
+    /** Additional root composition classes. */
+    class?: string;
+  }
+  let {
+    label,
+    items,
+    selected = null,
+    onselectedchange,
+    emptyLabel = "No stages observed",
+    class: className,
+  }: Props = $props();
+  const s = entityJourney();
+  const stages = $derived(journeyStages(items));
+</script>
+
+<div data-entity-journey class={s.root({ class: className })}>
+  <ol aria-label={label} class={s.list()}>
+    {#each stages as item, index (item.id)}
+      <li
+        class={s.stage()}
+        data-journey-stage={item.id}
+        data-state={item.state}
+        aria-current={item.state === "current" ? "step" : undefined}
+      >
+        {#snippet content()}
+          <span aria-hidden="true" class={s.marker({ state: item.state })}>
+            {index + 1}
+          </span>
+          <span class={s.body()}
+            ><span class={s.label()}>{item.label}</span><StatusIndicator
+              label={item.stateLabel}
+              tone={item.tone}
+            /><span class={s.note()}>{item.description ?? ""}</span><span
+              class={s.elapsed()}>{item.elapsed ?? ""}</span
+            ></span
+          >
+        {/snippet}
+        {#if onselectedchange}<button
+            type="button"
+            aria-pressed={selected === item.id}
+            class={quietControl({ ink: "foreground", class: s.item() })}
+            onclick={() => onselectedchange?.(item.id)}
+            >{@render content()}</button
+          >
+        {:else}<div class={s.item()}>{@render content()}</div>{/if}
+      </li>
+    {/each}
+  </ol>
+  {#if !stages.length}<p class={s.note()}>{emptyLabel}</p>{/if}
+</div>

package/vendor/ds/kits/app/src/composites/Filter.svelte

@@ -0,0 +1,42 @@
+<!-- One announced active filter, composed from the canonical Base ToggleGroup. -->
+<script lang="ts">
+  import type { FilterContract } from "../core/contracts/filter";
+  import { ToggleGroup } from "@reddb-io/design-system/base";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+  import { filter, type FilterOption } from "./filter.variants";
+
+  interface Props extends FilterContract, Omit<HTMLFieldsetAttributes, keyof FilterContract | "children" | "class" | "name"> {
+    /** Extra classes, merged over the root slot's own, onto the ToggleGroup's fieldset. */
+    class?: string;
+    /** Called with the chosen option's value whenever the active filter changes. */
+    onvaluechange?: (value: string) => void;
+  }
+
+  let {
+    legend,
+    options,
+    value = $bindable(""),
+    name,
+    disabled = false,
+    class: className,
+    listClass,
+    optionClass,
+    onvaluechange,
+    ...rest
+  }: Props = $props();
+  const styles = filter();
+</script>
+
+<ToggleGroup
+  {...rest}
+  {legend}
+  {options}
+  bind:value
+  {name}
+  {disabled}
+  data-filter
+  class={styles.root({ class: className })}
+  listClass={styles.list({ class: listClass })}
+  {optionClass}
+  {onvaluechange}
+/>

package/vendor/ds/kits/app/src/composites/Incentive.svelte

@@ -0,0 +1,61 @@
+<!-- One caller-authored value proposition over canonical media and heading contracts. -->
+<script lang="ts">
+  import type { IncentiveContract } from "../core/contracts/incentive";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    MediaObject,
+    SectionHeading,
+    type SectionHeadingLevel,
+  } from "@reddb-io/design-system/base";
+  import { incentive } from "./incentive.variants";
+
+  interface Props extends IncentiveContract, Omit<HTMLAttributes<HTMLDivElement>, keyof IncentiveContract | "children" | "class" | "title"> {
+    /** Decorative caller-owned artwork; the visible title carries the proposition's meaning. */
+    icon: Snippet;
+    /** Optional links or controls rendered at the end of the heading row. */
+    actions?: Snippet;
+    /** Extra classes, merged over the root slot's own, onto the media-object root. */
+    class?: string;
+  }
+
+  const instanceId = $props.id();
+  const headingId = `${instanceId}-title`;
+  const {
+    title,
+    description,
+    level = 2,
+    icon,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const slots = incentive();
+</script>
+
+{#snippet incentiveIcon()}
+  <div data-incentive-icon aria-hidden="true" class={slots.icon()}>{@render icon()}</div>
+{/snippet}
+
+<MediaObject
+  {...(rest as Record<string, unknown>)}
+  data-incentive
+  role="region"
+  aria-labelledby={headingId}
+  media={incentiveIcon}
+  align="start"
+  gap="md"
+  contentClass={slots.content()}
+  class={slots.root({ class: className })}
+>
+  <SectionHeading
+    {title}
+    {description}
+    {level}
+    {actions}
+    titleId={headingId}
+    size="sm"
+    rule={false}
+    class={slots.heading()}
+  />
+</MediaObject>

package/vendor/ds/kits/app/src/composites/Menubar.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { MenubarContract } from "../core/contracts/menubar";
+  import { Menubar as Bits } from "bits-ui";
+  import {
+    portalAppearance,
+    Button,
+    Icon,
+    dropdownMenuGroups,
+    dropdownMenuItems,
+    type DropdownMenuItem,
+  } from "@reddb-io/design-system/base";
+  import type { MenubarMenu } from "./command-surfaces.behavior";
+  import { menubar, type MenubarSize } from "./menubar.variants";
+
+  interface Props extends MenubarContract {
+    /** Called with the open menu's id whenever a menu opens, closes or changes. */
+    onvaluechange?: (value: string) => void;
+    /** Extra classes, merged over the root slot's own, onto the menubar element. */
+    class?: string;
+  }
+
+  let {
+    label,
+    menus = [],
+    value = $bindable(""),
+    onvaluechange,
+    size = "md",
+    loop = true,
+    sideOffset = 8,
+    collisionPadding = 8,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const slots = $derived(menubar({ size }));
+
+  function choose(item: DropdownMenuItem): void {
+    item.onselect?.();
+  }
+  const portal = portalAppearance(() => value !== "");
+</script>
+
+{#snippet row(item: DropdownMenuItem, hasIcons: boolean)}
+  {#if hasIcons}
+    <span data-menu-item-icon aria-hidden="true" class={slots.icon()}>
+      {#if item.icon !== undefined}<Icon icon={item.icon} {size} aria-hidden="true" />{/if}
+    </span>
+  {/if}
+  {item.label}
+{/snippet}
+
+<Bits.Root bind:value onValueChange={onvaluechange} {loop}>
+  {#snippet child({ props })}
+    <div {...props} {...portal.anchor} data-command-menubar aria-label={label} class={slots.root({ class: className })}>
+      {#each menus as menu (menu.id)}
+        {@const contentId = `${uid}-${menu.id}-menu`}
+        {@const groups = dropdownMenuGroups(menu.items)}
+        {@const hasIcons = dropdownMenuItems(menu.items).some((item) => item.icon !== undefined)}
+        <Bits.Menu value={menu.id}>
+          <Bits.Trigger disabled={menu.disabled}>
+            {#snippet child({ props: triggerProps })}
+              <Button {...triggerProps} data-menubar-trigger variant="ghost" {size}>
+                {menu.label}
+              </Button>
+            {/snippet}
+          </Bits.Trigger>
+
+          <Bits.Portal to={portal.container}>
+            <Bits.Content
+              id={contentId}
+              {sideOffset}
+              avoidCollisions={true}
+              {collisionPadding}
+              loop={true}
+            >
+              {#snippet child({ props: contentProps, wrapperProps })}
+                <div {...wrapperProps} {...portal.attributes}>
+                  <div
+                    {...contentProps}
+                    id={contentId}
+                    data-menubar-surface
+                    aria-label={`${menu.label} commands`}
+                    class={slots.content()}
+                  >
+                    {#each groups as group, index (index)}
+                      {#if index > 0}
+                        <Bits.Separator class={slots.separator()} />
+                      {/if}
+                      {@const headingId = `${contentId}-group-${index}`}
+                      <Bits.Group
+                        class={slots.group()}
+                        aria-labelledby={group.heading === undefined ? undefined : headingId}
+                      >
+                        {#if group.heading !== undefined}
+                          <Bits.GroupHeading id={headingId} class={slots.heading()}>
+                            {group.heading}
+                          </Bits.GroupHeading>
+                        {/if}
+                        {#each group.items as item (item.id)}
+                          <Bits.Item disabled={item.disabled} onSelect={() => choose(item)}>
+                            {#snippet child({ props: itemProps })}
+                              {#if item.href !== undefined}
+                                <a {...itemProps} href={item.href} class={slots.item()}>{@render row(item, hasIcons)}</a>
+                              {:else}
+                                <div {...itemProps} class={slots.item()}>{@render row(item, hasIcons)}</div>
+                              {/if}
+                            {/snippet}
+                          </Bits.Item>
+                        {/each}
+                      </Bits.Group>
+                    {/each}
+                  </div>
+                </div>
+              {/snippet}
+            </Bits.Content>
+          </Bits.Portal>
+        </Bits.Menu>
+      {/each}
+    </div>
+  {/snippet}
+</Bits.Root>

package/vendor/ds/kits/app/src/composites/MultiColumnLayout.svelte

@@ -0,0 +1,51 @@
+<!--
+  A structural two- or three-column arrangement that steps on its own width
+  (ADR 0021). Each region is the canonical Base Stack, so its vertical rhythm
+  remains live under the nearest Density, drawn from the layout tier by default
+  (ADR 0024).
+  The regions deliberately introduce no landmarks: semantics belong to the
+  content a consumer puts in them.
+-->
+<script lang="ts">
+  import type { MultiColumnLayoutContract } from "../core/contracts/multicolumnlayout";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Stack, type StackGap } from "@reddb-io/design-system/base";
+  import { multiColumnLayout } from "./multi-column-layout.variants";
+
+  interface Props extends MultiColumnLayoutContract, Omit<HTMLAttributes<HTMLDivElement>, keyof MultiColumnLayoutContract | "class"> {
+    /** Leading column content. */
+    start?: Snippet;
+    /** Primary column content. */
+    children?: Snippet;
+    /** Optional trailing column; its presence selects the three-column form. */
+    end?: Snippet;
+    /** Extra classes merged onto the layout's container. */
+    class?: string;
+  }
+
+  let {
+    start,
+    children,
+    end,
+    gap = "layout-md",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const columns = $derived(end ? "three" : "two");
+  const slots = $derived(multiColumnLayout({ columns }));
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-multi-column-layout
+  data-columns={columns}
+  class={slots.root({ class: className })}
+>
+  <Stack {gap} class={slots.column({ class: slots.start() })} data-column="start">{@render start?.()}</Stack>
+  <Stack {gap} class={slots.column({ class: slots.main() })} data-column="main">{@render children?.()}</Stack>
+  {#if end}
+    <Stack {gap} class={slots.column({ class: slots.end() })} data-column="end">{@render end()}</Stack>
+  {/if}
+</div>