@stacksjs/components 0.2.118 → 0.2.120

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-aVrCGd/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-KdF6nL/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-aVrCGd/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-KdF6nL/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-aVrCGd/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-KdF6nL/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-aVrCGd/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-KdF6nL/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1132,15 +1132,23 @@ var RadioGroupOption_default = "./RadioGroupOption-s1d6r221.stx";
 // src/ui/select/Select.stx
 var Select_default = "./Select-1vnd0brz.stx";
 // src/ui/sidebar/Sidebar.stx
-var Sidebar_default = "./Sidebar-hjazqxv8.stx";
+var Sidebar_default = "./Sidebar-vgckg8f7.stx";
 // src/ui/sidebar/SidebarFooter.stx
-var SidebarFooter_default = "./SidebarFooter-0aegr99p.stx";
+var SidebarFooter_default = "./SidebarFooter-s7skj92y.stx";
 // src/ui/sidebar/SidebarHeader.stx
-var SidebarHeader_default = "./SidebarHeader-ed5wb13t.stx";
+var SidebarHeader_default = "./SidebarHeader-sa9mtdst.stx";
 // src/ui/sidebar/SidebarItem.stx
 var SidebarItem_default = "./SidebarItem-9rvbwhxr.stx";
+// src/ui/sidebar/SidebarPinned.stx
+var SidebarPinned_default = "./SidebarPinned-tvj28bm0.stx";
 // src/ui/sidebar/SidebarSection.stx
 var SidebarSection_default = "./SidebarSection-qf8fhy55.stx";
+// src/ui/sidebar/SidebarSpace.stx
+var SidebarSpace_default = "./SidebarSpace-61b662jx.stx";
+// src/ui/sidebar/SidebarSpaces.stx
+var SidebarSpaces_default = "./SidebarSpaces-gq3mx984.stx";
+// src/ui/sidebar/SidebarSpaceSwitcher.stx
+var SidebarSpaceSwitcher_default = "./SidebarSpaceSwitcher-882njcxq.stx";
 // src/ui/sidebar/themes.ts
 var macosColors = {
   blue: "#0088ff",
@@ -1262,6 +1270,67 @@ var desktop = {
     indentPerLevel: 12
   }
 };
+var arc = {
+  selection: "classes",
+  pane: [
+    "bg-[#f7f5f1]/92 dark:bg-[#1a1a1c]/92",
+    "backdrop-blur-[40px] backdrop-saturate-[160%]",
+    "text-[#2c2a28] dark:text-[#ededf0]",
+    "select-none"
+  ].join(" "),
+  layers: {
+    tint: [
+      "bg-[linear-gradient(180deg,var(--stx-sidebar-tint,rgba(255,251,242,0.55))_0%,rgba(255,255,255,0)_38%)]",
+      "dark:bg-[linear-gradient(180deg,var(--stx-sidebar-tint,rgba(255,255,255,0.05))_0%,rgba(255,255,255,0)_42%)]"
+    ].join(" ")
+  },
+  scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-[8px] pb-[8px]",
+  sectionHeader: [
+    "group/section flex w-full items-center",
+    "px-[8px] pt-[14px] pb-[4px]",
+    "text-[11px] font-medium leading-[13px]",
+    "opacity-55"
+  ].join(" "),
+  sectionChevron: [
+    "i-f7-chevron-down h-[10px] w-[10px] ml-auto",
+    "opacity-0 group-hover/section:opacity-100 transition-opacity duration-150",
+    "transition-transform duration-200"
+  ].join(" "),
+  sectionGroup: "flex flex-col space-y-[2px]",
+  item: {
+    base: [
+      "flex w-full items-center",
+      "h-[30px] rounded-[8px] pl-[6px] pr-[8px]",
+      "text-[13px] leading-[16px] font-normal",
+      "text-current",
+      "transition-[background-color,box-shadow,color] duration-150 ease-out",
+      "cursor-default"
+    ].join(" "),
+    hover: "hover:bg-white/55 dark:hover:bg-white/8",
+    active: [
+      "bg-white dark:bg-white/14",
+      "font-medium",
+      "shadow-[0_1px_2px_rgba(0,0,0,0.08)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.35)]",
+      "ring-1 ring-black/5 dark:ring-white/8"
+    ].join(" "),
+    pressed: "active:bg-white/80 dark:active:bg-white/18",
+    disabled: "opacity-40 pointer-events-none",
+    disclosure: "flex h-[16px] w-[16px] shrink-0 items-center justify-center",
+    chevron: [
+      "i-f7-chevron-right h-[10px] w-[10px] opacity-45",
+      "transition-transform duration-200 ease-out"
+    ].join(" "),
+    iconSlot: "flex h-[18px] w-[18px] shrink-0 items-center justify-center mr-[8px]",
+    icon: "h-[16px] w-[16px]",
+    image: "h-[18px] w-[18px] rounded-[5px] object-cover shadow-sm",
+    label: "flex-1 truncate text-left",
+    count: [
+      "ml-[8px] shrink-0 tabular-nums",
+      "text-[12px] leading-[16px] opacity-45"
+    ].join(" "),
+    indentPerLevel: 14
+  }
+};
 var solid = {
   ...macos,
   pane: "bg-stone-100 dark:bg-neutral-900 text-black dark:text-white select-none",
@@ -1282,6 +1351,7 @@ var sidebarThemes = {
   tahoe: macos,
   "macos-tahoe": macos,
   "macos-latest": macos,
+  arc,
   workspace,
   desktop,
   solid,
@@ -1296,6 +1366,82 @@ function resolveIconColor(color) {
     return;
   return macosColors[color] || color;
 }
+
+// src/ui/sidebar/spaces.ts
+var NEUTRAL_SEED = macosColors.gray;
+function mix(color, percent, into) {
+  return `color-mix(in oklab, ${color} ${percent}%, ${into})`;
+}
+function deriveSpaceTint(seed) {
+  return {
+    light: {
+      from: mix(seed, 16, "#ffffff"),
+      to: mix(seed, 34, "#ffffff"),
+      ink: mix(seed, 22, "#17171b"),
+      accent: mix(seed, 88, "#2a2a30")
+    },
+    dark: {
+      from: mix(seed, 26, "#101014"),
+      to: mix(seed, 14, "#08080b"),
+      ink: mix(seed, 12, "#f4f4f7"),
+      accent: mix(seed, 74, "#ffffff")
+    }
+  };
+}
+function resolveSpaceTint(tint) {
+  if (!tint)
+    return deriveSpaceTint(NEUTRAL_SEED);
+  if (typeof tint !== "string")
+    return tint;
+  return deriveSpaceTint(macosColors[tint] || tint);
+}
+function spaceTintVars(tint) {
+  return [
+    `--stx-space-light-from: ${tint.light.from}`,
+    `--stx-space-light-to: ${tint.light.to}`,
+    `--stx-space-light-ink: ${tint.light.ink}`,
+    `--stx-space-light-accent: ${tint.light.accent}`,
+    `--stx-space-dark-from: ${tint.dark.from}`,
+    `--stx-space-dark-to: ${tint.dark.to}`,
+    `--stx-space-dark-ink: ${tint.dark.ink}`,
+    `--stx-space-dark-accent: ${tint.dark.accent}`
+  ].join("; ");
+}
+function normalizeAction(action, spaceId, role, fallbackIcon) {
+  if (!action || !action.label)
+    return null;
+  return {
+    id: action.id || `${spaceId}-${role}`,
+    label: action.label,
+    icon: action.icon || fallbackIcon
+  };
+}
+function normalizeSpace(space) {
+  const tint = resolveSpaceTint(space.tint);
+  return {
+    id: space.id,
+    label: space.label || "",
+    icon: space.icon || "",
+    pinned: space.pinned || [],
+    sections: space.sections || [],
+    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)
+  };
+}
+function normalizeSpaces(spaces) {
+  return (spaces || []).map(normalizeSpace);
+}
+function spaceIndexOf(spaces, id) {
+  if (!id)
+    return 0;
+  const index = spaces.findIndex((space) => space.id === id);
+  return index === -1 ? 0 : index;
+}
+function spaceTintPayload(spaces) {
+  return spaces.map((space) => space.tint);
+}
 // src/ui/skeleton/Skeleton.stx
 var Skeleton_default = "./Skeleton-v1pwa8nr.stx";
 // src/ui/spinner/Spinner.stx
@@ -3854,6 +4000,9 @@ export {
   t,
   storage,
   staggerAnimation,
+  spaceTintVars,
+  spaceTintPayload,
+  spaceIndexOf,
   sidebarThemes,
   setTitle,
   setMeta,
@@ -3861,6 +4010,7 @@ export {
   setI18n,
   setErrorHandler,
   sequenceAnimations,
+  resolveSpaceTint,
   resolveSidebarTheme,
   resolveIconColor,
   removeAnimation,
@@ -3871,6 +4021,8 @@ export {
   pluralRules,
   numberInputPropSchema,
   numberFormats,
+  normalizeSpaces,
+  normalizeSpace,
   n,
   moveFocus,
   macosColors,
@@ -3933,6 +4085,7 @@ export {
   easeInBack,
   devAssert,
   detectLanguage,
+  deriveSpaceTint,
   defaultTheme,
   dateTimeFormats,
   d,
@@ -3995,7 +4148,11 @@ export {
   Spinner_default as Spinner,
   Skeleton_default as Skeleton,
   Signup_default as Signup,
+  SidebarSpaces_default as SidebarSpaces,
+  SidebarSpaceSwitcher_default as SidebarSpaceSwitcher,
+  SidebarSpace_default as SidebarSpace,
   SidebarSection_default as SidebarSection,
+  SidebarPinned_default as SidebarPinned,
   SidebarItem_default as SidebarItem,
   SidebarHeader_default as SidebarHeader,
   SidebarFooter_default as SidebarFooter,

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

@@ -1,35 +1,15 @@
-/**
- * One navigation row.
- *
- * ```ts
- * { id: 'icloud', label: 'iCloud', icon: 'i-f7-tray', iconColor: 'blue', count: 248, active: true }
- * ```
- */
-export declare interface SidebarItemData {
-  id: string
-  label: string
-  icon?: string
-  iconColor?: string
-  image?: string
-  href?: string
-  count?: string | number
-  badge?: string | number
-  active?: boolean
-  disabled?: boolean
-  children?: SidebarItemData[]
-  expandable?: boolean
-  expanded?: boolean
-}
-/** A titled group of rows (e.g. "Favorites"). Untitled when `label` is empty. */
-export declare interface SidebarSectionData {
-  id: string
-  label?: string
-  items: SidebarItemData[]
-  collapsible?: boolean
-  collapsed?: boolean
-}
+import type { SidebarItemData, SidebarSectionData } from './rows';
+import type { SidebarSpaceChangeEvent, SidebarSpaceData } from './spaces';
 export declare interface SidebarProps {
   sections?: SidebarSectionData[]
+  spaces?: SidebarSpaceData[]
+  space?: string
+  showSpaceSwitcher?: boolean
+  showSpaceAdd?: boolean
+  spaceAddLabel?: string
+  spacePersistKey?: string
+  onSpaceChange?: (event: SidebarSpaceChangeEvent) => void
+  onSpaceAdd?: () => void
   theme?: SidebarThemeChoice
   variant?: SidebarThemeChoice
   width?: number
@@ -45,6 +25,7 @@ export declare interface SidebarProps {
   widthVar?: string
   collapsedClass?: string
   className?: string
+  followSystemAppearance?: boolean
   onCollapse?: (collapsed: boolean) => void
   onSectionToggle?: (sectionId: string) => void
   onItemToggle?: (event: { id: string, expanded: boolean }) => void
@@ -105,5 +86,11 @@ export { default as Sidebar } from './Sidebar.stx';
 export { default as SidebarFooter } from './SidebarFooter.stx';
 export { default as SidebarHeader } from './SidebarHeader.stx';
 export { default as SidebarItem } from './SidebarItem.stx';
+export { default as SidebarPinned } from './SidebarPinned.stx';
 export { default as SidebarSection } from './SidebarSection.stx';
+export { default as SidebarSpace } from './SidebarSpace.stx';
+export { default as SidebarSpaces } from './SidebarSpaces.stx';
+export { default as SidebarSpaceSwitcher } from './SidebarSpaceSwitcher.stx';
+export * from './rows';
+export * from './spaces';
 export * from './themes';

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

@@ -0,0 +1,43 @@
+/**
+ * The shapes a sidebar's rows are described with.
+ *
+ * These live apart from `index.ts` because both the barrel and `spaces.ts`
+ * need them: a space carries sections exactly like a plain sidebar does. With
+ * the definitions in the barrel, the leaf had to import from it and the two
+ * modules formed a cycle — legal for types, but it drags the whole public
+ * surface into any program that touches one small module.
+ *
+ * `index.ts` re-exports everything here, so this split is invisible to callers.
+ *
+ * @module
+ */
+/**
+ * One navigation row.
+ *
+ * ```ts
+ * { id: 'icloud', label: 'iCloud', icon: 'i-f7-tray', iconColor: 'blue', count: 248, active: true }
+ * ```
+ */
+export declare interface SidebarItemData {
+  id: string
+  label: string
+  icon?: string
+  iconColor?: string
+  image?: string
+  href?: string
+  count?: string | number
+  badge?: string | number
+  active?: boolean
+  disabled?: boolean
+  children?: SidebarItemData[]
+  expandable?: boolean
+  expanded?: boolean
+}
+/** A titled group of rows (e.g. "Favorites"). Untitled when `label` is empty. */
+export declare interface SidebarSectionData {
+  id: string
+  label?: string
+  items: SidebarItemData[]
+  collapsible?: boolean
+  collapsed?: boolean
+}

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

@@ -0,0 +1,105 @@
+import type { SidebarSectionData } from './rows';
+/**
+ * Build a full light/dark palette from one seed color.
+ *
+ * The percentages are the tuning surface of the whole feature, so they are
+ * worth stating plainly. In light appearance the panel stays *pale* — 16% and
+ * 34% of the seed — because Arc's spaces are washes, not fills; anything
+ * stronger and the white selection cards stop reading as raised. The ink is
+ * the seed pulled almost to black (22% seed) so text keeps a hint of the
+ * space's hue without losing contrast. In dark appearance the relationship
+ * inverts: the seed is mixed *into* near-black for the panel and *into* white
+ * for the ink and accent, which keeps a dark space recognizably the same color
+ * as its light counterpart rather than a different one.
+ */
+export declare function deriveSpaceTint(seed: string): SidebarSpaceTint;
+/**
+ * Resolve a space's `tint` prop to a palette.
+ *
+ * Accepts a macOS system color name, any CSS color, or a pre-built palette.
+ * Unset falls back to the neutral seed.
+ */
+export declare function resolveSpaceTint(tint?: string | SidebarSpaceTint): SidebarSpaceTint;
+/**
+ * Render a palette as inline custom properties.
+ *
+ * Both appearances are published at once. `Sidebar.stx` maps them onto the
+ * four registered properties it actually paints with, choosing per
+ * `prefers-color-scheme`, so the correct appearance is already right in the
+ * server-rendered HTML.
+ */
+export declare function spaceTintVars(tint: SidebarSpaceTint): string;
+/** Normalize one space so template bindings stay plain property reads. */
+export declare function normalizeSpace(space: SidebarSpaceData): NormalizedSidebarSpace;
+export declare function normalizeSpaces(spaces: SidebarSpaceData[]): NormalizedSidebarSpace[];
+/**
+ * Index of `id` within `spaces`, or 0 when it is missing.
+ *
+ * Falling back to the first space rather than to -1 is deliberate: a stale
+ * persisted id or a typo should open the sidebar on *something*, never on a
+ * blank track scrolled past its own content.
+ */
+export declare function spaceIndexOf(spaces: NormalizedSidebarSpace[], id?: string): number;
+/**
+ * The per-space palettes the client controller needs to repaint the pane.
+ *
+ * Only the colors travel — markup, sections and actions are already in the
+ * DOM, so re-serializing them would just bloat the attribute.
+ */
+export declare function spaceTintPayload(spaces: NormalizedSidebarSpace[]): SidebarSpaceTint[];
+/** The four surfaces a space paints, in one appearance. */
+export declare interface SidebarSpaceTintColors {
+  from: string
+  to: string
+  ink: string
+  accent: string
+}
+/** A space's palette in both appearances. */
+export declare interface SidebarSpaceTint {
+  light: SidebarSpaceTintColors
+  dark: SidebarSpaceTintColors
+}
+/** A tile in a space's pinned grid — Arc's favorites row. */
+export declare interface SidebarPinnedItemData {
+  id: string
+  label: string
+  icon?: string
+  image?: string
+  iconColor?: string
+  href?: string
+}
+/** A single labelled action row (Arc's "+ New Tab", Notes' "+ New Note"). */
+export declare interface SidebarSpaceActionData {
+  id?: string
+  label: string
+  icon?: string
+}
+/** One scene in a swipeable sidebar. */
+export declare interface SidebarSpaceData {
+  id: string
+  label?: string
+  icon?: string
+  tint?: string | SidebarSpaceTint
+  pinned?: SidebarPinnedItemData[]
+  sections?: SidebarSectionData[]
+  action?: SidebarSpaceActionData
+  clear?: SidebarSpaceActionData
+}
+/** Payload of the `spaceChange` event. */
+export declare interface SidebarSpaceChangeEvent {
+  id: string
+  index: number
+  source: 'swipe' | 'switcher' | 'keyboard' | 'native' | 'restore' | 'api'
+}
+/** A space with its palette resolved and its inline custom properties built. */
+export declare interface NormalizedSidebarSpace {
+  id: string
+  label: string
+  icon: string
+  pinned: SidebarPinnedItemData[]
+  sections: SidebarSectionData[]
+  action: SidebarSpaceActionData | null
+  clear: SidebarSpaceActionData | null
+  tint: SidebarSpaceTint
+  style: string
+}

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

@@ -30,6 +30,11 @@ export declare function resolveIconColor(color?: string): string | undefined;
  * when the window resigns key it falls back to a neutral fill with the label
  * left dark. Icons desaturate to gray in the same non-key state.
  *
+ * The other first-class theme is `arc`, a recreation of the Arc browser's
+ * sidebar. It inverts the macOS selection model — a raised white card on a
+ * warm tinted panel instead of an accent fill on gray — so it uses the
+ * `classes` selection model rather than `accent`. See its own block below.
+ *
  * Legacy themes (`workspace`, `desktop`, `solid`, `transparent`, `vibrancy`)
  * are preserved verbatim from the previous variant maps. `tahoe` now aliases
  * `macos` — it always meant "look like macOS", and now it actually does.

package/package.json

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