terminoir 0.9.0 → 0.11.0

package/README.md

@@ -123,6 +123,7 @@ Import from **`terminoir`**:
 | `Button`, `IconButton` | Variants: primary, secondary, ghost, destructive, outline · sizes sm/md/lg · `Button href` renders a link |
 | `Input`, `Textarea`, `Select`, `Checkbox`, `Switch` | `hideLabel` (screen-reader only), `hint`, `error`, `quiet` (borderless until hover/focus, for inline property editing); `Input` `width` for toolbar fields |
 | `Chip`, `Badge` | Status tones; `Chip` `color` dot, `onclick`, removable `onremove` |
+| `StatusChip` | On/off status: green dot + `activeLabel`, or muted `inactiveLabel` (defaults Connected / Not connected) |
 | `Card`, `CardGrid` | Accent tint, badge, chips, progress, meta, hover lift |
 | `Panel` | Glass panel surface |
 | `Dialog` | Modal with focus trap-ish behavior + Escape |
@@ -147,7 +148,8 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | Component | Notes |
 |-----------|--------|
 | `Page`, `PageHeader`, `Section` | Readable page column (`narrow`/`default`/`wide`/`full`, `fill` for canvases); title + meta + actions; titled section with actions |
-| `Stack`, `Inline`, `Spacer`, `Centered` | Vertical / horizontal layout with `--space-*` gaps (`Inline fill` splits evenly); fill space; full-viewport centred column |
+| `PanelHeader` | Heading inside a `Panel`: `logo` (round avatar, initials until `src`), `icon` or `leading` mark, title, description, `actions` (stacks under on phones) |
+| `Stack`, `Inline`, `Spacer`, `Centered` | Vertical / horizontal layout with `--space-*` gaps (`Inline fill` splits evenly, `collapse` stacks on phones); fill space; full-viewport centred column |
 | `Text`, `Prose`, `Disclosure` | Tone/size/weight text; long-form typography; collapsible details |
 | `NavSection` | Sidebar section with title and action |
 | `DataTable` | Columns, `cell` snippet, clickable rows, `hideOnMobile`, empty state |

package/dist/components/Inline.svelte

@@ -10,6 +10,7 @@
     justify = 'start',
     wrap = true,
     fill = false,
+    collapse = false,
     class: className = '',
     children,
     ...rest
@@ -21,6 +22,8 @@
     wrap?: boolean;
     /** Children share the row equally (e.g. two inputs side by side). */
     fill?: boolean;
+    /** Stack the children full-width on narrow screens (phones), e.g. a row of form fields. */
+    collapse?: boolean;
     class?: string;
     children?: Snippet;
   } & Record<string, unknown> = $props();
@@ -30,7 +33,7 @@
 </script>
 
 <div
-  class={cn('terminoir-inline', fill && 'terminoir-inline--fill', className)}
+  class={cn('terminoir-inline', fill && 'terminoir-inline--fill', collapse && 'terminoir-inline--collapse', className)}
   style:gap={`var(--space-${gap})`}
   style:align-items={ALIGN[align]}
   style:justify-content={JUSTIFY[justify]}
@@ -49,4 +52,13 @@
     flex: 1 1 0;
     min-width: 0;
   }
+  @media (max-width: 700px) {
+    .terminoir-inline--collapse {
+      flex-direction: column;
+    }
+    .terminoir-inline--collapse > :global(*) {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+  }
 </style>

package/dist/components/Inline.svelte.d.ts

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     wrap?: boolean;
     /** Children share the row equally (e.g. two inputs side by side). */
     fill?: boolean;
+    /** Stack the children full-width on narrow screens (phones), e.g. a row of form fields. */
+    collapse?: boolean;
     class?: string;
     children?: Snippet;
 } & Record<string, unknown>;

package/dist/components/ListItem.svelte

@@ -10,6 +10,8 @@
     class: className = '',
     leading,
     trailing,
+    expanded,
+    details,
     children,
     ...rest
   }: {
@@ -22,6 +24,10 @@
     class?: string;
     leading?: Snippet;
     trailing?: Snippet;
+    /** For a row that opens `details`: whether they are shown (sets `aria-expanded`). */
+    expanded?: boolean;
+    /** Content under the row, such as the settings it opens. Shown only while `expanded` is not false. */
+    details?: Snippet;
     /** Replaces title/description for custom content. */
     children?: Snippet;
   } & Record<string, unknown> = $props();
@@ -42,12 +48,15 @@
 
 <li class={cn('terminoir-list-item', active && 'terminoir-list-item--active', className)} {...rest}>
   {#if onclick}
-    <button type="button" class="terminoir-list-item__row terminoir-list-item__button terminoir-focusable" {onclick}>
+    <button type="button" class="terminoir-list-item__row terminoir-list-item__button terminoir-focusable" aria-expanded={expanded} {onclick}>
       {@render body()}
     </button>
   {:else}
     <div class="terminoir-list-item__row">{@render body()}</div>
   {/if}
+  {#if details && expanded !== false}
+    <div class="terminoir-list-item__details">{@render details()}</div>
+  {/if}
 </li>
 
 <style>
@@ -103,6 +112,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .terminoir-list-item__details {
+    padding: var(--space-1) 0.85rem var(--space-4) calc(0.85rem + 1.25rem + var(--space-3));
+  }
   .terminoir-list-item__trailing {
     display: inline-flex;
     align-items: center;

package/dist/components/ListItem.svelte.d.ts

@@ -9,6 +9,10 @@ type $$ComponentProps = {
     class?: string;
     leading?: Snippet;
     trailing?: Snippet;
+    /** For a row that opens `details`: whether they are shown (sets `aria-expanded`). */
+    expanded?: boolean;
+    /** Content under the row, such as the settings it opens. Shown only while `expanded` is not false. */
+    details?: Snippet;
     /** Replaces title/description for custom content. */
     children?: Snippet;
 } & Record<string, unknown>;

package/dist/components/MarkdownEditor.svelte

@@ -13,6 +13,7 @@
   import { cn } from '../utils/cn.js';
   import type { PickerOption } from '../utils/componentTypes.js';
   import { moveIndex } from '../utils/listNav.js';
+  import { findDropTarget, moveBlock } from '../utils/markdownEditor/blockDrag.js';
   import { matchBlocks, placeholderPlugin, taskListItemView, tidyMarkdown, type BlockItem } from '../utils/markdownEditor/blocks.js';
   import { triggerPlugin, type Trigger } from '../utils/markdownEditor/triggers.js';
   import { wikilink, wikilinkNode } from '../utils/markdownEditor/wikilink.js';
@@ -21,6 +22,8 @@
   type MenuEntry = { id: string; label: string; icon?: string; iconColor?: string; description?: string; choose: () => void };
 
   const LINK_SEARCH_DEBOUNCE_MS = 120;
+  /** How far left of the text a dragged block can still be dropped (the handle's gutter), and above or below it. */
+  const DROP_MARGIN_PX = 72;
 
   let {
     value,
@@ -50,7 +53,12 @@
   let host = $state<HTMLDivElement>();
   let handle = $state<HTMLDivElement>();
   let editor: Editor | undefined;
+  let ready = $state(false);
   let provider: BlockProvider | undefined;
+  /** Position of the block being dragged by its handle. */
+  let dragFrom: number | null = null;
+  /** Where it would land, as a line in the editor's own coordinates. */
+  let dropLine = $state<{ pos: number; top: number; left: number; width: number } | null>(null);
   /** Normalized markdown of what the editor last loaded or emitted; changes equal to it are not edits. */
   let known = '';
 
@@ -142,10 +150,10 @@
     onchange?.(tidy);
   }
 
-  /** Load outside changes, but never under the writer's caret. */
+  /** Load outside changes, but never under the writer's caret. Also runs once the editor exists, for a value that changed while it was being created. */
   $effect(() => {
     const next = value;
-    if (!editor || tidyMarkdown(next) === known) return;
+    if (!ready || tidyMarkdown(next) === known) return;
     const focused = act((ctx) => ctx.get(editorViewCtx).hasFocus());
     if (focused) return;
     act(replaceAll(next));
@@ -166,6 +174,62 @@
     });
   }
 
+  function nearEditor(event: DragEvent): boolean {
+    const rect = root!.getBoundingClientRect();
+    return (
+      event.clientX >= rect.left - DROP_MARGIN_PX &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top - DROP_MARGIN_PX &&
+      event.clientY <= rect.bottom + DROP_MARGIN_PX
+    );
+  }
+
+  /** Blocks land between their siblings, wherever along the line the pointer is (the gutter included). */
+  function onBlockDragOver(event: DragEvent) {
+    if (dragFrom === null) return;
+    if (!nearEditor(event)) {
+      dropLine = null;
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    const from = dragFrom;
+    const target = act((ctx) => findDropTarget(ctx.get(editorViewCtx), from, event.clientY));
+    const origin = root!.getBoundingClientRect();
+    dropLine = target ? { ...target, top: target.top - origin.top, left: target.left - origin.left } : null;
+  }
+
+  function onBlockDrop(event: DragEvent) {
+    const from = dragFrom;
+    const line = dropLine;
+    if (from === null || !line) return;
+    event.preventDefault();
+    event.stopPropagation();
+    act((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const tr = moveBlock(view.state, from, line.pos);
+      if (tr) view.dispatch(tr.scrollIntoView());
+      view.dragging = null;
+      view.focus();
+    });
+    endBlockDrag();
+  }
+
+  function startBlockDrag() {
+    dragFrom = provider?.active?.$pos.pos ?? null;
+    if (dragFrom === null) return;
+    document.addEventListener('dragover', onBlockDragOver, true);
+    document.addEventListener('drop', onBlockDrop, true);
+  }
+
+  function endBlockDrag() {
+    dragFrom = null;
+    dropLine = null;
+    document.removeEventListener('dragover', onBlockDragOver, true);
+    document.removeEventListener('drop', onBlockDrop, true);
+  }
+
   function onHostClick(event: MouseEvent) {
     const link = (event.target as HTMLElement).closest<HTMLElement>('[data-wikilink]');
     if (link && onlinkopen) onlinkopen(link.dataset.wikilink ?? '');
@@ -204,10 +268,12 @@
       known = tidyMarkdown(act(getMarkdown()) ?? value);
       provider = new BlockProvider({ ctx: created.ctx, content: handle!, root, getOffset: () => 6 });
       provider.update();
+      ready = true;
     });
 
     return () => {
       disposed = true;
+      endBlockDrag();
       provider?.destroy();
       void editor?.destroy();
     };
@@ -218,12 +284,15 @@
   <!-- Link chips are also reachable as text; the click only adds a shortcut to open them. -->
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div bind:this={host} onclick={onHostClick}></div>
-  <div class="terminoir-md__handle" bind:this={handle}>
+  <div class="terminoir-md__handle" bind:this={handle} ondragstart={startBlockDrag} ondragend={endBlockDrag} role="presentation">
     <button type="button" class="terminoir-md__handle-button" aria-label="Add block below" onmousedown={(e) => e.preventDefault()} onclick={addBlockBelow}>
       <NavIcon name="plus" />
     </button>
     <span class="terminoir-md__handle-grip" aria-hidden="true" title="Drag to move"><NavIcon name="grip-vertical" /></span>
   </div>
+  {#if dropLine}
+    <div class="terminoir-md__drop-line" aria-hidden="true" style:top={`${dropLine.top}px`} style:left={`${dropLine.left}px`} style:width={`${dropLine.width}px`}></div>
+  {/if}
 </div>
 
 {#if trigger && (entries.length || trigger.kind === 'link')}
@@ -336,6 +405,15 @@
   .terminoir-md__handle-button:hover,
   .terminoir-md__handle-grip:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
 
+  .terminoir-md__drop-line {
+    position: absolute;
+    height: 2px;
+    margin-top: -1px;
+    border-radius: 1px;
+    background: var(--primary);
+    pointer-events: none;
+  }
+
   .terminoir-md__menu {
     position: fixed;
     z-index: 60;

package/dist/components/PanelHeader.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import Avatar from './Avatar.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  /**
+   * Heading inside a panel or card: a mark, a title, a one-line description and actions on the right.
+   * The mark is `logo` (an image, or the name's initials while there is no `src`), `icon`, or `leading`.
+   */
+  let {
+    title,
+    description,
+    icon,
+    logo,
+    class: className = '',
+    leading,
+    actions,
+  }: {
+    title: string;
+    description?: string;
+    /** Font Awesome name, as for `NavIcon`. */
+    icon?: string;
+    /** A service or brand mark, shown as a round `Avatar`. */
+    logo?: { name: string; src?: string };
+    class?: string;
+    /** Custom mark; overrides `logo` and `icon`. */
+    leading?: Snippet;
+    /** Status chips or buttons aligned to the right. */
+    actions?: Snippet;
+  } = $props();
+</script>
+
+<header class={cn('terminoir-panel-header', className)}>
+  {#if leading}
+    <span class="terminoir-panel-header__mark">{@render leading()}</span>
+  {:else if logo}
+    <Avatar name={logo.name} src={logo.src} size={36} />
+  {:else if icon}
+    <span class="terminoir-panel-header__mark"><NavIcon name={icon} /></span>
+  {/if}
+  <div class="terminoir-panel-header__text">
+    <h3 class="terminoir-panel-header__title">{title}</h3>
+    {#if description}<p class="terminoir-panel-header__description">{description}</p>{/if}
+  </div>
+  {#if actions}
+    <div class="terminoir-panel-header__actions">{@render actions()}</div>
+  {/if}
+</header>
+
+<style>
+  .terminoir-panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-width: 0;
+  }
+  .terminoir-panel-header__mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 1.25rem;
+  }
+  .terminoir-panel-header__text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+  .terminoir-panel-header__title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+  .terminoir-panel-header__description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.8125rem;
+    line-height: 1.45;
+  }
+  .terminoir-panel-header__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+    flex-shrink: 0;
+  }
+  @media (max-width: 700px) {
+    .terminoir-panel-header { flex-wrap: wrap; }
+    .terminoir-panel-header__actions { width: 100%; }
+  }
+</style>

package/dist/components/PanelHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    /** Font Awesome name, as for `NavIcon`. */
+    icon?: string;
+    /** A service or brand mark, shown as a round `Avatar`. */
+    logo?: {
+        name: string;
+        src?: string;
+    };
+    class?: string;
+    /** Custom mark; overrides `logo` and `icon`. */
+    leading?: Snippet;
+    /** Status chips or buttons aligned to the right. */
+    actions?: Snippet;
+};
+declare const PanelHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelHeader = ReturnType<typeof PanelHeader>;
+export default PanelHeader;

package/dist/components/StatusChip.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Chip from './Chip.svelte';
+
+  /** On/off status: `active` shows a green dot and `activeLabel`; otherwise a muted `inactiveLabel`. */
+  let {
+    active,
+    activeLabel = 'Connected',
+    inactiveLabel = 'Not connected',
+    class: className = '',
+    ...rest
+  }: {
+    active: boolean;
+    activeLabel?: string;
+    inactiveLabel?: string;
+    class?: string;
+  } & Record<string, unknown> = $props();
+</script>
+
+<Chip tone={active ? 'default' : 'done'} color={active ? 'green' : undefined} class={className} {...rest}>
+  {active ? activeLabel : inactiveLabel}
+</Chip>

package/dist/components/StatusChip.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    active: boolean;
+    activeLabel?: string;
+    inactiveLabel?: string;
+    class?: string;
+} & Record<string, unknown>;
+declare const StatusChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatusChip = ReturnType<typeof StatusChip>;
+export default StatusChip;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Panel } from './components/Panel.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as StatusChip } from './components/StatusChip.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
@@ -41,6 +42,7 @@ export { default as Toaster } from './components/Toaster.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Page } from './components/Page.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as PanelHeader } from './components/PanelHeader.svelte';
 export { default as Section } from './components/Section.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Inline } from './components/Inline.svelte';

package/dist/index.js

@@ -32,6 +32,7 @@ export { default as Panel } from './components/Panel.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as StatusChip } from './components/StatusChip.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
@@ -40,6 +41,7 @@ export { default as Tooltip } from './components/Tooltip.svelte';
 // Layout
 export { default as Page } from './components/Page.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as PanelHeader } from './components/PanelHeader.svelte';
 export { default as Section } from './components/Section.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Inline } from './components/Inline.svelte';

package/dist/utils/markdownEditor/blockDrag.d.ts

@@ -0,0 +1,21 @@
+/** Moving a block by its drag handle: where it lands, and the transaction that moves it. */
+import type { EditorState, Transaction } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+type Span = {
+    top: number;
+    bottom: number;
+};
+/** A place a dragged block can land: document position, and the line drawn there. */
+export type DropTarget = {
+    pos: number;
+    top: number;
+    left: number;
+    width: number;
+};
+/** Index of the gap (0 = before the first block, n = after the last) nearest to `y`. */
+export declare function dropGap(blocks: readonly Span[], y: number): number;
+/** Moves the node at `from` to document position `to`; null when that would leave it in place. */
+export declare function moveBlock(state: EditorState, from: number, to: number): Transaction | null;
+/** The gap among the dragged block's siblings closest to `y`, in viewport coordinates. */
+export declare function findDropTarget(view: EditorView, from: number, y: number): DropTarget | null;
+export {};

package/dist/utils/markdownEditor/blockDrag.js

@@ -0,0 +1,34 @@
+/** Index of the gap (0 = before the first block, n = after the last) nearest to `y`. */
+export function dropGap(blocks, y) {
+    const index = blocks.findIndex((block) => y < (block.top + block.bottom) / 2);
+    return index === -1 ? blocks.length : index;
+}
+/** Moves the node at `from` to document position `to`; null when that would leave it in place. */
+export function moveBlock(state, from, to) {
+    const node = state.doc.nodeAt(from);
+    if (!node || (to >= from && to <= from + node.nodeSize))
+        return null;
+    const tr = state.tr.delete(from, from + node.nodeSize);
+    return tr.insert(tr.mapping.map(to), node);
+}
+/** The gap among the dragged block's siblings closest to `y`, in viewport coordinates. */
+export function findDropTarget(view, from, y) {
+    const $from = view.state.doc.resolve(from);
+    const start = $from.start();
+    const siblings = [];
+    $from.parent.forEach((_, offset) => {
+        const dom = view.nodeDOM(start + offset);
+        if (dom instanceof HTMLElement)
+            siblings.push({ pos: start + offset, rect: dom.getBoundingClientRect() });
+    });
+    if (!siblings.length)
+        return null;
+    const gap = dropGap(siblings.map((s) => s.rect), y);
+    const { left, width } = siblings[0].rect;
+    if (gap < siblings.length) {
+        const { pos, rect } = siblings[gap];
+        const above = siblings[gap - 1]?.rect.bottom ?? rect.top;
+        return { pos, top: (above + rect.top) / 2, left, width };
+    }
+    return { pos: start + $from.parent.content.size, top: siblings[siblings.length - 1].rect.bottom, left, width };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",