nuxt-ui-tools 1.2.0 → 1.4.0

package/dist/runtime/dashboard/composables/use-dashboard-scope.js

@@ -1,7 +1,7 @@
 import { computed, shallowRef } from "vue";
-import { dashboardParamBuilder } from "../utils/builders/dashboard-params.js";
+import { dashboardFilterBuilder } from "../utils/builders/dashboard-filters.js";
 import { createDashboardResourceFacade } from "../utils/resource.js";
-import { assertDashboardMemberKey } from "../utils/schema.js";
+import { assertDashboardMemberKey, resolveDashboardFilters } from "../utils/schema.js";
 import {
   combineDashboardStates,
   refreshDashboardSources,
@@ -9,19 +9,20 @@ import {
 } from "../utils/state.js";
 import { createDashboardTrackedData } from "../utils/tracker.js";
 import { useDashboardDerived } from "./use-dashboard-derived.js";
-import { mergeDashboardParamValues, useDashboardParamScope } from "./use-dashboard-param-scope.js";
+import { useDashboardFilterScope } from "./use-dashboard-filter-scope.js";
 import { useDashboardResource } from "./use-dashboard-resource.js";
 export function useDashboardScope(params) {
   const { input, scopeKey } = params;
+  const enabled = params.enabled ?? computed(() => true);
   const queryKey = [params.schemaKey, scopeKey || "$root"];
-  const paramScope = useDashboardParamScope({
-    definitions: input.params?.(dashboardParamBuilder) ?? {},
+  const scopeLabel = scopeKey ? `view "${scopeKey}"` : "the dashboard root";
+  const filterScope = useDashboardFilterScope({
+    definitions: resolveDashboardFilters({ builder: dashboardFilterBuilder, input: input.filters }),
+    environment: params.environment,
+    owner: scopeLabel,
     prefix: params.prefix,
     queryKey
   });
-  const visibleParams = mergeDashboardParamValues(
-    params.shared ? [params.shared, paramScope] : [paramScope]
-  );
   const declared = shallowRef(false);
   const declarations = /* @__PURE__ */ new Map();
   const resources = [];
@@ -35,7 +36,12 @@ export function useDashboardScope(params) {
       query(definition) {
         const query = typeof definition === "function" ? { query: definition } : definition;
         const slot = shallowRef(null);
-        const facade = createDashboardResourceFacade(stage, slot, query.defaultValue);
+        const facade = createDashboardResourceFacade({
+          defaultValue: query.defaultValue,
+          slot,
+          stage,
+          tracker: params.tracker
+        });
         declarations.set(facade, { input: query, slot, stage });
         return facade;
       }
@@ -45,24 +51,26 @@ export function useDashboardScope(params) {
     background: createStage("background"),
     deferred: createStage("deferred"),
     essential: createStage("essential"),
-    params: visibleParams
+    filters: filterScope.values
   });
-  const scopeLabel = scopeKey ? `view "${scopeKey}"` : "the dashboard root";
   const taken = new Set(params.rootSources?.keys());
   const members = /* @__PURE__ */ new Map();
   function instantiate(key, declaration) {
     const resource = useDashboardResource({
+      environment: params.environment,
       id: scopeKey ? `${scopeKey}.${key}` : key,
       input: declaration.input,
       key,
       scope: {
         active: params.active,
+        enabled,
         prefix: params.prefix,
         queryKey,
         refetchInterval: params.refetchInterval,
         settled
       },
-      stage: declaration.stage
+      stage: declaration.stage,
+      tracker: params.tracker
     });
     declaration.slot.value = resource;
     resources.push(resource);
@@ -84,7 +92,7 @@ export function useDashboardScope(params) {
     new Map([...params.rootSources ?? [], ...members]),
     params.tracker
   );
-  const derived = input.derive?.({ data, params: visibleParams }) ?? {};
+  const derived = input.derive?.({ data, filters: filterScope.values }) ?? {};
   for (const [key, evaluate] of Object.entries(derived)) {
     assertDashboardMemberKey(key, taken, scopeLabel);
     taken.add(key);
@@ -93,9 +101,10 @@ export function useDashboardScope(params) {
   }
   const essentials = resources.filter((resource) => resource.stage === "essential");
   const state = computed(() => {
+    if (!enabled.value) return "disabled";
     if (!params.active.value) return "idle";
     const combined = combineDashboardStates(essentials.map((resource) => resource.state.value));
-    return combined === "idle" ? "ready" : combined;
+    return combined === "idle" || combined === "disabled" ? "ready" : combined;
   });
   const updatedAt = computed(
     () => resolveDashboardUpdatedAt(
@@ -106,7 +115,7 @@ export function useDashboardScope(params) {
   let pending = null;
   function refresh() {
     pending ??= refreshDashboardSources(
-      resources.filter((resource) => resource.active.value)
+      resources.filter((resource) => resource.active.value && resource.state.value !== "disabled")
     ).finally(() => {
       pending = null;
       refreshing.value = false;
@@ -115,9 +124,10 @@ export function useDashboardScope(params) {
     return pending;
   }
   return {
+    enabled,
+    filterScope,
     label: input.label,
     members,
-    paramScope,
     refresh,
     refreshing,
     resources,

package/dist/runtime/dashboard/composables/use-dashboard-series-picker.d.ts

@@ -0,0 +1,20 @@
+import type { DashboardFilterControl, DashboardOptionValue, DashboardSeries } from '../types/index.js';
+/**
+ * Series of an XY chart: the declared list, or one series per option a filter picks. With a filter,
+ * the chart draws the picker (add from the options, presets) and one removable chip per series, in
+ * the series' own color, in place of the legend.
+ */
+export declare function useDashboardSeriesPicker<TRow, TItem extends DashboardOptionValue>(params: {
+    series: () => readonly DashboardSeries<TRow>[] | DashboardFilterControl<unknown, TItem>;
+    value: () => ((row: TRow, item: TItem) => number | null | undefined) | undefined;
+}): {
+    chips: import("vue").ComputedRef<{
+        color: string;
+        key: string;
+        label: string;
+        remove: () => void;
+        removeLabel: string;
+    }[]>;
+    picker: import("vue").ComputedRef<DashboardFilterControl<unknown, TItem> | undefined>;
+    series: import("vue").ComputedRef<readonly DashboardSeries<TRow>[]>;
+};

package/dist/runtime/dashboard/composables/use-dashboard-series-picker.js

@@ -0,0 +1,30 @@
+import { computed } from "vue";
+import { useUiToolsLocale } from "../../i18n/use-locale.js";
+import { DASHBOARD_PALETTE_SIZE, resolveDashboardColor } from "../utils/charts.js";
+import { resolveDashboardFilterSeries } from "../utils/filters.js";
+export function useDashboardSeriesPicker(params) {
+  const { t } = useUiToolsLocale();
+  const picker = computed(() => {
+    const declared = params.series();
+    return isSeriesList(declared) ? void 0 : declared;
+  });
+  const series = computed(() => {
+    const declared = params.series();
+    return isSeriesList(declared) ? declared : resolveDashboardFilterSeries(declared, params.value());
+  });
+  const chips = computed(() => {
+    const filter = picker.value;
+    if (!filter) return [];
+    return filter.selected.map((option, index) => ({
+      color: resolveDashboardColor(`series-${index % DASHBOARD_PALETTE_SIZE + 1}`, index),
+      key: String(option.value),
+      label: option.label,
+      remove: () => filter.toggle(option.value),
+      removeLabel: t("dashboard.series.remove", { label: option.label })
+    }));
+  });
+  return { chips, picker, series };
+}
+function isSeriesList(value) {
+  return Array.isArray(value);
+}

package/dist/runtime/dashboard/composables/use-dashboard-time.d.ts

@@ -10,4 +10,6 @@ export declare function useDashboardTime(): {
     day: (value: DashboardTimeValue) => string;
     /** `3 min ago`, `yesterday`, then the date. */
     relative: (value: DashboardTimeValue) => string;
+    /** Today's date, following the clock across midnight. */
+    today: () => string;
 };

package/dist/runtime/dashboard/composables/use-dashboard-time.js

@@ -4,6 +4,7 @@ import {
   formatDashboardDateTime,
   formatDashboardDay,
   formatDashboardRelativeTime,
+  formatDashboardToday,
   toDashboardTime
 } from "../utils/time.js";
 const TICK = 3e4;
@@ -35,6 +36,8 @@ export function useDashboardTime() {
     /** Day heading: `Today`, `Yesterday`, then the date. */
     day: (value) => formatDashboardDay(toDashboardTime(value), clock.value, code.value),
     /** `3 min ago`, `yesterday`, then the date. */
-    relative: (value) => formatDashboardRelativeTime(toDashboardTime(value), clock.value, code.value)
+    relative: (value) => formatDashboardRelativeTime(toDashboardTime(value), clock.value, code.value),
+    /** Today's date, following the clock across midnight. */
+    today: () => formatDashboardToday(clock.value, code.value)
   };
 }

package/dist/runtime/dashboard/composables/use-dashboard-ui.d.ts

@@ -4,19 +4,29 @@ import type { DashboardMenu, DashboardUiConfig } from '../types/index.js';
 export declare function useDashboardUi(): ComputedRef<DashboardUiConfig>;
 interface DashboardGridContext {
     panels: ComputedRef<boolean>;
+    /** Column count at the current breakpoint. */
+    columns: ComputedRef<number>;
+    /** Space between cells, a CSS length (`1px` in panels, where the gap draws the rules). */
+    gap: ComputedRef<string>;
+    /** Rows that are not full share their free width between their cells. */
+    fill: ComputedRef<boolean>;
     /** Card menu of the blocks that do not set their own. */
     menu: ComputedRef<DashboardMenu | undefined>;
     /** `freshness` of the blocks that do not set their own. */
     freshness: ComputedRef<boolean | undefined>;
 }
 /**
- * Lets blocks know whether they sit in a `panels` grid (joined cells, no card borders), and hands
- * them the grid's block defaults. A nested grid inherits the defaults it does not set.
+ * Lets blocks know whether they sit in a `panels` grid (joined cells, no card borders), hands them
+ * the grid's block defaults, and the geometry their cell style is computed from. A nested grid
+ * inherits the defaults it does not set.
  */
 export declare function provideDashboardGrid(params: {
     panels: () => boolean;
     menu: () => DashboardMenu | undefined;
     freshness: () => boolean | undefined;
+    columns: () => number;
+    gap: () => string;
+    fill: () => boolean;
 }): void;
 export declare function useDashboardGridContext(): DashboardGridContext | null;
 export {};

package/dist/runtime/dashboard/composables/use-dashboard-ui.js

@@ -9,7 +9,10 @@ const dashboardGridKey = Symbol("nuxt-ui-tools.dashboard-grid");
 export function provideDashboardGrid(params) {
   const parent = useDashboardGridContext();
   provide(dashboardGridKey, {
+    columns: computed(params.columns),
+    fill: computed(params.fill),
     freshness: computed(() => params.freshness() ?? parent?.freshness.value),
+    gap: computed(params.gap),
     menu: computed(() => params.menu() ?? parent?.menu.value),
     panels: computed(params.panels)
   });

package/dist/runtime/dashboard/composables/use-dashboard-views.d.ts

@@ -1,46 +1,58 @@
 import type { ComputedRef } from 'vue';
 import type { DashboardSourceLike } from '../types/index.js';
 import type { DashboardRuntimeSchema } from '../types/runtime.js';
+import type { DashboardEnvironment } from '../utils/environment.js';
 import type { DashboardReadTracker } from '../utils/tracker.js';
 import { useDashboardScope } from './use-dashboard-scope.js';
 /**
  * Owns the view controller: the URL-synced current view (`view`, pushed to history so Back returns
  * to the previous tab) and one scope per view. A view's queries stay idle until the view is opened
  * once, then stay warm across switches.
+ *
+ * A view whose `enabled` condition does not hold is out of the dashboard: it has no tab, the
+ * current view never resolves to it (a URL naming it falls back to the default view, else the
+ * first enabled one), and its scope is inactive with every query `disabled`.
  */
 export declare function useDashboardViews(params: {
     schema: DashboardRuntimeSchema;
     root: ReturnType<typeof useDashboardScope>;
     refetchInterval: ComputedRef<number>;
     tracker: DashboardReadTracker;
+    environment: DashboardEnvironment;
 }): {
     current: import("vue").WritableComputedRef<string, string>;
     keys: string[];
     views: {
+        enabled: ComputedRef<boolean>;
+        input: import("../types/runtime.js").DashboardRuntimeScopeInput;
         key: string;
         label: () => string;
         opened: import("vue").ShallowRef<boolean, boolean>;
         scope: {
+            enabled: ComputedRef<boolean>;
+            filterScope: import("./use-dashboard-filter-scope.js").DashboardFilterScope;
             label: import("../../shared/index.js").LazyTextValue | undefined;
             members: Map<string, DashboardSourceLike<unknown>>;
-            paramScope: import("./use-dashboard-param-scope.js").DashboardParamScope;
             refresh: () => Promise<void>;
             refreshing: import("vue").ShallowRef<boolean, boolean>;
             resources: {
                 activate: () => void;
                 active: ComputedRef<boolean>;
                 data: ComputedRef<unknown>;
-                error: import("vue").Ref<Error, Error> | import("vue").Ref<null, null>;
+                error: ComputedRef<unknown>;
                 id: string;
                 refresh: () => Promise<void>;
+                fetching: ComputedRef<boolean>;
                 refreshing: ComputedRef<boolean>;
                 stage: import("..").DashboardStage;
                 state: ComputedRef<import("..").DashboardResourceState>;
                 updatedAt: ComputedRef<number | undefined>;
-                widget: import("./use-dashboard-param-scope.js").DashboardParamScope;
+                filters: import("./use-dashboard-filter-scope.js").DashboardFilterScope;
             }[];
             state: ComputedRef<import("..").DashboardResourceState>;
             updatedAt: ComputedRef<number | undefined>;
         };
     }[];
 };
+/** No filter may take the URL key of the current view. */
+export declare function assertDashboardViewUrlKeys(owner: string, urlKeys: readonly string[]): void;

package/dist/runtime/dashboard/composables/use-dashboard-views.js

@@ -3,26 +3,41 @@ import { createEnumCodec, useQueryState } from "../../query-state/index.js";
 import { resolveTextValue } from "../../shared/utils/render.js";
 import {
   DASHBOARD_VIEW_URL_KEY,
+  resolveDashboardCondition,
   resolveDashboardScopePrefix,
   resolveDashboardViewKey
 } from "../utils/state.js";
 import { useDashboardScope } from "./use-dashboard-scope.js";
 export function useDashboardViews(params) {
   const { schema } = params;
-  if (params.root.paramScope.urlKeys.includes(DASHBOARD_VIEW_URL_KEY)) {
-    throw new Error(
-      `[dashboard] Root param URL key "${DASHBOARD_VIEW_URL_KEY}" is reserved for the current view of "${schema.key}". Rename the param or set its \`urlKey\`.`
-    );
-  }
+  assertDashboardViewUrlKeys("", params.root.filterScope.urlKeys);
   const keys = schema.views.map(([key]) => key);
-  const current = useQueryState({
+  const stored = useQueryState({
     codec: createEnumCodec(keys),
     defaultValue: schema.defaultView ?? keys[0] ?? "",
     historyMode: "push",
     key: resolveDashboardViewKey(schema.urlPrefix)
   });
+  const conditions = new Map(
+    schema.views.map(([key, input]) => [
+      key,
+      computed(() => resolveDashboardCondition(input.enabled))
+    ])
+  );
+  const isEnabled = (key) => conditions.get(key)?.value ?? false;
+  const current = computed({
+    get: () => {
+      if (isEnabled(stored.value)) return stored.value;
+      const fallback = [schema.defaultView, ...keys].find((key) => key && isEnabled(key));
+      return fallback ?? stored.value;
+    },
+    set: (key) => {
+      if (isEnabled(key)) stored.value = key;
+    }
+  });
   const rootSources = new Map(params.root.members);
   const views = schema.views.map(([key, input]) => {
+    const enabled = conditions.get(key) ?? computed(() => true);
     const opened = shallowRef(false);
     watch(
       () => current.value === key,
@@ -32,18 +47,26 @@ export function useDashboardViews(params) {
       { flush: "sync", immediate: true }
     );
     const scope = useDashboardScope({
-      active: computed(() => opened.value),
+      active: computed(() => opened.value && enabled.value),
+      enabled,
+      environment: params.environment,
       input,
-      prefix: resolveDashboardScopePrefix(schema.urlPrefix, key),
+      prefix: resolveDashboardScopePrefix(schema.urlPrefix),
       refetchInterval: params.refetchInterval,
       rootSources,
       schemaKey: schema.key,
       scopeKey: key,
-      shared: params.root.paramScope,
       tracker: params.tracker
     });
+    assertDashboardViewUrlKeys(key, scope.filterScope.urlKeys);
     const label = () => resolveTextValue(input.label, key);
-    return { key, label, opened, scope };
+    return { enabled, input, key, label, opened, scope };
   });
   return { current, keys, views };
 }
+export function assertDashboardViewUrlKeys(owner, urlKeys) {
+  if (urlKeys.includes(DASHBOARD_VIEW_URL_KEY))
+    throw new Error(
+      `[dashboard] A filter of ${owner ? `view "${owner}"` : "the dashboard root"} uses the URL key "${DASHBOARD_VIEW_URL_KEY}", which holds the current view. Rename the filter or set its \`urlKey\`.`
+    );
+}

package/dist/runtime/dashboard/composables/use-dashboard.d.ts

@@ -1,24 +1,30 @@
-import type { DashboardApi, DashboardSchemaLike } from '../types/index.js';
+import type { DashboardApi, DashboardSchemaLike, DashboardSchemaOf } from '../types/index.js';
 /**
- * Instantiates a dashboard schema. Call it once in `<script setup>`; every query and URL binding is
- * created synchronously here, so hook order is stable.
+ * Instantiates a dashboard. Call it once in `<script setup>` with a schema, or with a function
+ * returning one: the function runs right away, and again whenever something it reads changes (the
+ * route's id, the workspace), rebuilding the dashboard for the new input behind the same object.
  *
- * The returned object has no refs: `dashboard.params.year`, `dashboard.revenue.data`,
- * `dashboard.state` are plain reads, params are `v-model` targets, and every query / derived value
- * can be bound to a block with `:source="dashboard.revenue"`.
+ * The returned object has no refs: `dashboard.filters.year`, `dashboard.revenue.data`,
+ * `dashboard.state` are plain reads, filters are `v-model` targets, controls drive pickers, and
+ * every query / derived value can be bound to a block with `:source="dashboard.revenue"`.
+ * Descendant components get it with `injectDashboard(schema)`, and a view with `useDashboardView`.
+ *
+ * A schema function runs again outside component setup: call app-level composables in it
+ * (`useNuxtApp()`, a store, `useRoute()`) and `useDashboardFormat()`, not `useI18n()` or lifecycle
+ * hooks.
  *
  * @example
  * ```vue
  * <script setup lang="ts">
- * const dashboard = useDashboard(salesDashboard)
+ * const route = useRoute()
+ * const account = useDashboard(() => accountSchema({ accountId: String(route.params.id) }))
  * </script>
  *
  * <template>
- *   <USelect v-model="dashboard.params.period" v-bind="dashboard.options.period.menu" />
- *   <UiDashboardGrid>
- *     <UiDashboardStat :source="dashboard.summary" label="Revenue" :value="(d) => d.revenue" />
- *   </UiDashboardGrid>
+ *   <UiDashboardPage :dashboard="account" title="Account">
+ *     <template #activity><AccountActivity /></template>
+ *   </UiDashboardPage>
  * </template>
  * ```
  */
-export declare function useDashboard<const TSchema extends DashboardSchemaLike>(schema: TSchema): DashboardApi<TSchema>;
+export declare function useDashboard<const TSource extends DashboardSchemaLike | (() => DashboardSchemaLike)>(source: TSource): DashboardApi<DashboardSchemaOf<TSource>>;

package/dist/runtime/dashboard/composables/use-dashboard.js

@@ -1,5 +1,15 @@
-import { computed } from "vue";
+import {
+  computed,
+  effectScope,
+  getCurrentInstance,
+  markRaw,
+  onScopeDispose,
+  shallowRef,
+  watch
+} from "vue";
+import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import { numberCodec, useQueryState } from "../../query-state/index.js";
+import { withDashboardLocale } from "../utils/environment.js";
 import { resolveDashboardRuntimeSchema } from "../utils/schema.js";
 import {
   DASHBOARD_REFRESH_URL_KEY,
@@ -8,11 +18,67 @@ import {
 } from "../utils/state.js";
 import { createDashboardReadTracker } from "../utils/tracker.js";
 import { useDashboardApi } from "./use-dashboard-api.js";
+import { provideDashboard } from "./use-dashboard-context.js";
 import { useDashboardScope } from "./use-dashboard-scope.js";
 import { useDashboardViews } from "./use-dashboard-views.js";
-export function useDashboard(schema) {
+export function useDashboard(source) {
+  const locale = useUiToolsLocale();
+  if (typeof source !== "function") {
+    const runtime = createDashboardRuntime(source, locale);
+    provideDashboard({
+      api: runtime.api,
+      current: () => runtime.current(),
+      findView: (declaration) => runtime.findView(declaration),
+      schema: () => source,
+      source,
+      view: (key) => runtime.views.get(key)
+    });
+    return runtime.api;
+  }
+  const app = getCurrentInstance()?.appContext.app;
+  const withContext = (run) => withDashboardLocale(locale, () => app ? app.runWithContext(run) : run());
+  const schema = computed(() => withContext(source));
+  let scope = effectScope(true);
+  const current = shallowRef(build(scope, schema.value));
+  function build(owner, next) {
+    const runtime = withContext(() => owner.run(() => createDashboardRuntime(next, locale)));
+    if (!runtime) throw new Error("[dashboard] The dashboard scope stopped while building.");
+    return runtime;
+  }
+  watch(schema, (next) => {
+    const previous = scope;
+    scope = effectScope(true);
+    current.value = build(scope, next);
+    previous.stop();
+  });
+  onScopeDispose(() => scope.stop());
+  const views = /* @__PURE__ */ new Map();
+  const view = (key) => {
+    let handle = views.get(key);
+    if (!handle) {
+      handle = createStableFacade(() => current.value.views.get(key));
+      views.set(key, handle);
+    }
+    return handle;
+  };
+  const api = createStableFacade(
+    () => current.value.api,
+    (key) => current.value.views.has(key) ? view(key) : void 0
+  );
+  provideDashboard({
+    api,
+    current: () => current.value.current(),
+    findView: (declaration) => current.value.findView(declaration),
+    schema: () => schema.value,
+    source,
+    view: (key) => current.value.views.has(key) ? view(key) : void 0
+  });
+  return api;
+}
+function createDashboardRuntime(schema, locale) {
   const runtime = resolveDashboardRuntimeSchema(schema);
   const tracker = createDashboardReadTracker();
+  const environment = { locale, registry: /* @__PURE__ */ new Map() };
   const autoRefresh = useQueryState({
     codec: numberCodec,
     defaultValue: Math.max(0, runtime.autoRefresh ?? 0),
@@ -24,6 +90,7 @@ export function useDashboard(schema) {
   );
   const root = useDashboardScope({
     active: computed(() => true),
+    environment,
     input: runtime,
     prefix: resolveDashboardScopePrefix(runtime.urlPrefix),
     refetchInterval,
@@ -31,12 +98,34 @@ export function useDashboard(schema) {
     scopeKey: "",
     tracker
   });
-  if (root.paramScope.urlKeys.includes(DASHBOARD_REFRESH_URL_KEY)) {
-    throw new Error(
-      `[dashboard] Root param URL key "${DASHBOARD_REFRESH_URL_KEY}" is reserved for the auto-refresh interval of "${runtime.key}". Rename the param or set its \`urlKey\`.`
-    );
+  const views = runtime.views.length > 0 ? useDashboardViews({ environment, refetchInterval, root, schema: runtime, tracker }) : null;
+  for (const scope of [root, ...views?.views.map((view) => view.scope) ?? []]) {
+    if (scope.filterScope.urlKeys.includes(DASHBOARD_REFRESH_URL_KEY))
+      throw new Error(
+        `[dashboard] A filter of "${runtime.key}" uses the URL key "${DASHBOARD_REFRESH_URL_KEY}", which holds the auto-refresh interval. Rename the filter or set its \`urlKey\`.`
+      );
   }
-  const views = runtime.views.length > 0 ? useDashboardViews({ refetchInterval, root, schema: runtime, tracker }) : null;
-  const api = useDashboardApi({ autoRefresh, root, schema, views });
-  return api;
+  const { api, handles } = useDashboardApi({ autoRefresh, root, schema, views });
+  const declarations = new Map(runtime.views.map(([key, input]) => [input, key]));
+  return {
+    api,
+    current: () => views?.current.value,
+    findView: (declaration) => declarations.get(declaration),
+    views: handles
+  };
+}
+function createStableFacade(read, member) {
+  const target = () => read() ?? {};
+  return markRaw(
+    new Proxy(/* @__PURE__ */ Object.create(null), {
+      get: (_, key) => (typeof key === "string" ? member?.(key) : void 0) ?? Reflect.get(target(), key),
+      getOwnPropertyDescriptor: (_, key) => {
+        const descriptor = Reflect.getOwnPropertyDescriptor(target(), key);
+        return descriptor ? { ...descriptor, configurable: true } : void 0;
+      },
+      has: (_, key) => Reflect.has(target(), key),
+      ownKeys: () => Reflect.ownKeys(target()),
+      set: (_, key, value) => Reflect.set(target(), key, value)
+    })
+  );
 }

package/dist/runtime/dashboard/index.d.ts

@@ -1,4 +1,6 @@
 export { useDashboard } from './composables/use-dashboard.js';
-export { defineDashboardSchema } from './schema/index.js';
+export { injectDashboard, useDashboardView } from './composables/use-dashboard-context.js';
+export { useDashboardFormat } from './composables/use-dashboard-format.js';
+export { defineDashboardSchema, defineDashboardView } from './schema/index.js';
 export { resolveDashboardComparisonRange } from './utils/comparison.js';
 export type * from './types';

package/dist/runtime/dashboard/index.js

@@ -1,3 +1,5 @@
 export { useDashboard } from "./composables/use-dashboard.js";
-export { defineDashboardSchema } from "./schema/index.js";
+export { injectDashboard, useDashboardView } from "./composables/use-dashboard-context.js";
+export { useDashboardFormat } from "./composables/use-dashboard-format.js";
+export { defineDashboardSchema, defineDashboardView } from "./schema/index.js";
 export { resolveDashboardComparisonRange } from "./utils/comparison.js";