@leavepulse/ui 0.12.0

package/src/components/LpCard.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+// Opt out of auto attr inheritance: the template has two root branches (menu /
+// no-menu), so fallthrough class/attrs/events are bound explicitly onto the
+// inner <div> via v-bind="$attrs" in both — keeping them on the card surface.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants"
+import { computed } from "vue"
+import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+
+const card = tv({
+  base: "rounded-card border bg-surface-raised",
+  variants: {
+    variant: {
+      // raised opts into the skin painter (.lp-skin-panel) so it follows the
+      // active surface tokens (flat → glass) instead of a fixed shadow.
+      raised: "lp-skin-panel border-line",
+      flat: "border-line",
+      ghost: "border-transparent bg-transparent",
+    },
+    padded: { true: "p-5", false: "" },
+    // Lift on hover with a BRAND-tinted glow + brand border (a black drop-shadow
+    // was invisible on dark themes — it only showed on light). We write the glow
+    // through `--surface-panel-shadow`, the very variable the skin-painter feeds
+    // into .lp-skin-panel's box-shadow, AND set box-shadow directly — so the glow
+    // lands on both the `raised` variant (skin panel, whose own box-shadow would
+    // otherwise win, being declared outside @layer) and `flat`/`ghost`.
+    // NOTE: in Tailwind v4 `translate-*` writes the native `translate` property
+    // (not `transform`), so the transition list MUST name `translate` explicitly
+    // or the lift snaps while the rest eases.
+    interactive: {
+      true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-medium ease-[var(--ease-emphasized)] hover:-translate-y-0.5 hover:border-brand/40 hover:shadow-[var(--lp-card-glow)] hover:[--surface-panel-shadow:var(--lp-card-glow)] [--lp-card-glow:0_8px_24px_-6px_color-mix(in_srgb,var(--color-brand)_38%,transparent)] motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+    },
+  },
+})
+
+type CardVariants = VariantProps<typeof card>
+
+// Defaults live on the props, not on tv() — passing `undefined` into tv
+// overrides its defaultVariants and silently drops the padding.
+const props = withDefaults(
+  defineProps<{
+    variant?: CardVariants["variant"]
+    padded?: boolean
+    interactive?: boolean
+    /** Right-click menu for the card. Omit (or pass []) to keep the native one. */
+    menuItems?: ContextMenuItemDef[]
+  }>(),
+  { variant: "raised", padded: true, interactive: false },
+)
+
+const classes = computed(() =>
+  card({ variant: props.variant, padded: props.padded, interactive: props.interactive }),
+)
+</script>
+
+<template>
+  <!-- Fallthrough class/attrs/events are bound onto the <div> in both branches
+       (inheritAttrs:false above), so the card surface looks identical whether or
+       not it's wrapped in a context menu. -->
+  <LpContextMenu v-if="menuItems?.length" :items="menuItems">
+    <div :class="classes" v-bind="$attrs">
+      <slot />
+    </div>
+  </LpContextMenu>
+  <div v-else :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/LpCheckbox.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
+import LpIcon from "./LpIcon.vue"
+
+defineProps<{
+  modelValue?: boolean
+  /** Mixed state (e.g. a "select all" with a partial selection). Shows a dash. */
+  indeterminate?: boolean
+  disabled?: boolean
+  label?: string
+  id?: string
+  name?: string
+}>()
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void
+  (e: "change", value: boolean): void
+}>()
+
+function onUpdate(v: boolean | "indeterminate") {
+  const checked = v === true
+  emit("update:modelValue", checked)
+  emit("change", checked)
+}
+</script>
+
+<template>
+  <label class="group inline-flex cursor-pointer items-center gap-2 text-sm text-ink">
+    <CheckboxRoot
+      :id="id"
+      :name="name"
+      :model-value="indeterminate ? 'indeterminate' : modelValue"
+      :disabled="disabled"
+      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"
+      @update:model-value="onUpdate"
+    >
+      <CheckboxIndicator
+        class="flex items-center justify-center text-ink-inverse data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)] data-[state=indeterminate]:animate-[indicator-in_140ms_var(--ease-emphasized)]"
+      >
+        <LpIcon :name="indeterminate ? 'lucide:minus' : 'lucide:check'" :size="13" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    <slot>{{ label }}</slot>
+  </label>
+</template>

package/src/components/LpCodeBlock.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+/*
+ * Code block with lightweight, theme-aware syntax highlighting (codeHighlight.ts
+ * — zero deps, synchronous). Monospace, optional line numbers + wrapping, a copy
+ * button, and an optional language label.
+ *
+ * Lock: `locked` (default true) is read-only. Set `:locked="false"` to make it an
+ * editable code field — v-model writes back the text, highlighting stays in sync,
+ * and a header toggle flips lock/unlock. Useful for editable config snippets.
+ *
+ * Folding: wrap a range in `// #region label` … `// #endregion` markers (or `#`
+ * for shell/python/yaml/toml) to make it collapsible — handy for boilerplate that
+ * is useful but not essential to the point. The marker lines are removed from the
+ * output and from copied text. `foldImports` additionally collapses a leading
+ * import/package block automatically without markers. Regions collapse by default;
+ * set `region:open` (e.g. `// #region label open`) to start expanded.
+ */
+import { computed, reactive, ref, watch } from "vue"
+import { type CodeLang, tokenizeLine } from "./codeHighlight"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** The code (v-model when editable). */
+    modelValue?: string
+    lang?: CodeLang
+    /** Show 1-based gutter line numbers. */
+    lineNumbers?: boolean
+    /** Wrap long lines instead of scrolling horizontally. */
+    wrap?: boolean
+    /** Read-only. Set false for an editable field with a lock toggle. */
+    locked?: boolean
+    /** Show the lock/unlock toggle in the header (opt-in editability). */
+    lockToggle?: boolean
+    /** Show the copy button. */
+    copyable?: boolean
+    /** Caption shown in the header (e.g. a filename). */
+    title?: string
+    /** Fixed height; defaults to content height. */
+    height?: string
+    /** Auto-collapse a leading import/package block (no markers needed). */
+    foldImports?: boolean
+  }>(),
+  {
+    lang: "plain",
+    locked: true,
+    lockToggle: false,
+    copyable: true,
+    lineNumbers: false,
+    wrap: false,
+    foldImports: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  (e: "update:locked", value: boolean): void
+}>()
+
+const code = computed(() => props.modelValue ?? "")
+const rawLines = computed(() => code.value.replace(/\n$/, "").split("\n"))
+
+// ── fold parsing ─────────────────────────────────────────────
+// A segment is either a run of plain lines or a collapsible region. Line objects
+// carry their original 1-based number so the gutter stays truthful after markers
+// are stripped.
+type NumberedLine = { n: number; text: string }
+type Segment =
+  | { kind: "lines"; lines: NumberedLine[] }
+  | { kind: "fold"; id: number; label: string; defaultOpen: boolean; lines: NumberedLine[] }
+
+const REGION_START = /^\s*(?:\/\/|#|--)\s*#region\b\s*(.*?)\s*$/
+const REGION_END = /^\s*(?:\/\/|#|--)\s*#endregion\b/
+const IMPORT_LINE = /^\s*(?:import|package|use|from|#include|using)\b/
+
+/** Split raw lines into plain/fold segments, dropping the marker lines. */
+const segments = computed<Segment[]>(() => {
+  const out: Segment[] = []
+  const src = rawLines.value
+  let plain: NumberedLine[] = []
+  let foldId = 0
+
+  const flushPlain = () => {
+    if (plain.length) {
+      out.push({ kind: "lines", lines: plain })
+      plain = []
+    }
+  }
+
+  // Optional automatic import fold: a leading block of import/package lines that
+  // isn't already inside an explicit region.
+  let i = 0
+  if (props.foldImports && !REGION_START.test(src[0] ?? "")) {
+    // Skip a leading blank line or two (rare), then collect the import run.
+    let start = 0
+    while (start < src.length && src[start].trim() === "") start++
+    let end = start
+    while (end < src.length && (IMPORT_LINE.test(src[end]) || src[end].trim() === "")) end++
+    // Trim trailing blank lines back out of the region.
+    let realEnd = end
+    while (realEnd > start && src[realEnd - 1].trim() === "") realEnd--
+    if (realEnd - start >= 1) {
+      // Keep any lines before `start` as plain (e.g. a leading blank).
+      for (let k = 0; k < start; k++) plain.push({ n: k + 1, text: src[k] })
+      flushPlain()
+      const lines: NumberedLine[] = []
+      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 })
+      i = realEnd
+    }
+  }
+
+  for (; i < src.length; i++) {
+    const line = src[i]
+    const startMatch = line.match(REGION_START)
+    if (startMatch) {
+      flushPlain()
+      const rest = startMatch[1] ?? ""
+      const defaultOpen = /\bopen\b/.test(rest)
+      const label = rest.replace(/\bopen\b/, "").trim() || "details"
+      const lines: NumberedLine[] = []
+      i++
+      for (; i < src.length; i++) {
+        if (REGION_END.test(src[i])) break
+        lines.push({ n: i + 1, text: src[i] })
+      }
+      out.push({ kind: "fold", id: foldId++, label, defaultOpen, lines })
+      continue
+    }
+    plain.push({ n: i + 1, text: line })
+  }
+  flushPlain()
+  return out
+})
+
+const hasFolds = computed(() => segments.value.some((s) => s.kind === "fold"))
+
+// Per-region open state, keyed by fold id, defaulting to each region's declared
+// open flag. Reset when the set of folds changes.
+const openState = reactive<Record<number, boolean>>({})
+watch(
+  segments,
+  (segs) => {
+    for (const key of Object.keys(openState)) delete openState[Number(key)]
+    for (const s of segs) if (s.kind === "fold") openState[s.id] = s.defaultOpen
+  },
+  { immediate: true },
+)
+function toggleFold(id: number) {
+  openState[id] = !openState[id]
+}
+
+/** Highlight one line's text into tokens. */
+function tokens(text: string) {
+  return tokenizeLine(text, props.lang)
+}
+
+// Copied text is the real code with marker lines removed (so it pastes clean),
+// regardless of what's currently collapsed.
+const copyText = computed(() =>
+  segments.value
+    .flatMap((s) => s.lines.map((l) => l.text))
+    .join("\n"),
+)
+
+const showHeader = computed(
+  () => Boolean(props.title || props.lang !== "plain" || props.copyable || props.lockToggle),
+)
+
+// ── copy ─────────────────────────────────────────────────────
+const copied = ref(false)
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(copyText.value)
+    copied.value = true
+    window.setTimeout(() => (copied.value = false), 1400)
+  } catch {
+    /* clipboard blocked — no-op */
+  }
+}
+
+function toggleLock() {
+  emit("update:locked", !props.locked)
+}
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLTextAreaElement).value)
+}
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-card border border-line bg-surface font-mono text-xs">
+    <!-- Header -->
+    <div
+      v-if="showHeader"
+      class="flex items-center gap-2 border-b border-line bg-surface-soft px-3 py-1.5 text-muted"
+    >
+      <span v-if="title" class="truncate text-ink">{{ title }}</span>
+      <span v-if="lang !== 'plain'" class="rounded bg-surface px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+        {{ lang }}
+      </span>
+      <div class="ml-auto flex items-center gap-1">
+        <button
+          v-if="lockToggle"
+          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="locked ? 'Unlock to edit' : 'Lock (read-only)'"
+          @click="toggleLock"
+        >
+          <LpIcon
+            :name="locked ? 'lucide:lock' : 'lucide:lock-open'"
+            :size="13"
+            class="transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active/lock:scale-90"
+          />
+        </button>
+        <button
+          v-if="copyable"
+          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="copied ? 'Copied' : 'Copy code'"
+          @click="copy"
+        >
+          <LpIcon
+            :name="copied ? 'lucide:check' : 'lucide:copy'"
+            :size="13"
+            :class="copied ? 'text-action' : ''"
+          />
+        </button>
+      </div>
+    </div>
+
+    <!-- Body. When there are no folds this stays a plain overlay editor; with
+         folds we render segments (the textarea editor is folding-agnostic and is
+         only used when unlocked, which authored docs never combine with folds). -->
+    <div
+      class="lp-scrollbar-none relative"
+      :style="height ? { height } : undefined"
+      :class="height ? 'overflow-auto' : ''"
+    >
+      <!-- Editable overlay: only when unlocked and there are no folds. -->
+      <textarea
+        v-if="!locked && !hasFolds"
+        :value="code"
+        spellcheck="false"
+        class="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"
+        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', lineNumbers ? 'pl-12' : '']"
+        @input="onInput"
+      />
+      <pre
+        class="lp-scrollbar-none m-0 overflow-auto p-3 leading-relaxed"
+        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', !locked && !hasFolds ? 'pointer-events-none' : '']"
+      ><code class="block"><template
+          v-for="(seg, s) in segments"
+          :key="s"
+        ><!-- Plain lines --><template v-if="seg.kind === 'lines'"><span
+              v-for="ln in seg.lines"
+              :key="'l' + ln.n"
+              class="block min-h-[1.4em]"
+            ><span
+                v-if="lineNumbers"
+                class="mr-3 inline-block w-7 select-none text-right text-muted/60"
+                aria-hidden="true"
+              >{{ ln.n }}</span><span
+                v-for="(tok, j) in tokens(ln.text)"
+                :key="j"
+                :class="tok.cls"
+              >{{ tok.text }}</span></span></template><!-- Fold region --><template
+            v-else
+          ><button
+              type="button"
+              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              :aria-expanded="openState[seg.id]"
+              @click="toggleFold(seg.id)"
+            ><LpIcon
+                :name="openState[seg.id] ? 'lucide:chevron-down' : 'lucide:chevron-right'"
+                :size="12"
+                class="shrink-0"
+              /><span class="select-none">{{ openState[seg.id] ? seg.label : seg.label + ' …' }}</span><span
+                v-if="!openState[seg.id]"
+                class="select-none text-muted/50"
+              >({{ seg.lines.length }} lines)</span></button><template
+              v-if="openState[seg.id]"
+            ><span
+                v-for="ln in seg.lines"
+                :key="'f' + ln.n"
+                class="block min-h-[1.4em]"
+              ><span
+                  v-if="lineNumbers"
+                  class="mr-3 inline-block w-7 select-none text-right text-muted/60"
+                  aria-hidden="true"
+                >{{ ln.n }}</span><span
+                  v-for="(tok, j) in tokens(ln.text)"
+                  :key="j"
+                  :class="tok.cls"
+                >{{ tok.text }}</span></span></template></template></template></code></pre>
+    </div>
+  </div>
+</template>