terminoir 0.14.0 → 0.15.0

package/README.md

@@ -159,6 +159,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `PropertyRow` | Compact icon + label row for inline-edited values (record properties); hover highlights the row |
 | `ChipSelect`, `DateField` | Value shown as a coloured `Chip` that opens a grouped option list (`ChipSelectOption`, `ChipSelectGroup`); date shown as "Today" / "Tomorrow" / weekday / "Nov 12" (`dayLabel`), `deadline` tints past and today, opens the native picker, Backspace clears |
 | `TitleInput`, `FileButton`, `RadioCards` | Borderless heading input; button that opens a file picker; card-style radio group |
+| `EditableText` | A name you click to rename in place (Enter or click away saves, Escape cancels); `PageHeader` and `ListItem` take `onrename` for the same |
 | `CalendarGrid` | Week (scrolling hours) and month grids; `CalendarEvent` with `muted`/`color`; helpers `calendarRange`, `shiftCalendar`, `eventsOn` |
 | `CanvasStage`, `DocumentViewer` | Full-bleed canvas host with floating overlay and side panel; paged viewer with toolbar and highlight marks |
 | `AccentSwatches` | `bind:value` accent hex from `ACCENT_PALETTE` |

package/dist/components/EditableText.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { renamedValue } from '../utils/rename.js';
+
+  let {
+    value,
+    label,
+    onrename,
+    class: className = '',
+  }: {
+    /** The current name, shown as text until clicked. */
+    value: string;
+    /** Accessible name of the field while editing, such as "Dashboard name". */
+    label: string;
+    /** Called with the trimmed new name; not called for a blank or unchanged name. */
+    onrename: (value: string) => void | Promise<void>;
+    class?: string;
+  } = $props();
+
+  let editing = $state(false);
+  let draft = $state('');
+  /** The name being saved, shown until `onrename` settles. */
+  let saving = $state<string | null>(null);
+  let trigger = $state<HTMLButtonElement>();
+
+  function focusAndSelect(node: HTMLInputElement) {
+    node.focus();
+    node.select();
+  }
+
+  function start() {
+    draft = value;
+    editing = true;
+  }
+
+  async function stop(refocus: boolean) {
+    editing = false;
+    if (refocus) {
+      await tick();
+      trigger?.focus();
+    }
+  }
+
+  async function commit(refocus: boolean) {
+    if (!editing) return;
+    const next = renamedValue(draft, value);
+    void stop(refocus);
+    if (next === null) return;
+    saving = next;
+    try {
+      await onrename(next);
+    } finally {
+      saving = null;
+    }
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      void commit(true);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      void stop(true);
+    }
+  }
+</script>
+
+{#if editing}
+  <input
+    class={cn('terminoir-editable-text terminoir-editable-text--input', className)}
+    aria-label={label}
+    autocomplete="off"
+    bind:value={draft}
+    use:focusAndSelect
+    {onkeydown}
+    onblur={() => void commit(false)}
+  />
+{:else}
+  <button
+    bind:this={trigger}
+    type="button"
+    class={cn('terminoir-editable-text', className)}
+    title="Click to rename"
+    onclick={start}
+  >{saving ?? value}</button>
+{/if}
+
+<style>
+  .terminoir-editable-text {
+    display: inline-block;
+    max-width: 100%;
+    margin: 0 -0.25rem;
+    padding: 0 0.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    text-align: start;
+    vertical-align: bottom;
+    box-sizing: content-box;
+  }
+  button.terminoir-editable-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: inherit;
+    overflow-wrap: inherit;
+    cursor: text;
+  }
+  button.terminoir-editable-text:hover { border-color: color-mix(in srgb, var(--foreground) 10%, transparent); }
+  /* The ring is the border, so it is not clipped inside truncating rows. */
+  .terminoir-editable-text:focus-visible { outline: none; box-shadow: none; border-color: var(--ring); }
+  .terminoir-editable-text--input {
+    min-width: 6ch;
+    field-sizing: content;
+    border-color: var(--ring);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    /** The current name, shown as text until clicked. */
+    value: string;
+    /** Accessible name of the field while editing, such as "Dashboard name". */
+    label: string;
+    /** Called with the trimmed new name; not called for a blank or unchanged name. */
+    onrename: (value: string) => void | Promise<void>;
+    class?: string;
+};
+declare const EditableText: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableText = ReturnType<typeof EditableText>;
+export default EditableText;

package/dist/components/ListItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils/cn.js';
+  import EditableText from './EditableText.svelte';
 
   let {
     title,
@@ -13,6 +14,8 @@
     expanded,
     details,
     children,
+    onrename,
+    renameLabel = 'Name',
     ...rest
   }: {
     title?: string;
@@ -30,6 +33,10 @@
     details?: Snippet;
     /** Replaces title/description for custom content. */
     children?: Snippet;
+    /** Makes the title editable in place (rows without `onclick` only). */
+    onrename?: (title: string) => void | Promise<void>;
+    /** Accessible name of the title field while renaming. */
+    renameLabel?: string;
   } & Record<string, unknown> = $props();
 </script>
 
@@ -39,7 +46,11 @@
     {#if children}
       {@render children()}
     {:else}
-      {#if title}<span class="terminoir-list-item__title">{title}</span>{/if}
+      {#if title}
+        <span class={cn('terminoir-list-item__title', onrename && !onclick && 'terminoir-list-item__title--editable')}>
+          {#if onrename && !onclick}<EditableText value={title} label={renameLabel} {onrename} />{:else}{title}{/if}
+        </span>
+      {/if}
       {#if description}<span class="terminoir-list-item__description">{description}</span>{/if}
     {/if}
   </span>
@@ -105,6 +116,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Room for the rename field's border, which the truncating title would clip. */
+  .terminoir-list-item__title--editable { padding: 1px 0.3rem; margin: -1px -0.3rem; }
   .terminoir-list-item__description {
     font-size: 0.75rem;
     color: var(--muted-foreground);

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

@@ -15,6 +15,10 @@ type $$ComponentProps = {
     details?: Snippet;
     /** Replaces title/description for custom content. */
     children?: Snippet;
+    /** Makes the title editable in place (rows without `onclick` only). */
+    onrename?: (title: string) => void | Promise<void>;
+    /** Accessible name of the title field while renaming. */
+    renameLabel?: string;
 } & Record<string, unknown>;
 declare const ListItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;

package/dist/components/PageHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils/cn.js';
+  import EditableText from './EditableText.svelte';
 
   let {
     title,
@@ -9,6 +10,8 @@
     leading,
     meta,
     actions,
+    onrename,
+    renameLabel = 'Title',
   }: {
     title: string;
     description?: string;
@@ -19,6 +22,10 @@
     meta?: Snippet;
     /** Buttons aligned to the right. */
     actions?: Snippet;
+    /** Makes the title editable in place: click it, type, Enter or click away to save, Escape to cancel. */
+    onrename?: (title: string) => void | Promise<void>;
+    /** Accessible name of the title field while renaming. */
+    renameLabel?: string;
   } = $props();
 </script>
 
@@ -27,7 +34,9 @@
     <div class="terminoir-page-header__leading">{@render leading()}</div>
   {/if}
   <div class="terminoir-page-header__text">
-    <h1 class="terminoir-page-header__title">{title}</h1>
+    <h1 class="terminoir-page-header__title">
+      {#if onrename}<EditableText value={title} label={renameLabel} {onrename} />{:else}{title}{/if}
+    </h1>
     {#if meta}<div class="terminoir-page-header__meta">{@render meta()}</div>{/if}
     {#if description}<p class="terminoir-page-header__description">{description}</p>{/if}
   </div>

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

@@ -9,6 +9,10 @@ type $$ComponentProps = {
     meta?: Snippet;
     /** Buttons aligned to the right. */
     actions?: Snippet;
+    /** Makes the title editable in place: click it, type, Enter or click away to save, Escape to cancel. */
+    onrename?: (title: string) => void | Promise<void>;
+    /** Accessible name of the title field while renaming. */
+    renameLabel?: string;
 };
 declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type PageHeader = ReturnType<typeof PageHeader>;

package/dist/index.d.ts

@@ -84,6 +84,7 @@ export { default as SearchPicker } from './components/SearchPicker.svelte';
 export { default as MarkdownEditor } from './components/MarkdownEditor.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';
+export { default as EditableText } from './components/EditableText.svelte';
 export type { PickerOption } from './utils/componentTypes.js';
 export { default as RadioCards } from './components/RadioCards.svelte';
 export type { RadioCardOption } from './utils/componentTypes.js';

package/dist/index.js

@@ -76,6 +76,7 @@ export { default as SearchPicker } from './components/SearchPicker.svelte';
 export { default as MarkdownEditor } from './components/MarkdownEditor.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';
+export { default as EditableText } from './components/EditableText.svelte';
 export { default as RadioCards } from './components/RadioCards.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 // Overlays

package/dist/utils/rename.d.ts

@@ -0,0 +1,2 @@
+/** The name to save from an inline rename draft, or null when nothing should change (blank or unchanged). */
+export declare function renamedValue(draft: string, current: string): string | null;

package/dist/utils/rename.js

@@ -0,0 +1,5 @@
+/** The name to save from an inline rename draft, or null when nothing should change (blank or unchanged). */
+export function renamedValue(draft, current) {
+    const next = draft.trim();
+    return next && next !== current ? next : null;
+}

package/package.json

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