origam 2.3.0 → 2.6.1

package/dist/src/components/index.js

@@ -3,6 +3,7 @@ export * from "./Alert/index.js";
 export * from "./App/index.js";
 export * from "./Avatar/index.js";
 export * from "./Badge/index.js";
+export * from "./Blockquote/index.js";
 export * from "./BottomNav/index.js";
 export * from "./Bracket/index.js";
 export * from "./Breadcrumb/index.js";
@@ -13,6 +14,7 @@ export * from "./Carousel/index.js";
 export * from "./Checkbox/index.js";
 export * from "./Chip/index.js";
 export * from "./ClientOnly/index.js";
+export * from "./Clipboard/index.js";
 export * from "./Code/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./ColorPickerField/index.js";
@@ -28,14 +30,20 @@ export * from "./DefaultsProvider/index.js";
 export * from "./Dialog/index.js";
 export * from "./Divider/index.js";
 export * from "./Drawer/index.js";
+export * from "./EmptyState/index.js";
 export * from "./ExpansionPanel/index.js";
 export * from "./Field/index.js";
 export * from "./FileField/index.js";
 export * from "./Form/index.js";
 export * from "./Grids/index.js";
+export * from "./Grid/index.js";
+export * from "./Masonry/index.js";
+export * from "./Media/index.js";
 export * from "./Icon/index.js";
 export * from "./Img/index.js";
 export * from "./InfiniteScroll/index.js";
+export * from "./InlineEdit/index.js";
+export * from "./NumberFormat/index.js";
 export * from "./Input/index.js";
 export * from "./Label/index.js";
 export * from "./Layout/index.js";
@@ -63,13 +71,13 @@ export * from "./Sheet/index.js";
 export * from "./Slide/index.js";
 export * from "./SliderField/index.js";
 export * from "./Snackbar/index.js";
-export * from "./SnackbarStack/index.js";
 export * from "./Switch/index.js";
 export * from "./SystemBar/index.js";
 export * from "./Table/index.js";
 export * from "./Tabs/index.js";
 export * from "./TextareaField/index.js";
 export * from "./TextField/index.js";
+export * from "./TextMask/index.js";
 export * from "./ThemeProvider/index.js";
 export * from "./Title/index.js";
 export * from "./Toolbar/index.js";
@@ -81,3 +89,9 @@ export * from "./Kbd/index.js";
 export * from "./Stepper/index.js";
 export * from "./Timeline/index.js";
 export * from "./Treeview/index.js";
+export * from "./QrCode/index.js";
+export * from "./Watermark/index.js";
+export * from "./Video/index.js";
+export * from "./Audio/index.js";
+export * from "./Calendar/index.js";
+export * from "./Chart/index.js";

package/dist/src/composables/Audio/use-audio-player.composable.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAudioPlayer = useAudioPlayer;
+var _vue = require("vue");
+var _useMediaPlayer = require("../Media/use-media-player.composable.cjs");
+function useAudioPlayer(options = {}) {
+  const audioRef = options.audioRef ?? (0, _vue.ref)(null);
+  const {
+    state,
+    methods
+  } = (0, _useMediaPlayer.useMediaPlayer)({
+    autoplay: options.autoplay,
+    muted: options.muted,
+    loop: options.loop,
+    preload: options.preload,
+    mediaRef: audioRef
+  });
+  return {
+    audioRef,
+    state,
+    methods
+  };
+}

package/dist/src/composables/Audio/use-audio-player.composable.d.ts

@@ -0,0 +1,29 @@
+import { type Ref } from 'vue';
+import type { IAudioPlayerMethods, IAudioPlayerState, IUseOrigamAudioPlayerOptions } from '../../interfaces';
+/**
+ * Headless audio player composable. Today this is a trivial wrapper
+ * around `useMediaPlayer` — `HTMLAudioElement` does not expose any
+ * extra state or method beyond the media-shared baseline (no
+ * fullscreen, no picture-in-picture). The wrapper exists so:
+ *
+ *  - Consumers get a typed `audioRef` (instead of the generic
+ *    `mediaRef: HTMLMediaElement`) at the call site.
+ *  - Future audio-specific extensions (waveform analysis,
+ *    frequency-domain visualisations, Web Audio AnalyserNode wiring,
+ *    AudioWorklet pipes) have a stable home that can grow without
+ *    breaking consumer imports.
+ *
+ * @example
+ * ```ts
+ * const audioRef = ref<HTMLAudioElement | null>(null)
+ * const { state, methods } = useAudioPlayer({ audioRef })
+ *
+ * // template:
+ * // <audio ref="audioRef" src="…" />
+ * ```
+ */
+export declare function useAudioPlayer(options?: IUseOrigamAudioPlayerOptions): {
+    audioRef: Ref<HTMLAudioElement | null>;
+    state: IAudioPlayerState;
+    methods: IAudioPlayerMethods;
+};

package/dist/src/composables/Audio/use-audio-player.composable.js

@@ -0,0 +1,17 @@
+import { ref } from "vue";
+import { useMediaPlayer } from "../Media/use-media-player.composable.js";
+export function useAudioPlayer(options = {}) {
+  const audioRef = options.audioRef ?? ref(null);
+  const { state, methods } = useMediaPlayer({
+    autoplay: options.autoplay,
+    muted: options.muted,
+    loop: options.loop,
+    preload: options.preload,
+    mediaRef: audioRef
+  });
+  return {
+    audioRef,
+    state,
+    methods
+  };
+}

package/dist/src/composables/Audio/use-waveform.composable.cjs

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWaveform = useWaveform;
+var _vue = require("vue");
+var _audio = require("../../consts/Audio/audio.const.cjs");
+function useWaveform(srcRef, options = {}) {
+  const bins = options.bins ?? _audio.WAVEFORM_DEFAULT_BINS;
+  const peaks = (0, _vue.ref)([]);
+  const isComputing = (0, _vue.ref)(false);
+  const error = (0, _vue.ref)(null);
+  function resolveOfflineCtor() {
+    if (typeof window === "undefined") return null;
+    const win = window;
+    return win.OfflineAudioContext ?? win.webkitOfflineAudioContext ?? null;
+  }
+  async function compute() {
+    const src = srcRef.value;
+    peaks.value = [];
+    error.value = null;
+    if (!src) return;
+    if (typeof fetch === "undefined") return;
+    const Ctor = resolveOfflineCtor();
+    if (!Ctor) {
+      error.value = new Error("OfflineAudioContext is not supported in this environment.");
+      return;
+    }
+    isComputing.value = true;
+    try {
+      const response = await fetch(src, {
+        credentials: options.crossOrigin === "use-credentials" ? "include" : "same-origin",
+        // Hint the network stack: we want the bytes, not the
+        // decoded media. The browser may still cache the
+        // response in the media cache, which is fine — both
+        // the player and the waveform decoder end up reading
+        // the same entry.
+        cache: "force-cache"
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch audio (HTTP ${response.status}).`);
+      }
+      const buffer = await response.arrayBuffer();
+      const ctx = new Ctor(1, 44100, 44100);
+      const audio = await decodeWithFallback(ctx, buffer);
+      const channel = audio.getChannelData(0);
+      const samplesPerBin = Math.max(1, Math.floor(channel.length / bins));
+      const out = new Array(bins);
+      for (let bin = 0; bin < bins; bin++) {
+        const start = bin * samplesPerBin;
+        const end = Math.min(start + samplesPerBin, channel.length);
+        let peak = 0;
+        for (let i = start; i < end; i++) {
+          const value = Math.abs(channel[i] ?? 0);
+          if (value > peak) peak = value;
+        }
+        out[bin] = peak;
+      }
+      let maxPeak = 0;
+      for (const value of out) if (value > maxPeak) maxPeak = value;
+      if (maxPeak > 0) {
+        for (let i = 0; i < out.length; i++) out[i] = out[i] / maxPeak;
+      }
+      peaks.value = out;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isComputing.value = false;
+    }
+  }
+  (0, _vue.watch)(srcRef, () => {
+    void compute();
+  }, {
+    immediate: true
+  });
+  return {
+    peaks,
+    isComputing,
+    error,
+    compute
+  };
+}
+function decodeWithFallback(ctx, buffer) {
+  return new Promise((resolve, reject) => {
+    const maybePromise = ctx.decodeAudioData(buffer, resolve, reject);
+    if (maybePromise && typeof maybePromise.then === "function") {
+      maybePromise.then(resolve, reject);
+    }
+  });
+}

package/dist/src/composables/Audio/use-waveform.composable.d.ts

@@ -0,0 +1,32 @@
+import { type Ref } from 'vue';
+import type { IUseWaveformOptions } from '../../interfaces';
+/**
+ * Headless waveform composable. Decodes the audio referenced by
+ * `srcRef`, downsamples it to `bins` peaks (default 200), and exposes
+ * the resulting array as a reactive ref. The composable is SSR-safe
+ * (every `window` / `AudioContext` access is guarded) and recomputes
+ * automatically whenever the source URL changes.
+ *
+ * Algorithm:
+ * 1. `fetch(src)` → `ArrayBuffer`.
+ * 2. `OfflineAudioContext.decodeAudioData(buffer)` → `AudioBuffer`.
+ * 3. Read channel 0 samples via `buffer.getChannelData(0)`.
+ * 4. Walk the samples in `bins` buckets; for each bucket, keep the
+ *    maximum absolute amplitude and normalise to `[0, 1]`.
+ *
+ * Channel 0 is enough for a thumbnail-grade visual — combining left
+ * and right channels (RMS / max) would cost twice the memory for a
+ * difference invisible at 200-bin resolution.
+ *
+ * @example
+ * ```ts
+ * const src = ref('/track.mp3')
+ * const { peaks, isComputing, error } = useWaveform(src, { bins: 200 })
+ * ```
+ */
+export declare function useWaveform(srcRef: Ref<string | undefined | null>, options?: IUseWaveformOptions): {
+    peaks: Ref<Array<number>>;
+    isComputing: Ref<boolean>;
+    error: Ref<Error | null>;
+    compute: () => Promise<void>;
+};

package/dist/src/composables/Audio/use-waveform.composable.js

@@ -0,0 +1,81 @@
+import {
+  ref,
+  watch
+} from "vue";
+import { WAVEFORM_DEFAULT_BINS } from "../../consts/Audio/audio.const.js";
+export function useWaveform(srcRef, options = {}) {
+  const bins = options.bins ?? WAVEFORM_DEFAULT_BINS;
+  const peaks = ref([]);
+  const isComputing = ref(false);
+  const error = ref(null);
+  function resolveOfflineCtor() {
+    if (typeof window === "undefined") return null;
+    const win = window;
+    return win.OfflineAudioContext ?? win.webkitOfflineAudioContext ?? null;
+  }
+  async function compute() {
+    const src = srcRef.value;
+    peaks.value = [];
+    error.value = null;
+    if (!src) return;
+    if (typeof fetch === "undefined") return;
+    const Ctor = resolveOfflineCtor();
+    if (!Ctor) {
+      error.value = new Error("OfflineAudioContext is not supported in this environment.");
+      return;
+    }
+    isComputing.value = true;
+    try {
+      const response = await fetch(src, {
+        credentials: options.crossOrigin === "use-credentials" ? "include" : "same-origin",
+        // Hint the network stack: we want the bytes, not the
+        // decoded media. The browser may still cache the
+        // response in the media cache, which is fine — both
+        // the player and the waveform decoder end up reading
+        // the same entry.
+        cache: "force-cache"
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch audio (HTTP ${response.status}).`);
+      }
+      const buffer = await response.arrayBuffer();
+      const ctx = new Ctor(1, 44100, 44100);
+      const audio = await decodeWithFallback(ctx, buffer);
+      const channel = audio.getChannelData(0);
+      const samplesPerBin = Math.max(1, Math.floor(channel.length / bins));
+      const out = new Array(bins);
+      for (let bin = 0; bin < bins; bin++) {
+        const start = bin * samplesPerBin;
+        const end = Math.min(start + samplesPerBin, channel.length);
+        let peak = 0;
+        for (let i = start; i < end; i++) {
+          const value = Math.abs(channel[i] ?? 0);
+          if (value > peak) peak = value;
+        }
+        out[bin] = peak;
+      }
+      let maxPeak = 0;
+      for (const value of out) if (value > maxPeak) maxPeak = value;
+      if (maxPeak > 0) {
+        for (let i = 0; i < out.length; i++) out[i] = out[i] / maxPeak;
+      }
+      peaks.value = out;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isComputing.value = false;
+    }
+  }
+  watch(srcRef, () => {
+    void compute();
+  }, { immediate: true });
+  return { peaks, isComputing, error, compute };
+}
+function decodeWithFallback(ctx, buffer) {
+  return new Promise((resolve, reject) => {
+    const maybePromise = ctx.decodeAudioData(buffer, resolve, reject);
+    if (maybePromise && typeof maybePromise.then === "function") {
+      maybePromise.then(resolve, reject);
+    }
+  });
+}

package/dist/src/composables/Calendar/calendar.composable.cjs

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCalendar = useCalendar;
+var _vue = require("vue");
+var _date = require("../../utils/Calendar/date.util.cjs");
+var _rrule = require("../../utils/Calendar/rrule.util.cjs");
+const NAVIGATION_STEP = {
+  month: (date, direction) => (0, _date.addMonths)(date, direction),
+  week: (date, direction) => (0, _date.addWeeks)(date, direction),
+  day: (date, direction) => (0, _date.addDays)(date, direction),
+  agenda: (date, direction) => (0, _date.addMonths)(date, direction)
+};
+function useCalendar(options, setView, setCurrentDate) {
+  const visibleDateRange = (0, _vue.computed)(() => {
+    const view = options.view();
+    const date = options.currentDate();
+    const firstDayOfWeek = options.firstDayOfWeek();
+    switch (view) {
+      case "month":
+      case "agenda":
+        {
+          const monthStart = (0, _date.startOfMonth)(date);
+          const gridStart = (0, _date.startOfWeekFixed)(monthStart, firstDayOfWeek);
+          const gridEnd = (0, _date.addDays)(gridStart, 6 * 7 - 1);
+          return {
+            start: gridStart,
+            end: gridEnd
+          };
+        }
+      case "week":
+        return {
+          start: (0, _date.startOfWeekFixed)(date, firstDayOfWeek),
+          end: (0, _date.endOfWeekFixed)(date, firstDayOfWeek)
+        };
+      case "day":
+      default:
+        {
+          const start = (0, _date.startOfDay)(date);
+          const end = new Date(start);
+          end.setHours(23, 59, 59, 999);
+          return {
+            start,
+            end
+          };
+        }
+    }
+  });
+  const expandedEvents = (0, _vue.computed)(() => {
+    const range = visibleDateRange.value;
+    const raw = options.events();
+    const out = [];
+    for (const event of raw) {
+      for (const occ of (0, _rrule.expandRecurrence)(event, range)) {
+        out.push(occ);
+      }
+    }
+    out.sort((a, b) => {
+      const aTime = (0, _date.toDate)(a.start)?.getTime() ?? 0;
+      const bTime = (0, _date.toDate)(b.start)?.getTime() ?? 0;
+      if (aTime !== bTime) return aTime - bTime;
+      return String(a.id).localeCompare(String(b.id));
+    });
+    return out;
+  });
+  function navigate(direction) {
+    const view = options.view();
+    const current = options.currentDate();
+    let next;
+    if (direction === "today") {
+      next = /* @__PURE__ */new Date();
+    } else {
+      const step = direction === "next" ? 1 : -1;
+      next = NAVIGATION_STEP[view](current, step);
+    }
+    const min = options.minDate?.() ?? null;
+    const max = options.maxDate?.() ?? null;
+    if (min && (0, _date.isBefore)(next, min)) next = new Date(min.getTime());
+    if (max && (0, _date.isAfter)(next, max)) next = new Date(max.getTime());
+    setCurrentDate?.(next);
+  }
+  function setViewProxy(next) {
+    setView?.(next);
+  }
+  function buildMonthGrid(date) {
+    return (0, _date.buildMonthMatrix)(date, options.firstDayOfWeek());
+  }
+  function buildDayGrid(date) {
+    const startHour = options.dayStartHour();
+    const endHour = options.dayEndHour();
+    const slotDuration = options.slotDuration();
+    const slots = [];
+    const base = (0, _date.startOfDay)(date);
+    const totalMinutes = (endHour - startHour) * 60;
+    for (let offsetMin = 0; offsetMin < totalMinutes; offsetMin += slotDuration) {
+      const slotDate = new Date(base);
+      slotDate.setHours(startHour, 0, 0, 0);
+      slotDate.setMinutes(slotDate.getMinutes() + offsetMin);
+      slots.push({
+        date: slotDate,
+        durationMin: slotDuration,
+        isHourMark: slotDate.getMinutes() === 0
+      });
+    }
+    return slots;
+  }
+  function buildWeekGrid(date) {
+    const firstDayOfWeek = options.firstDayOfWeek();
+    const start = (0, _date.startOfWeekFixed)(date, firstDayOfWeek);
+    const columns = [];
+    for (let i = 0; i < 7; i++) {
+      columns.push(buildDayGrid((0, _date.addDays)(start, i)));
+    }
+    return columns;
+  }
+  function buildAgenda(range) {
+    const effectiveRange = range ?? visibleDateRange.value;
+    const map = /* @__PURE__ */new Map();
+    for (const event of expandedEvents.value) {
+      const start = (0, _date.toDate)(event.start);
+      if (!start) continue;
+      if (start.getTime() < effectiveRange.start.getTime()) continue;
+      if (start.getTime() > effectiveRange.end.getTime()) continue;
+      const key = `${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`;
+      if (!map.has(key)) {
+        map.set(key, {
+          date: (0, _date.startOfDay)(start),
+          events: []
+        });
+      }
+      map.get(key).events.push(event);
+    }
+    return [...map.values()].sort((a, b) => a.date.getTime() - b.date.getTime());
+  }
+  function eventsOnDay(day) {
+    return expandedEvents.value.filter(event => {
+      const start = (0, _date.toDate)(event.start);
+      if (!start) return false;
+      const end = event.end ? (0, _date.toDate)(event.end) : start;
+      if (!end) return false;
+      return (0, _date.isSameDay)(start, day) || (0, _date.isSameDay)(end, day) || (0, _date.isBefore)(start, day) && (0, _date.isAfter)(end, day);
+    });
+  }
+  function positionEvent(event, dayStart, pxPerMin) {
+    const start = (0, _date.toDate)(event.start);
+    if (!start) return null;
+    const end = event.end ? (0, _date.toDate)(event.end) : new Date(start.getTime() + 30 * 6e4);
+    if (!end) return null;
+    const top = Math.max(0, (0, _date.diffMinutes)(dayStart, start) * pxPerMin);
+    const height = Math.max(pxPerMin * 15, (0, _date.diffMinutes)(start, end) * pxPerMin);
+    return {
+      top,
+      height
+    };
+  }
+  return {
+    visibleDateRange,
+    expandedEvents,
+    navigate,
+    setView: setViewProxy,
+    buildMonthGrid,
+    buildWeekGrid,
+    buildDayGrid,
+    buildAgenda,
+    eventsOnDay,
+    positionEvent,
+    // Re-export low-level helpers so consumers don't have to
+    // import them separately when extending the calendar surface.
+    helpers: {
+      isSameDay: _date.isSameDay,
+      isSameMonth: _date.isSameMonth,
+      startOfDay: _date.startOfDay,
+      startOfMonth: _date.startOfMonth,
+      endOfMonth: _date.endOfMonth,
+      addDays: _date.addDays,
+      addMonths: _date.addMonths,
+      addWeeks: _date.addWeeks,
+      diffMinutes: _date.diffMinutes,
+      toDate: _date.toDate
+    }
+  };
+}

package/dist/src/composables/Calendar/calendar.composable.d.ts

@@ -0,0 +1,72 @@
+import { type ComputedRef } from 'vue';
+import type { IEvent, IUseCalendarOptions } from '../../interfaces';
+import type { TCalendarNavigate, TCalendarView } from '../../types';
+import { addDays, addMonths, addWeeks, diffMinutes, endOfMonth, isSameDay, isSameMonth, startOfDay, startOfMonth, toDate } from '../../utils/Calendar/date.util';
+/**
+ * Time-slot descriptor returned by `buildDayGrid` / `buildWeekGrid`.
+ *
+ * The grid is **not** event-aware — events are positioned absolutely
+ * on top of the timeline using `diffMinutes(dayStart, event.start)`.
+ * Decoupling the grid from the events lets us re-use the grid output
+ * for the drag-select overlay without re-computing.
+ */
+export interface ICalendarTimeSlot {
+    /** Top-of-slot Date (e.g. 09:30). */
+    date: Date;
+    /** Slot duration in minutes (mirror of `options.slotDuration`). */
+    durationMin: number;
+    /** True when the slot's hour mark falls on the hour. */
+    isHourMark: boolean;
+}
+/**
+ * Agenda entry — one per day that has at least one event in the
+ * visible window. Agenda view skips empty days; the `#empty` slot
+ * fires when *no* event is in range.
+ */
+export interface ICalendarAgendaEntry {
+    date: Date;
+    events: Array<IEvent>;
+}
+/**
+ * Public composable. Stateless over the inputs (every getter is a
+ * `() => …` thunk), so `<OrigamCalendar>` can drive it from props or
+ * a parent store without re-instantiation.
+ *
+ * Methods (`navigate`, `setView`, `buildXxxGrid`) are intentionally
+ * **not** wrapped in computeds — they're pure functions / side-effect
+ * channels. The reactive surface is `expandedEvents` +
+ * `visibleDateRange`, which depend on every input thunk.
+ */
+export declare function useCalendar(options: IUseCalendarOptions, setView?: (view: TCalendarView) => void, setCurrentDate?: (date: Date) => void): {
+    visibleDateRange: ComputedRef<{
+        start: Date;
+        end: Date;
+    }>;
+    expandedEvents: ComputedRef<IEvent[]>;
+    navigate: (direction: TCalendarNavigate) => void;
+    setView: (next: TCalendarView) => void;
+    buildMonthGrid: (date: Date) => Array<Array<Date>>;
+    buildWeekGrid: (date: Date) => Array<Array<ICalendarTimeSlot>>;
+    buildDayGrid: (date: Date) => Array<ICalendarTimeSlot>;
+    buildAgenda: (range?: {
+        start: Date;
+        end: Date;
+    }) => Array<ICalendarAgendaEntry>;
+    eventsOnDay: (day: Date) => Array<IEvent>;
+    positionEvent: (event: IEvent, dayStart: Date, pxPerMin: number) => {
+        top: number;
+        height: number;
+    } | null;
+    helpers: {
+        isSameDay: typeof isSameDay;
+        isSameMonth: typeof isSameMonth;
+        startOfDay: typeof startOfDay;
+        startOfMonth: typeof startOfMonth;
+        endOfMonth: typeof endOfMonth;
+        addDays: typeof addDays;
+        addMonths: typeof addMonths;
+        addWeeks: typeof addWeeks;
+        diffMinutes: typeof diffMinutes;
+        toDate: typeof toDate;
+    };
+};