terminoir 0.19.0 → 0.20.0

package/README.md

@@ -148,7 +148,7 @@ 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 |
+| `Page`, `PageHeader`, `Section` | Readable page column (`narrow`/`default`/`wide`/`full`, `fill` for canvases, `fullHeight` to fill the stage height with padding); title + meta + actions; titled section with actions |
 | `PanelHeader` | Heading inside a `Panel`: `logo` (the image unframed; initials in a round avatar 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 |
@@ -163,7 +163,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `TitleInput`, `FileButton`, `RadioCards` | Borderless heading input; button that opens a file picker; card-style radio group |
 | `OptionsEditor` | Notion-style option list for select/status values: drag to reorder, click a name to rename, colour and delete from each row's menu, type to add; `ChipSelect` takes `oncreate` to add one from its search |
 | `EditableText` | A name you click to rename in place (Enter or click away saves, Escape cancels); `PageHeader`, `ListItem` and `PropertyRow` take `onrename` for the same |
-| `CalendarGrid` | Week (scrolling hours) and month grids; `CalendarEvent` with `muted`/`color`; helpers `calendarRange`, `shiftCalendar`, `eventsOn` |
+| `CalendarGrid` | Week (scrolling hours) and month grids; `fill` grows to the remaining height (e.g. in a `fullHeight` Page); `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` |
 | `GroupedList`, `SegmentBar` | Items in labelled groups with a colour dot and count, "Show n more" past `limit`, `collapsed` groups behind a toggle (e.g. finished items); a thin bar of proportional coloured segments |

package/dist/components/CalendarGrid.svelte

@@ -21,6 +21,7 @@
     anchor,
     events,
     onEventClick,
+    fill = false,
     class: className = '',
   }: {
     mode?: CalendarMode;
@@ -28,6 +29,8 @@
     anchor: Date;
     events: CalendarEvent[];
     onEventClick?: (event: CalendarEvent) => void;
+    /** Grow to the remaining height of a flex column (e.g. a `fullHeight` Page) instead of a fixed height. */
+    fill?: boolean;
     class?: string;
   } = $props();
 
@@ -69,7 +72,7 @@
 {/snippet}
 
 {#if mode === 'week'}
-  <div class={cn('terminoir-cal terminoir-cal--week', className)}>
+  <div class={cn('terminoir-cal terminoir-cal--week', fill && 'terminoir-cal--fill', className)}>
     <div class="terminoir-cal__week-head">
       <div></div>
       {#each weekDays as day (day.getTime())}
@@ -109,7 +112,7 @@
     </div>
   </div>
 {:else}
-  <div class={cn('terminoir-cal terminoir-cal--month', className)}>
+  <div class={cn('terminoir-cal terminoir-cal--month', fill && 'terminoir-cal--fill', className)}>
     {#each weekDays as day (day.getTime())}
       <div class="terminoir-cal__dow">{day.toLocaleDateString(undefined, { weekday: 'short' })}</div>
     {/each}
@@ -217,6 +220,10 @@
   }
   .terminoir-cal__event:disabled { cursor: default; }
   .terminoir-cal__event--muted { opacity: 0.6; background: transparent; }
+  /* Fill: take the parent's free height; week hours scroll inside, month rows stretch. */
+  .terminoir-cal--fill { flex: 1 1 0; }
+  .terminoir-cal--week.terminoir-cal--fill { height: auto; }
+  .terminoir-cal--month.terminoir-cal--fill { grid-template-rows: auto; grid-auto-rows: 1fr; }
   .terminoir-cal__time { color: var(--muted-foreground); flex-shrink: 0; }
   .terminoir-cal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
   .terminoir-cal--month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

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

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     anchor: Date;
     events: CalendarEvent[];
     onEventClick?: (event: CalendarEvent) => void;
+    /** Grow to the remaining height of a flex column (e.g. a `fullHeight` Page) instead of a fixed height. */
+    fill?: boolean;
     class?: string;
 };
 declare const CalendarGrid: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Page.svelte

@@ -5,6 +5,7 @@
   let {
     width = 'default',
     fill = false,
+    fullHeight = false,
     class: className = '',
     children,
     ...rest
@@ -13,12 +14,14 @@
     width?: 'narrow' | 'default' | 'wide' | 'full';
     /** Edge-to-edge and full height with no padding, for canvases (graphs, viewers, calendars). */
     fill?: boolean;
+    /** At least the stage's height (keeps padding), so a growing child such as `CalendarGrid fill` takes the rest. */
+    fullHeight?: boolean;
     class?: string;
     children?: Snippet;
   } & Record<string, unknown> = $props();
 </script>
 
-<div class={cn('terminoir-page', `terminoir-page--${width}`, fill && 'terminoir-page--fill', className)} {...rest}>
+<div class={cn('terminoir-page', `terminoir-page--${width}`, fill && 'terminoir-page--fill', fullHeight && 'terminoir-page--full-height', className)} {...rest}>
   {@render children?.()}
 </div>
 
@@ -37,6 +40,7 @@
   .terminoir-page--default { max-width: 56rem; }
   .terminoir-page--wide { max-width: 80rem; }
   .terminoir-page--full { max-width: none; }
+  .terminoir-page--full-height { min-height: 100%; }
   .terminoir-page--fill {
     max-width: none;
     height: 100%;

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     width?: 'narrow' | 'default' | 'wide' | 'full';
     /** Edge-to-edge and full height with no padding, for canvases (graphs, viewers, calendars). */
     fill?: boolean;
+    /** At least the stage's height (keeps padding), so a growing child such as `CalendarGrid fill` takes the rest. */
+    fullHeight?: boolean;
     class?: string;
     children?: Snippet;
 } & Record<string, unknown>;

package/package.json

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