@sewadah/selaras 0.1.1

package/dist/runtime/components/ContentToc.d.vue.ts

@@ -0,0 +1,35 @@
+import type { ContentTocThemeSlots } from '../theme/content-toc.js';
+import type { UiProp } from '../utils/ui.js';
+export interface TocLink {
+    id: string;
+    text: string;
+    depth: number;
+    children?: TocLink[];
+}
+type __VLS_Slots = ContentTocSlots;
+export interface ContentTocProps {
+    links: TocLink[];
+    title?: string;
+    /** Internal: set by recursive self-calls, omit when using this component directly. */
+    isNested?: boolean;
+    /** Internal: set by recursive self-calls, omit when using this component directly. */
+    activeIds?: Set<string>;
+    ui?: UiProp<ContentTocThemeSlots>;
+}
+export interface ContentTocSlots {
+    title?: (props: object) => any;
+    /** Replaces a link's content - scoped with `active`, matching linkProps' own computation. */
+    link?: (props: {
+        link: TocLink;
+        active: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ContentTocProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentTocProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ContentToc.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useMessages } from "../composables/use-messages";
+import { contentTocTheme } from "../theme/content-toc";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  links: { type: Array, required: true },
+  title: { type: String, required: false },
+  isNested: { type: Boolean, required: false, default: false },
+  activeIds: { type: Set, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const isRoot = !props.isNested;
+const localActiveIds = ref(/* @__PURE__ */ new Set());
+const activeIds = computed(() => props.isNested ? props.activeIds ?? /* @__PURE__ */ new Set() : localActiveIds.value);
+function flattenIds(links) {
+  return links.flatMap((link) => [link.id, ...link.children ? flattenIds(link.children) : []]);
+}
+const TRIGGER_BAND_RATIO = 0.25;
+let tocIds = [];
+let tocElements = [];
+let ticking = false;
+function updateActiveIds() {
+  if (!tocElements.length)
+    return;
+  const viewTop = window.scrollY;
+  const docBottom = document.documentElement.scrollHeight;
+  const atMaxScroll = viewTop + window.innerHeight >= docBottom - 1;
+  const viewBottom = atMaxScroll ? docBottom : viewTop + window.innerHeight * TRIGGER_BAND_RATIO;
+  const active = /* @__PURE__ */ new Set();
+  for (let i = 0; i < tocElements.length; i++) {
+    const top = tocElements[i].getBoundingClientRect().top + window.scrollY;
+    const bottom = i + 1 < tocElements.length ? tocElements[i + 1].getBoundingClientRect().top + window.scrollY : docBottom;
+    if (bottom > viewTop && top < viewBottom)
+      active.add(tocIds[i]);
+  }
+  localActiveIds.value = active;
+}
+function onScrollOrResize() {
+  if (ticking)
+    return;
+  ticking = true;
+  requestAnimationFrame(() => {
+    updateActiveIds();
+    ticking = false;
+  });
+}
+onMounted(() => {
+  if (!isRoot)
+    return;
+  tocIds = flattenIds(props.links);
+  tocElements = tocIds.map((id) => document.getElementById(id)).filter((el) => el !== null);
+  if (!tocElements.length)
+    return;
+  updateActiveIds();
+  window.addEventListener("scroll", onScrollOrResize, { passive: true });
+  window.addEventListener("resize", onScrollOrResize);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScrollOrResize);
+  window.removeEventListener("resize", onScrollOrResize);
+});
+const messages = useMessages();
+const theme = useComponentTheme("contentToc", contentTocTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const RAIL_WIDTH = 20;
+const RAIL_X_OUTER = 1;
+const RAIL_X_INNER_MAX = RAIL_WIDTH - 1;
+const RAIL_CURVE_SPAN = 8;
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function buildRailSegments(links) {
+  const segments = [];
+  let rangeStart = -1;
+  let rangeEnd = -1;
+  const pushRange = () => {
+    if (rangeStart === -1 || rangeEnd === -1)
+      return;
+    const startEl = links[rangeStart];
+    const endEl = links[rangeEnd];
+    const top = Math.max(0, startEl.offsetTop);
+    const bottom = endEl.offsetTop + endEl.offsetHeight;
+    segments.push({ top, height: Math.max(0, bottom - top) });
+    rangeStart = -1;
+    rangeEnd = -1;
+  };
+  links.forEach((link, index) => {
+    if (link.getAttribute("data-active") !== "true") {
+      pushRange();
+      return;
+    }
+    if (rangeStart === -1)
+      rangeStart = index;
+    rangeEnd = index;
+  });
+  pushRange();
+  return segments;
+}
+function buildRailPath(links, height) {
+  const items = links.map((node) => {
+    const top = Math.round(node.offsetTop);
+    const h = Math.round(node.offsetHeight || 0);
+    return { y: top + Math.round(h / 2), depth: Number(node.dataset.depth ?? "0") };
+  });
+  const depths = items.map((item) => item.depth);
+  const baseDepth = Math.min(...depths);
+  const maxDepth = Math.max(...depths);
+  const levels = Math.max(1, maxDepth - baseDepth);
+  const indentStep = (RAIL_X_INNER_MAX - RAIL_X_OUTER) / levels;
+  const xForDepth = (depth) => {
+    const index = Math.max(0, depth - baseDepth);
+    const x2 = RAIL_X_OUTER + index * indentStep;
+    return Math.round(clamp(x2, RAIL_X_OUTER, RAIL_X_INNER_MAX));
+  };
+  let x = xForDepth(items[0]?.depth ?? baseDepth);
+  let yPrev = 0;
+  let d = `M ${x} 0`;
+  for (const item of items) {
+    const y = clamp(item.y, 0, height);
+    const xNext = xForDepth(item.depth);
+    if (xNext === x) {
+      if (y > yPrev)
+        d += ` L ${x} ${y}`;
+      yPrev = Math.max(yPrev, y);
+      continue;
+    }
+    const y0 = clamp(y - RAIL_CURVE_SPAN, yPrev, height);
+    const midY = (y0 + y) / 2;
+    if (y0 > yPrev)
+      d += ` L ${x} ${y0}`;
+    d += ` C ${x} ${midY} ${xNext} ${midY} ${xNext} ${y}`;
+    x = xNext;
+    yPrev = y;
+  }
+  if (height > yPrev)
+    d += ` L ${x} ${height}`;
+  return d;
+}
+function buildRailMaskUrl(pathD, height) {
+  const h = Math.max(1, Math.round(height));
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${RAIL_WIDTH} ${h}"><path d="${pathD}" stroke="black" stroke-width="1" fill="none"/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+const railWrapEl = ref();
+const railHeight = ref(0);
+const railPathD = ref("");
+const railSegments = ref([]);
+let railResizeObserver;
+function measureRail() {
+  if (!isRoot || !railWrapEl.value)
+    return;
+  const links = Array.from(railWrapEl.value.querySelectorAll('[data-toc-link="true"]'));
+  if (!links.length) {
+    railHeight.value = 0;
+    railPathD.value = "";
+    railSegments.value = [];
+    return;
+  }
+  const last = links[links.length - 1];
+  railHeight.value = Math.ceil(last.offsetTop + last.offsetHeight);
+  railPathD.value = buildRailPath(links, railHeight.value);
+  railSegments.value = buildRailSegments(links);
+}
+const railMaskStyle = computed(() => {
+  const url = railPathD.value ? buildRailMaskUrl(railPathD.value, railHeight.value) : "none";
+  return {
+    WebkitMaskImage: url,
+    maskImage: url,
+    WebkitMaskRepeat: "no-repeat",
+    maskRepeat: "no-repeat",
+    WebkitMaskSize: "100% 100%",
+    maskSize: "100% 100%"
+  };
+});
+if (isRoot) {
+  watch(activeIds, () => nextTick(measureRail));
+  onMounted(() => {
+    nextTick(measureRail);
+    railResizeObserver = new ResizeObserver(() => measureRail());
+    if (railWrapEl.value)
+      railResizeObserver.observe(railWrapEl.value);
+  });
+  onUnmounted(() => railResizeObserver?.disconnect());
+}
+function linkProps(link) {
+  const active = activeIds.value.has(link.id);
+  return {
+    ...resolveSlot(theme.value({ active }).link, props.ui?.link),
+    "data-toc-link": "true",
+    "data-depth": link.depth,
+    "data-active": active || void 0,
+    // 'location' (not 'page') is the WAI-ARIA token for "the current
+    // location within an environment" - a TOC/breadcrumb use case
+    // specifically, not pagination. The rail itself only echoes this
+    // visually (see railContainer's own aria-hidden below), so this is
+    // the only place a screen reader learns which section is active.
+    "aria-current": active ? "location" : void 0
+  };
+}
+</script>
+
+<template>
+  <component :is="isRoot ? 'nav' : 'div'" v-bind="isRoot ? rootProps : void 0">
+    <p v-if="isRoot" v-bind="resolveSlot(ui.title, props.ui?.title)">
+      <slot name="title">
+        {{ title ?? messages.onThisPage }}
+      </slot>
+    </p>
+
+    <div v-if="isRoot" ref="railWrapEl" v-bind="resolveSlot(ui.railWrap, props.ui?.railWrap)">
+      <div
+        v-if="railHeight > 0"
+        v-bind="resolveSlot(ui.railContainer, props.ui?.railContainer)"
+        aria-hidden="true"
+        :style="{ width: `${RAIL_WIDTH}px`, height: `${railHeight}px` }"
+      >
+        <div v-bind="resolveSlot(ui.railTrack, props.ui?.railTrack)" :style="railMaskStyle" />
+        <div v-bind="resolveSlot(ui.railSegments, props.ui?.railSegments)" :style="railMaskStyle">
+          <div
+            v-for="(segment, index) in railSegments"
+            :key="index"
+            v-bind="resolveSlot(ui.railSegment, props.ui?.railSegment)"
+            :style="{ top: `${segment.top}px`, height: `${segment.height}px` }"
+          />
+        </div>
+      </div>
+
+      <ul v-bind="resolveSlot(ui.list, props.ui?.list)">
+        <li v-for="link in links" :key="link.id" v-bind="resolveSlot(ui.item, props.ui?.item)">
+          <a :href="`#${link.id}`" v-bind="linkProps(link)">
+            <slot name="link" :link="link" :active="activeIds.has(link.id)">{{ link.text }}</slot>
+          </a>
+          <div v-if="link.children?.length" v-bind="resolveSlot(ui.content, props.ui?.content)">
+            <!-- Vue's SFC self-recursion resolves by this file's own bare name -
+                 keep it unprefixed even though the public component is SContentToc. -->
+            <ContentToc :links="link.children" is-nested :active-ids="activeIds" :ui="props.ui">
+              <template #link="scope">
+                <slot name="link" v-bind="scope" />
+              </template>
+            </ContentToc>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <ul v-else v-bind="resolveSlot(ui.list, props.ui?.list)">
+      <li v-for="link in links" :key="link.id" v-bind="resolveSlot(ui.item, props.ui?.item)">
+        <a :href="`#${link.id}`" v-bind="linkProps(link)">
+          <slot name="link" :link="link" :active="activeIds.has(link.id)">{{ link.text }}</slot>
+        </a>
+        <div v-if="link.children?.length" v-bind="resolveSlot(ui.content, props.ui?.content)">
+          <ContentToc :links="link.children" is-nested :active-ids="activeIds" :ui="props.ui">
+            <template #link="scope">
+              <slot name="link" v-bind="scope" />
+            </template>
+          </ContentToc>
+        </div>
+      </li>
+    </ul>
+  </component>
+</template>

package/dist/runtime/components/ContentToc.vue.d.ts

@@ -0,0 +1,35 @@
+import type { ContentTocThemeSlots } from '../theme/content-toc.js';
+import type { UiProp } from '../utils/ui.js';
+export interface TocLink {
+    id: string;
+    text: string;
+    depth: number;
+    children?: TocLink[];
+}
+type __VLS_Slots = ContentTocSlots;
+export interface ContentTocProps {
+    links: TocLink[];
+    title?: string;
+    /** Internal: set by recursive self-calls, omit when using this component directly. */
+    isNested?: boolean;
+    /** Internal: set by recursive self-calls, omit when using this component directly. */
+    activeIds?: Set<string>;
+    ui?: UiProp<ContentTocThemeSlots>;
+}
+export interface ContentTocSlots {
+    title?: (props: object) => any;
+    /** Replaces a link's content - scoped with `active`, matching linkProps' own computation. */
+    link?: (props: {
+        link: TocLink;
+        active: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ContentTocProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentTocProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ContextMenu.d.vue.ts

@@ -0,0 +1,33 @@
+import type { ContextMenuThemeSlots } from '../theme/context-menu.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ContextMenuItemDef {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - matches Dropdown's own `destructive` flag. */
+    destructive?: boolean;
+    onSelect?: () => void;
+    /** Not read by ContextMenu's own default item rendering - carried purely so a custom #item slot override can display one. */
+    shortcut?: string;
+}
+type __VLS_Slots = ContextMenuSlots;
+export interface ContextMenuProps {
+    items: ContextMenuItemDef[][];
+    ui?: UiProp<ContextMenuThemeSlots>;
+}
+export interface ContextMenuSlots {
+    /** The right-click target area. */
+    default?: () => any;
+    item?: (props: {
+        item: ContextMenuItemDef;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ContextMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContextMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ContextMenu.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger } from "reka-ui";
+import { computed } from "vue";
+import { contextMenuTheme } from "../theme/context-menu";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const theme = useComponentTheme("contextMenu", contextMenuTheme);
+const ui = computed(() => theme.value());
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+function itemPropsFor(item) {
+  return resolveSlot(theme.value({ destructive: item.destructive }).item, props.ui?.item);
+}
+function iconPropsFor(item) {
+  return resolveSlot(theme.value({ destructive: item.destructive }).icon, props.ui?.icon);
+}
+const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+</script>
+
+<template>
+  <ContextMenuRoot>
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent v-bind="contentProps">
+        <template v-for="(group, groupIndex) in items" :key="groupIndex">
+          <ContextMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
+          <ContextMenuItem
+            v-for="(item, itemIndex) in group"
+            :key="itemIndex"
+            :disabled="item.disabled"
+            v-bind="itemPropsFor(item)"
+            @select="item.onSelect?.()"
+          >
+            <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
+            <slot name="item" :item="item">
+              {{ item.label }}
+            </slot>
+          </ContextMenuItem>
+        </template>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>

package/dist/runtime/components/ContextMenu.vue.d.ts

@@ -0,0 +1,33 @@
+import type { ContextMenuThemeSlots } from '../theme/context-menu.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ContextMenuItemDef {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - matches Dropdown's own `destructive` flag. */
+    destructive?: boolean;
+    onSelect?: () => void;
+    /** Not read by ContextMenu's own default item rendering - carried purely so a custom #item slot override can display one. */
+    shortcut?: string;
+}
+type __VLS_Slots = ContextMenuSlots;
+export interface ContextMenuProps {
+    items: ContextMenuItemDef[][];
+    ui?: UiProp<ContextMenuThemeSlots>;
+}
+export interface ContextMenuSlots {
+    /** The right-click target area. */
+    default?: () => any;
+    item?: (props: {
+        item: ContextMenuItemDef;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ContextMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContextMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardGroup.d.vue.ts

@@ -0,0 +1,24 @@
+import type { DashboardGroupThemeSlots } from '../theme/dashboard-group.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DashboardGroupProps {
+    /** Persistence key for the sidebar's own width/collapse state - reuse the same id across pages that should share one remembered layout, or set a distinct one for pages that shouldn't. @default 'selaras-dashboard' */
+    autoSaveId?: string;
+    /** Below this viewport width (px), DashboardSidebar switches from a resizable split-pane panel to a Drawer overlay. @default 768 */
+    mobileBreakpoint?: number;
+    ui?: UiProp<DashboardGroupThemeSlots>;
+}
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardGroup.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed, onMounted, onUnmounted, provide, ref } from "vue";
+import { useCookie } from "#imports";
+import { dashboardGroupTheme } from "../theme/dashboard-group";
+import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+import Splitter from "./Splitter.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  autoSaveId: { type: String, required: false, default: "selaras-dashboard" },
+  mobileBreakpoint: { type: Number, required: false, default: 768 },
+  ui: { type: Object, required: false }
+});
+const isMobile = ref(false);
+let mediaQuery;
+function updateIsMobile() {
+  isMobile.value = mediaQuery?.matches ?? false;
+}
+onMounted(() => {
+  mediaQuery = window.matchMedia(`(max-width: ${props.mobileBreakpoint - 1}px)`);
+  updateIsMobile();
+  mediaQuery.addEventListener("change", updateIsMobile);
+});
+onUnmounted(() => mediaQuery?.removeEventListener("change", updateIsMobile));
+const toggleSidebar = ref(void 0);
+const isSidebarCollapsed = ref(false);
+const lastDesktopWidthPx = ref(void 0);
+provide(DASHBOARD_INJECTION_KEY, { isMobile, toggleSidebar, isSidebarCollapsed, lastDesktopWidthPx });
+const layoutCookie = useCookie(props.autoSaveId, {
+  default: () => void 0,
+  encode: (value) => encodeURIComponent(value ?? ""),
+  decode: (value) => value ? decodeURIComponent(value) : void 0
+});
+const storage = {
+  getItem: () => layoutCookie.value ?? null,
+  setItem: (_name, value) => {
+    layoutCookie.value = value;
+  }
+};
+const theme = useComponentTheme("dashboardGroup", dashboardGroupTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <Splitter v-if="!isMobile" direction="horizontal" :auto-save-id="autoSaveId" :storage="storage" v-bind="rootProps">
+    <slot />
+  </Splitter>
+  <div v-else v-bind="rootProps">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/DashboardGroup.vue.d.ts

@@ -0,0 +1,24 @@
+import type { DashboardGroupThemeSlots } from '../theme/dashboard-group.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DashboardGroupProps {
+    /** Persistence key for the sidebar's own width/collapse state - reuse the same id across pages that should share one remembered layout, or set a distinct one for pages that shouldn't. @default 'selaras-dashboard' */
+    autoSaveId?: string;
+    /** Below this viewport width (px), DashboardSidebar switches from a resizable split-pane panel to a Drawer overlay. @default 768 */
+    mobileBreakpoint?: number;
+    ui?: UiProp<DashboardGroupThemeSlots>;
+}
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardNavbar.d.vue.ts

@@ -0,0 +1,23 @@
+import type { DashboardNavbarThemeSlots } from '../theme/dashboard-navbar.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = DashboardNavbarSlots;
+export interface DashboardNavbarProps {
+    title?: string;
+    ui?: UiProp<DashboardNavbarThemeSlots>;
+}
+export interface DashboardNavbarSlots {
+    /** Empty by default - nothing else in the Dashboard family auto-inserts content the consumer didn't ask for (DashboardResizeHandle, a DashboardPanel's own body, ...), so a sidebar-toggle button belongs here explicitly (`SDashboardSidebarToggle`) rather than being baked in, the same way it'd be composed anywhere else. */
+    leading?: () => any;
+    title?: () => any;
+    /** Trailing content - actions, a search trigger, whatever the page needs. */
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardNavbar.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+import { dashboardNavbarTheme } from "../theme/dashboard-navbar";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  title: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const theme = useComponentTheme("dashboardNavbar", dashboardNavbarTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const leftProps = computed(() => resolveSlot(ui.value.left, props.ui?.left));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const rightProps = computed(() => resolveSlot(ui.value.right, props.ui?.right));
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <div v-bind="leftProps">
+      <slot name="leading" />
+      <slot name="title">
+        <p v-if="title" v-bind="titleProps">
+          {{ title }}
+        </p>
+      </slot>
+    </div>
+    <div v-if="$slots.default" v-bind="rightProps">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/DashboardNavbar.vue.d.ts

@@ -0,0 +1,23 @@
+import type { DashboardNavbarThemeSlots } from '../theme/dashboard-navbar.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = DashboardNavbarSlots;
+export interface DashboardNavbarProps {
+    title?: string;
+    ui?: UiProp<DashboardNavbarThemeSlots>;
+}
+export interface DashboardNavbarSlots {
+    /** Empty by default - nothing else in the Dashboard family auto-inserts content the consumer didn't ask for (DashboardResizeHandle, a DashboardPanel's own body, ...), so a sidebar-toggle button belongs here explicitly (`SDashboardSidebarToggle`) rather than being baked in, the same way it'd be composed anywhere else. */
+    leading?: () => any;
+    title?: () => any;
+    /** Trailing content - actions, a search trigger, whatever the page needs. */
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardPanel.d.vue.ts

@@ -0,0 +1,22 @@
+import type { DashboardPanelThemeSlots } from '../theme/dashboard-panel.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DashboardPanelProps {
+    /** Minimum width as a percentage of the group - non-collapsible, just guards against the sidebar squeezing this panel down to nothing. @default 30 */
+    minSize?: number;
+    ui?: UiProp<DashboardPanelThemeSlots>;
+}
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};