@momoi-labs/kiso 0.8.0 → 0.9.0

package/kiso/docs/components/README.md

@@ -42,7 +42,7 @@ behavioral reference where one exists.
 
 ## Navigation and structure
 
-- [AppShell / ApplicationShell](app-shell.md): Provides low-level columns or the complete shared application frame.
+- [AppShell / ApplicationShell](app-shell.md): Provides low-level columns or the complete shared application frame (sidebar console or top-bar surface).
 - [BrandMark](brand-mark.md): Decorative letter or icon beside a product name.
 - [Breadcrumb](breadcrumb.md): Shows the current location within a hierarchy.
 - [Header](header.md): Composes persistent application navigation and global actions.
@@ -64,7 +64,7 @@ behavioral reference where one exists.
 ## Required compositions
 
 - [FormField](form-field.md) composes [Label](label.md) + [Input](input.md) (or another form control) + [HelperText](helper-text.md) + [ValidationMessage](validation-message.md).
-- [ApplicationShell](app-shell.md) composes [Sidebar](sidebar.md) + [Navigation](navigation.md) + [Header](header.md) + page content.
+- [ApplicationShell](app-shell.md) composes [Sidebar](sidebar.md) + [Navigation](navigation.md) + [Header](header.md) + page content, or a top-bar-only frame with brand in [Header](header.md).
 - [Header](header.md) composes [Link](link.md) + [IconButton](icon-button.md) + optional [DropdownMenu](dropdown-menu.md).
 - [Table / DataTable](table.md) composes [EmptyState](empty-state.md), [Skeleton](skeleton.md), and [Pagination](pagination.md) for empty, loading, and paged states.
 - [PageHeader](page-header.md) composes a title + optional subtitle + [Buttons](button.md).

package/kiso/docs/components/app-shell.md

@@ -4,11 +4,13 @@
 
 AppShell places persistent [Sidebar](sidebar.md) navigation beside the main
 application content. It owns the page columns, not navigation state.
-ApplicationShell composes the standard Sidebar, Navigation, Header, and main
-column when a product wants the complete frame.
+ApplicationShell composes the standard frame when a product wants the complete
+shared chrome — either a console with a rail, or a single-surface top bar.
 
 ## Anatomy
 
+Console with rail (default):
+
 ```
 AppShell
 ├── Sidebar
@@ -17,15 +19,25 @@ AppShell
     └── page content
 ```
 
-The two slots are direct children. AppShell is a `div`; AppShellMain is a
+Single-surface top bar (`layout="topbar"`):
+
+```
+AppShell[data-layout="topbar"]
+└── AppShellMain
+    ├── Header (brand, primaryAction, header)
+    └── page content
+```
+
+The console slots are direct children. AppShell is a `div`; AppShellMain is a
 `main` with `min-width: 0`, so wide tables and log lines cannot push the
 Sidebar off screen. Sidebar owns its header, body, and footer.
 
-ApplicationShell takes `brand`, optional `primaryAction`, navigation groups,
-optional `footer`, optional `header`, and page content. A destination contains
-`href`, `label`, optional `active`, optional `onClick`, and optional leading or
-trailing content. The caller still decides the current destination and whether
-a destination follows its link or changes a view in place.
+ApplicationShell takes `brand`, optional `primaryAction`, optional `header`,
+and page content. The default `layout="sidebar"` also takes navigation groups
+and optional `footer`. A destination contains `href`, `label`, optional
+`active`, optional `onClick`, and optional leading or trailing content. The
+caller still decides the current destination and whether a destination follows
+its link or changes a view in place.
 
 ```tsx
 <ApplicationShell
@@ -46,6 +58,17 @@ a destination follows its link or changes a view in place.
 </ApplicationShell>
 ```
 
+```tsx
+<ApplicationShell
+  layout="topbar"
+  brand={<ProductBrand />}
+  primaryAction={<CreateProject />}
+  header={<BoardChrome />}
+>
+  {page}
+</ApplicationShell>
+```
+
 When `onClick` is present, ApplicationShell prevents link navigation and calls
 it. Without `onClick`, the destination remains a normal link. Use
 `navigationLabel` to distinguish this navigation landmark when the default
@@ -53,17 +76,28 @@ it. Without `onClick`, the destination remains a normal link. Use
 
 ## Variants
 
-One layout. No variant prop. Compose [Header](header.md) and
-[PageHeader](page-header.md) inside the main slot as the page requires.
+`layout="sidebar"` (default) mounts Sidebar with brand and primary action in
+SidebarHeader, navigation in SidebarBody, and optional footer. The optional
+`header` slot stays in the main column.
+
+`layout="topbar"` omits Sidebar entirely. Brand, optional primary action, and
+the optional `header` slot render together in Header. Do not pass `navigation`
+or `footer` in this mode — there is no rail to host them.
+
+Compose [Header](header.md) and [PageHeader](page-header.md) inside the main
+slot as the page requires when using AppShell directly.
 
 ## Sizes
 
 The Sidebar column uses `--size-sidebar`; the main column takes the remaining
 width with a zero minimum. The shell has a minimum height of one viewport.
-At widths of 1023px or less, the layout becomes one column and Sidebar is
+At widths of 1023px or less, a sidebar layout becomes one column and Sidebar is
 hidden. The product must provide access to navigation at that width, for
 example through a [Drawer](drawer.md).
 
+`layout="topbar"` is a single main column at every width. It does not rely on
+the 1023px media query to collapse a sidebar track.
+
 ## States
 
 The shell stays in place while page content loads, fails, or becomes empty.
@@ -77,6 +111,8 @@ Those states belong inside AppShellMain. There is no disabled or active shell.
   the main content.
 - Keep navigation available when the Sidebar is hidden. AppShell does not
   create a mobile menu or manage its focus.
+- A top-bar layout has no Sidebar navigation landmark; put destinations in the
+  Header or elsewhere in the product chrome.
 
 ### Keyboard
 
@@ -87,13 +123,16 @@ retain their own keyboard behavior.
 
 - An application with persistent navigation beside a changing page.
 - A console containing tables, detail panes, and logs in its main column.
-- Use ApplicationShell when the product follows the standard complete frame.
+- A single-surface product whose chrome is one top bar (`layout="topbar"`).
+- Use ApplicationShell when the product follows one of the two standard frames.
 - Use AppShell directly when its Sidebar or Header composition differs.
 
 ## When NOT to use
 
 - A standalone login or centered form. Use [Card](card.md) within the page.
 - Two resizable content panes. Use [Split](split.md) inside the main content.
+- Hiding a required rail with CSS. Prefer `layout="topbar"` or AppShell
+  composed without Sidebar.
 
 ## Radix/shadcn mapping
 

package/kiso/ui.css

@@ -842,6 +842,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 .pagination .btn[aria-current="page"] { background: var(--color-secondary); }
 
 .app-shell { display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); min-height: 100vh; }
+.app-shell[data-layout="topbar"] { grid-template-columns: minmax(0, 1fr); }
 .sidebar {
   display: flex; flex-direction: column;
   min-width: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {