orio-ui 1.20.0 → 1.23.2

package/dist/runtime/components/ZoomableContainer.d.vue.ts

@@ -0,0 +1,48 @@
+export interface ZoomableContainerProps {
+    minScale?: number;
+    maxScale?: number;
+    initialScale?: number;
+    zoomSpeed?: number;
+    wheelPanSpeed?: number;
+}
+declare function setScaleAt(target: number, px: number, py: number): void;
+declare function panBy(dx: number, dy: number): void;
+declare function centerWorld(): void;
+declare function resetView(): void;
+declare var __VLS_1: {
+    scale: number;
+    tx: number;
+    ty: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ZoomableContainerProps, {
+    scale: import("vue").Ref<number, number>;
+    tx: import("vue").Ref<number, number>;
+    ty: import("vue").Ref<number, number>;
+    setScaleAt: typeof setScaleAt;
+    panBy: typeof panBy;
+    resetView: typeof resetView;
+    centerWorld: typeof centerWorld;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:translate": (x: number, y: number) => any;
+}, string, import("vue").PublicProps, Readonly<ZoomableContainerProps> & Readonly<{
+    "onUpdate:scale"?: ((value: number) => any) | undefined;
+    "onUpdate:translate"?: ((x: number, y: number) => any) | undefined;
+}>, {
+    minScale: number;
+    maxScale: number;
+    initialScale: number;
+    zoomSpeed: number;
+    wheelPanSpeed: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ZoomableContainer.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted, useTemplateRef } from "vue";
+import { useResizeObserver, useEventListener } from "@vueuse/core";
+import { usePinchZoom } from "../composables/usePinchZoom";
+import { useInertia } from "../composables/useInertia";
+const props = defineProps({
+  minScale: { type: Number, required: false, default: 0.1 },
+  maxScale: { type: Number, required: false, default: 10 },
+  initialScale: { type: Number, required: false, default: 1 },
+  zoomSpeed: { type: Number, required: false, default: 15e-4 },
+  wheelPanSpeed: { type: Number, required: false, default: 1 }
+});
+const emit = defineEmits(["update:scale", "update:translate"]);
+const viewportEl = useTemplateRef("viewportEl");
+const worldEl = useTemplateRef("worldEl");
+const scale = ref(props.initialScale);
+const tx = ref(0);
+const ty = ref(0);
+const viewport = ref({ w: 0, h: 0 });
+const world = ref({ w: 0, h: 0 });
+const spaceHeld = ref(false);
+let centered = false;
+function clamp(v, a, b) {
+  const lo = Math.min(a, b);
+  const hi = Math.max(a, b);
+  return Math.max(lo, Math.min(hi, v));
+}
+function applyBounds() {
+  const vw = viewport.value.w;
+  const vh = viewport.value.h;
+  const ww = world.value.w * scale.value;
+  const wh = world.value.h * scale.value;
+  tx.value = clamp(tx.value, vw / 2 - ww, vw / 2);
+  ty.value = clamp(ty.value, vh / 2 - wh, vh / 2);
+}
+function emitState() {
+  emit("update:scale", scale.value);
+  emit("update:translate", tx.value, ty.value);
+}
+function setScaleAt(target, px, py) {
+  const next = clamp(target, props.minScale, props.maxScale);
+  const k = next / scale.value;
+  tx.value = px - (px - tx.value) * k;
+  ty.value = py - (py - ty.value) * k;
+  scale.value = next;
+  applyBounds();
+  emitState();
+}
+function panBy(dx, dy) {
+  tx.value += dx;
+  ty.value += dy;
+  applyBounds();
+  emitState();
+}
+function centerWorld() {
+  const { w: vw, h: vh } = viewport.value;
+  const { w: ww, h: wh } = world.value;
+  tx.value = (vw - ww * scale.value) / 2;
+  ty.value = (vh - wh * scale.value) / 2;
+  applyBounds();
+  emitState();
+}
+function resetView() {
+  scale.value = props.initialScale;
+  centerWorld();
+}
+const inertia = useInertia(panBy);
+let pinchBaseScale = 1;
+const pinch = usePinchZoom({
+  onPinchStart() {
+    dragId = null;
+    pinchBaseScale = scale.value;
+  },
+  onPinchMove(scaleFactor, midX, midY, dx, dy) {
+    const rect = viewportEl.value.getBoundingClientRect();
+    setScaleAt(pinchBaseScale * scaleFactor, midX - rect.left, midY - rect.top);
+    if (dx !== 0 || dy !== 0) panBy(dx, dy);
+  },
+  onSingleDown(e) {
+    e.preventDefault();
+    dragId = e.pointerId;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    inertia.resetTime();
+  },
+  onSingleUp(id, x, y) {
+    dragId = id;
+    lastX = x;
+    lastY = y;
+    inertia.resetTime();
+    inertia.stop();
+  }
+});
+function onWheel(e) {
+  e.preventDefault();
+  if (e.ctrlKey || e.metaKey) {
+    const rect = viewportEl.value.getBoundingClientRect();
+    const px = e.clientX - rect.left;
+    const py = e.clientY - rect.top;
+    const factor = Math.exp(-e.deltaY * props.zoomSpeed);
+    setScaleAt(scale.value * factor, px, py);
+    return;
+  }
+  let dx = -e.deltaX * props.wheelPanSpeed;
+  let dy = -e.deltaY * props.wheelPanSpeed;
+  if (e.shiftKey && dx === 0) {
+    dx = dy;
+    dy = 0;
+  }
+  panBy(dx, dy);
+}
+let dragId = null;
+let lastX = 0;
+let lastY = 0;
+function shouldPan(e) {
+  if (e.button === 1) return true;
+  if (spaceHeld.value) return true;
+  if (e.target === viewportEl.value) return true;
+  return false;
+}
+function onPointerDown(e) {
+  inertia.stop();
+  if (e.pointerType === "touch") {
+    pinch.onPointerDown(e);
+    return;
+  }
+  if (!shouldPan(e)) return;
+  e.preventDefault();
+  dragId = e.pointerId;
+  lastX = e.clientX;
+  lastY = e.clientY;
+  inertia.resetTime();
+  e.currentTarget.setPointerCapture(e.pointerId);
+}
+function onPointerMove(e) {
+  if (e.pointerType === "touch") {
+    if (pinch.onPointerMove(e)) return;
+  }
+  if (dragId !== e.pointerId) return;
+  const dx = e.clientX - lastX;
+  const dy = e.clientY - lastY;
+  lastX = e.clientX;
+  lastY = e.clientY;
+  inertia.trackMove(dx, dy);
+  panBy(dx, dy);
+}
+function onPointerUp(e) {
+  if (e.pointerType === "touch") {
+    if (pinch.onPointerUp(e)) return;
+  }
+  if (dragId !== e.pointerId) return;
+  dragId = null;
+  inertia.release();
+  try {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  } catch {
+  }
+}
+useEventListener("keydown", (e) => {
+  if (e.code === "Space") spaceHeld.value = true;
+});
+useEventListener("keyup", (e) => {
+  if (e.code === "Space") spaceHeld.value = false;
+});
+useResizeObserver(viewportEl, (entries) => {
+  const r = entries[0].contentRect;
+  viewport.value = { w: r.width, h: r.height };
+  if (!centered && world.value.w && world.value.h) {
+    centered = true;
+    centerWorld();
+  } else {
+    applyBounds();
+  }
+});
+useResizeObserver(worldEl, (entries) => {
+  const r = entries[0].contentRect;
+  world.value = { w: r.width, h: r.height };
+  if (!centered && viewport.value.w && viewport.value.h) {
+    centered = true;
+    centerWorld();
+  } else {
+    applyBounds();
+  }
+});
+onMounted(() => {
+  const vEl = viewportEl.value;
+  const wEl = worldEl.value;
+  if (!vEl || !wEl) return;
+  viewport.value = { w: vEl.clientWidth, h: vEl.clientHeight };
+  world.value = { w: wEl.offsetWidth, h: wEl.offsetHeight };
+  if (viewport.value.w && world.value.w) {
+    centered = true;
+    centerWorld();
+  }
+});
+onUnmounted(() => {
+  inertia.stop();
+});
+const transform = computed(
+  () => `translate(${tx.value}px, ${ty.value}px) scale(${scale.value})`
+);
+const cursor = computed(() => {
+  if (dragId !== null) return "grabbing";
+  if (spaceHeld.value) return "grab";
+  return "default";
+});
+defineExpose({
+  scale,
+  tx,
+  ty,
+  setScaleAt,
+  panBy,
+  resetView,
+  centerWorld
+});
+</script>
+
+<template>
+  <div
+    ref="viewportEl"
+    class="zoomable-viewport"
+    :style="{ cursor }"
+    @wheel="onWheel"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @contextmenu.prevent
+  >
+    <div ref="worldEl" class="zoomable-world" :style="{ transform }">
+      <slot :scale="scale" :tx="tx" :ty="ty" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.zoomable-viewport{height:100%;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.zoomable-world{left:0;position:absolute;top:0;transform-origin:0 0;will-change:transform}
+</style>

package/dist/runtime/components/ZoomableContainer.vue.d.ts

@@ -0,0 +1,48 @@
+export interface ZoomableContainerProps {
+    minScale?: number;
+    maxScale?: number;
+    initialScale?: number;
+    zoomSpeed?: number;
+    wheelPanSpeed?: number;
+}
+declare function setScaleAt(target: number, px: number, py: number): void;
+declare function panBy(dx: number, dy: number): void;
+declare function centerWorld(): void;
+declare function resetView(): void;
+declare var __VLS_1: {
+    scale: number;
+    tx: number;
+    ty: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ZoomableContainerProps, {
+    scale: import("vue").Ref<number, number>;
+    tx: import("vue").Ref<number, number>;
+    ty: import("vue").Ref<number, number>;
+    setScaleAt: typeof setScaleAt;
+    panBy: typeof panBy;
+    resetView: typeof resetView;
+    centerWorld: typeof centerWorld;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:translate": (x: number, y: number) => any;
+}, string, import("vue").PublicProps, Readonly<ZoomableContainerProps> & Readonly<{
+    "onUpdate:scale"?: ((value: number) => any) | undefined;
+    "onUpdate:translate"?: ((x: number, y: number) => any) | undefined;
+}>, {
+    minScale: number;
+    maxScale: number;
+    initialScale: number;
+    zoomSpeed: number;
+    wheelPanSpeed: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/gallery/Carousel.vue

@@ -157,5 +157,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.carousel-wrapper{display:block;position:relative}.carousel-measure{height:v-bind(measureHeight);left:-9999px;pointer-events:none;position:fixed;visibility:hidden;width:v-bind(measureWidth)}.carousel-measure :deep(>*){display:block;height:100%;width:100%}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item :deep(>*){height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
+.carousel-wrapper{display:block;position:relative}.carousel-measure{height:v-bind(measureHeight);left:-9999px;pointer-events:none;position:fixed;visibility:hidden;width:v-bind(measureWidth)}.carousel-measure :deep(>*){display:block;height:100%;width:100%}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item :deep(>*){height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
 </style>

package/dist/runtime/components/gallery/CarouselPreview.d.vue.ts

@@ -0,0 +1,31 @@
+interface Props {
+    images?: string[];
+    fit?: "fill" | "cover" | "contain" | "scale-down";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    "activeImage"?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    image: string;
+};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeImage": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:activeImage"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    images: string[];
+    fit: "fill" | "cover" | "contain" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/gallery/CarouselPreview.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { toRefs } from "vue";
+const props = defineProps({
+  images: { type: Array, required: false, default: () => [] },
+  fit: { type: String, required: false, default: "cover" }
+});
+const { images, fit } = toRefs(props);
+const activeImage = defineModel("activeImage", { type: String });
+</script>
+
+<template>
+  <div v-if="images.length > 1" class="carousel-preview">
+    <button
+      v-for="(image, index) of images"
+      :key="image"
+      type="button"
+      class="preview-item"
+      :class="{ active: image === activeImage }"
+      :aria-pressed="image === activeImage"
+      :aria-label="`Show image ${index + 1} of ${images.length}`"
+      @click="activeImage = image"
+    >
+      <slot name="image" :image>
+        <img :src="image" alt="" draggable="false" />
+      </slot>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.carousel-preview {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.25rem 0;
+}
+
+.preview-item {
+  flex-shrink: 0;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  border: 2px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0.6;
+  transition: opacity 0.2s ease, border-color 0.2s ease;
+}
+.preview-item:hover {
+  opacity: 0.85;
+}
+.preview-item.active {
+  opacity: 1;
+  border-color: var(--color-accent);
+}
+.preview-item :deep(> *) {
+  width: 100%;
+  height: 100%;
+  object-fit: v-bind(fit);
+  display: block;
+}
+</style>

package/dist/runtime/components/gallery/CarouselPreview.vue.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    images?: string[];
+    fit?: "fill" | "cover" | "contain" | "scale-down";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    "activeImage"?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    image: string;
+};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeImage": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:activeImage"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    images: string[];
+    fit: "fill" | "cover" | "contain" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/view/Dates.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, toRefs } from "vue";
+import { useI18n } from "vue-i18n";
 const props = defineProps({
   dates: { type: Object, required: true },
   month: { type: Boolean, required: false },
@@ -7,15 +8,16 @@ const props = defineProps({
   type: { type: String, required: false, default: "italics" }
 });
 const { dates } = toRefs(props);
+const { t, locale } = useI18n();
 function formatMonthYear(value) {
   if (!value) return "";
   if (!props.month)
-    return new Intl.DateTimeFormat("en-US", {
+    return new Intl.DateTimeFormat(locale.value, {
       day: "numeric",
       month: "short",
       year: "numeric"
     }).format(new Date(value));
-  return new Intl.DateTimeFormat("en-US", {
+  return new Intl.DateTimeFormat(locale.value, {
     month: "short",
     year: "numeric"
   }).format(new Date(value));
@@ -23,7 +25,7 @@ function formatMonthYear(value) {
 const startDate = computed(() => formatMonthYear(dates.value.startDate));
 const endDate = computed(() => {
   if (dates.value.endDate === void 0) return null;
-  return dates.value.endDate !== null ? formatMonthYear(dates.value.endDate) : "Present";
+  return dates.value.endDate !== null ? formatMonthYear(dates.value.endDate) : t("dates.present");
 });
 </script>
 

package/dist/runtime/components/view/KeyBinds.d.vue.ts

@@ -0,0 +1,7 @@
+export interface KeyBindsProps {
+    /** Backtick-delimited shortcut string, e.g. "`Ctrl` + `Z`" */
+    bind: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<KeyBindsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KeyBindsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/view/KeyBinds.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  bind: { type: String, required: true }
+});
+const segments = computed(() => {
+  const parts = [];
+  const re = /`([^`]+)`/g;
+  let last = 0;
+  let match;
+  while ((match = re.exec(props.bind)) !== null) {
+    if (match.index > last) {
+      parts.push({ type: "text", value: props.bind.slice(last, match.index) });
+    }
+    parts.push({ type: "key", value: match[1] });
+    last = match.index + match[0].length;
+  }
+  if (last < props.bind.length) {
+    parts.push({ type: "text", value: props.bind.slice(last) });
+  }
+  return parts;
+});
+</script>
+
+<template>
+  <span class="keybinds">
+    <template v-for="(seg, i) in segments" :key="i">
+      <kbd v-if="seg.type === 'key'">{{ seg.value }}</kbd>
+      <span v-else class="separator">{{ seg.value }}</span>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.keybinds{font-size:var(--font-sm);gap:.2rem}.keybinds,kbd{align-items:center;display:inline-flex}kbd{background:hsla(0,0%,100%,.12);border:1px solid hsla(0,0%,100%,.2);border-radius:var(--border-radius-sm,4px);font-family:inherit;font-weight:500;justify-content:center;line-height:1.4;min-width:1.25em;padding:.1rem .35rem}.separator,kbd{font-size:.75rem}.separator{opacity:.6}
+</style>

package/dist/runtime/components/view/KeyBinds.vue.d.ts

@@ -0,0 +1,7 @@
+export interface KeyBindsProps {
+    /** Backtick-delimited shortcut string, e.g. "`Ctrl` + `Z`" */
+    bind: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<KeyBindsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KeyBindsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/view/Text.vue

@@ -39,19 +39,19 @@ div.uppercase {
   text-transform: uppercase;
 }
 div.text {
-  color: var(--color-text);
+  color: var(--view-text-color, var(--color-text));
 }
 div.title {
   font-weight: bold;
-  color: var(--color-text);
+  color: var(--view-text-color, var(--color-text));
 }
 div.subtitle {
   font-weight: semi-bold;
-  color: var(--color-muted);
+  color: var(--view-text-color, var(--color-muted));
 }
 div.italics {
   font-style: italic;
-  color: var(--color-muted);
+  color: var(--view-text-color, var(--color-muted));
 }
 div.small {
   font-size: var(--font-sm);

package/dist/runtime/composables/useInertia.d.ts

@@ -0,0 +1,10 @@
+export interface UseInertiaOptions {
+    friction?: number;
+    minVelocity?: number;
+}
+export declare function useInertia(onTick: (dx: number, dy: number) => void, options?: UseInertiaOptions): {
+    stop: () => void;
+    trackMove: (dx: number, dy: number) => void;
+    resetTime: () => void;
+    release: () => void;
+};

package/dist/runtime/composables/useInertia.js

@@ -0,0 +1,49 @@
+export function useInertia(onTick, options = {}) {
+  const { friction = 0.92, minVelocity = 0.5 } = options;
+  let vx = 0;
+  let vy = 0;
+  let frameId = null;
+  let lastMoveTime = 0;
+  function tick() {
+    vx *= friction;
+    vy *= friction;
+    if (Math.abs(vx) < minVelocity && Math.abs(vy) < minVelocity) {
+      frameId = null;
+      return;
+    }
+    onTick(vx, vy);
+    frameId = requestAnimationFrame(tick);
+  }
+  function stop() {
+    if (frameId !== null) {
+      cancelAnimationFrame(frameId);
+      frameId = null;
+    }
+    vx = 0;
+    vy = 0;
+  }
+  function trackMove(dx, dy) {
+    const now = performance.now();
+    const dt = now - lastMoveTime;
+    lastMoveTime = now;
+    if (dt > 0 && dt < 100) {
+      const factor = 16 / dt;
+      vx = dx * factor;
+      vy = dy * factor;
+    } else {
+      vx = 0;
+      vy = 0;
+    }
+  }
+  function resetTime() {
+    lastMoveTime = performance.now();
+  }
+  function release() {
+    if (performance.now() - lastMoveTime < 50) {
+      if (Math.abs(vx) >= minVelocity || Math.abs(vy) >= minVelocity) {
+        frameId = requestAnimationFrame(tick);
+      }
+    }
+  }
+  return { stop, trackMove, resetTime, release };
+}

package/dist/runtime/composables/usePinchZoom.d.ts

@@ -0,0 +1,13 @@
+export interface PinchCallbacks {
+    onPinchStart?: () => void;
+    onPinchMove?: (scaleFactor: number, midX: number, midY: number, dx: number, dy: number) => void;
+    onSingleDown?: (e: PointerEvent) => void;
+    onSingleUp?: (remainingId: number, x: number, y: number) => void;
+    onAllUp?: () => void;
+}
+export declare function usePinchZoom(callbacks: PinchCallbacks): {
+    onPointerDown: (e: PointerEvent) => boolean;
+    onPointerMove: (e: PointerEvent) => boolean;
+    onPointerUp: (e: PointerEvent) => boolean;
+    pointers: any;
+};