@ambasada/ui 0.7.1 → 0.7.4

package/README.md

@@ -61,6 +61,16 @@ The shell's insets, for anything you position yourself:
 | `ui-empty` (`ui-empty-icon`) | Empty state: icon, `<strong>` title, hint, action. |
 | `ui-skeleton` | Grey bars (`<span>`s) while loading: skeletons, not spinners. |
 
+For tools built for the laptop that still open in the Ambasada app (the Developer app):
+
+| Class | What |
+|---|---|
+| `ui-shell` > `ui-shell-side`, `ui-shell-scrim`, `ui-shell-main` > `ui-shell-top` (`ui-shell-menu`), `ui-shell-content` | 240 px sidebar, sticky top bar, content up to 1088 px. Under 900 px the sidebar is a drawer (`ui-shell open`). Clears the host bar and safe areas once. |
+| `ui-nav` (`ui-nav-title`), `ui-nav-item` (`ui-nav-label`, `ui-nav-right`, `on`) | Sidebar navigation; the current item gets a red marker. |
+| `ui-tabs` | Tabs as links under a title (`a.on`); scrolls sideways when narrow. |
+| `ui-field` (`ui-field-label`, `ui-field-hint` `good` / `bad`), `ui-input` | Form field with one line of hint or error. |
+| `ui-table` (`.num`, `tr.tappable`) | Data table: hairline rows, tabular figures. |
+
 ```html
 <main class="ui-page">
   <p class="ui-label">// My Company</p>
@@ -83,7 +93,7 @@ The shell's insets, for anything you position yourself:
 ## React
 
 ```tsx
-import { Button, Card, Empty, Group, Page, Pill, Row, Sheet, Skeleton, Stepper } from "@ambasada/ui/react";
+import { Button, Card, Empty, Field, Group, Nav, NavItem, Page, Pill, Row, Shell, Sheet, Skeleton, Stepper, Tabs } from "@ambasada/ui/react";
 
 <Page>
   <Card title="Your name as a folk poem">
@@ -96,6 +106,11 @@ import { Button, Card, Empty, Group, Page, Pill, Row, Sheet, Skeleton, Stepper }
     <Stepper value={amount} onChange={setAmount} min={1} unit="TON" presets={[1, 2, 5]} />
   </Sheet>
 </Page>
+
+<Shell sidebar={<Nav title="Apps"><NavItem label="Acme" href="/p/acme" current /></Nav>} top="Acme" open={menu} onMenu={setMenu}>
+  <Tabs tabs={[{ id: "overview", label: "Overview", href: "/p/acme" }]} current="overview" />
+  <Field label="Slug" value={slug} onChange={(e) => setSlug(e.target.value)} hint="acme.ambasada.dev" />
+</Shell>
 ```
 
 The wrappers render markup only and import no CSS (load the stylesheet yourself). The module is marked

package/dist/ambasada-ui.css

@@ -1,4 +1,4 @@
-/* @ambasada/ui 0.7.1: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
+/* @ambasada/ui 0.7.4: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
 /*
  * Inter and JetBrains Mono, self-hosted (variable, SIL Open Font License 1.1: fonts/OFL-*.txt). Latin and
  * Latin Extended, so Romanian ț and ș render. The URLs are relative to this file: bundlers copy the files,
@@ -163,7 +163,8 @@
 
 /*
  * @ambasada/ui components, in plain CSS: page, card, buttons, list rows, pill, bottom sheet, stepper,
- * empty state, skeleton, the mono label. Tokens only (tokens.css): no raw colours.
+ * empty state, skeleton, the mono label; for desktop tools the app shell, sidebar nav, tabs, fields and tables.
+ * Tokens only (tokens.css): no raw colours.
  * Markup for each one: packages/ui/README.md, or the React wrappers in @ambasada/ui/react.
  */
 
@@ -605,6 +606,289 @@ body.ui-sheet-open { overflow: hidden; }
 }
 @keyframes ui-shimmer { to { background-position: -200% 0; } }
 
+/* ── app shell (desktop tools) ──────────────────────────────────────────────
+ * For apps built for the laptop that still open in the Ambasada app: a sidebar, a top bar, the content. Under
+ * 900 px the sidebar becomes a drawer behind the top bar's menu button. Clears the host bar and the safe areas
+ * once: the top bar takes the top, the content the bottom (docs/MINI-APPS.md §15 decision 11). */
+
+.ui-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+}
+.ui-shell-side {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding:
+    calc(var(--space-3) + var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px))
+    var(--space-3)
+    calc(var(--space-3) + var(--ambasada-safe-area-bottom, 0px))
+    calc(var(--space-3) + var(--ambasada-safe-area-left, 0px));
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-line);
+  overflow-y: auto;
+}
+.ui-shell-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.ui-shell-top {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: calc(56px + var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px));
+  padding:
+    calc(var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px))
+    calc(var(--space-6) + var(--ambasada-safe-area-right, 0px))
+    0
+    var(--space-6);
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-line);
+}
+.ui-shell-menu {
+  display: none;
+}
+.ui-shell-content {
+  flex: 1;
+  width: 100%;
+  max-width: 1088px;
+  padding:
+    var(--space-6)
+    calc(var(--space-6) + var(--ambasada-safe-area-right, 0px))
+    calc(var(--space-10) + var(--ambasada-safe-area-bottom, 0px))
+    var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+.ui-shell-scrim {
+  display: none;
+}
+@media (max-width: 899px) {
+  .ui-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ui-shell-side {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 40;
+    width: min(300px, 86vw);
+    transform: translateX(-100%);
+    transition: transform var(--duration) var(--ease);
+    box-shadow: var(--shadow-raised);
+  }
+  .ui-shell.open .ui-shell-side {
+    transform: none;
+  }
+  .ui-shell.open .ui-shell-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 30;
+    background: var(--color-backdrop);
+  }
+  .ui-shell-menu {
+    display: inline-grid;
+    margin-left: calc(-1 * var(--space-2));
+  }
+  .ui-shell-top {
+    padding-left: calc(var(--space-4) + var(--ambasada-safe-area-left, 0px));
+    padding-right: calc(var(--space-4) + var(--ambasada-safe-area-right, 0px));
+  }
+  .ui-shell-content {
+    padding-left: calc(var(--space-4) + var(--ambasada-safe-area-left, 0px));
+    padding-right: calc(var(--space-4) + var(--ambasada-safe-area-right, 0px));
+    padding-top: var(--space-4);
+    gap: var(--space-5);
+  }
+}
+
+/* Sidebar navigation: a title, then items (icon, label, a value on the right). The current one is marked. */
+.ui-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ui-nav-title {
+  margin: 0;
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--color-ink-3);
+}
+.ui-nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 36px;
+  padding: 6px var(--space-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-ink-2);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.ui-nav-item:hover {
+  background: var(--color-surface-2);
+  color: var(--color-ink);
+}
+.ui-nav-item.on {
+  background: var(--color-surface-2);
+  color: var(--color-ink);
+  font-weight: var(--weight-medium);
+}
+.ui-nav-item.on::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--space-3));
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 0 2px 2px 0;
+  background: var(--color-accent);
+}
+.ui-nav-item:focus-visible,
+.ui-tabs a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+.ui-nav-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-nav-right {
+  flex: none;
+  color: var(--color-ink-3);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Tabs: a row of links under a page title; scrolls sideways when it doesn't fit. */
+.ui-tabs {
+  display: flex;
+  gap: var(--space-1);
+  margin: 0;
+  border-bottom: 1px solid var(--color-line);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.ui-tabs::-webkit-scrollbar {
+  display: none;
+}
+.ui-tabs a {
+  flex: none;
+  padding: 10px var(--space-3);
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  color: var(--color-ink-3);
+  font-size: var(--text-sm);
+  text-decoration: none;
+}
+.ui-tabs a:hover {
+  color: var(--color-ink);
+}
+.ui-tabs a.on {
+  color: var(--color-ink);
+  font-weight: var(--weight-medium);
+  border-bottom-color: var(--color-ink);
+}
+
+/* Form field: label, the input, one line of hint or error under it. */
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ui-field-label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+.ui-field-hint {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+}
+.ui-field-hint.bad {
+  color: var(--color-danger);
+}
+.ui-field-hint.good {
+  color: var(--color-success);
+}
+.ui-input {
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-ink);
+  font: inherit;
+  font-size: var(--text-sm);
+}
+.ui-input:hover {
+  border-color: var(--color-line-strong);
+}
+.ui-input:focus {
+  outline: none;
+  border-color: var(--color-ink);
+  box-shadow: 0 0 0 3px var(--color-surface-2);
+}
+.ui-input:disabled {
+  background: var(--color-surface-2);
+  color: var(--color-ink-3);
+}
+
+/* Data table: hairline rows, numbers right-aligned in tabular figures (`.num`). */
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+.ui-table th {
+  padding: 10px var(--space-4);
+  text-align: left;
+  font-weight: var(--weight-medium);
+  color: var(--color-ink-3);
+  background: var(--color-surface-2);
+  border-bottom: 1px solid var(--color-line);
+  white-space: nowrap;
+}
+.ui-table td {
+  padding: 12px var(--space-4);
+  border-bottom: 1px solid var(--color-line);
+  vertical-align: middle;
+}
+.ui-table tr:last-child td {
+  border-bottom: 0;
+}
+.ui-table .num {
+  text-align: right;
+}
+.ui-table tbody tr.tappable {
+  cursor: pointer;
+}
+.ui-table tbody tr.tappable:hover td {
+  background: var(--color-surface-2);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ui-sheet,
   .ui-sheet-backdrop,
@@ -612,4 +896,7 @@ body.ui-sheet-open { overflow: hidden; }
   .ui-skeleton span {
     animation: none;
   }
+  .ui-shell-side {
+    transition: none;
+  }
 }

package/dist/components.css

@@ -1,6 +1,7 @@
 /*
  * @ambasada/ui components, in plain CSS: page, card, buttons, list rows, pill, bottom sheet, stepper,
- * empty state, skeleton, the mono label. Tokens only (tokens.css): no raw colours.
+ * empty state, skeleton, the mono label; for desktop tools the app shell, sidebar nav, tabs, fields and tables.
+ * Tokens only (tokens.css): no raw colours.
  * Markup for each one: packages/ui/README.md, or the React wrappers in @ambasada/ui/react.
  */
 
@@ -442,6 +443,289 @@ body.ui-sheet-open { overflow: hidden; }
 }
 @keyframes ui-shimmer { to { background-position: -200% 0; } }
 
+/* ── app shell (desktop tools) ──────────────────────────────────────────────
+ * For apps built for the laptop that still open in the Ambasada app: a sidebar, a top bar, the content. Under
+ * 900 px the sidebar becomes a drawer behind the top bar's menu button. Clears the host bar and the safe areas
+ * once: the top bar takes the top, the content the bottom (docs/MINI-APPS.md §15 decision 11). */
+
+.ui-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+}
+.ui-shell-side {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding:
+    calc(var(--space-3) + var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px))
+    var(--space-3)
+    calc(var(--space-3) + var(--ambasada-safe-area-bottom, 0px))
+    calc(var(--space-3) + var(--ambasada-safe-area-left, 0px));
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-line);
+  overflow-y: auto;
+}
+.ui-shell-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.ui-shell-top {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: calc(56px + var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px));
+  padding:
+    calc(var(--ambasada-safe-area-top, 0px) + var(--ambasada-host-bar, 0px))
+    calc(var(--space-6) + var(--ambasada-safe-area-right, 0px))
+    0
+    var(--space-6);
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-line);
+}
+.ui-shell-menu {
+  display: none;
+}
+.ui-shell-content {
+  flex: 1;
+  width: 100%;
+  max-width: 1088px;
+  padding:
+    var(--space-6)
+    calc(var(--space-6) + var(--ambasada-safe-area-right, 0px))
+    calc(var(--space-10) + var(--ambasada-safe-area-bottom, 0px))
+    var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+.ui-shell-scrim {
+  display: none;
+}
+@media (max-width: 899px) {
+  .ui-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ui-shell-side {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 40;
+    width: min(300px, 86vw);
+    transform: translateX(-100%);
+    transition: transform var(--duration) var(--ease);
+    box-shadow: var(--shadow-raised);
+  }
+  .ui-shell.open .ui-shell-side {
+    transform: none;
+  }
+  .ui-shell.open .ui-shell-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 30;
+    background: var(--color-backdrop);
+  }
+  .ui-shell-menu {
+    display: inline-grid;
+    margin-left: calc(-1 * var(--space-2));
+  }
+  .ui-shell-top {
+    padding-left: calc(var(--space-4) + var(--ambasada-safe-area-left, 0px));
+    padding-right: calc(var(--space-4) + var(--ambasada-safe-area-right, 0px));
+  }
+  .ui-shell-content {
+    padding-left: calc(var(--space-4) + var(--ambasada-safe-area-left, 0px));
+    padding-right: calc(var(--space-4) + var(--ambasada-safe-area-right, 0px));
+    padding-top: var(--space-4);
+    gap: var(--space-5);
+  }
+}
+
+/* Sidebar navigation: a title, then items (icon, label, a value on the right). The current one is marked. */
+.ui-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ui-nav-title {
+  margin: 0;
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--color-ink-3);
+}
+.ui-nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 36px;
+  padding: 6px var(--space-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-ink-2);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.ui-nav-item:hover {
+  background: var(--color-surface-2);
+  color: var(--color-ink);
+}
+.ui-nav-item.on {
+  background: var(--color-surface-2);
+  color: var(--color-ink);
+  font-weight: var(--weight-medium);
+}
+.ui-nav-item.on::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--space-3));
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 0 2px 2px 0;
+  background: var(--color-accent);
+}
+.ui-nav-item:focus-visible,
+.ui-tabs a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+.ui-nav-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-nav-right {
+  flex: none;
+  color: var(--color-ink-3);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Tabs: a row of links under a page title; scrolls sideways when it doesn't fit. */
+.ui-tabs {
+  display: flex;
+  gap: var(--space-1);
+  margin: 0;
+  border-bottom: 1px solid var(--color-line);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.ui-tabs::-webkit-scrollbar {
+  display: none;
+}
+.ui-tabs a {
+  flex: none;
+  padding: 10px var(--space-3);
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  color: var(--color-ink-3);
+  font-size: var(--text-sm);
+  text-decoration: none;
+}
+.ui-tabs a:hover {
+  color: var(--color-ink);
+}
+.ui-tabs a.on {
+  color: var(--color-ink);
+  font-weight: var(--weight-medium);
+  border-bottom-color: var(--color-ink);
+}
+
+/* Form field: label, the input, one line of hint or error under it. */
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ui-field-label {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+.ui-field-hint {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+}
+.ui-field-hint.bad {
+  color: var(--color-danger);
+}
+.ui-field-hint.good {
+  color: var(--color-success);
+}
+.ui-input {
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-ink);
+  font: inherit;
+  font-size: var(--text-sm);
+}
+.ui-input:hover {
+  border-color: var(--color-line-strong);
+}
+.ui-input:focus {
+  outline: none;
+  border-color: var(--color-ink);
+  box-shadow: 0 0 0 3px var(--color-surface-2);
+}
+.ui-input:disabled {
+  background: var(--color-surface-2);
+  color: var(--color-ink-3);
+}
+
+/* Data table: hairline rows, numbers right-aligned in tabular figures (`.num`). */
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+.ui-table th {
+  padding: 10px var(--space-4);
+  text-align: left;
+  font-weight: var(--weight-medium);
+  color: var(--color-ink-3);
+  background: var(--color-surface-2);
+  border-bottom: 1px solid var(--color-line);
+  white-space: nowrap;
+}
+.ui-table td {
+  padding: 12px var(--space-4);
+  border-bottom: 1px solid var(--color-line);
+  vertical-align: middle;
+}
+.ui-table tr:last-child td {
+  border-bottom: 0;
+}
+.ui-table .num {
+  text-align: right;
+}
+.ui-table tbody tr.tappable {
+  cursor: pointer;
+}
+.ui-table tbody tr.tappable:hover td {
+  background: var(--color-surface-2);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ui-sheet,
   .ui-sheet-backdrop,
@@ -449,4 +733,7 @@ body.ui-sheet-open { overflow: hidden; }
   .ui-skeleton span {
     animation: none;
   }
+  .ui-shell-side {
+    transition: none;
+  }
 }

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type MouseEventHandler, type ReactNode } from "react";
 /** The mini-app column: clear of the host bar and the safe areas. */
 export declare function Page({ children, className }: {
     children: ReactNode;
@@ -68,3 +68,48 @@ export declare function Empty({ icon, title, hint, action }: {
 export declare function Skeleton({ lines }: {
     lines?: number;
 }): import("react").JSX.Element;
+/**
+ * Sidebar, top bar, content: for apps built for the laptop that still open in the Ambasada app. Under 900 px the
+ * sidebar is a drawer: `open` shows it, the top bar's menu button and the scrim call `onMenu(next)`.
+ */
+export declare function Shell({ sidebar, top, children, open, onMenu }: {
+    sidebar: ReactNode;
+    top?: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onMenu?: (open: boolean) => void;
+}): import("react").JSX.Element;
+/** A sidebar section: an optional title over its items. */
+export declare function Nav({ title, children, label }: {
+    title?: ReactNode;
+    children: ReactNode;
+    label?: string;
+}): import("react").JSX.Element;
+export type NavItemProps = {
+    icon?: ReactNode;
+    label: ReactNode;
+    right?: ReactNode;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    current?: boolean;
+};
+/** A sidebar item: a link with `href` (current = aria-current page), else a button. */
+export declare function NavItem({ icon, label, right, href, onClick, current }: NavItemProps): import("react").JSX.Element;
+/** Tabs as links (each tab its own URL); `onClick` lets a client router take plain clicks. */
+export declare function Tabs({ tabs, current, onClick, label }: {
+    tabs: {
+        id: string;
+        label: ReactNode;
+        href: string;
+    }[];
+    current: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    label?: string;
+}): import("react").JSX.Element;
+/** Label, input, one line of hint (or `error`, which wins) under it. */
+export declare function Field({ label, hint, error, tone, className, ...input }: InputHTMLAttributes<HTMLInputElement> & {
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    tone?: "good" | "bad";
+}): import("react").JSX.Element;

package/dist/react.js

@@ -100,15 +100,67 @@ function Empty({ icon, title, hint, action }) {
 function Skeleton({ lines = 3 }) {
   return /* @__PURE__ */ jsx("div", { className: "ui-skeleton", "aria-busy": "true", children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("span", { style: { width: `${90 - i % 3 * 18}%` } }, i)) });
 }
+function Shell({ sidebar, top, children, open = false, onMenu }) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onMenu?.(false);
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onMenu]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("ui-shell", open && "open"), children: [
+    /* @__PURE__ */ jsx("aside", { className: "ui-shell-side", children: sidebar }),
+    /* @__PURE__ */ jsx("div", { className: "ui-shell-scrim", onClick: () => onMenu?.(false) }),
+    /* @__PURE__ */ jsxs("div", { className: "ui-shell-main", children: [
+      /* @__PURE__ */ jsxs("header", { className: "ui-shell-top", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ui-icon-btn ui-shell-menu", "aria-label": "Menu", "aria-expanded": open, onClick: () => onMenu?.(!open), children: /* @__PURE__ */ jsx(Icon, { d: "M4 7h16M4 12h16M4 17h16" }) }),
+        top
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "ui-shell-content", children })
+    ] })
+  ] });
+}
+function Nav({ title, children, label }) {
+  return /* @__PURE__ */ jsxs("nav", { className: "ui-nav", "aria-label": label, children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "ui-nav-title", children: title }),
+    children
+  ] });
+}
+function NavItem({ icon, label, right, href, onClick, current }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { className: "ui-nav-label", children: label }),
+    right !== void 0 && /* @__PURE__ */ jsx("span", { className: "ui-nav-right", children: right })
+  ] });
+  const cls = cx("ui-nav-item", current && "on");
+  if (href) return /* @__PURE__ */ jsx("a", { className: cls, href, onClick, "aria-current": current ? "page" : void 0, children: body });
+  return /* @__PURE__ */ jsx("button", { type: "button", className: cls, onClick, children: body });
+}
+function Tabs({ tabs, current, onClick, label }) {
+  return /* @__PURE__ */ jsx("nav", { className: "ui-tabs", "aria-label": label, children: tabs.map((t) => /* @__PURE__ */ jsx("a", { href: t.href, onClick, className: t.id === current ? "on" : void 0, "aria-current": t.id === current ? "page" : void 0, children: t.label }, t.id)) });
+}
+function Field({ label, hint, error, tone, className, ...input }) {
+  const id = useId();
+  const note = error ?? hint;
+  return /* @__PURE__ */ jsxs("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsx("label", { className: "ui-field-label", htmlFor: input.id ?? id, children: label }),
+    /* @__PURE__ */ jsx("input", { id, ...input, className: cx("ui-input", className), "aria-invalid": error ? true : void 0, "aria-describedby": note ? `${input.id ?? id}-hint` : void 0 }),
+    note && /* @__PURE__ */ jsx("span", { id: `${input.id ?? id}-hint`, className: cx("ui-field-hint", error ? "bad" : tone), children: note })
+  ] });
+}
 export {
   Button,
   Card,
   Empty,
+  Field,
   Group,
+  Nav,
+  NavItem,
   Page,
   Pill,
   Row,
   Sheet,
+  Shell,
   Skeleton,
-  Stepper
+  Stepper,
+  Tabs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ambasada/ui",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "description": "The Ambasada look for mini apps: design tokens (colours, Inter + JetBrains Mono, radii, spacing, safe areas) and a small component set in plain CSS, with optional React wrappers. One stylesheet to <link>.",
   "type": "module",
   "license": "MIT",