@leavepulse/ui 0.43.3 → 0.44.0

package/dist/chunks/{LpAvatar-B3-xAOH3.js → LpAvatar-ClBbEYZN.js}

@@ -1,7 +1,8 @@
 import { defineComponent, computed, ref, onMounted, openBlock, createBlock, withCtx, createVNode, unref, mergeProps, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpContextMenu-CwW1QXe_.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-DQw5dGfG.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -46,8 +47,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         fontSize: `${Math.max(10, Math.round(props.pixelSize * 0.4))}px`
       } : void 0
     );
-    const initials = computed(
-      () => props.fallback ?? props.alt?.slice(0, 2).toUpperCase() ?? "?"
+    const initials = computed(() => {
+      if (props.fallback) return props.fallback;
+      const words = (props.alt ?? "").trim().split(/\s+/).filter(Boolean);
+      if (!words.length) return "?";
+      const first = Array.from(words[0]);
+      const letters = words.length > 1 ? [first[0], Array.from(words[words.length - 1])[0]] : first.slice(0, 2);
+      return letters.join("").toUpperCase();
+    });
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => avatar({ size: props.pixelSize ? void 0 : props.size, shape: props.shape, ring: props.ring })
     );
     const mounted = ref(false);
     onMounted(() => {
@@ -60,9 +69,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(unref(AvatarRoot), mergeProps({
-            class: unref(avatar)({ size: __props.pixelSize ? void 0 : __props.size, shape: __props.shape, ring: __props.ring }),
+            class: unref(rootClass),
             style: sizeStyle.value
-          }, _ctx.$attrs), {
+          }, unref(rest)), {
             default: withCtx(() => [
               __props.src && mounted.value ? (openBlock(), createBlock(unref(AvatarImage), {
                 key: 0,
@@ -83,11 +92,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         _: 1
       }, 8, ["items"])) : (openBlock(), createBlock(unref(AvatarRoot), mergeProps({
         key: 1,
-        class: unref(avatar)({ size: __props.pixelSize ? void 0 : __props.size, shape: __props.shape, ring: __props.ring }),
+        class: unref(rootClass),
         style: sizeStyle.value
-      }, _ctx.$attrs), {
+      }, unref(rest)), {
         default: withCtx(() => [
-          __props.src ? (openBlock(), createBlock(unref(AvatarImage), {
+          __props.src && mounted.value ? (openBlock(), createBlock(unref(AvatarImage), {
             key: 0,
             src: __props.src,
             alt: __props.alt,

package/dist/chunks/LpBreadcrumbs-B8IJgFIc.js

@@ -0,0 +1,95 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { resolveLink } from "../components/link.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-current"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpBreadcrumbs",
+  props: {
+    items: {},
+    as: {},
+    labels: {}
+  },
+  emits: ["navigate"],
+  setup(__props) {
+    const props = __props;
+    const text = useLabels("breadcrumbs", { nav: "Breadcrumb" }, () => props.labels);
+    const linkComponent = useLinkComponent();
+    function linkOf(item) {
+      if (props.as && props.as !== "a") {
+        if (item.to != null) return { is: props.as, props: { to: item.to } };
+        return item.href != null ? { is: "a", props: { href: item.href } } : null;
+      }
+      return resolveLink(props.as === "a" ? "a" : linkComponent.value, { to: item.to, href: item.href });
+    }
+    const crumbs = computed(
+      () => props.items.map((item, i) => ({
+        item,
+        last: i === props.items.length - 1,
+        link: i === props.items.length - 1 ? null : linkOf(item)
+      }))
+    );
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "flex items-center gap-1.5 text-sm"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", mergeProps({
+        "aria-label": unref(text).nav
+      }, unref(rest)), [
+        createElementVNode("ol", {
+          class: normalizeClass(unref(rootClass))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(crumbs.value, ({ item, last, link }, i) => {
+            return openBlock(), createElementBlock("li", {
+              key: i,
+              class: "inline-flex items-center gap-1.5"
+            }, [
+              i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                name: "lucide:chevron-right",
+                size: 14,
+                class: "text-muted",
+                "aria-hidden": "true"
+              })) : createCommentVNode("", true),
+              link ? (openBlock(), createBlock(resolveDynamicComponent(link.is), mergeProps({
+                key: 1,
+                ref_for: true
+              }, link.props, {
+                class: "inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                onClick: ($event) => _ctx.$emit("navigate", item, i)
+              }), {
+                default: withCtx(() => [
+                  item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                    key: 0,
+                    name: item.icon,
+                    size: 14
+                  }, null, 8, ["name"])) : createCommentVNode("", true),
+                  createTextVNode(" " + toDisplayString(item.label), 1)
+                ]),
+                _: 2
+              }, 1040, ["onClick"])) : (openBlock(), createElementBlock("span", {
+                key: 2,
+                class: normalizeClass(["inline-flex items-center gap-1.5", last ? "text-ink" : "text-muted"]),
+                "aria-current": last ? "page" : void 0
+              }, [
+                item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  name: item.icon,
+                  size: 14
+                }, null, 8, ["name"])) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(item.label), 1)
+              ], 10, _hoisted_2))
+            ]);
+          }), 128))
+        ], 2)
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpButton-5VXXCjwF.js → LpButton-kqJBHIIb.js}

@@ -1,6 +1,11 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
+import { useLinkComponent } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { resolveLink } from "../components/link.js";
+const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   __name: "LpButton",
   props: {
     variant: {},
@@ -8,7 +13,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     block: { type: Boolean },
     square: { type: Boolean },
     glow: { type: Boolean },
-    as: { default: "button" },
+    as: {},
+    to: {},
+    href: {},
     type: { default: "button" },
     disabled: { type: Boolean }
   },
@@ -26,13 +33,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         variant: {
           solid: "bg-brand text-ink-inverse hover:bg-brand-hover",
           action: "bg-action text-ink-inverse shadow-[0_14px_28px_color-mix(in_srgb,var(--color-action)_24%,transparent)] hover:bg-action-hover",
-          outline: "border border-line-strong text-ink hover:border-brand hover:bg-white/[0.04]",
+          outline: "border border-line-strong text-ink hover:border-brand hover:bg-ink/[0.04]",
           // raised surface tile with a border — a visible, neutral filled button
           soft: "border border-line bg-surface-raised/80 text-ink hover:border-line-strong hover:bg-surface-soft",
-          ghost: "text-ink hover:bg-white/[0.06]",
-          muted: "text-muted hover:bg-white/[0.04] hover:text-ink",
-          // high-contrast light fill (e.g. a "download" CTA on a dark hero)
-          light: "border border-white/20 bg-white text-ink-inverse hover:bg-white/90",
+          ghost: "text-ink hover:bg-ink/[0.06]",
+          muted: "text-muted hover:bg-ink/[0.04] hover:text-ink",
+          // high-contrast light fill (e.g. a "download" CTA on a dark hero). The
+          // text is a fixed dark tone: `ink-inverse` is light in light themes,
+          // which made this white on white there.
+          light: "border border-black/10 bg-white text-[#0b1210] hover:bg-white/90",
           danger: "bg-danger text-ink-inverse hover:bg-danger-hover"
         },
         size: {
@@ -65,14 +74,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         {
           glow: true,
           variant: "light",
-          class: "shadow-[0_8px_18px_rgba(255,255,255,0.2)] hover:shadow-[0_12px_24px_rgba(255,255,255,0.3)]"
+          class: "shadow-[0_8px_18px_color-mix(in_srgb,var(--color-ink)_20%,transparent)] hover:shadow-[0_12px_24px_color-mix(in_srgb,var(--color-ink)_30%,transparent)]"
         }
       ],
       defaultVariants: { variant: "solid", size: "md" }
     });
     const props = __props;
-    const isNativeButton = computed(() => props.as === "button");
-    const classes = computed(
+    const linkComponent = useLinkComponent();
+    const resolved = computed(() => {
+      if (props.as && props.as !== "a") {
+        const target = props.to != null ? { to: props.to } : props.href != null ? { href: props.href } : {};
+        return { is: props.as, props: props.as === "button" ? {} : target };
+      }
+      if (props.as === "a") return { is: "a", props: { href: props.href } };
+      return resolveLink(linkComponent.value, { to: props.to, href: props.href }) ?? { is: "button", props: {} };
+    });
+    const isNativeButton = computed(() => resolved.value.is === "button");
+    function blockDisabled(event) {
+      if (!props.disabled || isNativeButton.value) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+    const linkProps = computed(() => {
+      if (isNativeButton.value) return {};
+      if (!props.disabled) return resolved.value.props;
+      return resolved.value.is === "a" ? {} : resolved.value.props;
+    });
+    const { class: classes, attrs: rest } = useMergedAttrs(
       () => button({
         variant: props.variant,
         size: props.size,
@@ -82,17 +110,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       })
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+      return openBlock(), createBlock(resolveDynamicComponent(resolved.value.is), mergeProps({ ...unref(rest), ...linkProps.value }, {
         type: isNativeButton.value ? __props.type : void 0,
         disabled: isNativeButton.value ? __props.disabled : void 0,
         "aria-disabled": !isNativeButton.value && __props.disabled ? "true" : void 0,
-        class: normalizeClass(classes.value)
-      }, {
+        tabindex: !isNativeButton.value && __props.disabled ? -1 : void 0,
+        class: unref(classes),
+        onClickCapture: blockDisabled
+      }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["type", "disabled", "aria-disabled", "class"]);
+      }, 16, ["type", "disabled", "aria-disabled", "tabindex", "class"]);
     };
   }
 });

package/dist/chunks/{LpCard-BhI1N_vL.js → LpCard-CpRByR0q.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, withCtx, resolveDynamicComponent, mergeProps, unref, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-CwW1QXe_.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-DQw5dGfG.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,

package/dist/chunks/{LpCheckbox-CVccKYaH.js → LpCheckbox-DpqchzH4.js}

@@ -1,6 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -16,22 +17,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
     function onUpdate(v) {
       const checked = v === true;
       emit("update:modelValue", checked);
       emit("change", checked);
     }
+    const field = useFieldControl(() => ({ wrapped: false, id: props.id, disabled: props.disabled }));
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "group inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", mergeProps({ class: unref(rootClass) }, unref(rest)), [
         createVNode(unref(CheckboxRoot), {
-          id: __props.id,
+          id: unref(field).id,
           name: __props.name,
           "model-value": __props.indeterminate ? "indeterminate" : __props.modelValue,
-          disabled: __props.disabled,
+          disabled: unref(field).disabled,
+          "aria-describedby": unref(field).describedBy,
           class: "flex size-[18px] items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55",
           "onUpdate:modelValue": onUpdate
         }, {
@@ -47,7 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             })
           ]),
           _: 1
-        }, 8, ["id", "name", "model-value", "disabled"]),
+        }, 8, ["id", "name", "model-value", "disabled", "aria-describedby"]),
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(__props.label), 1)
         ])

package/dist/chunks/{LpCodeBlock-Bo0B4TFR.js → LpCodeBlock-DeHJPq7p.js}

@@ -1,6 +1,7 @@
-import { defineComponent, computed, reactive, watch, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
+import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
 import { useClipboard } from "../composables/useClipboard.js";
-import { tokenizeLine } from "../components/codeHighlight.js";
+import { tokenizeLines } from "../components/codeHighlight.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
@@ -50,12 +51,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     copyable: { type: Boolean, default: true },
     title: {},
     height: {},
-    foldImports: { type: Boolean, default: false }
+    foldImports: { type: Boolean, default: false },
+    labels: {}
   },
   emits: ["update:modelValue", "update:locked"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const text = useLabels(
+      "codeBlock",
+      {
+        unlock: "Unlock to edit",
+        lock: "Lock (read-only)",
+        copy: "Copy code",
+        copied: "Copied",
+        imports: "imports",
+        details: "details",
+        /** `{n}` is replaced by the count. */
+        lines: "({n} lines)"
+      },
+      () => props.labels
+    );
     const code = computed(() => props.modelValue ?? "");
     const rawLines = computed(() => code.value.replace(/\n$/, "").split("\n"));
     const REGION_START = /^\s*(?:\/\/|#|--)\s*#region\b\s*(.*?)\s*$/;
@@ -85,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           flushPlain();
           const lines = [];
           for (let k = start; k < realEnd; k++) lines.push({ n: k + 1, text: src[k] });
-          out.push({ kind: "fold", id: foldId++, label: "imports", defaultOpen: false, lines });
+          out.push({ kind: "fold", id: foldId++, label: text.value.imports, defaultOpen: false, lines });
           i = realEnd;
         }
       }
@@ -96,7 +112,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           flushPlain();
           const rest2 = startMatch[1] ?? "";
           const defaultOpen = /\bopen\b/.test(rest2);
-          const label = rest2.replace(/\bopen\b/, "").trim() || "details";
+          const label = rest2.replace(/\bopen\b/, "").trim() || text.value.details;
           const lines = [];
           i++;
           for (; i < src.length; i++) {
@@ -112,6 +128,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return out;
     });
     const hasFolds = computed(() => segments.value.some((s) => s.kind === "fold"));
+    const editing = computed(() => !props.locked && !hasFolds.value);
     const openState = reactive({});
     watch(
       segments,
@@ -124,8 +141,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function toggleFold(id) {
       openState[id] = !openState[id];
     }
-    function tokens(text) {
-      return tokenizeLine(text, props.lang);
+    const highlighted = computed(() => tokenizeLines(rawLines.value, props.lang));
+    function tokens(n) {
+      return highlighted.value[n - 1] ?? [];
+    }
+    const preEl = ref(null);
+    function syncScroll(e) {
+      const area = e.target;
+      if (!preEl.value) return;
+      preEl.value.scrollLeft = area.scrollLeft;
+      preEl.value.scrollTop = area.scrollTop;
     }
     const copyText = computed(
       () => segments.value.flatMap((s) => s.lines.map((l) => l.text)).join("\n")
@@ -154,7 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 0,
               type: "button",
               class: "group/lock flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-              "aria-label": __props.locked ? "Unlock to edit" : "Lock (read-only)",
+              "aria-label": __props.locked ? unref(text).unlock : unref(text).lock,
               onClick: toggleLock
             }, [
               createVNode(_sfc_main$1, {
@@ -167,7 +192,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 1,
               type: "button",
               class: "group/copy flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-              "aria-label": unref(copied) ? "Copied" : "Copy code",
+              "aria-label": unref(copied) ? unref(text).copied : unref(text).copy,
               onClick: copy
             }, [
               createVNode(_sfc_main$1, {
@@ -179,18 +204,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: normalizeClass(["lp-scrollbar-none relative", __props.height ? "overflow-auto" : ""]),
+          class: normalizeClass(["lp-scrollbar-none relative", __props.height ? editing.value ? "overflow-hidden" : "overflow-auto" : ""]),
           style: normalizeStyle(__props.height ? { height: __props.height } : void 0)
         }, [
           !__props.locked && !hasFolds.value ? (openBlock(), createElementBlock("textarea", {
             key: 0,
             value: code.value,
             spellcheck: "false",
-            class: normalizeClass(["lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none", [__props.wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre", __props.lineNumbers ? "pl-12" : ""]]),
-            onInput
+            class: normalizeClass(["lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none", [__props.wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre", __props.lineNumbers ? "pl-13" : ""]]),
+            onInput,
+            onScroll: syncScroll
           }, null, 42, _hoisted_7)) : createCommentVNode("", true),
           createElementVNode("pre", {
-            class: normalizeClass(["lp-scrollbar-none m-0 overflow-auto p-3 leading-relaxed", [__props.wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre", !__props.locked && !hasFolds.value ? "pointer-events-none" : ""]])
+            ref_key: "preEl",
+            ref: preEl,
+            class: normalizeClass(["lp-scrollbar-none m-0 overflow-auto p-3 leading-relaxed", [
+              __props.wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre",
+              editing.value ? "pointer-events-none" : "",
+              editing.value && __props.height ? "h-full overflow-hidden" : ""
+            ]])
           }, [
             createElementVNode("code", _hoisted_8, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(segments.value, (seg, s) => {
@@ -201,7 +233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "block min-h-[1.4em]"
                     }, [
                       __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.text), (tok, j) => {
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.n), (tok, j) => {
                         return openBlock(), createElementBlock("span", {
                           key: j,
                           class: normalizeClass(tok.cls)
@@ -221,7 +253,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         class: "shrink-0"
                       }, null, 8, ["name"]),
                       createElementVNode("span", _hoisted_11, toDisplayString(openState[seg.id] ? seg.label : seg.label + " …"), 1),
-                      !openState[seg.id] ? (openBlock(), createElementBlock("span", _hoisted_12, "(" + toDisplayString(seg.lines.length) + " lines)", 1)) : createCommentVNode("", true)
+                      !openState[seg.id] ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(unref(text).lines.replace("{n}", String(seg.lines.length))), 1)) : createCommentVNode("", true)
                     ], 8, _hoisted_10),
                     openState[seg.id] ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(seg.lines, (ln) => {
                       return openBlock(), createElementBlock("span", {
@@ -229,7 +261,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         class: "block min-h-[1.4em]"
                       }, [
                         __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.text), (tok, j) => {
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.n), (tok, j) => {
                           return openBlock(), createElementBlock("span", {
                             key: j,
                             class: normalizeClass(tok.cls)

package/dist/chunks/{LpColorPicker-BlXea7LM.js → LpColorPicker-Bhf1qxhB.js}

@@ -1,14 +1,15 @@
-import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createElementBlock, createCommentVNode, Fragment, renderList, renderSlot } from "vue";
+import { defineComponent, computed, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createElementBlock, createCommentVNode, withKeys, Fragment, renderList, renderSlot } from "vue";
 import { PopoverRoot, PopoverAnchor, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
 import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight, clampHsv } from "../components/color.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-CwW1QXe_.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-DQw5dGfG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = ["disabled", "aria-label"];
+const _hoisted_1 = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby"];
 const _hoisted_2 = { class: "min-w-0 flex-1 truncate font-mono text-xs text-muted-strong" };
 const _hoisted_3 = { class: "flex flex-col gap-3" };
-const _hoisted_4 = ["tabindex", "aria-label", "aria-valuetext"];
+const _hoisted_4 = ["tabindex", "aria-label", "aria-valuenow", "aria-valuetext"];
 const _hoisted_5 = ["aria-label", "aria-valuenow", "tabindex"];
 const _hoisted_6 = ["aria-label", "aria-valuenow", "tabindex"];
 const _hoisted_7 = {
@@ -123,7 +124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       el.addEventListener("pointercancel", up);
     }
     const onFieldPointer = (e) => trackPointer(e, (x, y) => set({ s: x, v: 1 - y }));
-    const onHuePointer = (e) => trackPointer(e, (x) => set({ h: x * 360 }));
+    const onHuePointer = (e) => trackPointer(e, (x) => set({ h: Math.min(x * 360, 359.9) }));
     const onAlphaPointer = (e) => trackPointer(e, (x) => set({ a: x }));
     function step(e, axis) {
       const big = e.shiftKey;
@@ -148,6 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       set({ s: hsv.value.s + dx / 100, v: hsv.value.v + dy / 100 }, true);
     }
     const typed = ref(null);
+    let typedChange = false;
     const inputValue = computed(() => typed.value ?? current.value);
     function onInput(e) {
       const value = e.target.value;
@@ -157,10 +159,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const next = rgbToHsv(rgb);
       if (next.s === 0) next.h = hsv.value.h;
       if (next.v === 0) next.s = hsv.value.s;
-      set(props.alpha ? next : { ...next, a: 1 }, true);
+      set(props.alpha ? next : { ...next, a: 1 });
+      typedChange = true;
+    }
+    function commitTyped() {
+      if (!typedChange) return;
+      typedChange = false;
+      emit("change", current.value);
     }
     function onInputBlur() {
       typed.value = null;
+      commitTyped();
     }
     function pickSwatch(value) {
       const rgb = parseColor(value);
@@ -223,8 +232,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } catch {
       }
     }
+    let openedOn = "";
     watch(open, (isOpen, was) => {
-      if (was && !isOpen) remember(current.value);
+      if (isOpen) openedOn = current.value;
+      else if (was && current.value !== openedOn) remember(current.value);
     });
     const swatchRows = computed(
       () => [
@@ -294,6 +305,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ];
       return own.length ? [...builtin, { ...own[0], separatorBefore: true }, ...own.slice(1)] : builtin;
     });
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
     __expose({ open });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverRoot), {
@@ -309,11 +325,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     default: withCtx(() => [
                       createElementVNode("button", {
                         type: "button",
-                        disabled: __props.disabled,
+                        id: unref(field).id,
+                        disabled: unref(field).disabled,
                         "aria-label": __props.ariaLabel,
+                        "aria-invalid": unref(field).invalid || void 0,
+                        "aria-describedby": unref(field).describedBy,
                         class: normalizeClass(["group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55", [
                           triggerSize[__props.size],
-                          __props.invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
+                          unref(field).invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
                         ]])
                       }, [
                         createElementVNode("span", {
@@ -359,6 +378,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           role: "slider",
                           tabindex: __props.disabled ? -1 : 0,
                           "aria-label": l.value.saturation,
+                          "aria-valuemin": 0,
+                          "aria-valuemax": 100,
+                          "aria-valuenow": Math.round(hsv.value.s * 100),
                           "aria-valuetext": fill(l.value.saturationValueText, { s: Math.round(hsv.value.s * 100), v: Math.round(hsv.value.v * 100) }),
                           class: "relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-control outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
                           style: normalizeStyle(fieldStyle.value),
@@ -427,6 +449,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "aria-label": l.value.value,
                             class: "min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted",
                             onInput,
+                            onKeydown: withKeys(commitTyped, ["enter"]),
                             onBlur: onInputBlur
                           }, null, 40, _hoisted_8)
                         ])) : createCommentVNode("", true),