@stacksjs/stx 0.2.119 → 0.2.120

package/dist/craft-components.d.ts

@@ -123,7 +123,14 @@ export declare const CRAFT_COMPONENTS: {
   nativeType: 'craft-sidebar';
   fallbackTag: 'aside';
   fallbackClasses: 'craft-sidebar craft-sidebar-tahoe';
-  nativeProps: readonly ['id', 'variant', 'material', 'backgroundEffect', 'allowsVibrancy', 'materialOpacity', 'materialDarkOpacity', 'minWidth', 'maxWidth', 'canCollapse', 'searchPlaceholder', 'selectedItem', 'sections'];
+  nativeProps: readonly ['id', 'variant', 'material', 'backgroundEffect', 'allowsVibrancy', 'materialOpacity', 'materialDarkOpacity', 'minWidth', 'maxWidth', 'canCollapse', 'searchPlaceholder', 'selectedItem', 'sections', 'spaces', 'selectedSpace'];
+  render: unknown
+};
+  'sidebar-space': {
+  nativeType: 'craft-sidebar-space';
+  fallbackTag: 'section';
+  fallbackClasses: 'craft-sidebar-space';
+  nativeProps: readonly ['id', 'label', 'icon', 'tint'];
   render: unknown
 };
   'sidebar-section': {
@@ -503,6 +510,48 @@ export declare const CRAFT_COMPONENT_STYLES: `
   background: rgba(255, 255, 255, 0.24);
 }
 
+/* Spaces fallback. Stacked in document order behind a rail — legible without
+   a native host, and deliberately not a second swipe implementation. */
+.craft-sidebar-spaces {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.craft-sidebar-space-title {
+  padding: 10px 8px 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.craft-sidebar-space-switcher {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding-top: 6px;
+}
+.craft-sidebar-space-tab {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 26px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.4;
+  cursor: default;
+}
+.craft-sidebar-space-tab[data-selected="true"] {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.55);
+}
+
 .craft-code-editor {
   font-family: 'SF Mono', 'Fira Code', monospace;
   font-size: 13px;
@@ -578,11 +627,36 @@ export declare const CRAFT_COMPONENT_RUNTIME: `
     var config = parseConfig(sidebar);
     if (!config) return;
 
+    var hasSpaces = !!(config.spaces && config.spaces.length);
+    // Spaces need a host that can swipe between whole scenes. Falling back to
+    // createSidebar would flatten every space into one list, which is worse
+    // than the web rendering already on the page — so leave that in place.
+    if (hasSpaces && typeof nativeUI.createSpacesSidebar !== 'function') return;
+
     try {
       var nativeConfig = Object.assign({}, config);
       delete nativeConfig.sections;
-      var nativeSidebar = nativeUI.createSidebar(nativeConfig);
-      if (nativeSidebar && config.sections) {
+      delete nativeConfig.spaces;
+
+      var nativeSidebar = hasSpaces
+        ? nativeUI.createSpacesSidebar(nativeConfig)
+        : nativeUI.createSidebar(nativeConfig);
+
+      if (nativeSidebar && hasSpaces && nativeSidebar.setSpaces) {
+        nativeSidebar.setSpaces(config.spaces);
+      }
+      if (nativeSidebar && hasSpaces && config.selectedSpace && nativeSidebar.setActiveSpace) {
+        nativeSidebar.setActiveSpace(config.selectedSpace);
+      }
+      if (nativeSidebar && hasSpaces && nativeSidebar.onSpaceChange) {
+        nativeSidebar.onSpaceChange(function(spaceId) {
+          sidebar.dispatchEvent(new CustomEvent('craft-sidebar:space', {
+            bubbles: true,
+            detail: { spaceId: spaceId, sidebarId: config.id }
+          }));
+        });
+      }
+      if (nativeSidebar && !hasSpaces && config.sections) {
         config.sections.forEach(function(section) {
           if (nativeSidebar.addSection) nativeSidebar.addSection(section);
         });

package/dist/craft-components.js

@@ -218,10 +218,19 @@ export const CRAFT_COMPONENTS = {
       "canCollapse",
       "searchPlaceholder",
       "selectedItem",
-      "sections"
+      "sections",
+      "spaces",
+      "selectedSpace"
     ],
     render: renderCraftSidebar
   },
+  "sidebar-space": {
+    nativeType: "craft-sidebar-space",
+    fallbackTag: "section",
+    fallbackClasses: "craft-sidebar-space",
+    nativeProps: ["id", "label", "icon", "tint"],
+    render: renderCraftSidebarSpace
+  },
   "sidebar-section": {
     nativeType: "craft-sidebar-section",
     fallbackTag: "section",
@@ -620,6 +629,48 @@ export const CRAFT_COMPONENTS = {
   background: rgba(255, 255, 255, 0.24);
 }
 
+/* Spaces fallback. Stacked in document order behind a rail \u2014 legible without
+   a native host, and deliberately not a second swipe implementation. */
+.craft-sidebar-spaces {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.craft-sidebar-space-title {
+  padding: 10px 8px 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.craft-sidebar-space-switcher {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding-top: 6px;
+}
+.craft-sidebar-space-tab {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 26px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.4;
+  cursor: default;
+}
+.craft-sidebar-space-tab[data-selected="true"] {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.55);
+}
+
 .craft-code-editor {
   font-family: 'SF Mono', 'Fira Code', monospace;
   font-size: 13px;
@@ -694,11 +745,36 @@ export const CRAFT_COMPONENTS = {
     var config = parseConfig(sidebar);
     if (!config) return;
 
+    var hasSpaces = !!(config.spaces && config.spaces.length);
+    // Spaces need a host that can swipe between whole scenes. Falling back to
+    // createSidebar would flatten every space into one list, which is worse
+    // than the web rendering already on the page \u2014 so leave that in place.
+    if (hasSpaces && typeof nativeUI.createSpacesSidebar !== 'function') return;
+
     try {
       var nativeConfig = Object.assign({}, config);
       delete nativeConfig.sections;
-      var nativeSidebar = nativeUI.createSidebar(nativeConfig);
-      if (nativeSidebar && config.sections) {
+      delete nativeConfig.spaces;
+
+      var nativeSidebar = hasSpaces
+        ? nativeUI.createSpacesSidebar(nativeConfig)
+        : nativeUI.createSidebar(nativeConfig);
+
+      if (nativeSidebar && hasSpaces && nativeSidebar.setSpaces) {
+        nativeSidebar.setSpaces(config.spaces);
+      }
+      if (nativeSidebar && hasSpaces && config.selectedSpace && nativeSidebar.setActiveSpace) {
+        nativeSidebar.setActiveSpace(config.selectedSpace);
+      }
+      if (nativeSidebar && hasSpaces && nativeSidebar.onSpaceChange) {
+        nativeSidebar.onSpaceChange(function(spaceId) {
+          sidebar.dispatchEvent(new CustomEvent('craft-sidebar:space', {
+            bubbles: true,
+            detail: { spaceId: spaceId, sidebarId: config.id }
+          }));
+        });
+      }
+      if (nativeSidebar && !hasSpaces && config.sections) {
         config.sections.forEach(function(section) {
           if (nativeSidebar.addSection) nativeSidebar.addSection(section);
         });
@@ -755,10 +831,10 @@ export function processCraftComponents(content, config = {}) {
 </body>`);
     else
       content += CRAFT_COMPONENT_RUNTIME;
-  content = content.replace(/<@craft-sidebar\s*([^>]*)>([\s\S]*?)<\/@craft-sidebar>/g, (match, propsStr, children) => {
+  content = content.replace(/<@craft-sidebar(?![-\w])\s*([^>]*)>([\s\S]*?)<\/@craft-sidebar>/g, (match, propsStr, children) => {
     return renderCraftComponent("sidebar", propsStr, children.trim(), config, classPrefix);
   });
-  content = content.replace(/<@craft-sidebar\s*([^>]*?)\/>/g, (match, propsStr) => {
+  content = content.replace(/<@craft-sidebar(?![-\w])\s*([^>]*?)\/>/g, (match, propsStr) => {
     return renderCraftComponent("sidebar", propsStr, "", config, classPrefix);
   });
   content = content.replace(/<@craft-(\w+[-\w]*)\s*([^>]*?)\/>/g, (match, componentName, propsStr) => {
@@ -806,7 +882,7 @@ function parseProps(propsStr) {
   return props;
 }
 function renderCraftSidebar(props, children) {
-  const id = normalizeId(String(props.id || `craft-sidebar-${hashString(children || JSON.stringify(props))}`)), sections = normalizeSidebarSections(props.sections) || extractSidebarSections(children), selectedItem = String(props.selectedItem || props.selected || sections[0]?.items[0]?.id || ""), config = {
+  const id = normalizeId(String(props.id || `craft-sidebar-${hashString(children || JSON.stringify(props))}`)), spaces = normalizeSidebarSpaces(props.spaces) || extractSidebarSpaces(children), sections = spaces.length ? [] : normalizeSidebarSections(props.sections) || extractSidebarSections(children), selectedSpace = String(props.selectedSpace || spaces[0]?.id || ""), openSpace = spaces.find((space) => space.id === selectedSpace) || spaces[0], selectedItem = String(props.selectedItem || props.selected || (spaces.length ? openSpace?.sections[0]?.items[0]?.id : sections[0]?.items[0]?.id) || ""), config = {
     id,
     variant: String(props.variant || "desktop"),
     material: String(props.material || "sidebar"),
@@ -819,14 +895,30 @@ function renderCraftSidebar(props, children) {
     canCollapse: props.canCollapse !== !1 && props.canCollapse !== "false",
     searchPlaceholder: props.searchPlaceholder ? String(props.searchPlaceholder) : void 0,
     selectedItem,
-    sections
-  }, fallbackClasses = String(props.__fallbackClasses || "craft-sidebar craft-sidebar-tahoe"), width = Number(props.width || props.sidebarWidth || 286), native = props.native === !1 || props.native === "false" ? "false" : "true", search = config.searchPlaceholder ? `<div class="craft-sidebar-search"><input type="search" placeholder="${escapeHtml(config.searchPlaceholder)}"></div>` : "", sectionHtml = sections.length ? sections.map((section) => renderSidebarSectionFallback(section, selectedItem)).join("") : children;
+    sections,
+    spaces,
+    selectedSpace: selectedSpace || void 0
+  }, fallbackClasses = String(props.__fallbackClasses || "craft-sidebar craft-sidebar-tahoe"), width = Number(props.width || props.sidebarWidth || 286), native = props.native === !1 || props.native === "false" ? "false" : "true", search = config.searchPlaceholder ? `<div class="craft-sidebar-search"><input type="search" placeholder="${escapeHtml(config.searchPlaceholder)}"></div>` : "";
+  let body;
+  if (spaces.length)
+    body = renderSidebarSpacesFallback(spaces, selectedSpace, selectedItem);
+  else if (sections.length)
+    body = sections.map((section) => renderSidebarSectionFallback(section, selectedItem)).join("");
+  else
+    body = children;
   return `<aside class="${escapeAttribute(fallbackClasses)}" data-craft="craft-sidebar" data-craft-native-sidebar data-craft-sidebar-id="${escapeAttribute(id)}" data-native="${native}" style="--craft-sidebar-width:${width}px">
   ${search}
-  ${sectionHtml}
+  ${body}
 </aside>
 <script type="application/json" data-craft-sidebar-config="${escapeAttribute(id)}">${escapeScriptJson(config)}</script>`;
 }
+function renderCraftSidebarSpace(props, children) {
+  const id = normalizeId(String(props.id || props.label || "space"));
+  return `<section class="craft-sidebar-space" data-craft="craft-sidebar-space" data-space-id="${escapeAttribute(id)}">
+    ${props.label ? `<div class="craft-sidebar-space-title">${escapeHtml(String(props.label))}</div>` : ""}
+    ${children}
+  </section>`;
+}
 function renderCraftSidebarSection(props, children) {
   const title = String(props.header || props.title || "");
   return `<section class="craft-sidebar-section" data-craft="craft-sidebar-section" data-section-id="${escapeAttribute(String(props.id || "section"))}">
@@ -868,6 +960,43 @@ function extractSidebarItems(content) {
   }
   return items;
 }
+function extractSidebarSpaces(children) {
+  const spaces = [], spacePattern = /<@craft-sidebar-space\s*([^>]*?)(?:\/>|>([\s\S]*?)<\/@craft-sidebar-space>)/g;
+  let spaceMatch;
+  while ((spaceMatch = spacePattern.exec(children)) !== null) {
+    const props = parseProps(spaceMatch[1] || ""), body = spaceMatch[2] || "", label = String(props.label || props.title || `Space ${spaces.length + 1}`);
+    spaces.push({
+      id: String(props.id || normalizeId(label)),
+      label,
+      icon: props.icon ? String(props.icon) : void 0,
+      tint: props.tint ? String(props.tint) : void 0,
+      sections: extractSidebarSections(body)
+    });
+  }
+  return spaces;
+}
+function normalizeSidebarSpaces(value) {
+  if (!value)
+    return;
+  if (Array.isArray(value))
+    return value;
+  if (typeof value !== "string")
+    return;
+  try {
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed : void 0;
+  } catch {
+    return;
+  }
+}
+function renderSidebarSpacesFallback(spaces, selectedSpace, selectedItem) {
+  const rail = spaces.map((space) => `<button class="craft-sidebar-space-tab" type="button" data-space-target="${escapeAttribute(space.id)}" data-selected="${space.id === selectedSpace ? "true" : "false"}" title="${escapeAttribute(space.label || space.id)}">${space.icon ? `<span class="craft-sidebar-item-icon" data-icon="${escapeAttribute(space.icon)}"></span>` : escapeHtml((space.label || space.id).charAt(0))}</button>`).join("");
+  return `<div class="craft-sidebar-spaces">${spaces.map((space) => `<section class="craft-sidebar-space" data-space-id="${escapeAttribute(space.id)}" data-selected="${space.id === selectedSpace ? "true" : "false"}">
+    ${space.label ? `<div class="craft-sidebar-space-title">${escapeHtml(space.label)}</div>` : ""}
+    ${space.sections.map((section) => renderSidebarSectionFallback(section, selectedItem)).join("")}
+  </section>`).join("")}</div>
+  <div class="craft-sidebar-space-switcher">${rail}</div>`;
+}
 function normalizeSidebarSections(value) {
   if (!value)
     return;