@stacksjs/components 0.2.164 → 0.2.166

package/dist/{SidebarSpace-h50n47va.stx → SidebarSpace-t68ywe45.stx}

@@ -16,6 +16,19 @@ export const clear = $props.clear || null
 export const theme = $props.theme || 'arc'
 export const active = $props.active ?? false
 
+// Render the shell without its contents.
+//
+// Every space's rows are rendered on the server even though the Arc design
+// shows one at a time, and that cost is linear in the number of spaces: a host
+// with fourteen projects pays for fourteen panels on every page load to display
+// one. `deferred` keeps the panel — the track's geometry, the tab role and the
+// swipe all depend on it existing — and drops what is inside it.
+//
+// The space still announces itself as a tabpanel, so the switcher and keyboard
+// navigation are unchanged; `data-space-deferred` tells the controller this one
+// has nothing yet, and `spaceChange` is where a host fills it or navigates.
+export const deferred = $props.deferred ?? false
+
 const themeStyle = resolveSidebarTheme(theme)
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -64,6 +77,7 @@ function onAction(event) {
   data-space
   data-space-id="{{ id }}"
   data-space-active="{{ active ? 'true' : 'false' }}"
+  @if(deferred)data-space-deferred@endif
   @if(!active)inert@endif
   class="flex min-w-0 flex-1 flex-col"
   role="tabpanel"
@@ -71,7 +85,9 @@ function onAction(event) {
   @click="onAction($event)"
 >
   <div class="{{ scrollAreaClasses }} stx-sidebar-scroll">
-    <SidebarPinned :items="pinned" />
+    @if(!deferred)
+      <SidebarPinned :items="pinned" />
+    @endif
 
     @if(label)
       <div class="{{ titleClasses }}">
@@ -82,6 +98,12 @@ function onAction(event) {
       </div>
     @endif
 
+    <!--
+      Rows, and the actions that belong with them, are what a deferred panel
+      drops. The title above stays: it is a single line, and it is what tells
+      you which space you are swiping into.
+    -->
+    @if(!deferred)
     @foreach(sections as section)
       <SidebarSection
         :id="section.id"
@@ -123,6 +145,7 @@ function onAction(event) {
         <span class="truncate">{{ action.label }}</span>
       </button>
     @endif
+    @endif
   </div>
 </section>
 

package/dist/{SidebarSpaces-sy8dy0gb.stx → SidebarSpaces-w17e6ma4.stx}

@@ -514,6 +514,7 @@ defineExpose({
           :action="space.action"
           :clear="space.clear"
           :active="space.id === activeId"
+          :deferred="space.deferred === true"
           :theme="theme"
         />
       @endforeach

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-oM6fYt/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-dyAtys/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-oM6fYt/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-dyAtys/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-oM6fYt/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-dyAtys/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-oM6fYt/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-dyAtys/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1144,9 +1144,9 @@ var SidebarPinned_default = "./SidebarPinned-tvj28bm0.stx";
 // src/ui/sidebar/SidebarSection.stx
 var SidebarSection_default = "./SidebarSection-zd9z35ch.stx";
 // src/ui/sidebar/SidebarSpace.stx
-var SidebarSpace_default = "./SidebarSpace-h50n47va.stx";
+var SidebarSpace_default = "./SidebarSpace-t68ywe45.stx";
 // src/ui/sidebar/SidebarSpaces.stx
-var SidebarSpaces_default = "./SidebarSpaces-sy8dy0gb.stx";
+var SidebarSpaces_default = "./SidebarSpaces-w17e6ma4.stx";
 // src/ui/sidebar/SidebarSpaceSwitcher.stx
 var SidebarSpaceSwitcher_default = "./SidebarSpaceSwitcher-882njcxq.stx";
 // src/ui/sidebar/themes.ts
@@ -1427,7 +1427,8 @@ function normalizeSpace(space) {
     action: normalizeAction(space.action, space.id, "action", "i-f7-plus"),
     clear: normalizeAction(space.clear, space.id, "clear", "i-f7-arrow-down"),
     tint,
-    style: spaceTintVars(tint)
+    style: spaceTintVars(tint),
+    deferred: space.deferred === true
   };
 }
 function normalizeSpaces(spaces) {

package/dist/ui/sidebar/spaces.d.ts

@@ -81,6 +81,7 @@ export declare interface SidebarSpaceData {
   icon?: string
   tint?: string | SidebarSpaceTint
   pinned?: SidebarPinnedItemData[]
+  deferred?: boolean
   sections?: SidebarSectionData[]
   action?: SidebarSpaceActionData
   clear?: SidebarSpaceActionData
@@ -102,4 +103,5 @@ export declare interface NormalizedSidebarSpace {
   clear: SidebarSpaceActionData | null
   tint: SidebarSpaceTint
   style: string
+  deferred: boolean
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.164",
+  "version": "0.2.166",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -64,8 +64,8 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@cwcss/crosswind": "^0.2.14",
-    "@stacksjs/stx": "0.2.164",
-    "bun-plugin-stx": "0.2.164",
+    "@stacksjs/stx": "0.2.166",
+    "bun-plugin-stx": "0.2.166",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/ui/sidebar/SidebarSpace.stx

@@ -16,6 +16,19 @@ export const clear = $props.clear || null
 export const theme = $props.theme || 'arc'
 export const active = $props.active ?? false
 
+// Render the shell without its contents.
+//
+// Every space's rows are rendered on the server even though the Arc design
+// shows one at a time, and that cost is linear in the number of spaces: a host
+// with fourteen projects pays for fourteen panels on every page load to display
+// one. `deferred` keeps the panel — the track's geometry, the tab role and the
+// swipe all depend on it existing — and drops what is inside it.
+//
+// The space still announces itself as a tabpanel, so the switcher and keyboard
+// navigation are unchanged; `data-space-deferred` tells the controller this one
+// has nothing yet, and `spaceChange` is where a host fills it or navigates.
+export const deferred = $props.deferred ?? false
+
 const themeStyle = resolveSidebarTheme(theme)
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -64,6 +77,7 @@ function onAction(event) {
   data-space
   data-space-id="{{ id }}"
   data-space-active="{{ active ? 'true' : 'false' }}"
+  @if(deferred)data-space-deferred@endif
   @if(!active)inert@endif
   class="flex min-w-0 flex-1 flex-col"
   role="tabpanel"
@@ -71,7 +85,9 @@ function onAction(event) {
   @click="onAction($event)"
 >
   <div class="{{ scrollAreaClasses }} stx-sidebar-scroll">
-    <SidebarPinned :items="pinned" />
+    @if(!deferred)
+      <SidebarPinned :items="pinned" />
+    @endif
 
     @if(label)
       <div class="{{ titleClasses }}">
@@ -82,6 +98,12 @@ function onAction(event) {
       </div>
     @endif
 
+    <!--
+      Rows, and the actions that belong with them, are what a deferred panel
+      drops. The title above stays: it is a single line, and it is what tells
+      you which space you are swiping into.
+    -->
+    @if(!deferred)
     @foreach(sections as section)
       <SidebarSection
         :id="section.id"
@@ -123,6 +145,7 @@ function onAction(event) {
         <span class="truncate">{{ action.label }}</span>
       </button>
     @endif
+    @endif
   </div>
 </section>
 

package/src/ui/sidebar/SidebarSpaces.stx

@@ -514,6 +514,7 @@ defineExpose({
           :action="space.action"
           :clear="space.clear"
           :active="space.id === activeId"
+          :deferred="space.deferred === true"
           :theme="theme"
         />
       @endforeach

package/src/ui/sidebar/spaces.ts

@@ -94,6 +94,20 @@ export interface SidebarSpaceData {
   tint?: string | SidebarSpaceTint
   /** Favorites grid pinned above the rows. */
   pinned?: SidebarPinnedItemData[]
+  /**
+   * Render this space's shell without its rows.
+   *
+   * Every space is server-rendered even though the Arc design shows one at a
+   * time, so the cost is linear in the number of spaces: fourteen projects
+   * means paying for fourteen panels on every page load to display one. A
+   * deferred space keeps its panel — the track geometry, the tab role and the
+   * swipe all depend on it existing — and its title, which is what identifies
+   * it mid-swipe, but drops the rows.
+   *
+   * The panel carries `data-space-deferred`, and `spaceChange` fires as usual,
+   * so a host can fill it in or navigate when the user arrives.
+   */
+  deferred?: boolean
   /** Row groups, identical in shape to a plain `<Sidebar>`'s sections. */
   sections?: SidebarSectionData[]
   /** Primary action row at the foot of the list. */
@@ -122,6 +136,8 @@ export interface NormalizedSidebarSpace {
   tint: SidebarSpaceTint
   /** `style` attribute value that publishes this space's palette. */
   style: string
+  /** See {@link SidebarSpaceData.deferred}. */
+  deferred: boolean
 }
 
 /**
@@ -228,6 +244,7 @@ export function normalizeSpace(space: SidebarSpaceData): NormalizedSidebarSpace
     clear: normalizeAction(space.clear, space.id, 'clear', 'i-f7-arrow-down'),
     tint,
     style: spaceTintVars(tint),
+    deferred: space.deferred === true,
   }
 }