terminoir 0.13.1 → 0.15.0

package/README.md

@@ -136,7 +136,7 @@ Import from **`terminoir`**:
 | `AppShell` | `header` + `sidebar` snippets; mobile drawer; `fitViewport` (main scrolls, for canvases), `flush`, `headerMode="mobile"`; `toggleSidebar()` / `closeMobileDrawer()` via `bind:this` |
 | `AppShellNavLink` | `href?`, `active`, nav row with active highlight |
 | `SettingsPage`, `SettingsSection` | Settings layout — intro + stacked glass section cards |
-| `EmptyState`, `Skeleton`, `Avatar`, `Kbd` | Presentation |
+| `EmptyState`, `Skeleton`, `Avatar`, `Kbd` | Presentation; `EmptyState framed={false}` inside a Panel or card |
 | `FontPicker` | UI + code font lists, lazy `@fontsource`, persisted per `appId` |
 | `NavIcon` | `name`, optional `color` — Font Awesome 6 (`fa-*` or plain ids like `inbox`); host app loads FA CSS |
 | `IconField` | `bind:value` icon id picker (`ICON_PICKER_OPTIONS`); `compact` opens the grid in a popover |
@@ -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/css/glass.css

@@ -157,7 +157,7 @@
 .glass-panel {
   background: var(--glass-panel-bg);
   border-radius: var(--radius-glass);
-  padding: var(--space-5);
+  padding: var(--space-4);
 }
 
 .glass-popover {

package/css/shell.css

@@ -4,12 +4,12 @@
  */
 
 .terminoir-shell {
-  --terminoir-sidebar-width: 260px;
+  --terminoir-sidebar-width: 236px;
   --terminoir-sidebar-min: 180px;
   --terminoir-sidebar-max: 420px;
   --terminoir-shell-duration: var(--duration-normal);
   display: grid;
-  grid-template-columns: var(--terminoir-sidebar-width, 260px) minmax(0, 1fr);
+  grid-template-columns: var(--terminoir-sidebar-width, 236px) minmax(0, 1fr);
   min-height: 100dvh;
   transition: grid-template-columns var(--terminoir-shell-duration) var(--ease-out-soft);
 }
@@ -34,12 +34,12 @@
 }
 
 .terminoir-shell__sidebar-inner {
-  width: var(--terminoir-sidebar-width, 260px);
+  width: var(--terminoir-sidebar-width, 236px);
   height: 100%;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
-  padding: var(--space-4);
+  padding: var(--space-3);
   gap: var(--space-2);
 }
 
@@ -48,7 +48,7 @@
   align-items: center;
   gap: var(--space-2);
   width: 100%;
-  padding: 0.5rem 0.65rem;
+  padding: 0.35rem 0.6rem;
   border: 1px solid transparent;
   border-radius: var(--radius-control);
   background: transparent;

package/dist/components/AppShell.svelte

@@ -6,7 +6,7 @@
 
   let {
     appId = 'app',
-    defaultWidth = 260,
+    defaultWidth = 236,
     minWidth = 180,
     maxWidth = 420,
     fitViewport = false,

package/dist/components/DataTable.svelte

@@ -97,7 +97,7 @@
   th {
     position: sticky;
     top: 0;
-    padding: 0.55rem 0.85rem;
+    padding: 0.35rem 0.75rem;
     text-align: left;
     font-size: 0.6875rem;
     font-weight: 600;
@@ -109,7 +109,7 @@
     white-space: nowrap;
   }
   td {
-    padding: 0.55rem 0.85rem;
+    padding: 0.35rem 0.75rem;
     border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
     vertical-align: middle;
     max-width: 0;

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/EmptyState.svelte

@@ -5,17 +5,20 @@
   let {
     title,
     description,
+    framed = true,
     class: className = '',
     children,
   }: {
     title: string;
     description?: string;
+    /** Glass panel around it. Set false inside a Panel or card, so the frames don't nest. */
+    framed?: boolean;
     class?: string;
     children?: Snippet;
   } = $props();
 </script>
 
-<div class={cn('terminoir-empty glass-panel', className)} role="status">
+<div class={cn('terminoir-empty', framed ? 'glass-panel' : 'terminoir-empty--bare', className)} role="status">
   <h2 class="terminoir-empty__title">{title}</h2>
   {#if description}<p class="terminoir-empty__desc">{description}</p>{/if}
   {@render children?.()}
@@ -23,17 +26,21 @@
 
 <style>
   .terminoir-empty {
-    padding: var(--space-8);
+    padding: var(--space-5) var(--space-4);
     text-align: center;
   }
 
+  .terminoir-empty--bare {
+    padding: var(--space-3) var(--space-2);
+  }
+
   .terminoir-empty__title {
     margin: 0 0 var(--space-2);
     font-size: 1.125rem;
   }
 
   .terminoir-empty__desc {
-    margin: 0 0 var(--space-4);
+    margin: 0;
     color: var(--muted-foreground);
   }
 </style>

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

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     title: string;
     description?: string;
+    /** Glass panel around it. Set false inside a Panel or card, so the frames don't nest. */
+    framed?: boolean;
     class?: string;
     children?: Snippet;
 };

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>
@@ -66,8 +77,8 @@
     align-items: center;
     gap: var(--space-3);
     width: 100%;
-    min-height: 2.75rem;
-    padding: 0.5rem 0.85rem;
+    min-height: 2.25rem;
+    padding: 0.35rem 0.75rem;
     box-sizing: border-box;
   }
   .terminoir-list-item__button {
@@ -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);
@@ -113,7 +126,7 @@
     white-space: nowrap;
   }
   .terminoir-list-item__details {
-    padding: var(--space-1) 0.85rem var(--space-4) calc(0.85rem + 1.25rem + var(--space-3));
+    padding: var(--space-1) 0.75rem var(--space-3) calc(0.75rem + 1.25rem + var(--space-3));
   }
   .terminoir-list-item__trailing {
     display: inline-flex;

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/Page.svelte

@@ -26,10 +26,10 @@
   .terminoir-page {
     display: flex;
     flex-direction: column;
-    gap: var(--space-6);
+    gap: var(--space-4);
     width: 100%;
     margin-inline: auto;
-    padding: var(--space-6) var(--space-6) var(--space-10);
+    padding: var(--space-4) var(--space-5) var(--space-8);
     box-sizing: border-box;
     min-width: 0;
   }
@@ -46,8 +46,8 @@
   }
   @media (max-width: 700px) {
     .terminoir-page:not(.terminoir-page--fill) {
-      padding: var(--space-4) var(--space-4) var(--space-8);
-      gap: var(--space-5);
+      padding: var(--space-3) var(--space-3) var(--space-6);
+      gap: var(--space-4);
     }
   }
 </style>

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/components/Tabs.svelte

@@ -77,6 +77,6 @@
   }
 
   .terminoir-tabs__panel {
-    padding-top: var(--space-4);
+    padding-top: var(--space-3);
   }
 </style>

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.13.1",
+  "version": "0.15.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",