@ismail-elkorchi/ui-shell 0.1.0

package/README.md

@@ -0,0 +1,136 @@
+# @ismail-elkorchi/ui-shell
+
+Tailwind-friendly shell components (activity bar, sidebars, status bar, and an optional frame layout) for Light DOM layouts. They render Tailwind utility classes, depend on `@ismail-elkorchi/ui-primitives` for controls, and stay framework-agnostic.
+
+## Build & distribution
+
+- `npm run build` emits ESM + `.d.ts` modules into `dist/` for `index/register/router`, layout, activity bar, sidebar, secondary sidebar, and status bar.
+- Tailwind scanning helper ships as `dist/tailwind-source.css`.
+- Published output contains only `dist/` plus this README; TypeScript sources stay in the workspace.
+
+## Layout layer
+
+- Regions: left rail (`activity-bar`), primary sidebar, main content, optional secondary sidebar, and status bar.
+- `uik-shell-layout` stitches the regions together and tags them with `data-region` attributes to keep the layout contract visible in the DOM.
+- Shell components expose only UI surface/state; business logic should live in the host app.
+- **Contract**: Shell components use `ui-primitives` strictly via their public API (attributes/props). They do not rely on Tailwind utility injection to style the internals of primitives (no `class="text-red-500"` on a `uik-button`).
+
+## Using the components
+
+```ts
+import {html} from 'lit';
+import '@ismail-elkorchi/ui-primitives/register';
+import '@ismail-elkorchi/ui-shell/register';
+import type {ActivityBarItem} from '@ismail-elkorchi/ui-shell/activity-bar';
+
+const activityItems: ActivityBarItem[] = [
+  {
+    id: 'explorer',
+    label: 'Explorer',
+    icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'
+  },
+  {id: 'search', label: 'Search', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'}
+];
+
+html`
+  <uik-shell-layout
+    .activityBar=${html`
+      <uik-shell-activity-bar
+        .items=${activityItems}
+        .activeId=${'explorer'}
+        @activity-select=${(e: CustomEvent<{id: string}>) => console.log(e.detail.id)}>
+      </uik-shell-activity-bar>
+    `}
+    .primarySidebar=${html`
+      <uik-shell-sidebar
+        heading="Explorer"
+        .actions=${html`<uik-button variant="ghost" size="icon">…</uik-button>`}
+        .body=${html`<!-- put your file tree or filters here -->`}>
+      </uik-shell-sidebar>
+    `}
+    .mainContent=${html`<main class="flex-1">Your editor or tabs</main>`}
+    .secondarySidebar=${html`
+      <uik-shell-secondary-sidebar
+        .open=${true}
+        heading="AI Assistant"
+        .body=${html`<p class="text-sm text-muted-foreground">Auxiliary tools live here.</p>`}
+        @secondary-close=${() => console.log('close secondary')}></uik-shell-secondary-sidebar>
+    `}
+    .statusBar=${html`
+      <uik-shell-statusbar message="Ready" tone="info" .meta=${'3 files selected'}></uik-shell-statusbar>
+    `}
+    ?showSecondary=${true}>
+  </uik-shell-layout>
+`;
+```
+
+### Component notes
+
+- `uik-shell-activity-bar`: accepts `.items` (id/label/icon/path) and emits `activity-select`.
+- `uik-shell-sidebar`: header/heading with `.actions`, `.body`, and optional `.footer`; `paddedBody`/`scrollBody` toggle spacing and scroll.
+- `uik-shell-secondary-sidebar`: controlled via `.open`; emits `secondary-close` when the close button is clicked.
+- `uik-shell-statusbar`: `.message` + `.tone` colorizes the left side; `.meta` renders on the right (string becomes an outline badge).
+
+## Routing store
+
+A tiny EventTarget-based router lives in `@ismail-elkorchi/ui-shell/router`. It is framework-light, keeps state in memory (no history), and is meant for desktop flows that only need named views and optional subviews/tabs.
+
+```ts
+import {createAppShellRouter, APP_SHELL_NAV_EVENT, type AppShellNavigationDetail} from '@ismail-elkorchi/ui-shell/router';
+
+const routes = [
+  {id: 'explorer', label: 'Explorer', subviews: ['code', 'prompt', 'apply'], defaultSubview: 'code'},
+  {id: 'search', label: 'Search'},
+  {id: 'settings', label: 'Settings'}
+] as const;
+
+export const shellRouter = createAppShellRouter({routes, initialView: 'explorer', initialSubview: 'code'});
+
+// React to navigation anywhere in the app
+const unsubscribe = shellRouter.subscribe(({view, subview}) => {
+  console.log('Current location', view, subview);
+});
+
+// Wire Lit components through events
+html`
+  <uik-shell-activity-bar
+    .items=${routes.map(r => ({id: r.id, label: r.label ?? r.id}))}
+    .activeId=${shellRouter.current.view}
+    @activity-select=${(e: CustomEvent<{id: string}>) => shellRouter.navigate(e.detail.id)}>
+  </uik-shell-activity-bar>
+
+  <editor-area
+    .activeTab=${shellRouter.current.subview ?? 'code'}
+    @tab-change=${(e: CustomEvent<{tab: string}>) => shellRouter.navigate(shellRouter.current.view, e.detail.tab)}>
+  </editor-area>
+`;
+
+// Listen to the low-level navigation event if you prefer EventTarget
+window.addEventListener(APP_SHELL_NAV_EVENT, (event: Event) => {
+  const detail = (event as CustomEvent<AppShellNavigationDetail>).detail;
+  console.log(detail.from, detail.to, detail.route);
+});
+```
+
+- Routes are simple `{id, label?, subviews?, defaultSubview?}` objects.
+- `navigate(view, subview?)` resolves subviews per route (keeping the last used subview for that route).
+- `subscribe` immediately fires with the current location and returns an unsubscribe function.
+
+## Tailwind v4 scanning
+
+The package ships Tailwind class strings in TypeScript. Add the source hint before importing Tailwind:
+
+```css
+@import '@ismail-elkorchi/ui-tokens/index.css';
+@import '@ismail-elkorchi/ui-shell/tailwind-source.css'; /* pulls in @source "./**/*.{ts,js}" */
+@source "./**/*.{ts,js,html}";
+@import 'tailwindcss';
+```
+
+Adjust the `@source` path to match the location of your entry CSS. Alternatively, add the line yourself:
+
+```css
+@source "../../node_modules/@ismail-elkorchi/ui-shell/**/*.{ts,js}";
+```
+
+Make sure these appear in the renderer entry CSS so Tailwind keeps the shell utilities during tree-shaking.

package/dist/ActivityBar.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, svg } from 'lit';
+import '@ismail-elkorchi/ui-primitives/button';
+export type ActivityBarIcon = string | ReturnType<typeof svg>;
+export interface ActivityBarItem {
+    id: string;
+    label: string;
+    icon?: ActivityBarIcon;
+    tooltip?: string;
+}
+export declare class AppShellActivityBar extends LitElement {
+    accessor items: ActivityBarItem[];
+    accessor activeId: string;
+    accessor footer: unknown;
+    createRenderRoot(): this;
+    private emitSelect;
+    private renderIcon;
+    private renderItem;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-activity-bar': AppShellActivityBar;
+    }
+}
+//# sourceMappingURL=ActivityBar.d.ts.map

package/dist/ActivityBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityBar.d.ts","sourceRoot":"","sources":["../ActivityBar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,GAAG,EAAC,MAAM,KAAK,CAAC;AAGnD,OAAO,uCAAuC,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBACa,mBAAoB,SAAQ,UAAU;IACnB,QAAQ,CAAC,KAAK,EAAE,eAAe,EAAE,CAAM;IAC3C,QAAQ,CAAC,QAAQ,SAAM;IACnB,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAQ;IAErD,gBAAgB;IAIzB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU;IAuBT,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/ActivityBar.js

@@ -0,0 +1,81 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@ismail-elkorchi/ui-primitives/button';
+let AppShellActivityBar = class AppShellActivityBar extends LitElement {
+    #items_accessor_storage = [];
+    get items() { return this.#items_accessor_storage; }
+    set items(value) { this.#items_accessor_storage = value; }
+    #activeId_accessor_storage = '';
+    get activeId() { return this.#activeId_accessor_storage; }
+    set activeId(value) { this.#activeId_accessor_storage = value; }
+    #footer_accessor_storage = null;
+    get footer() { return this.#footer_accessor_storage; }
+    set footer(value) { this.#footer_accessor_storage = value; }
+    createRenderRoot() {
+        return this;
+    }
+    emitSelect(id) {
+        this.dispatchEvent(new CustomEvent('activity-select', { detail: { id }, bubbles: true, composed: true }));
+    }
+    renderIcon(item) {
+        if (!item.icon)
+            return html `<span class="text-xs font-semibold">${item.label.charAt(0).toUpperCase()}</span>`;
+        if (typeof item.icon === 'string') {
+            return svg `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="${item.icon}"></path>`;
+        }
+        return item.icon;
+    }
+    renderItem(item) {
+        const isActive = this.activeId === item.id;
+        return html `
+      <div class="relative w-12 h-12 flex items-center justify-center">
+        <div class="${isActive ? 'absolute left-0 w-[2px] h-full bg-primary rounded-r-sm' : 'hidden'}"></div>
+        <uik-button
+          variant="ghost"
+          size="icon"
+          class="w-12 h-12"
+          ?muted=${!isActive}
+          ?active=${isActive}
+          aria-pressed=${isActive ? 'true' : 'false'}
+          aria-label=${item.label}
+          title=${item.tooltip ?? item.label}
+          @click=${() => {
+            this.emitSelect(item.id);
+        }}>
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">${this.renderIcon(item)}</svg>
+        </uik-button>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <aside
+        data-region="activity-bar"
+        class="w-12 bg-secondary flex flex-col items-center py-2 flex-shrink-0 text-muted-foreground h-full">
+        ${this.items.map(item => this.renderItem(item))}
+        <div class="flex-1"></div>
+        ${this.footer ?? nothing}
+      </aside>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], AppShellActivityBar.prototype, "items", null);
+__decorate([
+    property({ type: String })
+], AppShellActivityBar.prototype, "activeId", null);
+__decorate([
+    property({ attribute: false })
+], AppShellActivityBar.prototype, "footer", null);
+AppShellActivityBar = __decorate([
+    customElement('uik-shell-activity-bar')
+], AppShellActivityBar);
+export { AppShellActivityBar };
+//# sourceMappingURL=ActivityBar.js.map

package/dist/ActivityBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityBar.js","sourceRoot":"","sources":["../ActivityBar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,uCAAuC,CAAC;AAYxC,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IACV,0BAA2B,EAAE,CAAC;IAA9B,IAAA,KAAK,2CAAyB;IAA9B,IAAA,KAAK,iDAAyB;IAClC,6BAAW,EAAE,CAAC;IAAd,IAAA,QAAQ,8CAAM;IAAd,IAAA,QAAQ,oDAAM;IACV,2BAAkB,IAAI,CAAC;IAAvB,IAAA,MAAM,4CAAiB;IAAvB,IAAA,MAAM,kDAAiB;IAErD,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,UAAU,CAAC,EAAU;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAC,MAAM,EAAE,EAAC,EAAE,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACxG,CAAC;IAEO,UAAU,CAAC,IAAqB;QACtC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAA,uCAAuC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC;QAC9G,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAClC,OAAO,GAAG,CAAA,8EAA8E,IAAI,CAAC,IAAI,WAAW,CAAC;QAC/G,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEO,UAAU,CAAC,IAAqB;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAA;;sBAEO,QAAQ,CAAC,CAAC,CAAC,wDAAwD,CAAC,CAAC,CAAC,QAAQ;;;;;mBAKjF,CAAC,QAAQ;oBACR,QAAQ;yBACH,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uBAC7B,IAAI,CAAC,KAAK;kBACf,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK;mBACzB,GAAG,EAAE;YACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC;uFAC4E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;;;KAGvG,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;;UAE7C,IAAI,CAAC,MAAM,IAAI,OAAO;;KAE3B,CAAC;IACJ,CAAC;CACF,CAAA;AAtDwC;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;gDAAwC;AAClC;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mDAAwB;AACV;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;iDAAiC;AAHnD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAuD/B"}

package/dist/AppShellLayout.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class AppShellLayout extends LitElement {
+    accessor activityBar: unknown;
+    accessor primarySidebar: unknown;
+    accessor mainContent: unknown;
+    accessor secondarySidebar: unknown;
+    accessor statusBar: unknown;
+    accessor showSecondary: boolean;
+    createRenderRoot(): this;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-layout': AppShellLayout;
+    }
+}
+//# sourceMappingURL=AppShellLayout.d.ts.map

package/dist/AppShellLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellLayout.d.ts","sourceRoot":"","sources":["../AppShellLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAG9C,qBACa,cAAe,SAAQ,UAAU;IACd,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAQ;IACrC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAQ;IACxC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAQ;IACrC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAQ;IAC1C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAQ;IACtC,QAAQ,CAAC,aAAa,UAAS;IAEjD,gBAAgB;IAIhB,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/AppShellLayout.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let AppShellLayout = class AppShellLayout extends LitElement {
+    #activityBar_accessor_storage = null;
+    get activityBar() { return this.#activityBar_accessor_storage; }
+    set activityBar(value) { this.#activityBar_accessor_storage = value; }
+    #primarySidebar_accessor_storage = null;
+    get primarySidebar() { return this.#primarySidebar_accessor_storage; }
+    set primarySidebar(value) { this.#primarySidebar_accessor_storage = value; }
+    #mainContent_accessor_storage = null;
+    get mainContent() { return this.#mainContent_accessor_storage; }
+    set mainContent(value) { this.#mainContent_accessor_storage = value; }
+    #secondarySidebar_accessor_storage = null;
+    get secondarySidebar() { return this.#secondarySidebar_accessor_storage; }
+    set secondarySidebar(value) { this.#secondarySidebar_accessor_storage = value; }
+    #statusBar_accessor_storage = null;
+    get statusBar() { return this.#statusBar_accessor_storage; }
+    set statusBar(value) { this.#statusBar_accessor_storage = value; }
+    #showSecondary_accessor_storage = false;
+    get showSecondary() { return this.#showSecondary_accessor_storage; }
+    set showSecondary(value) { this.#showSecondary_accessor_storage = value; }
+    createRenderRoot() {
+        return this;
+    }
+    render() {
+        return html `
+      <div class="flex flex-col h-full w-full bg-background text-foreground" data-layout-layer="shell">
+        <div class="flex flex-1 min-h-0 overflow-hidden">
+          ${this.activityBar ?? nothing} ${this.primarySidebar ?? nothing}
+          <div class="flex-1 min-w-0 h-full flex flex-col" data-region="main">${this.mainContent ?? nothing}</div>
+          ${this.showSecondary ? (this.secondarySidebar ?? nothing) : nothing}
+        </div>
+        ${this.statusBar ? html `<div class="flex-shrink-0">${this.statusBar}</div>` : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], AppShellLayout.prototype, "activityBar", null);
+__decorate([
+    property({ attribute: false })
+], AppShellLayout.prototype, "primarySidebar", null);
+__decorate([
+    property({ attribute: false })
+], AppShellLayout.prototype, "mainContent", null);
+__decorate([
+    property({ attribute: false })
+], AppShellLayout.prototype, "secondarySidebar", null);
+__decorate([
+    property({ attribute: false })
+], AppShellLayout.prototype, "statusBar", null);
+__decorate([
+    property({ type: Boolean })
+], AppShellLayout.prototype, "showSecondary", null);
+AppShellLayout = __decorate([
+    customElement('uik-shell-layout')
+], AppShellLayout);
+export { AppShellLayout };
+//# sourceMappingURL=AppShellLayout.js.map

package/dist/AppShellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellLayout.js","sourceRoot":"","sources":["../AppShellLayout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAGnD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IACL,gCAAuB,IAAI,CAAC;IAA5B,IAAA,WAAW,iDAAiB;IAA5B,IAAA,WAAW,uDAAiB;IAC5B,mCAA0B,IAAI,CAAC;IAA/B,IAAA,cAAc,oDAAiB;IAA/B,IAAA,cAAc,0DAAiB;IAC/B,gCAAuB,IAAI,CAAC;IAA5B,IAAA,WAAW,iDAAiB;IAA5B,IAAA,WAAW,uDAAiB;IAC5B,qCAA4B,IAAI,CAAC;IAAjC,IAAA,gBAAgB,sDAAiB;IAAjC,IAAA,gBAAgB,4DAAiB;IACjC,8BAAqB,IAAI,CAAC;IAA1B,IAAA,SAAS,+CAAiB;IAA1B,IAAA,SAAS,qDAAiB;IAC7B,kCAAgB,KAAK,CAAC;IAAtB,IAAA,aAAa,mDAAS;IAAtB,IAAA,aAAa,yDAAS;IAEjD,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,WAAW,IAAI,OAAO,IAAI,IAAI,CAAC,cAAc,IAAI,OAAO;gFACO,IAAI,CAAC,WAAW,IAAI,OAAO;YAC/F,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;;UAEnE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,OAAO;;KAExF,CAAC;IACJ,CAAC;CACF,CAAA;AAvBwC;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;iDAAsC;AAC5B;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;oDAAyC;AAC/B;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;iDAAsC;AAC5B;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;sDAA2C;AACjC;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;+CAAoC;AAC7B;IAAnC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;mDAAgC;AAN/C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwB1B"}

package/dist/SecondarySidebar.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, nothing } from 'lit';
+import '@ismail-elkorchi/ui-primitives/button';
+import '@ismail-elkorchi/ui-primitives/separator';
+export declare class AppShellSecondarySidebar extends LitElement {
+    accessor open: boolean;
+    accessor heading: string;
+    accessor body: unknown;
+    accessor footer: unknown;
+    createRenderRoot(): this;
+    private close;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-secondary-sidebar': AppShellSecondarySidebar;
+    }
+}
+//# sourceMappingURL=SecondarySidebar.d.ts.map

package/dist/SecondarySidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondarySidebar.d.ts","sourceRoot":"","sources":["../SecondarySidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAC,MAAM,KAAK,CAAC;AAG9C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0CAA0C,CAAC;AAElD,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,QAAQ,CAAC,IAAI,UAAS;IACvB,QAAQ,CAAC,OAAO,SAAM;IAClB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAQ;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAQ;IAErD,gBAAgB;IAIzB,OAAO,CAAC,KAAK,CAEX;IAEO,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/SecondarySidebar.js

@@ -0,0 +1,84 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@ismail-elkorchi/ui-primitives/button';
+import '@ismail-elkorchi/ui-primitives/separator';
+let AppShellSecondarySidebar = class AppShellSecondarySidebar extends LitElement {
+    #open_accessor_storage = false;
+    get open() { return this.#open_accessor_storage; }
+    set open(value) { this.#open_accessor_storage = value; }
+    #heading_accessor_storage = '';
+    get heading() { return this.#heading_accessor_storage; }
+    set heading(value) { this.#heading_accessor_storage = value; }
+    #body_accessor_storage = null;
+    get body() { return this.#body_accessor_storage; }
+    set body(value) { this.#body_accessor_storage = value; }
+    #footer_accessor_storage = null;
+    get footer() { return this.#footer_accessor_storage; }
+    set footer(value) { this.#footer_accessor_storage = value; }
+    createRenderRoot() {
+        return this;
+    }
+    close = () => {
+        this.dispatchEvent(new CustomEvent('secondary-close', { bubbles: true, composed: true }));
+    };
+    render() {
+        if (!this.open)
+            return nothing;
+        return html `
+      <aside
+        data-region="secondary-sidebar"
+        class="w-80 bg-card flex flex-col border-l border-border flex-shrink-0 h-full text-foreground">
+        <div class="h-10 px-4 flex items-center justify-between bg-card select-none flex-shrink-0">
+          <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground truncate">
+            ${this.heading || 'Secondary'}
+          </span>
+          <uik-button
+            variant="ghost"
+            size="icon"
+            class="h-7 w-7"
+            muted
+            aria-label="Close secondary sidebar"
+            title="Close secondary sidebar"
+            @click=${this.close}>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </uik-button>
+        </div>
+        <uik-separator orientation="horizontal"></uik-separator>
+        <div class="flex-1 overflow-y-auto p-4 custom-scrollbar text-sm text-muted-foreground">
+          ${this.body ?? html `<p class="text-xs italic">Secondary sidebar content</p>`}
+        </div>
+        ${this.footer
+            ? html `
+              <uik-separator orientation="horizontal"></uik-separator>
+              <div class="p-3 border-t border-border bg-card">${this.footer}</div>
+            `
+            : nothing}
+      </aside>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], AppShellSecondarySidebar.prototype, "open", null);
+__decorate([
+    property({ type: String })
+], AppShellSecondarySidebar.prototype, "heading", null);
+__decorate([
+    property({ attribute: false })
+], AppShellSecondarySidebar.prototype, "body", null);
+__decorate([
+    property({ attribute: false })
+], AppShellSecondarySidebar.prototype, "footer", null);
+AppShellSecondarySidebar = __decorate([
+    customElement('uik-shell-secondary-sidebar')
+], AppShellSecondarySidebar);
+export { AppShellSecondarySidebar };
+//# sourceMappingURL=SecondarySidebar.js.map

package/dist/SecondarySidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondarySidebar.js","sourceRoot":"","sources":["../SecondarySidebar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0CAA0C,CAAC;AAG3C,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAClB,yBAAO,KAAK,CAAC;IAAb,IAAA,IAAI,0CAAS;IAAb,IAAA,IAAI,gDAAS;IACd,4BAAU,EAAE,CAAC;IAAb,IAAA,OAAO,6CAAM;IAAb,IAAA,OAAO,mDAAM;IACT,yBAAgB,IAAI,CAAC;IAArB,IAAA,IAAI,0CAAiB;IAArB,IAAA,IAAI,gDAAiB;IACrB,2BAAkB,IAAI,CAAC;IAAvB,IAAA,MAAM,4CAAiB;IAAvB,IAAA,MAAM,kDAAiB;IAErD,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,KAAK,GAAG,GAAG,EAAE;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC1F,CAAC,CAAC;IAEO,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAE/B,OAAO,IAAI,CAAA;;;;;;cAMD,IAAI,CAAC,OAAO,IAAI,WAAW;;;;;;;;;qBASpB,IAAI,CAAC,KAAK;;;;;;;;YAQnB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAA,yDAAyD;;UAE5E,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;gEAEgD,IAAI,CAAC,MAAM;aAC9D;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF,CAAA;AAlDqC;IAAnC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;oDAAuB;AACd;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uDAAuB;AACT;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;oDAA+B;AACrB;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;sDAAiC;AAJnD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAmDpC"}

package/dist/Sidebar.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import '@ismail-elkorchi/ui-primitives/separator';
+export declare class AppShellSidebar extends LitElement {
+    accessor heading: string;
+    accessor subtitle: string;
+    accessor paddedBody: boolean;
+    accessor scrollBody: boolean;
+    accessor actions: unknown;
+    accessor body: unknown;
+    accessor footer: unknown;
+    createRenderRoot(): this;
+    private getBodyClasses;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-sidebar': AppShellSidebar;
+    }
+}
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../Sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAG9C,OAAO,0CAA0C,CAAC;AAElD,qBACa,eAAgB,SAAQ,UAAU;IACnB,QAAQ,CAAC,OAAO,SAAM;IACtB,QAAQ,CAAC,QAAQ,SAAM;IACtB,QAAQ,CAAC,UAAU,UAAQ;IAC3B,QAAQ,CAAC,UAAU,UAAQ;IACxB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAQ;IACjC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAQ;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAQ;IAErD,gBAAgB;IAIzB,OAAO,CAAC,cAAc;IAcb,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/Sidebar.js

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@ismail-elkorchi/ui-primitives/separator';
+let AppShellSidebar = class AppShellSidebar extends LitElement {
+    #heading_accessor_storage = '';
+    get heading() { return this.#heading_accessor_storage; }
+    set heading(value) { this.#heading_accessor_storage = value; }
+    #subtitle_accessor_storage = '';
+    get subtitle() { return this.#subtitle_accessor_storage; }
+    set subtitle(value) { this.#subtitle_accessor_storage = value; }
+    #paddedBody_accessor_storage = true;
+    get paddedBody() { return this.#paddedBody_accessor_storage; }
+    set paddedBody(value) { this.#paddedBody_accessor_storage = value; }
+    #scrollBody_accessor_storage = true;
+    get scrollBody() { return this.#scrollBody_accessor_storage; }
+    set scrollBody(value) { this.#scrollBody_accessor_storage = value; }
+    #actions_accessor_storage = null;
+    get actions() { return this.#actions_accessor_storage; }
+    set actions(value) { this.#actions_accessor_storage = value; }
+    #body_accessor_storage = null;
+    get body() { return this.#body_accessor_storage; }
+    set body(value) { this.#body_accessor_storage = value; }
+    #footer_accessor_storage = null;
+    get footer() { return this.#footer_accessor_storage; }
+    set footer(value) { this.#footer_accessor_storage = value; }
+    createRenderRoot() {
+        return this;
+    }
+    getBodyClasses() {
+        return [
+            'flex-1',
+            'min-h-0',
+            'flex',
+            'flex-col',
+            this.paddedBody ? 'p-3' : '',
+            this.scrollBody ? 'overflow-y-auto custom-scrollbar' : '',
+            'gap-3'
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    render() {
+        return html `
+      <aside
+        data-region="primary-sidebar"
+        class="w-80 bg-background flex flex-col border-r border-border flex-shrink-0 h-full">
+        <div class="h-10 px-4 flex items-center justify-between bg-background select-none flex-shrink-0">
+          <div class="min-w-0">
+            ${this.heading
+            ? html `<div class="text-xs font-bold uppercase tracking-wider text-muted-foreground truncate">
+                  ${this.heading}
+                </div>`
+            : nothing}
+            ${this.subtitle
+            ? html `<div class="text-[11px] text-muted-foreground truncate">${this.subtitle}</div>`
+            : nothing}
+          </div>
+          <div class="flex items-center gap-1">${this.actions ?? nothing}</div>
+        </div>
+        <uik-separator orientation="horizontal"></uik-separator>
+        <div class="flex-1 min-h-0 flex flex-col overflow-hidden">
+          <div class="${this.getBodyClasses()}">${this.body ?? nothing}</div>
+          ${this.footer
+            ? html `
+                <uik-separator orientation="horizontal"></uik-separator>
+                <div class="p-3 border-t border-border bg-card">${this.footer}</div>
+              `
+            : nothing}
+        </div>
+      </aside>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AppShellSidebar.prototype, "heading", null);
+__decorate([
+    property({ type: String })
+], AppShellSidebar.prototype, "subtitle", null);
+__decorate([
+    property({ type: Boolean })
+], AppShellSidebar.prototype, "paddedBody", null);
+__decorate([
+    property({ type: Boolean })
+], AppShellSidebar.prototype, "scrollBody", null);
+__decorate([
+    property({ attribute: false })
+], AppShellSidebar.prototype, "actions", null);
+__decorate([
+    property({ attribute: false })
+], AppShellSidebar.prototype, "body", null);
+__decorate([
+    property({ attribute: false })
+], AppShellSidebar.prototype, "footer", null);
+AppShellSidebar = __decorate([
+    customElement('uik-shell-sidebar')
+], AppShellSidebar);
+export { AppShellSidebar };
+//# sourceMappingURL=Sidebar.js.map

package/dist/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../Sidebar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,0CAA0C,CAAC;AAG3C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IACV,4BAAU,EAAE,CAAC;IAAb,IAAA,OAAO,6CAAM;IAAb,IAAA,OAAO,mDAAM;IACb,6BAAW,EAAE,CAAC;IAAd,IAAA,QAAQ,8CAAM;IAAd,IAAA,QAAQ,oDAAM;IACb,+BAAa,IAAI,CAAC;IAAlB,IAAA,UAAU,gDAAQ;IAAlB,IAAA,UAAU,sDAAQ;IAClB,+BAAa,IAAI,CAAC;IAAlB,IAAA,UAAU,gDAAQ;IAAlB,IAAA,UAAU,sDAAQ;IACf,4BAAmB,IAAI,CAAC;IAAxB,IAAA,OAAO,6CAAiB;IAAxB,IAAA,OAAO,mDAAiB;IACxB,yBAAgB,IAAI,CAAC;IAArB,IAAA,IAAI,0CAAiB;IAArB,IAAA,IAAI,gDAAiB;IACrB,2BAAkB,IAAI,CAAC;IAAvB,IAAA,MAAM,4CAAiB;IAAvB,IAAA,MAAM,kDAAiB;IAErD,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,QAAQ;YACR,SAAS;YACT,MAAM;YACN,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE;YACzD,OAAO;SACR;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;cAMD,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;oBACA,IAAI,CAAC,OAAO;uBACT;YACT,CAAC,CAAC,OAAO;cACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,2DAA2D,IAAI,CAAC,QAAQ,QAAQ;YACtF,CAAC,CAAC,OAAO;;iDAE0B,IAAI,CAAC,OAAO,IAAI,OAAO;;;;wBAIhD,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI,CAAC,IAAI,IAAI,OAAO;YAC1D,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;kEAEgD,IAAI,CAAC,MAAM;eAC9D;YACH,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;CACF,CAAA;AAzDoC;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAuB;AACb;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAwB;AACb;IAAnC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAA4B;AAClB;IAAnC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAA4B;AACf;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;8CAAkC;AACxB;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;2CAA+B;AACrB;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;6CAAiC;AAPnD,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0D3B"}

package/dist/Statusbar.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import '@ismail-elkorchi/ui-primitives/badge';
+type StatusTone = 'info' | 'success' | 'error' | 'muted';
+export declare class AppShellStatusbar extends LitElement {
+    accessor message: string;
+    accessor tone: StatusTone;
+    accessor meta: unknown;
+    accessor actions: unknown;
+    createRenderRoot(): this;
+    private getToneClass;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-statusbar': AppShellStatusbar;
+    }
+}
+export {};
+//# sourceMappingURL=Statusbar.d.ts.map

package/dist/Statusbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statusbar.d.ts","sourceRoot":"","sources":["../Statusbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAG9C,OAAO,sCAAsC,CAAC;AAE9C,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEzD,qBACa,iBAAkB,SAAQ,UAAU;IACrB,QAAQ,CAAC,OAAO,SAAW;IAC3B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAU;IAC/B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAQ;IAC9B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAQ;IAEtD,gBAAgB;IAIzB,OAAO,CAAC,YAAY;IAiBX,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/Statusbar.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@ismail-elkorchi/ui-primitives/badge';
+let AppShellStatusbar = class AppShellStatusbar extends LitElement {
+    #message_accessor_storage = 'Ready';
+    get message() { return this.#message_accessor_storage; }
+    set message(value) { this.#message_accessor_storage = value; }
+    #tone_accessor_storage = 'info';
+    get tone() { return this.#tone_accessor_storage; }
+    set tone(value) { this.#tone_accessor_storage = value; }
+    #meta_accessor_storage = null;
+    get meta() { return this.#meta_accessor_storage; }
+    set meta(value) { this.#meta_accessor_storage = value; }
+    #actions_accessor_storage = null;
+    get actions() { return this.#actions_accessor_storage; }
+    set actions(value) { this.#actions_accessor_storage = value; }
+    createRenderRoot() {
+        return this;
+    }
+    getToneClass() {
+        switch (this.tone) {
+            case 'info':
+                return 'text-foreground';
+            case 'success':
+                return 'text-green-300';
+            case 'error':
+                return 'text-red-300';
+            case 'muted':
+                return 'text-muted-foreground';
+            default: {
+                const _exhaustive = this.tone;
+                return _exhaustive;
+            }
+        }
+    }
+    render() {
+        const metaContent = typeof this.meta === 'string' ? html `<uik-badge variant="outline">${this.meta}</uik-badge>` : this.meta;
+        return html `
+      <footer
+        data-region="status-bar"
+        class="h-6 bg-secondary text-secondary-foreground flex items-center justify-between text-xs select-none px-3 flex-shrink-0 border-t border-border">
+        <div class="flex items-center gap-3">
+          <span class="flex items-center gap-1.5 font-medium ${this.getToneClass()}">${this.message}</span>
+          ${this.actions ?? nothing}
+        </div>
+        <div class="flex items-center gap-2 text-muted-foreground">${metaContent ?? nothing}</div>
+      </footer>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AppShellStatusbar.prototype, "message", null);
+__decorate([
+    property({ type: String })
+], AppShellStatusbar.prototype, "tone", null);
+__decorate([
+    property({ attribute: false })
+], AppShellStatusbar.prototype, "meta", null);
+__decorate([
+    property({ attribute: false })
+], AppShellStatusbar.prototype, "actions", null);
+AppShellStatusbar = __decorate([
+    customElement('uik-shell-statusbar')
+], AppShellStatusbar);
+export { AppShellStatusbar };
+//# sourceMappingURL=Statusbar.js.map

package/dist/Statusbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statusbar.js","sourceRoot":"","sources":["../Statusbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,sCAAsC,CAAC;AAKvC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IACZ,4BAAU,OAAO,CAAC;IAAlB,IAAA,OAAO,6CAAW;IAAlB,IAAA,OAAO,mDAAW;IAClB,yBAAmB,MAAM,CAAC;IAA1B,IAAA,IAAI,0CAAsB;IAA1B,IAAA,IAAI,gDAAsB;IACtB,yBAAgB,IAAI,CAAC;IAArB,IAAA,IAAI,0CAAiB;IAArB,IAAA,IAAI,gDAAiB;IACrB,4BAAmB,IAAI,CAAC;IAAxB,IAAA,OAAO,6CAAiB;IAAxB,IAAA,OAAO,mDAAiB;IAEtD,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,MAAM;gBACT,OAAO,iBAAiB,CAAC;YAC3B,KAAK,SAAS;gBACZ,OAAO,gBAAgB,CAAC;YAC1B,KAAK,OAAO;gBACV,OAAO,cAAc,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,uBAAuB,CAAC;YACjC,OAAO,CAAC,CAAC,CAAC;gBACR,MAAM,WAAW,GAAU,IAAI,CAAC,IAAI,CAAC;gBACrC,OAAO,WAAW,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,WAAW,GACf,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAE1G,OAAO,IAAI,CAAA;;;;;+DAKgD,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,OAAO;YACvF,IAAI,CAAC,OAAO,IAAI,OAAO;;qEAEkC,WAAW,IAAI,OAAO;;KAEtF,CAAC;IACJ,CAAC;CACF,CAAA;AA1CoC;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDAA4B;AAClB;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CAAoC;AACtB;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;6CAA+B;AACrB;IAAtC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;gDAAkC;AAJpD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA2C7B"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './AppShellLayout';
+export * from './ActivityBar';
+export * from './Sidebar';
+export * from './SecondarySidebar';
+export * from './Statusbar';
+export * from './router';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from './AppShellLayout';
+export * from './ActivityBar';
+export * from './Sidebar';
+export * from './SecondarySidebar';
+export * from './Statusbar';
+export * from './router';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}

package/dist/register.d.ts

@@ -0,0 +1,6 @@
+import './AppShellLayout';
+import './ActivityBar';
+import './Sidebar';
+import './SecondarySidebar';
+import './Statusbar';
+//# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../register.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,WAAW,CAAC;AACnB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC"}

package/dist/register.js

@@ -0,0 +1,6 @@
+import './AppShellLayout';
+import './ActivityBar';
+import './Sidebar';
+import './SecondarySidebar';
+import './Statusbar';
+//# sourceMappingURL=register.js.map

package/dist/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../register.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,WAAW,CAAC;AACnB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC"}

package/dist/router.d.ts

@@ -0,0 +1,36 @@
+export declare const APP_SHELL_NAV_EVENT = "app-shell:navigate";
+export interface AppShellRoute {
+    id: string;
+    label?: string;
+    subviews?: string[];
+    defaultSubview?: string;
+}
+export interface AppShellLocation {
+    view: string;
+    subview?: string | undefined;
+}
+export interface AppShellNavigationDetail {
+    from: AppShellLocation;
+    to: AppShellLocation;
+    route: AppShellRoute;
+}
+export interface AppShellRouterConfig {
+    routes: AppShellRoute[];
+    initialView?: string;
+    initialSubview?: string;
+}
+export type AppShellNavigationListener = (location: AppShellLocation) => void;
+export declare class AppShellRouter extends EventTarget {
+    private readonly routes;
+    private readonly lastSubviews;
+    private location;
+    constructor(config: AppShellRouterConfig);
+    get current(): AppShellLocation;
+    get routeList(): AppShellRoute[];
+    subscribe(listener: AppShellNavigationListener): () => void;
+    navigate(view: string, subview?: string): void;
+    private resolveInitialView;
+    private resolveSubview;
+}
+export declare const createAppShellRouter: (config: AppShellRouterConfig) => AppShellRouter;
+//# sourceMappingURL=router.d.ts.map

package/dist/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../router.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,gBAAgB,CAAC;IACvB,EAAE,EAAE,gBAAgB,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAE9E,qBAAa,cAAe,SAAQ,WAAW;IAC7C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAoC;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAyC;IACtE,OAAO,CAAC,QAAQ,CAAmB;gBAEvB,MAAM,EAAE,oBAAoB;IAWxC,IAAI,OAAO,IAAI,gBAAgB,CAE9B;IAED,IAAI,SAAS,IAAI,aAAa,EAAE,CAE/B;IAED,SAAS,CAAC,QAAQ,EAAE,0BAA0B,GAAG,MAAM,IAAI;IAc3D,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM;IAuBvC,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,cAAc;CAgBvB;AAED,eAAO,MAAM,oBAAoB,GAAI,QAAQ,oBAAoB,mBAA+B,CAAC"}

package/dist/router.js

@@ -0,0 +1,72 @@
+export const APP_SHELL_NAV_EVENT = 'app-shell:navigate';
+export class AppShellRouter extends EventTarget {
+    routes = new Map();
+    lastSubviews = new Map();
+    location;
+    constructor(config) {
+        super();
+        if (!config.routes.length)
+            throw new Error('AppShellRouter requires at least one route.');
+        config.routes.forEach(route => this.routes.set(route.id, route));
+        const view = this.resolveInitialView(config.initialView);
+        const subview = this.resolveSubview(view, config.initialSubview);
+        this.location = { view, subview };
+    }
+    get current() {
+        return { ...this.location };
+    }
+    get routeList() {
+        return Array.from(this.routes.values());
+    }
+    subscribe(listener) {
+        const handler = (event) => {
+            const detail = event.detail;
+            listener(detail.to);
+        };
+        this.addEventListener(APP_SHELL_NAV_EVENT, handler);
+        listener(this.current);
+        return () => {
+            this.removeEventListener(APP_SHELL_NAV_EVENT, handler);
+        };
+    }
+    navigate(view, subview) {
+        const route = this.routes.get(view);
+        if (!route)
+            throw new Error(`Unknown route "${view}".`);
+        const resolvedSubview = this.resolveSubview(view, subview);
+        const next = { view, subview: resolvedSubview };
+        if (next.view === this.location.view && next.subview === this.location.subview)
+            return;
+        const previous = this.location;
+        this.location = next;
+        this.dispatchEvent(new CustomEvent(APP_SHELL_NAV_EVENT, { detail: { from: previous, to: next, route } }));
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent(APP_SHELL_NAV_EVENT, { detail: { from: previous, to: next, route } }));
+        }
+    }
+    resolveInitialView(initialView) {
+        if (initialView && this.routes.has(initialView))
+            return initialView;
+        const first = this.routes.values().next().value;
+        if (!first)
+            throw new Error('AppShellRouter requires at least one route.');
+        return first.id;
+    }
+    resolveSubview(view, requested) {
+        const route = this.routes.get(view);
+        if (!route?.subviews?.length)
+            return undefined;
+        if (requested && route.subviews.includes(requested)) {
+            this.lastSubviews.set(view, requested);
+            return requested;
+        }
+        const remembered = this.lastSubviews.get(view);
+        if (remembered && route.subviews.includes(remembered))
+            return remembered;
+        const fallback = route.defaultSubview ?? route.subviews[0];
+        this.lastSubviews.set(view, fallback);
+        return fallback;
+    }
+}
+export const createAppShellRouter = (config) => new AppShellRouter(config);
+//# sourceMappingURL=router.js.map

package/dist/router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../router.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-source.css

@@ -0,0 +1,2 @@
+/* Tailwind v4 scanning hints for @ismail-elkorchi/ui-shell */
+@source "./**/*.{ts,js}";

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@ismail-elkorchi/ui-shell",
+  "version": "0.1.0",
+  "description": "Light DOM shell components for Tailwind-friendly layouts built with Lit.",
+  "author": "Ismail El Korchi",
+  "license": "Apache-2.0",
+  "type": "module",
+  "keywords": ["lit", "web-components", "layout", "shell", "tailwind", "ui"],
+  "engines": {"node": ">=20.11"},
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./index": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "import": "./dist/register.js",
+      "default": "./dist/register.js"
+    },
+    "./layout": {
+      "types": "./dist/AppShellLayout.d.ts",
+      "import": "./dist/AppShellLayout.js",
+      "default": "./dist/AppShellLayout.js"
+    },
+    "./activity-bar": {
+      "types": "./dist/ActivityBar.d.ts",
+      "import": "./dist/ActivityBar.js",
+      "default": "./dist/ActivityBar.js"
+    },
+    "./sidebar": {
+      "types": "./dist/Sidebar.d.ts",
+      "import": "./dist/Sidebar.js",
+      "default": "./dist/Sidebar.js"
+    },
+    "./secondary-sidebar": {
+      "types": "./dist/SecondarySidebar.d.ts",
+      "import": "./dist/SecondarySidebar.js",
+      "default": "./dist/SecondarySidebar.js"
+    },
+    "./statusbar": {
+      "types": "./dist/Statusbar.d.ts",
+      "import": "./dist/Statusbar.js",
+      "default": "./dist/Statusbar.js"
+    },
+    "./router": {
+      "types": "./dist/router.d.ts",
+      "import": "./dist/router.js",
+      "default": "./dist/router.js"
+    },
+    "./tailwind-source.css": "./dist/tailwind-source.css"
+  },
+  "sideEffects": [
+    "./dist/**/*.js",
+    "./dist/**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsc -p tsconfig.build.json && node -e \"const fs = require('fs'); fs.mkdirSync('dist', {recursive: true}); fs.copyFileSync('tailwind-source.css', 'dist/tailwind-source.css');\"",
+    "clean": "node -e \"const fs = require('fs'); fs.rmSync('dist', {recursive: true, force: true}); fs.rmSync('.tsbuildinfo', {force: true});\"",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "prepack": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ismail-elkorchi/ui-kit.git",
+    "directory": "packages/ui-shell"
+  },
+  "bugs": {
+    "url": "https://github.com/Ismail-elkorchi/ui-kit/issues"
+  },
+  "homepage": "https://github.com/Ismail-elkorchi/ui-kit",
+  "dependencies": {
+    "@ismail-elkorchi/ui-primitives": "^0.1.0",
+    "lit": "^3.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}