terminoir 0.17.0 → 0.18.1

package/README.md

@@ -157,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,146 @@
+<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';
+    /* Wide enough for a MarkdownEditor block handle, which flips to the right of the text when the left is tight. */
+    column-gap: calc(var(--space-12) + var(--space-2));
+    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/MarkdownEditor.svelte

@@ -22,7 +22,7 @@
   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. */
+  /** How far beside the text a dragged block can still be dropped (the handle's gutter; it flips right when the left is tight), and above or below it. */
   const DROP_MARGIN_PX = 72;
 
   let {
@@ -178,7 +178,7 @@
     const rect = root!.getBoundingClientRect();
     return (
       event.clientX >= rect.left - DROP_MARGIN_PX &&
-      event.clientX <= rect.right &&
+      event.clientX <= rect.right + DROP_MARGIN_PX &&
       event.clientY >= rect.top - DROP_MARGIN_PX &&
       event.clientY <= rect.bottom + DROP_MARGIN_PX
     );

package/dist/index.d.ts

@@ -43,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

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