@prsm/mono-components 0.1.0

package/src/components/Tree.vue

@@ -0,0 +1,188 @@
+<script setup>
+import { ref, computed, reactive, nextTick } from "vue"
+import { Icon } from "@iconify/vue"
+import ScrollBox from "./ScrollBox.vue"
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  modelValue: { type: [String, Number, null], default: null },
+  filterable: { type: Boolean, default: false },
+  filterPlaceholder: { type: String, default: "search..." },
+  defaultExpanded: { type: [Array, Boolean], default: () => [] }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const query = ref("")
+const focusedKey = ref(null)
+const containerRef = ref(null)
+const hasFocus = ref(false)
+
+const expandedKeys = reactive(new Set(
+  props.defaultExpanded === true ? collectKeys(props.items) : props.defaultExpanded
+))
+
+function collectKeys(nodes) {
+  const keys = []
+  for (const n of nodes) {
+    if (n.children?.length) {
+      keys.push(n.key)
+      keys.push(...collectKeys(n.children))
+    }
+  }
+  return keys
+}
+
+function hasMatch(node, q) {
+  if (node.label.toLowerCase().includes(q)) return true
+  if (node.children) return node.children.some(c => hasMatch(c, q))
+  return false
+}
+
+const flatVisible = computed(() => {
+  const q = query.value.toLowerCase()
+  const result = []
+
+  function walk(nodes, depth) {
+    for (const node of nodes) {
+      const hasChildren = node.children?.length > 0
+
+      if (q && !hasMatch(node, q)) continue
+
+      const expanded = q ? hasChildren : expandedKeys.has(node.key)
+      result.push({ node, depth, hasChildren, expanded })
+
+      if (hasChildren && expanded) walk(node.children, depth + 1)
+    }
+  }
+
+  walk(props.items, 0)
+  return result
+})
+
+function select(key) {
+  emit("update:modelValue", key)
+  focusedKey.value = key
+}
+
+function toggle(key) {
+  if (expandedKeys.has(key)) expandedKeys.delete(key)
+  else expandedKeys.add(key)
+}
+
+function scrollToFocused() {
+  nextTick(() => {
+    const el = containerRef.value?.querySelector?.("[data-focused]")
+      ?? containerRef.value?.$el?.querySelector("[data-focused]")
+    if (el) el.scrollIntoView({ block: "nearest" })
+  })
+}
+
+function handleKeydown(e) {
+  const flat = flatVisible.value
+  const idx = flat.findIndex(f => f.node.key === focusedKey.value)
+
+  if (e.key === "ArrowDown") {
+    e.preventDefault()
+    const next = idx < flat.length - 1 ? idx + 1 : 0
+    focusedKey.value = flat[next]?.node.key
+    scrollToFocused()
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault()
+    const prev = idx > 0 ? idx - 1 : flat.length - 1
+    focusedKey.value = flat[prev]?.node.key
+    scrollToFocused()
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault()
+    const current = flat[idx]
+    if (!current) return
+    if (current.hasChildren && !expandedKeys.has(current.node.key)) {
+      expandedKeys.add(current.node.key)
+    } else if (current.hasChildren && current.node.children.length) {
+      focusedKey.value = current.node.children[0].key
+      scrollToFocused()
+    }
+  } else if (e.key === "ArrowLeft") {
+    e.preventDefault()
+    const current = flat[idx]
+    if (!current) return
+    if (current.hasChildren && expandedKeys.has(current.node.key)) {
+      expandedKeys.delete(current.node.key)
+    } else {
+      for (let i = idx - 1; i >= 0; i--) {
+        if (flat[i].depth < current.depth) {
+          focusedKey.value = flat[i].node.key
+          scrollToFocused()
+          break
+        }
+      }
+    }
+  } else if (e.key === "Enter") {
+    e.preventDefault()
+    const current = flat[idx]
+    if (!current) return
+    select(current.node.key)
+    if (current.hasChildren) toggle(current.node.key)
+  } else if (e.key === "Home") {
+    e.preventDefault()
+    focusedKey.value = flat[0]?.node.key
+    scrollToFocused()
+  } else if (e.key === "End") {
+    e.preventDefault()
+    focusedKey.value = flat[flat.length - 1]?.node.key
+    scrollToFocused()
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col"
+    @keydown="handleKeydown"
+    @focusin="hasFocus = true"
+    @focusout="hasFocus = false"
+  >
+    <div v-if="filterable" class="px-1 py-1 border-b border-line-subtle">
+      <input
+        v-model="query"
+        type="text"
+        class="w-full px-2 py-1 text-base bg-0 border border-line rounded-sm font-mono text-fg-0 outline-none focus:border-accent"
+        :placeholder="filterPlaceholder"
+      />
+    </div>
+    <ScrollBox ref="containerRef" class="flex-1">
+      <div
+        v-for="{ node, depth, hasChildren, expanded } in flatVisible"
+        :key="node.key"
+        class="flex items-center gap-0.5 py-0.5 pr-2 cursor-pointer font-mono text-base select-none"
+        :class="[
+          node.key === modelValue ? 'bg-3 text-fg-0' : 'text-fg-1 hover:bg-2 hover:text-fg-0',
+          node.key === focusedKey && hasFocus ? 'outline outline-1 outline-accent -outline-offset-1' : ''
+        ]"
+        :style="{ paddingLeft: (depth * 16 + 4) + 'px' }"
+        :data-focused="node.key === focusedKey ? '' : undefined"
+        tabindex="-1"
+        @click="select(node.key); hasChildren && toggle(node.key)"
+      >
+        <span class="w-[16px] h-[16px] shrink-0 flex items-center justify-center">
+          <Icon
+            v-if="hasChildren"
+            icon="material-symbols:chevron-right"
+            class="text-sm text-fg-2 transition-transform duration-150"
+            :class="expanded ? 'rotate-90' : ''"
+          />
+        </span>
+        <Icon
+          v-if="node.icon"
+          :icon="node.icon"
+          class="text-base shrink-0"
+          :class="node.key === modelValue ? 'text-accent' : 'text-fg-2'"
+        />
+        <span class="truncate">{{ node.label }}</span>
+      </div>
+      <div v-if="query && flatVisible.length === 0" class="px-3 py-2 text-base text-fg-3">
+        no matches
+      </div>
+    </ScrollBox>
+  </div>
+</template>

package/src/composables/toast.js

@@ -0,0 +1,54 @@
+import { reactive } from "vue"
+
+let nextId = 0
+export const toasts = reactive([])
+const timers = new Map()
+
+function scheduleRemove(id, duration) {
+  if (duration <= 0) return
+  const timer = setTimeout(() => remove(id), duration)
+  timers.set(id, { timer, duration, started: Date.now() })
+}
+
+function add(message, variant = "neutral", duration = 3000) {
+  const id = ++nextId
+  toasts.push({ id, message, variant, duration })
+  scheduleRemove(id, duration)
+  return id
+}
+
+function remove(id) {
+  const idx = toasts.findIndex(t => t.id === id)
+  if (idx > -1) toasts.splice(idx, 1)
+  const entry = timers.get(id)
+  if (entry) {
+    clearTimeout(entry.timer)
+    timers.delete(id)
+  }
+}
+
+function pause(id) {
+  const entry = timers.get(id)
+  if (!entry) return
+  clearTimeout(entry.timer)
+  entry.remaining = entry.duration - (Date.now() - entry.started)
+}
+
+function resume(id) {
+  const entry = timers.get(id)
+  if (!entry || entry.remaining == null) return
+  const timer = setTimeout(() => remove(id), entry.remaining)
+  timers.set(id, { timer, duration: entry.remaining, started: Date.now() })
+}
+
+export function toast(message, options = {}) {
+  return add(message, options.variant || "neutral", options.duration ?? 3000)
+}
+
+toast.success = (msg, opts) => add(msg, "success", opts?.duration ?? 3000)
+toast.warning = (msg, opts) => add(msg, "warning", opts?.duration ?? 3000)
+toast.error = (msg, opts) => add(msg, "error", opts?.duration ?? 3000)
+toast.info = (msg, opts) => add(msg, "info", opts?.duration ?? 3000)
+toast.remove = remove
+toast.pause = pause
+toast.resume = resume

package/src/composables/useClickOutside.js

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted } from "vue"
+
+export function useClickOutside(refs, onClose) {
+  function handleClick(e) {
+    const elements = refs.map(r => r.value?.$el ?? r.value).filter(Boolean)
+    if (elements.some(el => el.contains(e.target))) return
+    onClose()
+  }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape") onClose()
+  }
+
+  onMounted(() => {
+    document.addEventListener("click", handleClick, true)
+    document.addEventListener("keydown", handleKeydown)
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener("click", handleClick, true)
+    document.removeEventListener("keydown", handleKeydown)
+  })
+}

package/src/composables/useMention.js

@@ -0,0 +1,291 @@
+import { ref, computed, markRaw } from "vue"
+
+export function useMention(triggers) {
+  const open = ref(false)
+  const activeTrigger = ref(null)
+  const query = ref("")
+  const activeIndex = ref(0)
+  const items = ref([])
+  const loading = ref(false)
+  const inputEl = ref(null)
+  const cursorRect = ref(null)
+
+  const virtualAnchor = computed(() => {
+    const r = cursorRect.value
+    if (!r) return markRaw({ getBoundingClientRect: () => new DOMRect() })
+    return markRaw({ getBoundingClientRect: () => r })
+  })
+
+  const triggerMap = new Map()
+  for (const t of triggers) {
+    triggerMap.set(t.key, t)
+  }
+
+  function normalizeItems(raw) {
+    if (!raw) return []
+    return raw.map(item => {
+      if (typeof item === "object" && item !== null) {
+        const normalized = { value: item.value, label: item.label ?? String(item.value) }
+        if (item.action) normalized.action = item.action
+        return normalized
+      }
+      return { value: item, label: String(item) }
+    })
+  }
+
+  const filtered = computed(() => {
+    if (!query.value) return items.value
+    const q = query.value.toLowerCase()
+    return items.value.filter(i => i.label.toLowerCase().includes(q))
+  })
+
+  function getCursorRect(el) {
+    if (el.tagName === "TEXTAREA" || el.tagName === "INPUT") {
+      return getInputCursorRect(el)
+    }
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0) return null
+    const range = sel.getRangeAt(0)
+    return range.getBoundingClientRect()
+  }
+
+  function getInputCursorRect(el) {
+    const div = document.createElement("div")
+    const style = getComputedStyle(el)
+    for (const prop of style) {
+      div.style.setProperty(prop, style.getPropertyValue(prop))
+    }
+    div.style.position = "fixed"
+    div.style.visibility = "hidden"
+    div.style.whiteSpace = "pre-wrap"
+    div.style.wordWrap = "break-word"
+    div.style.overflow = "hidden"
+
+    if (el.tagName === "INPUT") {
+      div.style.whiteSpace = "pre"
+    }
+
+    const text = el.value.substring(0, el.selectionStart)
+    div.textContent = text
+
+    const span = document.createElement("span")
+    span.textContent = "|"
+    div.appendChild(span)
+
+    document.body.appendChild(div)
+    const elRect = el.getBoundingClientRect()
+    const spanRect = span.getBoundingClientRect()
+
+    const rect = new DOMRect(
+      elRect.left + (spanRect.left - div.getBoundingClientRect().left),
+      elRect.top + (spanRect.top - div.getBoundingClientRect().top),
+      0,
+      spanRect.height
+    )
+    document.body.removeChild(div)
+    return rect
+  }
+
+  let revealController = null
+
+  async function reveal(trigger, el) {
+    if (blurTimer) { clearTimeout(blurTimer); blurTimer = null }
+    activeTrigger.value = trigger
+    query.value = ""
+    activeIndex.value = 0
+    inputEl.value = el
+    cursorRect.value = getCursorRect(el)
+    items.value = normalizeItems(trigger.items)
+    open.value = true
+
+    if (trigger.onReveal) {
+      if (revealController) revealController.abort()
+      revealController = new AbortController()
+      loading.value = true
+      try {
+        const result = await trigger.onReveal()
+        if (!revealController.signal.aborted) {
+          items.value = normalizeItems(result)
+        }
+      } finally {
+        loading.value = false
+      }
+    }
+  }
+
+  function close() {
+    open.value = false
+    activeTrigger.value = null
+    query.value = ""
+    items.value = []
+    if (revealController) {
+      revealController.abort()
+      revealController = null
+    }
+  }
+
+  let confirming = false
+
+  function confirm(item) {
+    if (!activeTrigger.value || !inputEl.value) return
+
+    const el = inputEl.value
+    const trigger = activeTrigger.value
+    const val = el.value
+    const pos = el.selectionStart
+
+    const before = val.substring(0, pos)
+    const triggerIdx = before.lastIndexOf(trigger.key)
+    if (triggerIdx === -1) { close(); return }
+
+    const prefix = val.substring(0, triggerIdx)
+    const suffix = val.substring(pos)
+
+    if (trigger.action) {
+      el.value = prefix + suffix
+      el.selectionStart = prefix.length
+      el.selectionEnd = prefix.length
+      confirming = true
+      el.dispatchEvent(new Event("input", { bubbles: true }))
+      confirming = false
+      el.focus()
+      close()
+      if (item.action) item.action(item)
+    } else {
+      const insert = trigger.key + item.label + " "
+      el.value = prefix + insert + suffix
+      el.selectionStart = prefix.length + insert.length
+      el.selectionEnd = prefix.length + insert.length
+      confirming = true
+      el.dispatchEvent(new Event("input", { bubbles: true }))
+      confirming = false
+      el.focus()
+      close()
+    }
+  }
+
+  function tryOpenTrigger(el) {
+    const val = el.value
+    const pos = el.selectionStart
+    const before = val.substring(0, pos)
+
+    for (const [key, trigger] of triggerMap) {
+      const idx = before.lastIndexOf(key)
+      if (idx === -1) continue
+      const charBeforeTrigger = idx > 0 ? before[idx - 1] : ""
+      const isWordBoundary = idx === 0 || /\s/.test(charBeforeTrigger)
+      if (!isWordBoundary) continue
+
+      const textAfter = before.substring(idx + key.length)
+      if (textAfter === "") {
+        reveal(trigger, el)
+        return
+      }
+    }
+  }
+
+  let filterController = null
+
+  async function handleInput(e) {
+    if (confirming) return
+    const el = e.target
+    const val = el.value
+    const pos = el.selectionStart
+
+    if (!open.value) {
+      tryOpenTrigger(el)
+      return
+    }
+
+    const before = val.substring(0, pos)
+    const triggerKey = activeTrigger.value?.key
+    if (!triggerKey) return
+
+    const triggerIdx = before.lastIndexOf(triggerKey)
+    if (triggerIdx === -1) { close(); return }
+
+    const textBetween = before.substring(triggerIdx + triggerKey.length)
+    if (/\s{2,}/.test(textBetween)) { close(); return }
+
+    query.value = textBetween
+    activeIndex.value = 0
+    cursorRect.value = getCursorRect(el)
+
+    const trigger = activeTrigger.value
+    if (trigger.onFilter) {
+      if (filterController) filterController.abort()
+      filterController = new AbortController()
+      loading.value = true
+      try {
+        const result = await trigger.onFilter(textBetween)
+        if (!filterController.signal.aborted) {
+          items.value = normalizeItems(result)
+        }
+      } finally {
+        loading.value = false
+      }
+    }
+  }
+
+  function handleKeydown(e) {
+    if (!open.value) return
+
+    const isDown = e.key === "ArrowDown" || (e.ctrlKey && e.key === "n")
+    const isUp = e.key === "ArrowUp" || (e.ctrlKey && e.key === "p")
+    const isConfirm = e.key === "Enter" || (e.ctrlKey && e.key === "y")
+
+    if (isDown) {
+      e.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, filtered.value.length - 1)
+    } else if (isUp) {
+      e.preventDefault()
+      activeIndex.value = Math.max(activeIndex.value - 1, 0)
+    } else if (isConfirm && filtered.value.length > 0) {
+      e.preventDefault()
+      confirm(filtered.value[activeIndex.value])
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      close()
+    } else if (e.key === "Backspace") {
+      const el = e.target
+      const val = el.value
+      const pos = el.selectionStart
+      const before = val.substring(0, pos)
+      const triggerKey = activeTrigger.value?.key
+      const triggerIdx = before.lastIndexOf(triggerKey)
+      if (pos <= triggerIdx + triggerKey.length && query.value === "") {
+        close()
+      }
+    }
+  }
+
+  let blurTimer = null
+
+  function handleBlur() {
+    blurTimer = setTimeout(close, 150)
+  }
+
+  const handlers = {
+    keydown: handleKeydown,
+    input: handleInput,
+    blur: handleBlur
+  }
+
+  function setActiveIndex(i) {
+    activeIndex.value = i
+  }
+
+  return {
+    open,
+    filtered,
+    activeIndex,
+    loading,
+    query,
+    virtualAnchor,
+    activeTrigger,
+    handlers,
+    confirm,
+    close,
+    setActiveIndex
+  }
+}

package/src/composables/usePointerDrag.js

@@ -0,0 +1,39 @@
+import { onUnmounted } from "vue"
+
+export function usePointerDrag({ onDrag, onStart, onEnd }) {
+  let active = false
+
+  function handleMouseMove(e) {
+    if (!active) return
+    onDrag(e.movementX)
+  }
+
+  function handleMouseUp() {
+    if (!active) return
+    active = false
+    document.exitPointerLock()
+    document.removeEventListener("mousemove", handleMouseMove)
+    document.removeEventListener("mouseup", handleMouseUp)
+    onEnd?.()
+  }
+
+  function start(e) {
+    e.preventDefault()
+    active = true
+    e.target.requestPointerLock()
+    document.addEventListener("mousemove", handleMouseMove)
+    document.addEventListener("mouseup", handleMouseUp)
+    onStart?.()
+  }
+
+  onUnmounted(() => {
+    if (active) {
+      active = false
+      document.exitPointerLock()
+      document.removeEventListener("mousemove", handleMouseMove)
+      document.removeEventListener("mouseup", handleMouseUp)
+    }
+  })
+
+  return { start }
+}

package/src/histoire-setup.js

@@ -0,0 +1 @@
+import "./style.css"

package/src/index.js

@@ -0,0 +1,43 @@
+export { default as Button } from "./components/Button.vue"
+export { default as Input } from "./components/Input.vue"
+export { default as NumberInput } from "./components/NumberInput.vue"
+export { default as Select } from "./components/Select.vue"
+export { default as Dropdown } from "./components/Dropdown.vue"
+export { default as Checkbox } from "./components/Checkbox.vue"
+export { default as GhostInput } from "./components/GhostInput.vue"
+export { default as Tabs } from "./components/Tabs.vue"
+export { default as ToggleGroup } from "./components/ToggleGroup.vue"
+export { default as Badge } from "./components/Badge.vue"
+export { default as Popover } from "./components/Popover.vue"
+export { default as RadioGroup } from "./components/RadioGroup.vue"
+export { default as PopConfirm } from "./components/PopConfirm.vue"
+export { default as Modal } from "./components/Modal.vue"
+export { default as Tooltip } from "./components/Tooltip.vue"
+export { default as Combobox } from "./components/Combobox.vue"
+export { default as ContextMenu } from "./components/ContextMenu.vue"
+export { default as Collapsible } from "./components/Collapsible.vue"
+export { default as Tree } from "./components/Tree.vue"
+export { default as MultiCombobox } from "./components/MultiCombobox.vue"
+export { default as RadioCards } from "./components/RadioCards.vue"
+export { default as CheckboxCards } from "./components/CheckboxCards.vue"
+export { default as RangeSlider } from "./components/RangeSlider.vue"
+export { default as ToggleButtons } from "./components/ToggleButtons.vue"
+export { default as NavTree } from "./components/NavTree.vue"
+export { default as DataTable } from "./components/DataTable.vue"
+export { default as KeyValue } from "./components/KeyValue.vue"
+export { default as CollapsibleGroup } from "./components/CollapsibleGroup.vue"
+export { default as ScrollBox } from "./components/ScrollBox.vue"
+export { default as TagInput } from "./components/TagInput.vue"
+export { default as SectionHeader } from "./components/SectionHeader.vue"
+export { default as Switch } from "./components/Switch.vue"
+export { default as Textarea } from "./components/Textarea.vue"
+export { default as LabeledTextarea } from "./components/LabeledTextarea.vue"
+export { default as LabeledTextareaGroup } from "./components/LabeledTextareaGroup.vue"
+export { default as ToastContainer } from "./components/ToastContainer.vue"
+export { default as Mention } from "./components/Mention.vue"
+export { default as CodeEditor } from "./components/CodeEditor.vue"
+
+export { useClickOutside } from "./composables/useClickOutside.js"
+export { usePointerDrag } from "./composables/usePointerDrag.js"
+export { toast } from "./composables/toast.js"
+export { useMention } from "./composables/useMention.js"