@net-advantage/nabs-ui-shell 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# nabs-ui-shell
+
+Reusable React app shell for the Nabs UI library.
+
+## Usage
+
+```tsx
+import { Shell } from "@net-advantage/nabs-ui-shell/Shell";
+import { Button } from "@net-advantage/nabs-ui-buttons/Button";
+
+export function Example() {
+  return (
+    <Shell
+      header={<div>Header content</div>}
+      navigation={<nav>Navigation</nav>}
+      footer={<div>Footer content</div>}
+    >
+      <main>Main content</main>
+    </Shell>
+  );
+}
+```
+
+## Props
+
+- `header` renders the shell header area.
+- `navigation` renders the primary side navigation.
+- `footer` renders the shell footer area.
+- `children` renders the main content area.
+
+The shell composes the `nabs-ui-layout` control and uses Tailwind utilities for its presentation styles.
+Header and footer height are driven by their content, so they stay static around the main content area.

package/dist/nabs-ui-shell.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n=e((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),r=e((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),i=e(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=n():t.exports=r()}))();function a({as:e=`div`,className:t=``,children:n,...r}){return(0,i.jsx)(e,{className:t,...r,children:n})}function o({header:e,footer:t,leftSidePanel:n,rightSidePanel:r,children:o,className:s=``,headerClassName:c=``,footerClassName:l=``,leftSidePanelClassName:u=``,rightSidePanelClassName:d=``,contentClassName:f=``,...p}){let m=e!=null&&e!==!1,h=t!=null&&t!==!1,g=n!=null&&n!==!1,_=r!=null&&r!==!1,v=[`nabs-ui-layout__body`,g&&_?`nabs-ui-layout__body--with-both-panels`:``,g&&!_?`nabs-ui-layout__body--with-left-panel`:``,!g&&_?`nabs-ui-layout__body--with-right-panel`:``].filter(Boolean).join(` `);return(0,i.jsxs)(`div`,{className:[`nabs-ui-layout`,s].filter(Boolean).join(` `),...p,children:[m?(0,i.jsx)(a,{as:`header`,className:`nabs-ui-layout__headerWrapper`,children:(0,i.jsx)(`div`,{className:[`nabs-ui-layout__header`,c].filter(Boolean).join(` `),children:e})}):null,(0,i.jsxs)(`div`,{className:v,children:[g?(0,i.jsx)(a,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--left`,u].filter(Boolean).join(` `),children:n}):null,(0,i.jsx)(a,{as:`section`,className:[`nabs-ui-layout__content`,f].filter(Boolean).join(` `),children:o}),_?(0,i.jsx)(a,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--right`,d].filter(Boolean).join(` `),children:r}):null]}),h?(0,i.jsx)(a,{as:`footer`,className:`nabs-ui-layout__footerWrapper`,children:(0,i.jsx)(`div`,{className:[`nabs-ui-layout__footer`,l].filter(Boolean).join(` `),children:t})}):null]})}var s=(0,t.forwardRef)(({header:e,navigation:t,footer:n,children:r,className:a=``,headerClassName:s=``,navigationClassName:c=``,contentClassName:l=``,footerClassName:u=``,...d},f)=>{let p=[`nabs-ui-shell`,a].filter(Boolean).join(` `),m=[`flex flex-wrap items-center justify-between gap-4 px-5 py-4`,s].filter(Boolean).join(` `),h=[`flex h-full min-h-0 flex-col gap-4 overflow-y-auto p-4`,c].filter(Boolean).join(` `),g=[`min-w-0`,l].filter(Boolean).join(` `),_=[`flex flex-wrap items-center justify-between gap-4 px-5 py-4`,u].filter(Boolean).join(` `);return(0,i.jsx)(`div`,{ref:f,className:p,...d,children:(0,i.jsx)(o,{className:`nabs-ui-shell__layout`,header:e,footer:n,leftSidePanel:t,headerClassName:m,footerClassName:_,leftSidePanelClassName:h,contentClassName:g,children:r})})});s.displayName=`Shell`,exports.Shell=s;

package/dist/nabs-ui-shell.css

@@ -0,0 +1,420 @@
+.nabs-ui-layout {
+  --nabs-ui-layout-gap: 1rem;
+  --nabs-ui-layout-border: #cbd5e1;
+  --nabs-ui-layout-surface: #ffffff;
+  --nabs-ui-layout-panel-surface: #f8fafc;
+  --nabs-ui-layout-content-surface: #ffffff;
+  --nabs-ui-layout-radius: 1rem;
+  display: grid;
+  gap: var(--nabs-ui-layout-gap);
+  min-width: 0;
+}
+
+.nabs-ui-layout__headerWrapper,
+.nabs-ui-layout__footerWrapper {
+  min-width: 0;
+}
+
+.nabs-ui-layout__header,
+.nabs-ui-layout__footer,
+.nabs-ui-layout__panel,
+.nabs-ui-layout__content {
+  border: 1px solid var(--nabs-ui-layout-border);
+  border-radius: var(--nabs-ui-layout-radius);
+  min-width: 0;
+}
+
+.nabs-ui-layout__header,
+.nabs-ui-layout__footer,
+.nabs-ui-layout__panel,
+.nabs-ui-layout__content {
+  box-sizing: border-box;
+  padding: 1rem;
+}
+
+.nabs-ui-layout__header,
+.nabs-ui-layout__footer {
+  background: var(--nabs-ui-layout-surface);
+}
+
+.nabs-ui-layout__body {
+  display: grid;
+  gap: var(--nabs-ui-layout-gap);
+  min-width: 0;
+}
+
+.nabs-ui-layout__body--with-both-panels {
+  grid-template-columns:
+    minmax(0, var(--nabs-ui-layout-left-panel-width, 18rem))
+    minmax(0, 1fr)
+    minmax(0, var(--nabs-ui-layout-right-panel-width, 18rem));
+}
+
+.nabs-ui-layout__body--with-left-panel {
+  grid-template-columns: minmax(0, var(--nabs-ui-layout-left-panel-width, 18rem)) minmax(0, 1fr);
+}
+
+.nabs-ui-layout__body--with-right-panel {
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--nabs-ui-layout-right-panel-width, 18rem));
+}
+
+.nabs-ui-layout__panel {
+  background: var(--nabs-ui-layout-panel-surface);
+}
+
+.nabs-ui-layout__content {
+  background: var(--nabs-ui-layout-content-surface);
+}
+
+.nabs-ui-layout__content > :first-child {
+  margin-top: 0;
+}
+
+.nabs-ui-layout__content > :last-child {
+  margin-bottom: 0;
+}/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --spacing: .25rem;
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+
+@layer base {
+  *, :after, :before, ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol, ul, menu {
+    list-style: none;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button, input, select, optgroup, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+@layer components;
+
+@layer utilities {
+  .static {
+    position: static;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .min-h-0 {
+    min-height: 0;
+  }
+
+  .min-w-0 {
+    min-width: 0;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+}
+
+.nabs-ui-shell {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  height: 100dvh;
+  display: grid;
+}
+
+.nabs-ui-shell__layout {
+  height: 100%;
+  min-height: 0;
+}
+
+.nabs-ui-shell__layout .nabs-ui-layout__body {
+  min-height: 0;
+}
+
+.nabs-ui-shell__layout .nabs-ui-layout__panel--left {
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.nabs-ui-shell__layout .nabs-ui-layout__content {
+  min-height: 0;
+  overflow: auto;
+}
+/*$vite$:1*/

package/dist/nabs-ui-shell.js

@@ -0,0 +1,270 @@
+import { forwardRef as e } from "react";
+//#region \0rolldown/runtime.js
+var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), r = /* @__PURE__ */ t(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), i = /* @__PURE__ */ t(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function r(e) {
+			return "" + e;
+		}
+		function i(e) {
+			try {
+				r(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var n = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return n.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), r(e);
+			}
+		}
+		function a(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function o() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function s() {
+			return Error("react-stack-top-frame");
+		}
+		function c(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function l(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function u() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function d(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: u
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, r, a, s, u) {
+			var f = n.children;
+			if (f !== void 0) if (a) if (M(f)) {
+				for (a = 0; a < f.length; a++) p(f[a]);
+				Object.freeze && Object.freeze(f);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else p(f);
+			if (j.call(n, "key")) {
+				f = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
+			}
+			if (f = null, r !== void 0 && (i(r), f = "" + r), c(n) && (i(n.key), f = "" + n.key), "key" in n) for (var h in r = {}, n) h !== "key" && (r[h] = n[h]);
+			else r = n;
+			return f && l(r, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, r, o(), s, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = n("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(a(s)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
+		};
+	})();
+})), a = (/* @__PURE__ */ t(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = r() : t.exports = i();
+})))();
+function o({ as: e = "div", className: t = "", children: n, ...r }) {
+	return /* @__PURE__ */ (0, a.jsx)(e, {
+		className: t,
+		...r,
+		children: n
+	});
+}
+function s({ header: e, footer: t, leftSidePanel: n, rightSidePanel: r, children: i, className: s = "", headerClassName: c = "", footerClassName: l = "", leftSidePanelClassName: u = "", rightSidePanelClassName: d = "", contentClassName: f = "", ...p }) {
+	let m = e != null && e !== !1, h = t != null && t !== !1, g = n != null && n !== !1, _ = r != null && r !== !1, v = [
+		"nabs-ui-layout__body",
+		g && _ ? "nabs-ui-layout__body--with-both-panels" : "",
+		g && !_ ? "nabs-ui-layout__body--with-left-panel" : "",
+		!g && _ ? "nabs-ui-layout__body--with-right-panel" : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, a.jsxs)("div", {
+		className: ["nabs-ui-layout", s].filter(Boolean).join(" "),
+		...p,
+		children: [
+			m ? /* @__PURE__ */ (0, a.jsx)(o, {
+				as: "header",
+				className: "nabs-ui-layout__headerWrapper",
+				children: /* @__PURE__ */ (0, a.jsx)("div", {
+					className: ["nabs-ui-layout__header", c].filter(Boolean).join(" "),
+					children: e
+				})
+			}) : null,
+			/* @__PURE__ */ (0, a.jsxs)("div", {
+				className: v,
+				children: [
+					g ? /* @__PURE__ */ (0, a.jsx)(o, {
+						as: "aside",
+						className: [
+							"nabs-ui-layout__panel",
+							"nabs-ui-layout__panel--left",
+							u
+						].filter(Boolean).join(" "),
+						children: n
+					}) : null,
+					/* @__PURE__ */ (0, a.jsx)(o, {
+						as: "section",
+						className: ["nabs-ui-layout__content", f].filter(Boolean).join(" "),
+						children: i
+					}),
+					_ ? /* @__PURE__ */ (0, a.jsx)(o, {
+						as: "aside",
+						className: [
+							"nabs-ui-layout__panel",
+							"nabs-ui-layout__panel--right",
+							d
+						].filter(Boolean).join(" "),
+						children: r
+					}) : null
+				]
+			}),
+			h ? /* @__PURE__ */ (0, a.jsx)(o, {
+				as: "footer",
+				className: "nabs-ui-layout__footerWrapper",
+				children: /* @__PURE__ */ (0, a.jsx)("div", {
+					className: ["nabs-ui-layout__footer", l].filter(Boolean).join(" "),
+					children: t
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/Shell.tsx
+var c = e(({ header: e, navigation: t, footer: n, children: r, className: i = "", headerClassName: o = "", navigationClassName: c = "", contentClassName: l = "", footerClassName: u = "", ...d }, f) => {
+	let p = ["nabs-ui-shell", i].filter(Boolean).join(" "), m = ["flex flex-wrap items-center justify-between gap-4 px-5 py-4", o].filter(Boolean).join(" "), h = ["flex h-full min-h-0 flex-col gap-4 overflow-y-auto p-4", c].filter(Boolean).join(" "), g = ["min-w-0", l].filter(Boolean).join(" "), _ = ["flex flex-wrap items-center justify-between gap-4 px-5 py-4", u].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, a.jsx)("div", {
+		ref: f,
+		className: p,
+		...d,
+		children: /* @__PURE__ */ (0, a.jsx)(s, {
+			className: "nabs-ui-shell__layout",
+			header: e,
+			footer: n,
+			leftSidePanel: t,
+			headerClassName: m,
+			footerClassName: _,
+			leftSidePanelClassName: h,
+			contentClassName: g,
+			children: r
+		})
+	});
+});
+c.displayName = "Shell";
+//#endregion
+export { c as Shell };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@net-advantage/nabs-ui-shell",
+  "version": "0.1.0",
+  "description": "Reusable React app shell for the Nabs UI library.",
+  "type": "module",
+  "main": "./dist/nabs-ui-shell.cjs",
+  "module": "./dist/nabs-ui-shell.js",
+  "exports": {
+    ".": {
+      "import": "./dist/nabs-ui-shell.js",
+      "require": "./dist/nabs-ui-shell.cjs"
+    },
+    "./Shell": "./src/Shell.tsx",
+    "./style.css": "./dist/nabs-ui-shell.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "nabs-ui-layout": "file:../nabs-ui-layout",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.1.0",
+    "vite": "^8.0.12"
+  }
+}