terminoir 0.16.0 → 0.18.0

package/README.md

@@ -140,6 +140,7 @@ Import from **`terminoir`**:
 | `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 |
+| `IconColorField` | One square button showing an icon in its colour; opens colour swatches and an icon grid (e.g. beside a name field or page title) |
 
 ### App kit (0.5)
 
@@ -156,6 +157,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `List`, `ListItem`, `DescriptionList`, `FormRow` | Rows with leading/trailing slots; key–value pairs; label-left form rows |
 | `SearchPicker` | Debounced async combobox (`search(q)`), keyboard navigation; grows to fill a row after chips |
 | `MarkdownEditor` | Notion-style editor that reads and writes markdown (Milkdown): `/` block menu, block handle (`+` and drag to move), checklists, markdown shortcuts, undo. `linkSearch` enables `[[` links written as `[[id\|label]]`; `onlinkopen` gets the clicked target. Outside `value` changes apply while it is not focused; `onchange` fires only after a user edit |
+| `AsideLayout` | Main column with a collapsible right-hand panel (e.g. a record's properties); remembers open/closed, stacks inline under the header on phones |
 | `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 |

package/dist/components/AsideLayout.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { readStorage, writeStorage } from '../utils/storage.js';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    label,
+    appId = 'app',
+    storageKey = 'aside-open',
+    class: className = '',
+    header,
+    aside,
+    children,
+  }: {
+    /** Names the side panel, e.g. "Properties"; shown as its heading and on the toggle. */
+    label: string;
+    appId?: string;
+    /** Where the open/closed choice is remembered; give each kind of screen its own key. */
+    storageKey?: string;
+    class?: string;
+    /** Top of the main column (toolbar, title). On phones it stays above the panel. */
+    header?: Snippet;
+    /** Panel content: a right-hand column on wide screens, inline under `header` on phones. */
+    aside?: Snippet;
+    children?: Snippet;
+  } = $props();
+
+  let open = $state(true);
+
+  $effect.pre(() => {
+    open = readStorage(appId, storageKey, 'true') !== 'false';
+  });
+
+  function toggle() {
+    open = !open;
+    writeStorage(appId, storageKey, String(open));
+  }
+</script>
+
+<div class={cn('terminoir-aside-layout', !open && 'terminoir-aside-layout--collapsed', className)}>
+  <div class="terminoir-aside-layout__header">
+    {@render header?.()}
+  </div>
+  <aside class="terminoir-aside-layout__aside" aria-label={label}>
+    <div class="terminoir-aside-layout__aside-top">
+      <span class="terminoir-aside-layout__label">{label}</span>
+      <button
+        type="button"
+        class="terminoir-btn terminoir-btn--sm terminoir-btn--ghost terminoir-focusable glass-interactive terminoir-aside-layout__toggle"
+        aria-label={open ? `Hide ${label.toLowerCase()}` : `Show ${label.toLowerCase()}`}
+        aria-expanded={open}
+        title={open ? `Hide ${label.toLowerCase()}` : `Show ${label.toLowerCase()}`}
+        onclick={toggle}
+      >
+        <NavIcon name={open ? 'angles-right' : 'angles-left'} />
+      </button>
+    </div>
+    <div class="terminoir-aside-layout__aside-body">
+      {@render aside?.()}
+    </div>
+  </aside>
+  <div class="terminoir-aside-layout__main">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .terminoir-aside-layout {
+    --terminoir-aside-width: 20rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--terminoir-aside-width);
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      'header aside'
+      'main aside';
+    column-gap: var(--space-6);
+    row-gap: var(--space-4);
+    min-width: 0;
+  }
+  .terminoir-aside-layout--collapsed {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .terminoir-aside-layout__header,
+  .terminoir-aside-layout__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-width: 0;
+  }
+  .terminoir-aside-layout__header { grid-area: header; }
+  .terminoir-aside-layout__main { grid-area: main; }
+  .terminoir-aside-layout__aside {
+    grid-area: aside;
+    align-self: start;
+    position: sticky;
+    top: var(--space-4);
+    max-height: calc(100dvh - var(--space-8));
+    overflow-y: auto;
+    min-width: 0;
+    padding-left: var(--space-4);
+    border-left: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .terminoir-aside-layout__aside-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+  .terminoir-aside-layout__label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--muted-foreground);
+  }
+  .terminoir-aside-layout--collapsed .terminoir-aside-layout__aside {
+    padding-left: var(--space-2);
+  }
+  .terminoir-aside-layout--collapsed .terminoir-aside-layout__label,
+  .terminoir-aside-layout--collapsed .terminoir-aside-layout__aside-body {
+    display: none;
+  }
+
+  /* Phones: one column, the panel inline under the header and always open. */
+  @media (max-width: 768px) {
+    .terminoir-aside-layout,
+    .terminoir-aside-layout--collapsed {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto;
+      grid-template-areas: 'header' 'aside' 'main';
+    }
+    .terminoir-aside-layout__aside,
+    .terminoir-aside-layout--collapsed .terminoir-aside-layout__aside {
+      position: static;
+      max-height: none;
+      overflow: visible;
+      padding-left: 0;
+      border-left: 0;
+    }
+    .terminoir-aside-layout__aside-top { display: none; }
+    .terminoir-aside-layout--collapsed .terminoir-aside-layout__aside-body { display: block; }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Names the side panel, e.g. "Properties"; shown as its heading and on the toggle. */
+    label: string;
+    appId?: string;
+    /** Where the open/closed choice is remembered; give each kind of screen its own key. */
+    storageKey?: string;
+    class?: string;
+    /** Top of the main column (toolbar, title). On phones it stays above the panel. */
+    header?: Snippet;
+    /** Panel content: a right-hand column on wide screens, inline under `header` on phones. */
+    aside?: Snippet;
+    children?: Snippet;
+};
+declare const AsideLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type AsideLayout = ReturnType<typeof AsideLayout>;
+export default AsideLayout;

package/dist/components/IconColorField.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { ICON_PICKER_OPTIONS } from '../utils/icons.js';
+  import NavIcon from './NavIcon.svelte';
+
+  type ColorChoice = { id: string; label: string; /** CSS colour shown for it. */ css: string };
+
+  let {
+    label = 'Icon',
+    icon = $bindable(''),
+    color = $bindable(''),
+    colors,
+    options = ICON_PICKER_OPTIONS,
+    noneColor = 'var(--muted-foreground)',
+    quiet = false,
+    onchange,
+    class: className = '',
+  }: {
+    /** Accessible name of the button and its popover. */
+    label?: string;
+    /** NavIcon name; a circle shows while empty. */
+    icon?: string;
+    /** A `colors` id; empty for no colour. */
+    color?: string;
+    colors: ColorChoice[];
+    options?: ReadonlyArray<{ id: string; label: string }>;
+    /** How the icon looks with no colour picked. */
+    noneColor?: string;
+    /** Borderless until hovered, e.g. beside a page title. */
+    quiet?: boolean;
+    /** Called after a pick, with both values. */
+    onchange?: (value: { icon: string; color: string }) => void;
+    class?: string;
+  } = $props();
+
+  let open = $state(false);
+  let root: HTMLDivElement | undefined = $state();
+  let trigger: HTMLButtonElement | undefined = $state();
+  let popover: HTMLDivElement | undefined = $state();
+
+  const shownColor = $derived(colors.find((c) => c.id === color));
+  const css = $derived(shownColor?.css ?? noneColor);
+  const iconLabel = $derived(options.find((o) => o.id === icon)?.label ?? icon ?? 'None');
+
+  async function show() {
+    open = true;
+    await tick();
+    popover?.querySelector<HTMLElement>('[aria-checked="true"]')?.focus();
+  }
+
+  function hide() {
+    open = false;
+    trigger?.focus();
+  }
+
+  function pickColor(id: string) {
+    color = id;
+    onchange?.({ icon, color });
+  }
+
+  function pickIcon(id: string) {
+    icon = id;
+    onchange?.({ icon, color });
+    hide();
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (root && !root.contains(event.target as Node)) open = false;
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.stopPropagation();
+      hide();
+    };
+    document.addEventListener('pointerdown', onPointer);
+    document.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('pointerdown', onPointer);
+      document.removeEventListener('keydown', onKey, true);
+    };
+  });
+</script>
+
+<div bind:this={root} class={cn('terminoir-icon-color', className)}>
+  <button
+    bind:this={trigger}
+    type="button"
+    class={cn('terminoir-icon-color__trigger terminoir-focusable', quiet && 'terminoir-icon-color__trigger--quiet')}
+    aria-label={`${label}: ${iconLabel}, ${shownColor?.label ?? 'no colour'}`}
+    title={label}
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    onclick={() => (open ? hide() : void show())}
+  >
+    <NavIcon name={icon || 'circle'} color={css} />
+  </button>
+  {#if open}
+    <div bind:this={popover} class="terminoir-icon-color__popover glass-popover" role="dialog" aria-label={label}>
+      <div class="terminoir-icon-color__swatches" role="radiogroup" aria-label="Colour">
+        {#each [{ id: '', label: 'No colour', css: noneColor }, ...colors] as choice (choice.id)}
+          <button
+            type="button"
+            class="terminoir-icon-color__swatch terminoir-focusable"
+            class:terminoir-icon-color__swatch--none={!choice.id}
+            role="radio"
+            aria-checked={color === choice.id}
+            aria-label={choice.label}
+            title={choice.label}
+            style:--swatch={choice.css}
+            onclick={() => pickColor(choice.id)}
+          ></button>
+        {/each}
+      </div>
+      <div class="terminoir-icon-field__grid" role="radiogroup" aria-label="Icon">
+        {#each options as option (option.id)}
+          <button
+            type="button"
+            class="terminoir-icon-field__option terminoir-focusable"
+            class:terminoir-icon-field__option--selected={icon === option.id}
+            role="radio"
+            aria-checked={icon === option.id}
+            aria-label={option.label}
+            title={option.label}
+            onclick={() => pickIcon(option.id)}
+          >
+            <NavIcon name={option.id} color={css} />
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* A fixed square: it never grows, even in an Inline `fill` row (the `div` outranks that rule). */
+  div.terminoir-icon-color {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+  }
+  .terminoir-icon-color__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    border: 1px solid var(--glass-border, var(--border));
+    border-radius: var(--radius-control);
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+    font-size: 1.05rem;
+    cursor: pointer;
+  }
+  .terminoir-icon-color__trigger:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-icon-color__trigger--quiet {
+    width: 2rem;
+    height: 2rem;
+    border-color: transparent;
+    background: transparent;
+    font-size: inherit;
+  }
+  .terminoir-icon-color__popover {
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    left: 0;
+    z-index: 40;
+    width: max-content;
+    max-width: min(18rem, calc(100vw - 2rem));
+    padding: var(--space-2);
+  }
+  .terminoir-icon-color__popover .terminoir-icon-field__grid {
+    grid-template-columns: repeat(6, 2.5rem);
+  }
+  .terminoir-icon-color__swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding: var(--space-1);
+  }
+  .terminoir-icon-color__swatch {
+    width: 1.35rem;
+    height: 1.35rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: var(--swatch);
+    cursor: pointer;
+  }
+  .terminoir-icon-color__swatch--none {
+    background: transparent;
+    box-shadow: inset 0 0 0 2px var(--swatch);
+  }
+  .terminoir-icon-color__swatch[aria-checked='true'] {
+    outline: 2px solid var(--foreground);
+    outline-offset: 2px;
+  }
+</style>

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

@@ -0,0 +1,31 @@
+type ColorChoice = {
+    id: string;
+    label: string; /** CSS colour shown for it. */
+    css: string;
+};
+type $$ComponentProps = {
+    /** Accessible name of the button and its popover. */
+    label?: string;
+    /** NavIcon name; a circle shows while empty. */
+    icon?: string;
+    /** A `colors` id; empty for no colour. */
+    color?: string;
+    colors: ColorChoice[];
+    options?: ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+    /** How the icon looks with no colour picked. */
+    noneColor?: string;
+    /** Borderless until hovered, e.g. beside a page title. */
+    quiet?: boolean;
+    /** Called after a pick, with both values. */
+    onchange?: (value: {
+        icon: string;
+        color: string;
+    }) => void;
+    class?: string;
+};
+declare const IconColorField: import("svelte").Component<$$ComponentProps, {}, "icon" | "color">;
+type IconColorField = ReturnType<typeof IconColorField>;
+export default IconColorField;

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as FontPicker } from './components/FontPicker.svelte';
 export { default as NavIcon } from './components/NavIcon.svelte';
 export { default as IconField } from './components/IconField.svelte';
+export { default as IconColorField } from './components/IconColorField.svelte';
 export { default as AccentSwatches } from './components/AccentSwatches.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
@@ -42,6 +43,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 AsideLayout } from './components/AsideLayout.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';

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as FontPicker } from './components/FontPicker.svelte';
 export { default as NavIcon } from './components/NavIcon.svelte';
 export { default as IconField } from './components/IconField.svelte';
+export { default as IconColorField } from './components/IconColorField.svelte';
 export { default as AccentSwatches } from './components/AccentSwatches.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
@@ -41,6 +42,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 AsideLayout } from './components/AsideLayout.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';

package/package.json

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