@leavepulse/ui 0.77.2 → 0.78.0

package/src/components/LpInspector.vue

@@ -0,0 +1,197 @@
+<script lang="ts">
+import IconCloseButton from "./IconCloseButton.vue"
+import { clamp } from "../composables/clamp"
+import type { DataListItem } from "./LpDataList.vue"
+
+export interface InspectorSection {
+  /** Stable identity, and the name of its slot: `#section-<key>`. */
+  key: string
+  title?: string
+  /** Facts about the subject. Replaced by the section's slot, which is where editing fields go. */
+  items?: DataListItem[]
+  /** Folds under its title. Sections without a title cannot fold. */
+  collapsible?: boolean
+  /** Starts folded, when `collapsible`. */
+  collapsed?: boolean
+}
+
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts" generic="T">
+/*
+ * The panel beside a table, graph or canvas that shows the selected thing and
+ * lets it be edited: one place and one shape for "what is this, and change it".
+ *
+ *   <LpInspector :subject="server" :title="server?.name" :sections="[
+ *     { key: 'facts', title: 'Overview', items: facts },
+ *     { key: 'edit', title: 'Settings' },
+ *   ]" v-model:open="inspecting" resizable persist="servers">
+ *     <template #section-edit="{ subject }"><LpInput v-model="subject.name" label="Name" /></template>
+ *   </LpInspector>
+ *
+ * It sits in the layout, beside what it inspects, so selecting another row
+ * while it is open just works: nothing is covered and no focus is taken. On a
+ * phone, where there is no beside, put it in an LpDrawer with `closable` off.
+ *
+ * With nothing selected it stays and says so (`#empty`), so the page around it
+ * does not jump at every change of selection.
+ */
+import { computed, onBeforeUnmount, useSlots, watch } from "vue"
+import { startPointerDrag } from "../composables/pointerDrag"
+import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { usePersisted } from "../composables/usePersisted"
+import { CLOSE_ICON } from "./dropdown"
+import LpDataList from "./LpDataList.vue"
+import LpDisclosure from "./LpDisclosure.vue"
+import LpIcon from "./LpIcon.vue"
+import LpScrollArea from "./LpScrollArea.vue"
+
+const KEY_STEP = 16
+
+const props = withDefaults(
+  defineProps<{
+    /** The thing inspected, handed to the slots. Empty state when nothing else is given either. */
+    subject?: T | null
+    title?: string
+    subtitle?: string
+    sections?: InspectorSection[]
+    /** Which side of the content it sits on: the resize grip goes on the other. */
+    side?: "left" | "right"
+    /** Default width in px. */
+    width?: number
+    /** Drag the inner edge to resize, or use arrow keys on it. */
+    resizable?: boolean
+    minWidth?: number
+    maxWidth?: number
+    /** Remember the dragged width under this key, across visits. */
+    persist?: string
+    closable?: boolean
+    /** Unsaved edits: `true` asks before closing, a function asks the app. */
+    guard?: CloseGuard
+    labels?: Partial<{ close: string; empty: string; resize: string; region: string }>
+  }>(),
+  { side: "right", width: 320, minWidth: 240, maxWidth: 640, closable: true, subject: undefined },
+)
+
+const open = defineModel<boolean>("open", { default: true })
+const slots = useSlots()
+const text = useLabels(
+  "inspector",
+  { close: "Close", empty: "Nothing selected", resize: "Resize panel", region: "Details" },
+  () => props.labels,
+)
+
+const saved = usePersisted<number | null>(() => props.resizable && props.persist && `lp-inspector:${props.persist}`, null, {
+  validate: (value): value is number | null => value === null || (typeof value === "number" && value > 0),
+})
+// Applied within today's limits; the saved width outlives a change to them.
+const shownWidth = computed(() => clamp(saved.value ?? props.width, props.minWidth, props.maxWidth))
+
+const isEmpty = computed(() => props.subject == null && !props.sections?.length && !slots.default)
+
+const { allowClose } = useCloseGuard(() => props.guard, () => open.value)
+async function close() {
+  if (await allowClose()) open.value = false
+}
+defineExpose({ close })
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "relative flex h-full min-h-0 shrink-0 flex-col bg-surface border-line",
+    props.side === "right" ? "border-l" : "border-r",
+  ].join(" "),
+)
+
+let stopDrag: (() => void) | null = null
+
+function startResize(event: PointerEvent) {
+  if (event.button !== 0) return
+  const start = shownWidth.value
+  const startX = event.clientX
+  const sign = props.side === "right" ? -1 : 1
+  stopDrag = startPointerDrag(event, {
+    move: (ev) => {
+      saved.value = clamp(start + (ev.clientX - startX) * sign, props.minWidth, props.maxWidth)
+    },
+    end: () => (stopDrag = null),
+  })
+}
+
+function onGripKeydown(event: KeyboardEvent) {
+  const step = event.key === "ArrowLeft" ? -KEY_STEP : event.key === "ArrowRight" ? KEY_STEP : 0
+  if (!step) return
+  event.preventDefault()
+  const sign = props.side === "right" ? -1 : 1
+  saved.value = clamp(shownWidth.value + step * sign, props.minWidth, props.maxWidth)
+}
+
+watch(open, (isOpen) => {
+  if (!isOpen) stopDrag?.()
+})
+onBeforeUnmount(() => stopDrag?.())
+</script>
+
+<template>
+  <aside
+    v-if="open"
+    v-bind="rest"
+    :class="rootClass"
+    :style="{ width: `${shownWidth}px` }"
+    :aria-label="title ?? text.region"
+  >
+    <div
+      v-if="resizable"
+      role="separator"
+      tabindex="0"
+      aria-orientation="vertical"
+      :aria-label="text.resize"
+      :aria-valuenow="shownWidth"
+      :aria-valuemin="minWidth"
+      :aria-valuemax="maxWidth"
+      class="group/resize absolute inset-y-0 z-10 w-1.5 cursor-ew-resize touch-none outline-none"
+      :class="side === 'right' ? '-left-px' : '-right-px'"
+      @pointerdown="startResize"
+      @keydown="onGripKeydown"
+    >
+      <span class="absolute inset-y-0 left-0 w-px transition-colors group-hover/resize:bg-brand group-focus-visible/resize:bg-brand" />
+    </div>
+
+    <header v-if="title || subtitle || $slots.title || closable" class="flex shrink-0 items-start gap-2 px-4 pb-3 pt-4">
+      <div class="min-w-0 flex-1">
+        <h2 class="truncate text-sm font-semibold text-ink"><slot name="title">{{ title }}</slot></h2>
+        <p v-if="subtitle" class="truncate text-xs text-muted">{{ subtitle }}</p>
+      </div>
+      <slot name="actions" />
+      <IconCloseButton v-if="closable" :label="text.close" @click="close" />
+    </header>
+
+    <LpScrollArea class="min-h-0 flex-1" content-class="flex flex-col gap-4 px-4 pb-4">
+      <slot v-if="isEmpty" name="empty">
+        <p class="py-8 text-center text-sm text-muted">{{ text.empty }}</p>
+      </slot>
+      <template v-else>
+        <template v-for="section in sections" :key="section.key">
+          <LpDisclosure v-if="section.collapsible && section.title" :label="section.title" :default-open="!section.collapsed">
+            <slot :name="`section-${section.key}`" :subject="subject" :section="section">
+              <LpDataList :items="section.items ?? []" size="sm" />
+            </slot>
+          </LpDisclosure>
+          <section v-else class="flex flex-col gap-2">
+            <h3 v-if="section.title" class="text-xs font-semibold text-muted">{{ section.title }}</h3>
+            <slot :name="`section-${section.key}`" :subject="subject" :section="section">
+              <LpDataList :items="section.items ?? []" size="sm" />
+            </slot>
+          </section>
+        </template>
+        <slot :subject="subject" />
+      </template>
+    </LpScrollArea>
+
+    <footer v-if="$slots.footer" class="flex shrink-0 justify-end gap-2 px-4 pb-4 pt-3">
+      <slot name="footer" :subject="subject" :close="close" />
+    </footer>
+  </aside>
+</template>

package/src/components/LpLightbox.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useModelOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 /*
  * Full-screen image viewer — the Discord-style lightbox: click a thumbnail, the
  * image fills the screen, arrows step through the set, the wheel zooms toward
@@ -13,6 +14,7 @@
  * Controlled via v-model:open and v-model:index, so the caller owns which image
  * is showing and can drive it from a grid, a route or a keyboard shortcut.
  */
+import { clamp } from "../composables/clamp"
 import {
   DialogContent,
   DialogDescription,
@@ -24,12 +26,14 @@ import {
 import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import { useZoomPan } from "../composables/useZoomPan"
+import { clickLink } from "./exportData"
 import { fileNameOf, type LightboxItem } from "./lightbox"
 import LpCopyButton from "./LpCopyButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpLoader from "./LpLoader.vue"
 import { useModalLayer } from "./modalDepth"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { inTextField } from "../composables/textEntry"
+import { nodeWindow, useOutsideGuard, usePortalTarget, useView, viewDocument } from "../composables/useView"
 
 export type LightboxLabels = {
   viewer: string
@@ -50,6 +54,12 @@ export type LightboxLabels = {
 
 const props = withDefaults(
   defineProps<{
+    /**
+     * Browser Back closes it, and opening it adds a history entry. Unset
+     * follows `provideOverlayHistory` (off without one); `"reopen"` also opens
+     * it again on Forward; `false` keeps it out of history.
+     */
+    history?: OverlayHistoryMode
     open?: boolean
     /** Images to page through. */
     items: LightboxItem[]
@@ -70,6 +80,7 @@ const props = withDefaults(
     labels?: Partial<LightboxLabels>
   }>(),
   {
+    history: undefined,
     open: false,
     index: 0,
     rotatable: true,
@@ -90,6 +101,13 @@ const emit = defineEmits<{
   (e: "copy", item: LightboxItem, ok: boolean): void
 }>()
 
+useModelOverlayHistory({
+  mode: () => props.history,
+  open: () => !!props.open,
+  setOpen: (open) => emit("update:open", open),
+  allowClose: async () => true,
+})
+
 const text = useLabels<LightboxLabels>(
   "lightbox",
   {
@@ -137,7 +155,7 @@ const isPanning = computed(() => zoom.panning.value)
 // moves it locally and reports the move.
 const shown = ref(props.index)
 watch(() => props.index, (i) => (shown.value = i))
-const current = computed(() => Math.min(Math.max(shown.value, 0), Math.max(props.items.length - 1, 0)))
+const current = computed(() => clamp(shown.value, 0, Math.max(props.items.length - 1, 0)))
 const item = computed<LightboxItem | undefined>(() => props.items[current.value])
 const total = computed(() => props.items.length)
 const showStrip = computed(() => props.filmstrip ?? total.value > 1)
@@ -146,6 +164,7 @@ const rotation = ref(0)
 const loading = ref(false)
 const failed = ref(false)
 const viewport = ref<HTMLElement | null>(null)
+const stageImage = ref<HTMLImageElement | null>(null)
 const stripEl = ref<HTMLElement | null>(null)
 
 watch(viewport, (el) => zoom.setViewport(el))
@@ -158,7 +177,7 @@ function go(next: number) {
   if (!total.value) return
   const wrapped = props.loop
     ? (next + total.value) % total.value
-    : Math.min(Math.max(next, 0), total.value - 1)
+    : clamp(next, 0, total.value - 1)
   if (wrapped === current.value) return
   // Compare against the raw target, not the wrapped one: stepping past the last
   // image is still "forward" even though the index jumps back to 0.
@@ -225,7 +244,7 @@ function onStageWheel(e: WheelEvent) {
 // Reset the view whenever the image changes — carrying a 4x zoom onto the next
 // picture means landing on a random crop of it.
 watch(
-  () => [current.value, props.open] as const,
+  () => [current.value, props.open, item.value?.src] as const,
   () => {
     zoom.reset()
     rotation.value = 0
@@ -235,6 +254,16 @@ watch(
   },
 )
 
+/*
+ * An image paged past stays in flight after it leaves the DOM and still reports
+ * here: only the one on stage may settle the spinner or the failed state.
+ */
+function imageSettled(event: Event, ok: boolean) {
+  if (event.currentTarget !== stageImage.value) return
+  loading.value = false
+  if (!ok) failed.value = true
+}
+
 function scrollThumbIntoView() {
   const el = stripEl.value?.querySelector<HTMLElement>(`[data-index="${current.value}"]`)
   el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
@@ -261,7 +290,13 @@ watch(
   },
 )
 
+/* Controls in the `actions` slot keep their own keys: a caret, a typed "r". */
+const OWNS_KEYS =
+  "input, textarea, select, [contenteditable]:not([contenteditable='false']), [role='textbox'], [role='searchbox'], [role='combobox']"
+
 function onKeydown(e: KeyboardEvent) {
+  if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return
+  if (inTextField(e.target, OWNS_KEYS)) return
   switch (e.key) {
     case "ArrowRight":
       e.preventDefault()
@@ -338,27 +373,27 @@ function onViewportClick(e: MouseEvent) {
   close()
 }
 
+/*
+ * The window the viewer opened in. Inside an LpFrame its location is
+ * about:blank, which resolves nothing, so a relative source is read against the
+ * document's base URL rather than the location.
+ */
+const view = useView()
+const viewerDocument = () => viewDocument(view.value)
+const viewerWindow = () => nodeWindow(viewerDocument())
+const resolved = (src: string) => new URL(src, viewerDocument().baseURI)
+
 function sameOrigin(src: string): boolean {
   try {
-    const url = new URL(src, window.location.href)
-    return url.protocol === "blob:" || url.protocol === "data:" || url.origin === window.location.origin
+    const url = resolved(src)
+    return url.protocol === "blob:" || url.protocol === "data:" || url.origin === new URL(viewerDocument().baseURI).origin
   } catch {
     return false
   }
 }
 
 function save(href: string, name: string, newTab = false) {
-  const a = document.createElement("a")
-  a.href = href
-  if (newTab) {
-    a.target = "_blank"
-    a.rel = "noopener"
-  } else {
-    a.download = name
-  }
-  document.body.appendChild(a)
-  a.click()
-  a.remove()
+  clickLink(viewerDocument(), newTab ? { href, target: "_blank", rel: "noopener" } : { href, download: name })
 }
 
 /*
@@ -373,11 +408,12 @@ async function download() {
   const name = fileNameOf(target)
   if (sameOrigin(target.src)) return save(target.src, name)
   try {
-    const response = await fetch(target.src, { mode: "cors" })
+    const win = viewerWindow()
+    const response = await win.fetch(resolved(target.src).href, { mode: "cors" })
     if (!response.ok) throw new Error(String(response.status))
-    const url = URL.createObjectURL(await response.blob())
+    const url = win.URL.createObjectURL(await response.blob())
     save(url, name)
-    window.setTimeout(() => URL.revokeObjectURL(url), 0)
+    win.setTimeout(() => win.URL.revokeObjectURL(url), 0)
   } catch {
     save(target.src, name, true)
   }
@@ -392,20 +428,28 @@ let copyTarget: LightboxItem | undefined
 async function imageToCopy(): Promise<Blob> {
   const target = (copyTarget = item.value)
   if (!target) throw new Error("No image")
-  const response = await fetch(target.src)
+  const win = viewerWindow()
+  const response = await win.fetch(resolved(target.src).href)
   const blob = await response.blob()
   // Clipboard only takes PNG; re-encode anything else through a canvas.
-  return blob.type === "image/png" ? blob : reencodeToPng(await createImageBitmap(blob))
+  return blob.type === "image/png" ? blob : reencodeToPng(await win.createImageBitmap(blob))
 }
 function copyDone(ok: boolean) {
-  if (copyTarget) emit("copy", copyTarget, ok)
+  const target = copyTarget
+  copyTarget = undefined
+  if (target) emit("copy", target, ok)
 }
 
 async function reencodeToPng(bitmap: ImageBitmap): Promise<Blob> {
-  const canvas = document.createElement("canvas")
-  canvas.width = bitmap.width
-  canvas.height = bitmap.height
-  canvas.getContext("2d")?.drawImage(bitmap, 0, 0)
+  const canvas = viewerDocument().createElement("canvas")
+  try {
+    canvas.width = bitmap.width
+    canvas.height = bitmap.height
+    canvas.getContext("2d")?.drawImage(bitmap, 0, 0)
+  } finally {
+    // Decoded pixels live outside the JS heap; a large image should not wait for GC.
+    bitmap.close()
+  }
   return new Promise((resolve, reject) =>
     canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("encode failed"))), "image/png"),
   )
@@ -570,14 +614,15 @@ const guardOutside = useOutsideGuard()
           <img
             v-else-if="item"
             :key="`${current}:${item.src}`"
+            ref="stageImage"
             data-lightbox-image
             :src="item.src"
             :alt="item.title ?? ''"
             class="max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] animate-[lightbox-frame-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none motion-reduce:transition-none"
             :style="imageStyle"
             draggable="false"
-            @load="loading = false"
-            @error="((failed = true), (loading = false))"
+            @load="imageSettled($event, true)"
+            @error="imageSettled($event, false)"
           />
 
           <!-- Mounted throughout and driven by `active`, so a cached image that

package/src/components/LpLogInspector.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/*
+ * One log entry read closely: a structured payload as a tree, a stack trace with
+ * its frames set apart from the error above them. LpLogViewer shows it under
+ * the stream for the selected line (`inspector`); on its own it takes the
+ * message, or `value` for a payload the app already has parsed.
+ */
+import { computed, ref, watch } from "vue"
+import LpIcon from "./LpIcon.vue"
+import LpInput from "./LpInput.vue"
+import { useLabels } from "../composables/useLpConfig"
+import { jsonRows, stackLines, structuredPayload } from "./logTools"
+
+export interface LogInspectorLabels {
+  [key: string]: string
+  title: string
+  filterFields: string
+  noFields: string
+  expand: string
+  collapse: string
+}
+
+const props = defineProps<{
+  /** The entry's text. Its JSON, if it holds any, becomes the tree. */
+  message?: string
+  /** A parsed payload, instead of reading one from `message`. */
+  value?: object
+  labels?: Partial<LogInspectorLabels>
+}>()
+
+const text = useLabels<LogInspectorLabels>(
+  "logInspector",
+  { title: "Log entry", filterFields: "Filter fields", noFields: "No fields match", expand: "Expand {field}", collapse: "Collapse {field}" },
+  () => props.labels,
+)
+
+const filter = ref("")
+const collapsed = ref(new Set<string>())
+const payload = computed(() => props.value ?? (props.message ? structuredPayload(props.message) : null))
+const rows = computed(() => (payload.value ? jsonRows(payload.value, collapsed.value, filter.value) : []))
+const stack = computed(() => (props.message ? stackLines(props.message) : null))
+
+// Another entry is another document: what was folded here means nothing there.
+watch(payload, () => {
+  collapsed.value = new Set()
+})
+
+function toggle(path: string) {
+  const next = new Set(collapsed.value)
+  if (!next.delete(path)) next.add(path)
+  collapsed.value = next
+}
+
+const VALUE_TONE = { string: "text-success", number: "text-accent", boolean: "text-brand", null: "text-muted", object: "text-muted", array: "text-muted" }
+/* Each level of the tree steps in by this much, in rem. */
+const INDENT_REM = 1
+</script>
+
+<template>
+  <section :aria-label="text.title" class="font-mono text-xs leading-5">
+    <template v-if="payload">
+      <LpInput v-model="filter" type="search" size="sm" icon="lucide:filter" clearable class="mb-2 font-sans" :aria-label="text.filterFields" :placeholder="text.filterFields" />
+      <p v-if="!rows.length" class="py-1 font-sans text-muted">{{ text.noFields }}</p>
+      <ul v-else class="min-w-0">
+        <li v-for="row in rows" :key="row.path" class="flex items-start gap-1" :style="{ paddingLeft: `${row.depth * INDENT_REM}rem` }">
+          <button
+            v-if="row.expandable"
+            type="button"
+            class="mt-0.5 shrink-0 rounded-xs text-muted outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            :aria-expanded="!collapsed.has(row.path)"
+            :aria-label="(collapsed.has(row.path) ? text.expand : text.collapse).replace('{field}', row.label)"
+            @click="toggle(row.path)"
+          >
+            <LpIcon :name="collapsed.has(row.path) ? 'lucide:chevron-right' : 'lucide:chevron-down'" :size="12" />
+          </button>
+          <span v-else class="w-3 shrink-0" aria-hidden="true" />
+          <span class="shrink-0 text-muted-strong">{{ row.label }}:</span>
+          <span class="min-w-0 whitespace-pre-wrap break-words" :class="VALUE_TONE[row.kind]">{{ row.value }}</span>
+        </li>
+      </ul>
+    </template>
+    <pre v-else-if="stack" class="overflow-x-auto"><template v-for="(line, i) in stack" :key="i"><span :class="line.frame ? 'text-muted' : 'text-ink'">{{ line.text }}</span>{{ "\n" }}</template></pre>
+    <p v-else class="whitespace-pre-wrap break-words text-ink">{{ message }}</p>
+  </section>
+</template>