@leavepulse/ui 0.14.9 → 0.15.0

package/src/components/LpFileTreeNode.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+/*
+ * One row of LpFileTree plus its recursively rendered children. Split out so the
+ * tree can recurse without LpFileTree importing itself, and so the row's
+ * indent/expand/selection logic lives in one place. Not exported on its own; an
+ * LpFileTree detail.
+ *
+ * Roving tabindex: exactly one row in the whole tree is focusable at a time
+ * (the one matching `focusedId`), which is what a11y expects of role="tree" —
+ * Tab enters the tree once, arrows move within it. The parent owns that state.
+ */
+import { computed } from "vue"
+import {
+  checkedCount,
+  checkStateOf,
+  fileIcon,
+  formatModified,
+  formatSize,
+  sortNodes,
+  subtreeSize,
+  type FileNode,
+} from "./fileTree"
+import LpCheckbox from "./LpCheckbox.vue"
+import LpContextMenu from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = defineProps<{
+  node: FileNode
+  /** Nesting depth, 0 at the root — drives the indent guide and aria-level. */
+  depth: number
+  expanded: Set<string>
+  loading: Set<string>
+  selectedId?: string
+  focusedId?: string
+  sort: boolean
+  /** Rendered size of the row's icon, in px. */
+  iconSize: number
+  /** Render a tri-state checkbox per row (multi-select mode). */
+  checkable: boolean
+  checked: Set<string>
+  showSize: boolean
+  showModified: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "select", node: FileNode): void
+  (e: "toggle", node: FileNode): void
+  (e: "focus", node: FileNode): void
+  (e: "check", node: FileNode, value: boolean): void
+}>()
+
+// Declared explicitly: the component renders itself, so an inferred slot type
+// would reference its own initializer (TS7022).
+defineSlots<{
+  row(props: { node: FileNode; depth: number; expanded: boolean; selected: boolean }): unknown
+}>()
+
+const isDir = computed(() => props.node.kind === "dir")
+const isOpen = computed(() => isDir.value && props.expanded.has(props.node.id))
+const isLoading = computed(() => props.loading.has(props.node.id))
+const isSelected = computed(() => props.selectedId === props.node.id)
+const isFocused = computed(() => props.focusedId === props.node.id)
+
+// A directory with no `children` array hasn't been loaded yet — we can't know if
+// it's empty, so it stays expandable and the caller fills it on `expand`.
+const hasChildren = computed(() => isDir.value && (props.node.children?.length ?? 0) > 0)
+const canExpand = computed(() => isDir.value && (props.node.children === undefined || hasChildren.value))
+
+const children = computed(() => {
+  const list = props.node.children ?? []
+  return props.sort ? sortNodes(list) : list
+})
+
+const checkState = computed(() =>
+  props.checkable ? checkStateOf(props.node, props.checked) : "unchecked",
+)
+
+// A directory shows the rolled-up size of what's under it, so a backup picker
+// can answer "how much is this folder" without expanding it.
+const sizeLabel = computed(() => {
+  if (!props.showSize) return ""
+  const bytes = subtreeSize(props.node)
+  return bytes === undefined ? "" : formatSize(bytes)
+})
+
+/**
+ * "3 / 12" on a directory whose subtree is partly ticked. Only shown while it
+ * actually differs from the whole — a fully ticked or untouched folder reads
+ * fine from the checkbox alone, and a count on every row would be noise.
+ */
+const countLabel = computed(() => {
+  if (!props.checkable || !isDir.value) return ""
+  const { checked, total } = checkedCount(props.node, props.checked)
+  return total && checked && checked < total ? `${checked} / ${total}` : ""
+})
+
+const modifiedLabel = computed(() =>
+  props.showModified && props.node.modified !== undefined
+    ? formatModified(props.node.modified)
+    : "",
+)
+
+/**
+ * Per-row stagger for the reveal animation. Capped so a large directory doesn't
+ * spend a second unfolding — past the cap every remaining row comes in together.
+ */
+function rowDelay(index: number): string {
+  return `${Math.min(index * 18, 180)}ms`
+}
+
+/** Respect the OS setting — skip the height animation entirely. */
+function reducedMotion(): boolean {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
+}
+
+// Expand/collapse the branch by animating from 0 to its measured height. The
+// Web Animations API is used directly (rather than a CSS class) because the
+// target height isn't known until the rows are in the DOM.
+function onBranchEnter(el: Element, done: () => void) {
+  if (reducedMotion()) return done()
+  const height = (el as HTMLElement).scrollHeight
+  el.animate(
+    [
+      { height: "0px", opacity: 0 },
+      { height: `${height}px`, opacity: 1 },
+    ],
+    { duration: 220, easing: "cubic-bezier(0.2, 0, 0, 1)" },
+  ).onfinish = () => done()
+}
+
+function onBranchLeave(el: Element, done: () => void) {
+  if (reducedMotion()) return done()
+  const height = (el as HTMLElement).scrollHeight
+  el.animate(
+    [
+      { height: `${height}px`, opacity: 1 },
+      { height: "0px", opacity: 0 },
+    ],
+    { duration: 180, easing: "cubic-bezier(0.2, 0, 0, 1)" },
+  ).onfinish = () => done()
+}
+
+function onActivate() {
+  if (props.node.disabled) return
+  emit("focus", props.node)
+  // A directory row toggles; a file row selects. Directories still emit select
+  // so callers can drive a details panel off the highlighted entry.
+  emit("select", props.node)
+  if (isDir.value) emit("toggle", props.node)
+}
+</script>
+
+<template>
+  <li
+    role="treeitem"
+    class="min-w-0"
+    :aria-level="depth + 1"
+    :aria-selected="isSelected"
+    :aria-expanded="canExpand ? isOpen : undefined"
+    :aria-disabled="node.disabled || undefined"
+  >
+    <!-- Passthrough when the node has no menu, so the row keeps the native one. -->
+    <LpContextMenu :items="node.menu ?? []">
+      <div
+        :data-node-id="node.id"
+        :tabindex="isFocused ? 0 : -1"
+        class="group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        :class="[
+          node.disabled
+            ? 'cursor-not-allowed text-muted/50'
+            : isSelected
+              ? 'bg-brand-soft text-ink'
+              : 'text-muted hover:bg-surface-soft hover:text-ink',
+        ]"
+        :style="{ paddingLeft: `${depth * 14 + 6}px` }"
+        @click.stop="onActivate"
+      >
+        <!-- Chevron sits in a fixed-width slot so names line up whether or not
+             the row can expand. Leaves get the same gutter, left empty. -->
+        <span class="flex size-4 shrink-0 items-center justify-center">
+          <LpIcon
+            v-if="isLoading"
+            name="lucide:loader-circle"
+            :size="13"
+            class="animate-spin text-muted"
+          />
+          <LpIcon
+            v-else-if="canExpand"
+            name="lucide:chevron-right"
+            :size="14"
+            class="text-muted transition-transform duration-[var(--duration-fast)]"
+            :class="isOpen ? 'rotate-90' : ''"
+          />
+        </span>
+
+        <!-- Checkbox is its own hit target: ticking a folder must not also
+             expand it (and vice versa), so the click stops here. -->
+        <LpCheckbox
+          v-if="checkable"
+          :model-value="checkState === 'checked'"
+          :indeterminate="checkState === 'indeterminate'"
+          :disabled="node.disabled"
+          class="shrink-0"
+          :aria-label="node.name"
+          @click.stop
+          @update:model-value="emit('check', node, $event)"
+        />
+
+        <LpIcon
+          :name="fileIcon(node, isOpen)"
+          :size="iconSize"
+          class="shrink-0"
+          :class="node.disabled ? '' : isDir ? 'text-brand' : 'text-muted'"
+        />
+
+        <span class="min-w-0 flex-1 truncate">
+          <slot name="row" :node="node" :depth="depth" :expanded="isOpen" :selected="isSelected">
+            {{ node.name }}
+          </slot>
+        </span>
+
+        <!-- Partial-selection counter: says outright how much of the folder is
+             ticked, which a half-state checkbox alone doesn't convey. -->
+        <span
+          v-if="countLabel"
+          class="shrink-0 rounded-pill bg-brand-soft px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-brand"
+        >
+          {{ countLabel }}
+        </span>
+
+        <!-- Metadata columns: tabular figures so sizes line up down the tree. -->
+        <span v-if="node.meta" class="shrink-0 text-xs text-muted">{{ node.meta }}</span>
+        <span
+          v-if="modifiedLabel"
+          class="shrink-0 text-xs tabular-nums text-muted/80"
+        >
+          {{ modifiedLabel }}
+        </span>
+        <span
+          v-if="sizeLabel"
+          class="w-16 shrink-0 text-right text-xs tabular-nums text-muted"
+        >
+          {{ sizeLabel }}
+        </span>
+      </div>
+    </LpContextMenu>
+
+    <!-- Height is only known at runtime, so the expand/collapse is measured in
+         JS hooks rather than a keyframe. Rows inside stagger themselves in. -->
+    <Transition
+      :css="false"
+      @enter="onBranchEnter"
+      @leave="onBranchLeave"
+    >
+      <ul v-if="isOpen && hasChildren" role="group" class="flex min-w-0 flex-col overflow-hidden">
+        <LpFileTreeNode
+          v-for="(child, i) in children"
+          :key="child.id"
+          :style="{ '--row-delay': rowDelay(i) }"
+          class="animate-[tree-row-in_var(--duration-medium)_var(--ease-emphasized)_both] [animation-delay:var(--row-delay)] motion-reduce:animate-none"
+          :node="child"
+          :depth="depth + 1"
+          :expanded="expanded"
+          :loading="loading"
+          :selected-id="selectedId"
+          :focused-id="focusedId"
+          :sort="sort"
+          :icon-size="iconSize"
+          :checkable="checkable"
+          :checked="checked"
+          :show-size="showSize"
+          :show-modified="showModified"
+          @select="emit('select', $event)"
+          @toggle="emit('toggle', $event)"
+          @focus="emit('focus', $event)"
+          @check="(n, v) => emit('check', n, v)"
+        >
+          <template #row="slotProps">
+            <slot name="row" v-bind="slotProps" />
+          </template>
+        </LpFileTreeNode>
+      </ul>
+    </Transition>
+  </li>
+</template>

package/src/components/fileTree.ts

@@ -0,0 +1,239 @@
+/*
+ * Shared file-tree types and helpers. Lives in its own module so LpFileTree and
+ * its recursive LpFileTreeNode body can both import them without a
+ * component-to-component cycle. Re-exported from LpFileTree.vue.
+ */
+
+import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+
+export interface FileNode {
+  /** Stable identity — use the full path when you have one. */
+  id: string
+  name: string
+  /** Directories can hold `children`; files are leaves. */
+  kind: "file" | "dir"
+  /** Size in bytes. Shown right-aligned when `showSize` is on. */
+  size?: number
+  /** Last-modified time — Date, epoch ms, or a pre-formatted string. */
+  modified?: Date | number | string
+  /** Extra right-aligned text (badge-ish), e.g. "read-only". */
+  meta?: string
+  /**
+   * Omit on a directory to mark its children as not-yet-loaded: the row shows a
+   * chevron and emits `expand` on first open so the caller can fetch them.
+   * An empty array means "loaded, and genuinely empty".
+   */
+  children?: FileNode[]
+  /** Override the type-derived icon. */
+  icon?: string
+  /** Dimmed row (e.g. a git-ignored or unreadable entry). Still expandable. */
+  disabled?: boolean
+  /** Right-click menu for this entry. */
+  menu?: ContextMenuItemDef[]
+}
+
+/** Directory icons are state-driven; files fall back to an extension map. */
+const EXT_ICONS: Record<string, string> = {
+  json: "lucide:file-json",
+  jsonc: "lucide:file-json",
+  yaml: "lucide:file-cog",
+  yml: "lucide:file-cog",
+  toml: "lucide:file-cog",
+  ini: "lucide:file-cog",
+  conf: "lucide:file-cog",
+  env: "lucide:file-key",
+  ts: "lucide:file-code",
+  tsx: "lucide:file-code",
+  js: "lucide:file-code",
+  mjs: "lucide:file-code",
+  cjs: "lucide:file-code",
+  vue: "lucide:file-code",
+  py: "lucide:file-code",
+  rs: "lucide:file-code",
+  go: "lucide:file-code",
+  sh: "lucide:file-terminal",
+  zsh: "lucide:file-terminal",
+  bash: "lucide:file-terminal",
+  md: "lucide:file-text",
+  mdx: "lucide:file-text",
+  txt: "lucide:file-text",
+  log: "lucide:scroll-text",
+  csv: "lucide:file-spreadsheet",
+  sql: "lucide:database",
+  png: "lucide:file-image",
+  jpg: "lucide:file-image",
+  jpeg: "lucide:file-image",
+  gif: "lucide:file-image",
+  svg: "lucide:file-image",
+  webp: "lucide:file-image",
+  ico: "lucide:file-image",
+  zip: "lucide:file-archive",
+  gz: "lucide:file-archive",
+  tar: "lucide:file-archive",
+  tgz: "lucide:file-archive",
+  xz: "lucide:file-archive",
+  pdf: "lucide:file-type",
+  lock: "lucide:file-lock",
+  pem: "lucide:file-key",
+  key: "lucide:file-key",
+  crt: "lucide:file-key",
+}
+
+/** Dotfiles that read as config regardless of extension. */
+const NAME_ICONS: Record<string, string> = {
+  ".env": "lucide:file-key",
+  ".gitignore": "lucide:git-branch",
+  ".dockerignore": "lucide:container",
+  dockerfile: "lucide:container",
+  "docker-compose.yml": "lucide:container",
+  "docker-compose.yaml": "lucide:container",
+  makefile: "lucide:file-cog",
+  "package.json": "lucide:package",
+}
+
+/** Icon for a node: explicit override → dir state → name → extension → generic. */
+export function fileIcon(node: FileNode, expanded = false): string {
+  if (node.icon) return node.icon
+  if (node.kind === "dir") return expanded ? "lucide:folder-open" : "lucide:folder"
+
+  const lower = node.name.toLowerCase()
+  if (NAME_ICONS[lower]) return NAME_ICONS[lower]
+  // Leading dot doesn't start an extension (".env" is a name, not an ext).
+  const dot = lower.lastIndexOf(".")
+  const ext = dot > 0 ? lower.slice(dot + 1) : ""
+  return EXT_ICONS[ext] ?? "lucide:file"
+}
+
+/** Directories first, then case-insensitive by name — the file-manager order. */
+export function sortNodes(nodes: FileNode[]): FileNode[] {
+  return [...nodes].sort((a, b) => {
+    if (a.kind !== b.kind) return a.kind === "dir" ? -1 : 1
+    return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" })
+  })
+}
+
+/** Human-readable byte size — binary units, matching what file managers show. */
+export function formatSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return "—"
+  if (bytes < 1024) return `${bytes} B`
+  const units = ["KB", "MB", "GB", "TB", "PB"]
+  let value = bytes / 1024
+  let i = 0
+  while (value >= 1024 && i < units.length - 1) {
+    value /= 1024
+    i++
+  }
+  // One decimal below 10 (2.4 MB), none above (240 MB) — keeps the column tidy.
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`
+}
+
+/** Short local date-time for the modified column; passes strings through. */
+export function formatModified(value: Date | number | string): string {
+  if (typeof value === "string") return value
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return "—"
+  return date.toLocaleString(undefined, {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+/**
+ * Total size of a subtree: a directory's own `size` when the caller computed one
+ * (the common case for a server-side listing), otherwise the sum of its loaded
+ * descendants. Returns undefined when nothing along the way carries a size.
+ */
+export function subtreeSize(node: FileNode): number | undefined {
+  if (node.kind === "file") return node.size
+  if (node.size !== undefined) return node.size
+  if (!node.children?.length) return undefined
+  let total = 0
+  let seen = false
+  for (const child of node.children) {
+    const size = subtreeSize(child)
+    if (size !== undefined) {
+      total += size
+      seen = true
+    }
+  }
+  return seen ? total : undefined
+}
+
+/** Every id in a subtree including the root — the unit a checkbox toggles. */
+export function subtreeIds(node: FileNode): string[] {
+  const out = [node.id]
+  for (const child of node.children ?? []) out.push(...subtreeIds(child))
+  return out
+}
+
+export type CheckState = "checked" | "unchecked" | "indeterminate"
+
+/**
+ * A node's checkbox state derived from the checked-id set.
+ *
+ * A directory reflects its loaded children: all checked → checked, some →
+ * indeterminate. A directory whose children aren't loaded yet (or which has
+ * none) falls back to its own membership, so an unexpanded folder can still be
+ * ticked as a whole — which is exactly what a backup picker needs.
+ */
+export function checkStateOf(node: FileNode, checked: ReadonlySet<string>): CheckState {
+  if (node.kind === "file" || !node.children?.length) {
+    return checked.has(node.id) ? "checked" : "unchecked"
+  }
+  let all = true
+  let any = false
+  for (const child of node.children) {
+    const state = checkStateOf(child, checked)
+    if (state === "checked") any = true
+    else if (state === "indeterminate") {
+      any = true
+      all = false
+    } else all = false
+  }
+  if (all) return "checked"
+  return any ? "indeterminate" : "unchecked"
+}
+
+/**
+ * How much of a directory's subtree is ticked, counting FILES only (folders are
+ * containers, not payload). Lets a row say "3 / 12" so a half-filled checkbox
+ * isn't the only clue that a folder is partially selected.
+ */
+export function checkedCount(
+  node: FileNode,
+  checked: ReadonlySet<string>,
+): { checked: number; total: number } {
+  let count = 0
+  let total = 0
+  function walk(list: FileNode[]) {
+    for (const child of list) {
+      if (child.kind === "file") {
+        total++
+        if (checked.has(child.id)) count++
+      } else if (child.children?.length) {
+        walk(child.children)
+      }
+    }
+  }
+  walk(node.children ?? [])
+  return { checked: count, total }
+}
+
+/** Ids of every ancestor directory of `id`, so callers can reveal a deep node. */
+export function ancestorIds(nodes: FileNode[], id: string): string[] {
+  const path: string[] = []
+  function walk(list: FileNode[], trail: string[]): boolean {
+    for (const node of list) {
+      if (node.id === id) {
+        path.push(...trail)
+        return true
+      }
+      if (node.children && walk(node.children, [...trail, node.id])) return true
+    }
+    return false
+  }
+  walk(nodes, [])
+  return path
+}

package/src/index.ts

@@ -25,6 +25,20 @@ export { default as LpDrawer } from "./components/LpDrawer.vue"
 export { default as LpDropdownMenu } from "./components/LpDropdownMenu.vue"
 export type { MenuItem } from "./components/LpDropdownMenu.vue"
 export { default as LpEmptyState } from "./components/LpEmptyState.vue"
+export { default as LpFileTree } from "./components/LpFileTree.vue"
+export type { FileTreeSummary } from "./components/LpFileTree.vue"
+export type { CheckState, FileNode } from "./components/fileTree"
+export {
+  ancestorIds,
+  checkedCount,
+  checkStateOf,
+  fileIcon,
+  formatModified,
+  formatSize,
+  sortNodes,
+  subtreeIds,
+  subtreeSize,
+} from "./components/fileTree"
 export { default as LpFormField } from "./components/LpFormField.vue"
 export { default as LpIcon } from "./components/LpIcon.vue"
 export { default as LpInfraNode } from "./components/LpInfraNode.vue"

package/src/tokens/tokens.css

@@ -279,6 +279,21 @@
     transform: translateY(0);
   }
 }
+/*
+ * Tree/list row reveal: a row fades in while sliding from its parent's indent,
+ * so an expanding branch reads as unfolding outward rather than popping. Used by
+ * LpFileTree, which staggers it per row via --row-delay.
+ */
+@keyframes tree-row-in {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 
 /*
  * Skin painter. A raised panel opts in with .lp-skin-panel and gets the active
@@ -319,10 +334,13 @@
  * the glow is the wider of the two, so reserving for it covers both.
  *
  * Put this on the element that LAYS OUT the cards (the <ul>, the grid), not on
- * the clipping parent: it pads the content inward by exactly the distance the
- * glow travels, so the glow lands on padding instead of on the clip boundary.
- * Negative margins pull that padding back out, so the cards stay where they
- * were and nothing shifts — only the overflow gets somewhere to go.
+ * the clipping parent: it insets the cards by exactly the distance the glow
+ * travels, so the glow lands on that padding instead of on the clip boundary.
+ *
+ * Deliberately plain padding, with NO negative margin to cancel it: the whole
+ * point is to keep the glow inside the clip, and pulling the box back out with
+ * margins would push it straight back under the blade. The cards therefore sit
+ * a little in from the edge — that inset IS the fix, not a side effect.
  *
  * Bottom gets more room than the top because the glow is offset downward, and
  * the top gets the lift added back, since a hovered card rises into it.
@@ -330,8 +348,6 @@
 .lp-glow-room {
   padding: calc(var(--lp-glow-spread) + var(--lp-card-lift)) var(--lp-glow-spread)
     var(--lp-glow-spread-bottom);
-  margin: calc(-1 * (var(--lp-glow-spread) + var(--lp-card-lift))) calc(-1 * var(--lp-glow-spread))
-    calc(-1 * var(--lp-glow-spread-bottom));
 }
 
 /* ── circular theme reveal (View Transitions) ────