@stll/folio-vue 0.2.0

package/dist/utils/colorMode.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Color-mode resolution shared by every adapter so the light/dark/auto logic
+ * (and its SSR + prefers-color-scheme handling) can't drift between hosts. The
+ * adapters keep only their framework binding (useState/useEffect vs
+ * ref/watchEffect); the rules live here.
+ *
+ * @packageDocumentation
+ */
+/** UI color theme for the editor chrome and canvas. */
+export type ColorMode = "light" | "dark" | "system";
+/**
+ * Current OS dark-mode preference. Returns false when `matchMedia` is
+ * unavailable (e.g. server-side render), so it is safe to call as a state seed.
+ *
+ * @public
+ */
+export declare function prefersColorSchemeDark(): boolean;
+/**
+ * Resolve the effective dark flag from a {@link ColorMode} and the current OS
+ * preference. `'system'` follows the OS; `'dark'`/`'light'` are explicit.
+ *
+ * @public
+ */
+export declare function resolveIsDark(colorMode: ColorMode, systemDark: boolean): boolean;
+/**
+ * Subscribe to OS dark-mode changes. Invokes `onChange` immediately with the
+ * current value (so a stale seed is corrected on entry), then on every change.
+ * Returns an unsubscribe function. A no-op under SSR.
+ *
+ * @public
+ */
+export declare function subscribeSystemDark(onChange: (dark: boolean) => void): () => void;

package/dist/utils/comments.d.ts

@@ -0,0 +1,20 @@
+import { Paragraph } from '@stll/folio-core/types/content';
+/** Extract plain text from a Comment's paragraph content. */
+export declare function getCommentText(paragraphs?: Paragraph[]): string;
+export declare function formatDate(dateStr?: string): string;
+export declare function getInitials(name: string): string;
+export declare function getAvatarColor(name: string): string;
+export declare function truncateText(text: string, maxLength?: number): string;
+/**
+ * One tracked change surfaced by `extractTrackedChanges`. Re-exported verbatim
+ * from core so the sidebar consumes the extractor's exact output type: the Vue
+ * adapter used to keep a stricter hand-written copy (required where core's is
+ * optional, `?: T` where core's is `?: T | undefined`), which made
+ * `extractTrackedChanges(state).entries` unassignable to the sidebar props under
+ * `exactOptionalPropertyTypes`. Sharing core's type removes that drift entirely
+ * and keeps the accept/reject-by-id contract (`revisionId`,
+ * `insertionRevisionId`, `coalescedRevisionIds`) in one place.
+ *
+ * @public
+ */
+export type { TrackedChangeEntry } from '@stll/folio-core/prosemirror/utils/extractTrackedChanges';

package/dist/utils/cssTypes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tiny shared CSSProperties shape so framework-agnostic style
+ * objects don't need to import from React or Vue. Both adapters'
+ * `CSSProperties` types are structurally compatible with this looser
+ * shape (string | number values, camelCased keys).
+ */
+export type CSSProperties = Record<string, string | number | undefined>;

package/dist/utils/domQueries.d.ts

@@ -0,0 +1,39 @@
+import { EditorView } from 'prosemirror-view';
+/**
+ * Resolve the painted header/footer instance nearest the viewport center — the
+ * one the user is editing. The same HF is painted on every page (shared
+ * `r:id`), so the chrome outline must track the active page rather than snap to
+ * page one's copy (mirrors core's `getHfDomSnapshot` host pick; #691).
+ */
+export declare function nearestHfHostEl(position: "header" | "footer"): HTMLElement | null;
+/**
+ * Find the painted span containing `pmPos`. By default scoped to body spans
+ * (which carry both pmStart and pmEnd) so HF runs in the separate PM document
+ * don't mis-resolve double-/triple-click selection. When `hfSection` is set
+ * (the user is editing a header/footer), scope to that section's painted host
+ * instead — the HF spans live in `.layout-page-header` / `.layout-page-footer`
+ * and carry PM positions from the HF document, so resolving against body spans
+ * would compute word/paragraph bounds from the wrong text (#691).
+ */
+export declare function findElementAtPosition(container: HTMLElement, pmPos: number, hfSection?: "header" | "footer"): HTMLElement | null;
+/**
+ * Smooth-scroll the viewport so the painted element at `pmPos` is
+ * visible (48px top padding). Falls back to a CSS attribute selector
+ * when no body span carries pmPos in its [start,end] range.
+ */
+export declare function scrollVisiblePositionIntoView(pagesContainer: HTMLElement | null, viewport: HTMLElement | null, pmPos: number): void;
+/**
+ * Resolve a viewport-space click coordinate to a PM document position,
+ * clamped to `doc.content.size`.
+ */
+export declare function resolvePos(pagesContainer: HTMLElement | null, view: EditorView | null, clientX: number, clientY: number): number | null;
+/**
+ * Double-click word selection — expand `pos` to its word bounds and
+ * hand the resulting range to `setPmSelection`.
+ */
+export declare function selectWord(pagesContainer: HTMLElement | null, pos: number, setPmSelection: (from: number, to: number) => void, hfSection?: "header" | "footer"): void;
+/**
+ * Triple-click paragraph selection — expand `pos` to the enclosing
+ * `.layout-paragraph` element's PM range.
+ */
+export declare function selectParagraph(pagesContainer: HTMLElement | null, pos: number, setPmSelection: (from: number, to: number) => void, hfSection?: "header" | "footer"): void;

package/dist/utils/fontOptions.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared FontOption shape + normaliser used by FontPicker components.
+ * @packageDocumentation
+ * @public
+ */
+export type FontOption = {
+    name: string;
+    fontFamily: string;
+    category?: "sans-serif" | "serif" | "monospace" | "other";
+};
+/**
+ * Normalize a `fontFamilies` prop (mix of strings and FontOption
+ * objects) into a uniform `FontOption[]`. Returns `undefined` for
+ * `undefined` input so callers fall back to their built-in defaults.
+ * Strings expand into the `'other'` group with no CSS fallback chain.
+ */
+export declare function normalizeFontFamilies(fontFamilies: ReadonlyArray<string | FontOption> | undefined): FontOption[] | undefined;
+/**
+ * Drop fonts whose names already appear in `existingNames` (case-insensitive),
+ * also deduping the input. Used by the toolbar's font picker to render the
+ * "Document fonts" group without repeating a font the built-in list covers.
+ *
+ * Ported from the upstream core util `utils/documentPickerFonts.ts`; folio-core
+ * has no equivalent, so it lives with the Vue adapter's font helpers.
+ */
+export declare function excludeFontsByName(fonts: readonly FontOption[] | undefined, existingNames: Iterable<string>): FontOption[];

package/dist/utils/hostFonts.d.ts

@@ -0,0 +1,25 @@
+import { FontDefinition } from '../components/DocxEditor/types';
+/** `FontFace` constructor inputs derived from a {@link FontDefinition}. */
+export type FontFaceInput = {
+    family: string;
+    source: string;
+    descriptors: FontFaceDescriptors;
+};
+/**
+ * Normalize the `fonts` prop into `FontFace` constructor inputs. Pure: no DOM
+ * work, so it is unit-testable. Entries that are not objects with non-empty
+ * string family/src are skipped (best-effort — never throw on host input); `src`
+ * becomes a CSS `url(...)` source string.
+ */
+export declare function toFontFaceInputs(fonts: ReadonlyArray<FontDefinition> | undefined): FontFaceInput[];
+/** The document's `FontFaceSet`, or `null` outside a DOM. */
+export declare function getDocumentFontSet(): FontFaceSet | null;
+/**
+ * Register the host's custom font faces with the browser via the `FontFace` API.
+ * No-op (returns `[]`) outside a DOM or when no valid fonts are given. Returns
+ * the faces that loaded successfully; each bad entry is skipped, never thrown.
+ * Pair with {@link removeFontFaces} to unregister on change/unmount.
+ */
+export declare function loadHostFontFaces(fonts: ReadonlyArray<FontDefinition> | undefined): Promise<FontFace[]>;
+/** Remove previously registered faces from the document font set. */
+export declare function removeFontFaces(faces: readonly FontFace[]): void;

package/dist/utils/imageClipboard.d.ts

@@ -0,0 +1,9 @@
+import { EditorView } from 'prosemirror-view';
+export declare function copyImageToClipboard(view: EditorView, pmPos: number): void;
+export declare function blobToDataUrl(blob: Blob): Promise<string>;
+export declare function loadImageDimensions(src: string): Promise<{
+    width: number;
+    height: number;
+}>;
+export declare function pasteFromClipboard(view: EditorView): Promise<void>;
+export declare function triggerReplaceImage(view: EditorView, pmPos: number): void;

package/dist/utils/index.d.ts

@@ -0,0 +1,13 @@
+export * from './autoScroll';
+export * from './cardStyles';
+export * from './colorMode';
+export * from './comments';
+export * from './cssTypes';
+export * from './fontOptions';
+export * from './listState';
+export * from './reportIssue';
+export * from './selectionHighlight';
+export * from './sidebarConstants';
+export * from './stylePreview';
+export * from './textSelection';
+export { findVerticalScrollParent, findVerticalScrollParentOrRoot, } from '@stll/folio-core/utils/findVerticalScrollParent';

package/dist/utils/listState.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Pure list-state helpers used by adapter toolbars to track whether the
+ * selection is in a bullet/numbered list and at what indent level.
+ * @packageDocumentation
+ * @public
+ */
+export type ListType = "bullet" | "numbered" | "none";
+export type ListState = {
+    type: ListType;
+    level: number;
+    isInList: boolean;
+    numId?: number | undefined;
+};
+export declare function createDefaultListState(): ListState;
+export declare function createBulletListState(level?: number, numId?: number): ListState;
+export declare function createNumberedListState(level?: number, numId?: number): ListState;
+export declare function isBulletListState(state: ListState | undefined): boolean;
+export declare function isNumberedListState(state: ListState | undefined): boolean;
+export declare function isAnyListState(state: ListState | undefined): boolean;
+export declare function getNextIndentLevel(currentLevel: number): number;
+export declare function getPreviousIndentLevel(currentLevel: number): number;
+export declare function toggleListType(state: ListState | undefined, targetType: ListType): ListState;

package/dist/utils/reportIssue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Framework-agnostic helper to open a pre-filled GitHub "new issue" URL for the
+ * Help > Report issue action. GitHub doesn't allow file attachments via URL
+ * params, so the body asks the user to drag-drop their DOCX onto the issue
+ * after it opens.
+ * @packageDocumentation
+ * @public
+ */
+export type ReportIssueEnv = {
+    userAgent?: string;
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    pageUrl?: string;
+};
+export declare function buildReportIssueUrl(env?: ReportIssueEnv): string;
+export declare function openReportIssue(env?: ReportIssueEnv): void;

package/dist/utils/selectionHighlight.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Selection highlight utilities.
+ *
+ * Custom visual highlighting for text selection that spans multiple runs, where
+ * the browser's native `::selection` pseudo-element renders inconsistently
+ * across elements with different backgrounds. Framework-agnostic DOM helpers:
+ * the adapter layer wires them to reactive state.
+ * @packageDocumentation
+ * @public
+ */
+/** Highlight rectangle representing a selected region, in pixels. */
+export type HighlightRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** Selection highlight configuration. */
+export type SelectionHighlightConfig = {
+    /** Background color for selection. */
+    backgroundColor: string;
+    /** Optional border color for selection. */
+    borderColor?: string;
+    /** Optional border radius, in pixels. */
+    borderRadius?: number;
+    /** Z-index for overlay. */
+    zIndex?: number;
+    /** Opacity for highlight. */
+    opacity?: number;
+    /** CSS `mix-blend-mode` for the overlay. */
+    mixBlendMode?: string;
+};
+/** Default selection highlight style (matches Word / Google Docs). */
+export declare const DEFAULT_SELECTION_STYLE: SelectionHighlightConfig;
+/** Get selection rectangles with adjacent-rect merging applied. */
+export declare function getMergedSelectionRects(containerElement?: HTMLElement | null): HighlightRect[];
+/** Whether there is an active, non-collapsed text selection. */
+export declare function hasActiveSelection(): boolean;
+/** Whether the current selection is within a specific element. */
+export declare function isSelectionWithin(element: HTMLElement): boolean;
+/** Inject selection highlight CSS into the document head. */
+export declare function injectSelectionStyles(config?: SelectionHighlightConfig): void;
+/** Whether selection styles are currently injected. */
+export declare function areSelectionStylesInjected(): boolean;

package/dist/utils/sidebarConstants.d.ts

@@ -0,0 +1,8 @@
+/** Sidebar geometry constants so the page-shift and card-gap math stays
+ *  consistent across adapters.
+ * @packageDocumentation
+ * @public */
+export declare const SIDEBAR_WIDTH = 340;
+export declare const SIDEBAR_PAGE_GAP = 12;
+export declare const SIDEBAR_DOCUMENT_SHIFT: number;
+export declare const MIN_CARD_GAP = 8;

package/dist/utils/stylePreview.d.ts

@@ -0,0 +1,53 @@
+import { Style } from '@stll/folio-core/types/document';
+/**
+ * Inline preview style for a paragraph-style dropdown item.
+ * @public
+ */
+export type StylePreviewProps = {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight?: "bold";
+    fontStyle?: "italic";
+    color?: string;
+};
+/**
+ * A resolved paragraph-style option (document order, with extracted visual
+ * fields). Adapters add their own localized label on top of `name`.
+ * @public
+ */
+export type ResolvedStyleOption = {
+    styleId: string;
+    name: string;
+    priority: number;
+    fontSize?: number | undefined;
+    bold?: boolean | undefined;
+    italic?: boolean | undefined;
+    color?: string | undefined;
+};
+/** Dropdown preview sizes (px) for well-known styles, matching Google Docs. @public */
+export declare const STYLE_PREVIEW_SIZES: Record<string, number>;
+/** Styles rendered bold in the dropdown preview by default. @public */
+export declare const STYLE_DEFAULT_BOLD: ReadonlySet<string>;
+/** Default preview text color (hex, no `#`) for styles that don't set one. @public */
+export declare const STYLE_DEFAULT_COLOR: Record<string, string>;
+/** Google-Docs heading preview color. @public */
+export declare const HEADING_COLOR = "#4a6c8c";
+/**
+ * Build the inline preview style for a style option. `fontSize` is in
+ * half-points (OOXML); known styles use {@link STYLE_PREVIEW_SIZES} instead.
+ * @public
+ */
+export declare function getStylePreviewProps(input: {
+    styleId: string;
+    fontSize?: number | undefined;
+    bold?: boolean | undefined;
+    italic?: boolean | undefined;
+    color?: string | undefined;
+}): StylePreviewProps;
+/**
+ * Filter the document's styles to the visible paragraph styles, extract their
+ * visual fields, and sort by UI priority: the list a toolbar style picker
+ * shows. Returns `[]` when there are no styles (adapters fall back to presets).
+ * @public
+ */
+export declare function resolveParagraphStyleOptions(styles: Style[] | undefined): ResolvedStyleOption[];

package/dist/utils/textSelection.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Text Selection Utilities
+ *
+ * Pure word-level boundary detection used for double-click (word) selection.
+ * The DOM-driven selection + multi-click helpers live in the adapter layer.
+ * @packageDocumentation
+ * @public
+ */
+/**
+ * Check if a character is a word character
+ */
+export declare function isWordCharacter(char: string | undefined): boolean;
+/**
+ * Check if a character is whitespace
+ */
+export declare function isWhitespace(char: string | undefined): boolean;
+/**
+ * Find word boundaries around a position in text.
+ * Returns [startIndex, endIndex] inclusive start, exclusive end.
+ */
+export declare function findWordBoundaries(text: string, position: number): [number, number];
+/**
+ * Get the word at a position in text
+ */
+export declare function getWordAt(text: string, position: number): string;
+/**
+ * Word selection result
+ */
+export type WordSelectionResult = {
+    /** The selected word */
+    word: string;
+    /** Start index in the text (inclusive) */
+    startIndex: number;
+    /** End index in the text (exclusive) */
+    endIndex: number;
+};
+/**
+ * Find the word at a position and return detailed info
+ */
+export declare function findWordAt(text: string, position: number): WordSelectionResult;

package/dist/zIndex-BY0qa8Au.js

@@ -0,0 +1,12 @@
+//#region src/styles/zIndex.ts
+var e = {
+	selectionOverlay: 10,
+	decorationLayer: 11,
+	imageOverlay: 15,
+	hfInlineEditor: 10,
+	ruler: 30,
+	dropdown: 100,
+	contextMenu: 1e4
+};
+//#endregion
+export { e as t };

package/dist/zIndex-dFsQbASx.cjs

@@ -0,0 +1 @@
+var e={selectionOverlay:10,decorationLayer:11,imageOverlay:15,hfInlineEditor:10,ruler:30,dropdown:100,contextMenu:1e4};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@stll/folio-vue",
+  "version": "0.2.0",
+  "description": "Vue 3 editor for folio: a Word-document (.docx) editor for the browser, built on @stll/folio-core and ProseMirror.",
+  "keywords": [
+    "document-editor",
+    "docx",
+    "editor",
+    "ooxml",
+    "prosemirror",
+    "vue",
+    "word",
+    "wysiwyg"
+  ],
+  "homepage": "https://github.com/stella/folio",
+  "bugs": {
+    "url": "https://github.com/stella/folio/issues"
+  },
+  "license": "Apache-2.0",
+  "author": "STLL",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stella/folio.git",
+    "directory": "packages/vue"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js",
+      "require": "./dist/ui.cjs"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables.js",
+      "require": "./dist/composables.cjs"
+    },
+    "./dialogs": {
+      "types": "./dist/components/dialogs/index.d.ts",
+      "import": "./dist/dialogs.js",
+      "require": "./dist/dialogs.cjs"
+    },
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "import": "./dist/styles.js",
+      "require": "./dist/styles.cjs"
+    },
+    "./messages": {
+      "types": "./dist/i18n/messages.d.ts",
+      "import": "./dist/messages.js",
+      "require": "./dist/messages.cjs"
+    },
+    "./editor.css": "./dist/folio-vue.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && vite build",
+    "prepack": "bun run build",
+    "pack:dry-run": "bun pm pack --dry-run",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.build.json",
+    "test": "bun test src"
+  },
+  "dependencies": {
+    "@stll/folio-core": "^0.2.0",
+    "better-result": "2.9.2",
+    "use-intl": "^4.13.0",
+    "yjs": "^13.6.31"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "4.3.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "tailwindcss": "4.3.1",
+    "vite": "8.0.16",
+    "vite-plugin-dts": "^5.0.3",
+    "vue": "^3.5.39",
+    "vue-tsc": "^3.3.6"
+  },
+  "peerDependencies": {
+    "prosemirror-history": "^1.4.0",
+    "prosemirror-model": "^1.19.4",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-view": "^1.41.6",
+    "vue": "^3.3.0"
+  }
+}