@stacksjs/defaults 0.72.97 → 0.72.99

package/views/dashboard/composables/useChart.ts

@@ -13,29 +13,41 @@
  * lifecycle for pages that should defer the chart library.
  */
 
+import type { Chart, ChartConfig, ChartData, ChartDataset, ChartOptions, ChartType } from '@stacksjs/charts'
 import { onDestroy, onMount } from '@stacksjs/stx'
 
-export interface ChartLike {
-  destroy: () => void
-  update?: () => void
-}
+export type { ChartConfig, ChartData, ChartDataset, ChartOptions, ChartType }
+
+/**
+ * The part of a chart instance this codebase touches, taken from the class
+ * rather than restated.
+ *
+ * `data` is included because every dashboard that refreshes a chart writes
+ * through it - replacing `labels` and each dataset's `data`, then calling
+ * `update()` - rather than destroying and rebuilding.
+ *
+ * This used to be a hand-written interface, deliberately not importing
+ * `@stacksjs/charts` "to keep this composable dep-free at the type level".
+ * The import is type-only and erases, so it costs nothing at runtime, and
+ * writing the shape out by hand cost plenty: it omitted `data`, so three
+ * dashboards each declared their own local `ChartLike` in three slightly
+ * different shapes to get at it, and every page then needed
+ * `Chart as unknown as ChartCtor` to get the real constructor past a
+ * signature that described it imprecisely.
+ */
+export type ChartLike = Pick<Chart, 'data' | 'update' | 'destroy'>
 
-// Constructor signature mirrors Chart.js — `new Chart(canvas, config)`.
-// We don't import `@stacksjs/charts` here to keep this composable
-// dep-free at the type level; pages pass the constructor in.
-export type ChartCtor = new (
-  canvas: HTMLCanvasElement | HTMLElement,
-  config: { type: string, data: unknown, options?: unknown },
-) => ChartLike
+/** `new Chart(canvas, config)`, taken from the class itself. */
+export type ChartCtor = new (..._args: ConstructorParameters<typeof Chart>) => ChartLike
 
 export interface UseChartOptions {
   /** Chart constructor (`new Chart(...)`). Pages import lazily and pass it in. */
   Chart: ChartCtor
   /** Element id, e.g. `'chart_1'`. */
   id: string
-  type: string
-  data: unknown
-  options?: unknown
+  type: ChartType
+  data: ChartData
+  options?: ChartOptions
 }
 
 export interface ChartHandle {

package/views/dashboard/layouts/default.stx

@@ -21,15 +21,25 @@ export const sidebarSections = buildWebSidebarSections()
 // viewers who hold none of them. Emitted as an id-keyed map rather than a
 // `data-required-roles` attribute on each row, which keeps the generic
 // Sidebar component free of Stacks-specific attributes.
-export const sidebarRoleMap = JSON.stringify(
-  Object.fromEntries(
-    sidebarSections.flatMap(section =>
-      section.items
-        .filter(item => item.roles && item.roles.length > 0)
-        .map(item => [item.id, item.roles]),
+// Published as an object, not as JSON text. The server-to-client bridge
+// serializes what it publishes, so a value stringified here arrived on the
+// client double-encoded - as the JSON string rather than the map. The client
+// then ran `Object.entries` over that string, which yields index/character
+// pairs, and called `.some()` on a single character. Every dashboard load
+// threw inside applyRoleFilter before it could filter anything.
+export const sidebarRoleMap: Record<string, string[]> = Object.fromEntries(
+  sidebarSections.flatMap(section =>
+    section.items.flatMap(item =>
+      item.roles && item.roles.length > 0
+        ? [[item.id, item.roles] as const]
+        : [],
     ),
   ),
 )
+
+// Declared, so the client block below gets the map typed rather than inferred
+// off the implicit bridge - which is what let the mismatch above go unseen.
+defineClientPayload({ sidebarRoleMap })
 </script>
 
 @head
@@ -389,6 +399,8 @@ html[data-appearance="arc"] [data-sidebar-section] > div:first-child {
 // fixed-position container below the <main> slot. Mounted in the
 // layout so every dashboard page picks it up without opting in.
 // `~/`-anchored for the same reason as the sidebar import above.
+import type { ToastType } from '~/storage/framework/defaults/functions/toasts'
+import type { CraftSidebarSelectEvent } from '~/storage/framework/defaults/functions/craft'
 import { useToasts, dismissToast } from '~/storage/framework/defaults/functions/toasts'
 import { ensureCraftNativeSidebarMarker, useCraftSidebarSelection } from '~/storage/framework/defaults/functions/craft'
 import { readStoredAppearance, useAppearance } from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
@@ -401,14 +413,14 @@ registerStoresClient({ authStore, kanbanStore, rbacStore })
 // Helpers below return COMPLETE class strings (static + dynamic) and are
 // applied via `:class="fn(...)"` because stx's `{{ ... }}` placeholder is
 // not reactively bound inside a `class` attribute - only inside text content.
-const toastIconClass = (type) => `flex-shrink-0 h-5 w-5 mt-0.5 ${({
+const toastIconClass = (type: ToastType) => `flex-shrink-0 h-5 w-5 mt-0.5 ${({
   success: 'i-hugeicons-checkmark-circle-02 text-green-500 dark:text-green-400',
   error: 'i-hugeicons-alert-02 text-red-500 dark:text-red-400',
   warning: 'i-hugeicons-alert-circle text-yellow-500 dark:text-yellow-400',
   info: 'i-hugeicons-information-circle text-blue-500 dark:text-blue-400',
 }[type] || 'i-hugeicons-information-circle text-gray-500 dark:text-neutral-400')}`
 
-const toastWrapperClass = (type) => `pointer-events-auto overflow-hidden bg-white dark:bg-neutral-800 ring-1 ${({
+const toastWrapperClass = (type: ToastType) => `pointer-events-auto overflow-hidden bg-white dark:bg-neutral-800 ring-1 ${({
   success: 'ring-green-500/20',
   error: 'ring-red-500/30',
   warning: 'ring-yellow-500/20',
@@ -434,10 +446,10 @@ let removeCraftSidebarSelection = () => {}
 ensureCraftNativeSidebarMarker()
 auth.load()
 
-function sidebarPanes() {
+function sidebarPanes(): HTMLElement[] {
   return [sidebarHost.current, mobileSidebarHost.current]
-    .map(host => host?.querySelector('[data-stx-sidebar]'))
-    .filter(Boolean)
+    .map(host => host?.querySelector<HTMLElement>('[data-stx-sidebar]'))
+    .filter((pane): pane is HTMLElement => Boolean(pane))
 }
 
 function applyRoleFilter() {
@@ -445,7 +457,7 @@ function applyRoleFilter() {
   const unauth = auth.unauthenticated()
   for (const pane of sidebarPanes()) {
     for (const [itemId, required] of Object.entries(sidebarRoles)) {
-      const row = pane.querySelector(`[data-sidebar-row][data-item-id="${itemId}"]`)
+      const row = pane.querySelector<HTMLElement>(`[data-sidebar-row][data-item-id="${itemId}"]`)
       if (!row) continue
       // Unauthenticated viewers see everything, which keeps the dev dashboard
       // usable. Once authenticated, role membership is authoritative. CSS
@@ -495,7 +507,7 @@ function applySectionVisibility() {
   // do nothing until a reload.
   const hidden = appearance.hiddenSections()
   for (const pane of sidebarPanes()) {
-    for (const section of pane.querySelectorAll('[data-sidebar-section]')) {
+    for (const section of pane.querySelectorAll<HTMLElement>('[data-sidebar-section]')) {
       const id = section.dataset.sectionId || ''
       section.setAttribute('data-viewer-hidden', String(hidden.includes(id)))
     }
@@ -522,14 +534,14 @@ useEventListener('storage', (event) => {
   appearance.apply()
 })
 
-function normalizeRoutePath(path) {
+function normalizeRoutePath(path: string | null | undefined): string {
   return (path || '/').replace(/\/+$/, '') || '/'
 }
 
 // Highlight the current route. Longest-prefix matching keeps a detail page
 // such as /commerce/products/42 attached to its /commerce/products row while
 // preventing /health from matching /health-check.
-function syncActiveSidebarRow(url) {
+function syncActiveSidebarRow(url?: string): void {
   let path = route.path
   if (url) {
     try {
@@ -566,7 +578,7 @@ function syncActiveSidebarRow(url) {
   }
 }
 
-function handleSidebarItemClick(payload) {
+function handleSidebarItemClick(payload: { item?: { href?: string }, event?: { preventDefault: () => void } } | undefined): void {
   const href = payload?.item?.href
   if (!href || href.startsWith('http')) return
   payload.event?.preventDefault()
@@ -578,10 +590,10 @@ function syncMobileSidebar() {
   syncActiveSidebarRow()
 }
 
-function handleCraftSidebarSelection(event) {
+function handleCraftSidebarSelection(event: CraftSidebarSelectEvent | undefined): void {
   if (!event?.itemId) return
   for (const pane of sidebarPanes()) {
-    const row = [...pane.querySelectorAll('[data-sidebar-row]')].find(
+    const row = [...pane.querySelectorAll<HTMLElement>('[data-sidebar-row]')].find(
       candidate => candidate.dataset.itemId === event.itemId,
     )
     const link = row?.querySelector('a[data-sidebar-item][href]')
@@ -598,7 +610,7 @@ function attachCraftSidebarSelection() {
   removeCraftSidebarSelection = useCraftSidebarSelection(handleCraftSidebarSelection)
 }
 
-useEventListener('stx:navigate', event => syncActiveSidebarRow(event?.detail?.url))
+useEventListener('stx:navigate', (event: Event) => syncActiveSidebarRow((event as CustomEvent<{ url?: string }>).detail?.url))
 useEventListener('stx:hydrated', () => syncActiveSidebarRow(), { once: true })
 useEventListener('craft:ready', () => {
   ensureCraftNativeSidebarMarker()
@@ -629,11 +641,14 @@ onDestroy(() => {
     @itemClick="handleSidebarItemClick($event)"
   >
     <template #header>
-      <!-- Chrome strip. The traffic lights are native (the Craft window is
-          titlebarHidden), so this reserves their space and acts as the window
-          drag region; in a plain browser it is the same empty strip macOS
-          sidebars carry above their first row. -->
-      <SidebarHeader :showWindowControls="false" />
+      <!-- Chrome strip. The traffic lights are the platform's, so this draws
+          none and reserves whatever room the host says they need: 62px in a
+          titlebarHidden window where they float over this sidebar, nothing in
+          a window that keeps them in a titlebar, and nothing in a browser,
+          which has no window buttons at all. It is also the window drag
+          region, and in a browser it is the same empty strip macOS sidebars
+          carry above their first row. -->
+      <SidebarHeader windowControls="native" />
     </template>
   </Sidebar>
 </div>
@@ -649,7 +664,9 @@ onDestroy(() => {
       @itemClick="handleSidebarItemClick($event)"
     >
       <template #header>
-        <SidebarHeader :show-window-controls="false" />
+        <!-- A drawer, not the window edge: no window buttons land on it, so
+            there is nothing to draw and nothing to reserve. -->
+        <SidebarHeader windowControls="none" />
       </template>
     </Sidebar>
   </div>