terminoir 0.10.0 → 0.11.0

package/README.md

@@ -123,6 +123,7 @@ Import from **`terminoir`**:
 | `Button`, `IconButton` | Variants: primary, secondary, ghost, destructive, outline · sizes sm/md/lg · `Button href` renders a link |
 | `Input`, `Textarea`, `Select`, `Checkbox`, `Switch` | `hideLabel` (screen-reader only), `hint`, `error`, `quiet` (borderless until hover/focus, for inline property editing); `Input` `width` for toolbar fields |
 | `Chip`, `Badge` | Status tones; `Chip` `color` dot, `onclick`, removable `onremove` |
+| `StatusChip` | On/off status: green dot + `activeLabel`, or muted `inactiveLabel` (defaults Connected / Not connected) |
 | `Card`, `CardGrid` | Accent tint, badge, chips, progress, meta, hover lift |
 | `Panel` | Glass panel surface |
 | `Dialog` | Modal with focus trap-ish behavior + Escape |
@@ -147,7 +148,8 @@ 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 |
-| `Stack`, `Inline`, `Spacer`, `Centered` | Vertical / horizontal layout with `--space-*` gaps (`Inline fill` splits evenly); fill space; full-viewport centred column |
+| `PanelHeader` | Heading inside a `Panel`: `logo` (round avatar, initials 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 |
 | `NavSection` | Sidebar section with title and action |
 | `DataTable` | Columns, `cell` snippet, clickable rows, `hideOnMobile`, empty state |

package/dist/components/Inline.svelte

@@ -10,6 +10,7 @@
     justify = 'start',
     wrap = true,
     fill = false,
+    collapse = false,
     class: className = '',
     children,
     ...rest
@@ -21,6 +22,8 @@
     wrap?: boolean;
     /** Children share the row equally (e.g. two inputs side by side). */
     fill?: boolean;
+    /** Stack the children full-width on narrow screens (phones), e.g. a row of form fields. */
+    collapse?: boolean;
     class?: string;
     children?: Snippet;
   } & Record<string, unknown> = $props();
@@ -30,7 +33,7 @@
 </script>
 
 <div
-  class={cn('terminoir-inline', fill && 'terminoir-inline--fill', className)}
+  class={cn('terminoir-inline', fill && 'terminoir-inline--fill', collapse && 'terminoir-inline--collapse', className)}
   style:gap={`var(--space-${gap})`}
   style:align-items={ALIGN[align]}
   style:justify-content={JUSTIFY[justify]}
@@ -49,4 +52,13 @@
     flex: 1 1 0;
     min-width: 0;
   }
+  @media (max-width: 700px) {
+    .terminoir-inline--collapse {
+      flex-direction: column;
+    }
+    .terminoir-inline--collapse > :global(*) {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+  }
 </style>

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

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     wrap?: boolean;
     /** Children share the row equally (e.g. two inputs side by side). */
     fill?: boolean;
+    /** Stack the children full-width on narrow screens (phones), e.g. a row of form fields. */
+    collapse?: boolean;
     class?: string;
     children?: Snippet;
 } & Record<string, unknown>;

package/dist/components/PanelHeader.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import Avatar from './Avatar.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  /**
+   * Heading inside a panel or card: a mark, a title, a one-line description and actions on the right.
+   * The mark is `logo` (an image, or the name's initials while there is no `src`), `icon`, or `leading`.
+   */
+  let {
+    title,
+    description,
+    icon,
+    logo,
+    class: className = '',
+    leading,
+    actions,
+  }: {
+    title: string;
+    description?: string;
+    /** Font Awesome name, as for `NavIcon`. */
+    icon?: string;
+    /** A service or brand mark, shown as a round `Avatar`. */
+    logo?: { name: string; src?: string };
+    class?: string;
+    /** Custom mark; overrides `logo` and `icon`. */
+    leading?: Snippet;
+    /** Status chips or buttons aligned to the right. */
+    actions?: Snippet;
+  } = $props();
+</script>
+
+<header class={cn('terminoir-panel-header', className)}>
+  {#if leading}
+    <span class="terminoir-panel-header__mark">{@render leading()}</span>
+  {:else if logo}
+    <Avatar name={logo.name} src={logo.src} size={36} />
+  {:else if icon}
+    <span class="terminoir-panel-header__mark"><NavIcon name={icon} /></span>
+  {/if}
+  <div class="terminoir-panel-header__text">
+    <h3 class="terminoir-panel-header__title">{title}</h3>
+    {#if description}<p class="terminoir-panel-header__description">{description}</p>{/if}
+  </div>
+  {#if actions}
+    <div class="terminoir-panel-header__actions">{@render actions()}</div>
+  {/if}
+</header>
+
+<style>
+  .terminoir-panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-width: 0;
+  }
+  .terminoir-panel-header__mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 1.25rem;
+  }
+  .terminoir-panel-header__text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+  .terminoir-panel-header__title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+  .terminoir-panel-header__description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.8125rem;
+    line-height: 1.45;
+  }
+  .terminoir-panel-header__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+    flex-shrink: 0;
+  }
+  @media (max-width: 700px) {
+    .terminoir-panel-header { flex-wrap: wrap; }
+    .terminoir-panel-header__actions { width: 100%; }
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    /** Font Awesome name, as for `NavIcon`. */
+    icon?: string;
+    /** A service or brand mark, shown as a round `Avatar`. */
+    logo?: {
+        name: string;
+        src?: string;
+    };
+    class?: string;
+    /** Custom mark; overrides `logo` and `icon`. */
+    leading?: Snippet;
+    /** Status chips or buttons aligned to the right. */
+    actions?: Snippet;
+};
+declare const PanelHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelHeader = ReturnType<typeof PanelHeader>;
+export default PanelHeader;

package/dist/components/StatusChip.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Chip from './Chip.svelte';
+
+  /** On/off status: `active` shows a green dot and `activeLabel`; otherwise a muted `inactiveLabel`. */
+  let {
+    active,
+    activeLabel = 'Connected',
+    inactiveLabel = 'Not connected',
+    class: className = '',
+    ...rest
+  }: {
+    active: boolean;
+    activeLabel?: string;
+    inactiveLabel?: string;
+    class?: string;
+  } & Record<string, unknown> = $props();
+</script>
+
+<Chip tone={active ? 'default' : 'done'} color={active ? 'green' : undefined} class={className} {...rest}>
+  {active ? activeLabel : inactiveLabel}
+</Chip>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    active: boolean;
+    activeLabel?: string;
+    inactiveLabel?: string;
+    class?: string;
+} & Record<string, unknown>;
+declare const StatusChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatusChip = ReturnType<typeof StatusChip>;
+export default StatusChip;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Panel } from './components/Panel.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as StatusChip } from './components/StatusChip.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
@@ -41,6 +42,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 PanelHeader } from './components/PanelHeader.svelte';
 export { default as Section } from './components/Section.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Inline } from './components/Inline.svelte';

package/dist/index.js

@@ -32,6 +32,7 @@ export { default as Panel } from './components/Panel.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as StatusChip } from './components/StatusChip.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
@@ -40,6 +41,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 PanelHeader } from './components/PanelHeader.svelte';
 export { default as Section } from './components/Section.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Inline } from './components/Inline.svelte';

package/package.json

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