@leavepulse/ui 0.15.0 → 0.15.2

package/src/components/fileTree.ts

@@ -221,6 +221,81 @@ export function checkedCount(
   return { checked: count, total }
 }
 
+/** Everything a row needs to render, precomputed once per node. */
+export interface NodeStats {
+  state: CheckState
+  /** Ticked files in the subtree, and how many there are in total. */
+  checked: number
+  total: number
+  /** Rolled-up subtree size, or undefined when nothing carries one. */
+  size?: number
+}
+
+/**
+ * Derive every row's state in ONE post-order pass over the tree, keyed by node
+ * id. Calling `checkStateOf`/`subtreeSize`/`checkedCount` per row instead makes
+ * each row walk its own subtree, which is quadratic on a deep tree and shows up
+ * as a stutter the moment a directory holds a few thousand files.
+ */
+export function computeStats(
+  nodes: FileNode[],
+  checked: ReadonlySet<string>,
+): Map<string, NodeStats> {
+  const stats = new Map<string, NodeStats>()
+
+  function visit(node: FileNode): NodeStats {
+    if (node.kind === "file" || !node.children?.length) {
+      // A leaf, or a directory whose children aren't loaded: fall back to its
+      // own membership so an unexpanded folder can still be ticked whole.
+      const isChecked = checked.has(node.id)
+      const self: NodeStats = {
+        state: isChecked ? "checked" : "unchecked",
+        checked: node.kind === "file" && isChecked ? 1 : 0,
+        total: node.kind === "file" ? 1 : 0,
+        size: node.size,
+      }
+      stats.set(node.id, self)
+      return self
+    }
+
+    let all = true
+    let any = false
+    let count = 0
+    let total = 0
+    let bytes = 0
+    let sized = node.size !== undefined
+
+    for (const child of node.children) {
+      const childStats = visit(child)
+      if (childStats.state === "checked") any = true
+      else if (childStats.state === "indeterminate") {
+        any = true
+        all = false
+      } else all = false
+      count += childStats.checked
+      total += childStats.total
+      if (childStats.size !== undefined) {
+        bytes += childStats.size
+        sized = true
+      }
+    }
+
+    const self: NodeStats = {
+      state: all ? "checked" : any ? "indeterminate" : "unchecked",
+      checked: count,
+      total,
+      // An explicit size on the directory wins: a server-side listing usually
+      // knows the real figure without the children being loaded.
+      size: node.size ?? (sized ? bytes : undefined),
+    }
+    stats.set(node.id, self)
+    return self
+  }
+
+  for (const node of nodes) visit(node)
+  return stats
+}
+
 /** 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[] = []

package/src/index.ts

@@ -27,11 +27,12 @@ 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 type { CheckState, FileNode, NodeStats } from "./components/fileTree"
 export {
   ancestorIds,
   checkedCount,
   checkStateOf,
+  computeStats,
   fileIcon,
   formatModified,
   formatSize,

package/src/tokens/tokens.css

@@ -147,6 +147,8 @@
  * scaling it re-runs that layout every frame — the content visibly squashed and
  * the animation stuttered. A short rise reads as arriving just as well.
  */
+/* For panels that translate off their own centre (the command palette pins its
+   left edge with -translate-x-1/2). */
 @keyframes pop-in {
   from {
     opacity: 0;
@@ -159,6 +161,20 @@
     transform: translate(-50%, calc(-50% + 5px));
   }
 }
+/* For panels a flex/grid parent already centres, so the animation only has to
+   supply the rise — no -50% to preserve. LpModal uses these. */
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+@keyframes rise-out {
+  to {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+}
 /*
  * Popover enter/exit. The -in/-out pair drifts DOWN from the trigger (content
  * placed below it). When the popper flips ABOVE the trigger (data-side=top),

package/dist/chunks/LpModal-B9CVVC5U.js

@@ -1,128 +0,0 @@
-import { defineComponent, computed, useSlots, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
-import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-BtnZCCBT.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
-};
-const _hoisted_2 = { class: "flex flex-col gap-1" };
-const _hoisted_3 = {
-  key: 3,
-  class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpModal",
-  props: {
-    open: { type: Boolean },
-    title: {},
-    description: {},
-    size: { default: "md" },
-    width: {},
-    fillBody: { type: Boolean }
-  },
-  emits: ["update:open"],
-  setup(__props) {
-    const props = __props;
-    const widthClass = computed(() => {
-      if (props.width) return "";
-      return {
-        sm: "w-[min(92vw,24rem)]",
-        md: "w-[min(92vw,28rem)]",
-        lg: "w-[min(92vw,34rem)]",
-        xl: "w-[min(92vw,42rem)]",
-        "2xl": "w-[min(94vw,56rem)]",
-        "3xl": "w-[min(95vw,72rem)]",
-        full: "w-[96vw]"
-      }[props.size];
-    });
-    const slots = useSlots();
-    const bodyPad = computed(
-      () => [
-        "px-5",
-        props.title || slots.title ? "" : "pt-5",
-        slots.footer ? "" : "pb-5"
-      ].filter(Boolean).join(" ")
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DialogRoot), {
-        open: __props.open,
-        "onUpdate:open": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:open", v))
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DialogPortal), null, {
-            default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
-              createVNode(unref(DialogContent), {
-                class: normalizeClass(["fixed left-1/2 top-1/2 z-(--z-modal) flex max-h-[min(90vh,calc(100dvh-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_120ms_cubic-bezier(0.4,0,1,1)]", widthClass.value]),
-                style: normalizeStyle(__props.width ? { width: __props.width } : void 0)
-              }, {
-                default: withCtx(() => [
-                  __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_1, [
-                    createElementVNode("div", _hoisted_2, [
-                      createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "title", {}, () => [
-                            createTextVNode(toDisplayString(__props.title), 1)
-                          ])
-                        ]),
-                        _: 3
-                      }),
-                      __props.description ? (openBlock(), createBlock(unref(DialogDescription), {
-                        key: 0,
-                        class: "text-sm text-muted"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(__props.description), 1)
-                        ]),
-                        _: 1
-                      })) : createCommentVNode("", true)
-                    ]),
-                    createVNode(unref(DialogClose), {
-                      class: "group flex shrink-0 items-center rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-                      "aria-label": "Close"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_sfc_main$1, {
-                          name: "lucide:x",
-                          size: 18,
-                          class: normalizeClass(unref(CLOSE_ICON))
-                        }, null, 8, ["class"])
-                      ]),
-                      _: 1
-                    })
-                  ])) : createCommentVNode("", true),
-                  __props.fillBody ? (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass(["flex min-h-0 flex-1 flex-col overflow-hidden text-sm text-ink/90", bodyPad.value])
-                  }, [
-                    renderSlot(_ctx.$slots, "default")
-                  ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
-                    key: 2,
-                    class: "min-h-0 flex-1 text-sm text-ink/90",
-                    "content-class": bodyPad.value
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "default")
-                    ]),
-                    _: 3
-                  }, 8, ["content-class"])),
-                  _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
-                    renderSlot(_ctx.$slots, "footer")
-                  ])) : createCommentVNode("", true)
-                ]),
-                _: 3
-              }, 8, ["class", "style"])
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["open"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};