@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/uiTheme.svelte.d.ts

@@ -0,0 +1,86 @@
+/** Brand colours. Accepts `#rgb`, `#rrggbb` or `rgb(r, g, b)` strings. */
+export interface ThemeColors {
+    /** Dark brand colour. Used for solid buttons, headings and active states. */
+    primary: string;
+    /** Darker shade of `primary` for pressed states. Derived from `primary` when omitted. */
+    primaryDark?: string;
+    /** Text colour on top of `primary`. Defaults to white. */
+    primaryContrast?: string;
+    /** Light brand colour. Used for highlights, hovers and as the dark-mode accent. */
+    accent: string;
+    /** Darker shade of `accent`, used for hover text on light surfaces. Derived when omitted. */
+    accentDark?: string;
+    /** Text colour on top of `accent`. Defaults to `primary`. */
+    accentContrast?: string;
+    /** Light supporting colour. Defaults to `accent` when omitted. */
+    tertiary?: string;
+    /** Darker shade of `tertiary`, used for links and subtle text. Derived when omitted. */
+    tertiaryDark?: string;
+    /** Lighter shade of `tertiary`, used for pressed states on light buttons. Derived when omitted. */
+    tertiaryLight?: string;
+    /** Link colour. Defaults to `tertiaryDark`. */
+    link?: string;
+    /** Link hover colour. Defaults to `accentDark`. */
+    linkHover?: string;
+}
+/**
+ * Settings that can be given per colour mode. Used as the base (light) config and,
+ * with every field optional, as the `dark` override block.
+ */
+export interface ThemeModeConfig {
+    /** Brand colours. In the `dark` block any subset may be given; shades are derived per colour. */
+    colors?: Partial<ThemeColors>;
+    /**
+     * CSS `font-family` value applied to the whole UI, e.g. `"'Inter', system-ui, sans-serif"`.
+     * Loading the font itself (`@font-face` or a `<link>`) is up to the consuming app.
+     */
+    fontFamily?: string;
+    /** Raw SVG markup for the `Logo` component. Use `fill="currentColor"` so it follows the theme. */
+    logo?: string;
+    /**
+     * Any additional custom properties to set, e.g. `{ '--page-bg': '#fff' }`.
+     * Useful for the surface tokens that are not part of `ThemeColors`.
+     */
+    variables?: Record<string, string>;
+}
+export interface ThemeConfig extends ThemeModeConfig {
+    /** Brand colours for light mode (and dark mode unless overridden in `dark`). */
+    colors?: ThemeColors;
+    /**
+     * Overrides applied while dark mode is active (`.dark` on `<html>`). Anything not
+     * given here falls back to the light-mode value.
+     */
+    dark?: ThemeModeConfig;
+}
+/** Reactive brand state consumed by components such as `Logo`. */
+export declare const brandState: {
+    /** Logo for the active colour mode: the dark logo when set and dark mode is on, else the light one. */
+    readonly logo: string | undefined;
+};
+/**
+ * Set (or clear) the logo used by the `Logo` component. Pass a second argument to
+ * register a different logo for dark mode.
+ */
+export declare function setLogo(svg: string | undefined, darkSvg?: string): void;
+/**
+ * Build the `--ui-*` custom property map for one colour mode. Only the groups whose
+ * base colour is present are emitted, so a partial `dark` block overrides just what
+ * it names. Unknown colour formats are passed through unchanged (their `-rgb`
+ * variants are skipped).
+ */
+export declare function themeToVariables(config: ThemeModeConfig): Record<string, string>;
+/**
+ * Render a theme config as CSS: a light-mode rule on `selector` (default `:root`)
+ * and, when `dark` overrides are given, a second rule scoped to the `.dark` class.
+ * Put the result in a `<style>` tag in `app.html` so the brand is present before
+ * JavaScript runs.
+ */
+export declare function themeToCss(config: ThemeConfig, selector?: string): string;
+/**
+ * Apply a theme config at runtime. Injects (or replaces) a `<style>` element in
+ * `<head>` containing the light and dark rules, and registers the logo(s).
+ * Safe to call during SSR (the style injection is skipped).
+ */
+export declare function applyTheme(config: ThemeConfig): void;
+/** Remove the theme rules injected by `applyTheme` and clear the logos. */
+export declare function resetTheme(): void;

package/dist/uiTheme.svelte.js

@@ -0,0 +1,214 @@
+/**
+ * Brand / theme configuration for PlaceholderUI.
+ *
+ * The library is styled entirely through `--ui-*` CSS custom properties (see
+ * `app.css`). You can override those in your own stylesheet, or describe your
+ * brand once as a {@link ThemeConfig} and let the library generate them:
+ *
+ * ```ts
+ * import { applyTheme } from '@placeholderco/placeholder-ui';
+ * import logo from './logo.svg?raw';
+ *
+ * applyTheme({
+ *   colors: { primary: '#1e3a5f', accent: '#93c5fd', tertiary: '#a5f3fc' },
+ *   fontFamily: "'Inter', system-ui, sans-serif",
+ *   logo,
+ *   // optional overrides used while the `.dark` class is on <html>
+ *   dark: { colors: { accent: '#bfdbfe' } }
+ * });
+ * ```
+ *
+ * For server-side rendering (and to avoid a flash of the default palette) put
+ * `themeToCss(config)` into a `<style>` tag in your `app.html` / root layout.
+ */
+import { themeState } from './theme.svelte.js';
+// ============================================
+// Brand state (logo)
+// ============================================
+let lightLogo = $state(undefined);
+let darkLogo = $state(undefined);
+/** Reactive brand state consumed by components such as `Logo`. */
+export const brandState = {
+    /** Logo for the active colour mode: the dark logo when set and dark mode is on, else the light one. */
+    get logo() {
+        return themeState.isDarkMode ? (darkLogo ?? lightLogo) : lightLogo;
+    }
+};
+/**
+ * Set (or clear) the logo used by the `Logo` component. Pass a second argument to
+ * register a different logo for dark mode.
+ */
+export function setLogo(svg, darkSvg) {
+    lightLogo = svg;
+    darkLogo = darkSvg;
+}
+function parseColor(input) {
+    const value = input.trim();
+    const hex = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex) {
+        let h = hex[1];
+        if (h.length === 3)
+            h = h
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        const n = parseInt(h, 16);
+        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    }
+    const rgb = value.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i);
+    if (rgb)
+        return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    return undefined;
+}
+function toHex([r, g, b]) {
+    return '#' + [r, g, b].map((c) => Math.round(clamp(c)).toString(16).padStart(2, '0')).join('');
+}
+function clamp(n) {
+    return Math.min(255, Math.max(0, n));
+}
+/** Mix a colour towards black (`amount` 0..1). */
+function darken(rgb, amount) {
+    return rgb.map((c) => c * (1 - amount));
+}
+/** Mix a colour towards white (`amount` 0..1). */
+function lighten(rgb, amount) {
+    return rgb.map((c) => c + (255 - c) * amount);
+}
+// ============================================
+// Config -> CSS variables
+// ============================================
+/**
+ * Build the `--ui-*` custom property map for one colour mode. Only the groups whose
+ * base colour is present are emitted, so a partial `dark` block overrides just what
+ * it names. Unknown colour formats are passed through unchanged (their `-rgb`
+ * variants are skipped).
+ */
+export function themeToVariables(config) {
+    const vars = {};
+    const c = config.colors;
+    if (c) {
+        if (c.primary) {
+            const primary = parseColor(c.primary);
+            setColor(vars, 'primary', c.primary, primary);
+            vars['--ui-primary-dark'] =
+                c.primaryDark ?? (primary ? toHex(darken(primary, 0.35)) : c.primary);
+            vars['--ui-primary-contrast'] = c.primaryContrast ?? '#ffffff';
+        }
+        else {
+            if (c.primaryDark)
+                vars['--ui-primary-dark'] = c.primaryDark;
+            if (c.primaryContrast)
+                vars['--ui-primary-contrast'] = c.primaryContrast;
+        }
+        if (c.accent) {
+            const accent = parseColor(c.accent);
+            setColor(vars, 'accent', c.accent, accent);
+            vars['--ui-accent-dark'] = c.accentDark ?? (accent ? toHex(darken(accent, 0.5)) : c.accent);
+            vars['--ui-accent-contrast'] = c.accentContrast ?? 'var(--ui-primary)';
+        }
+        else {
+            if (c.accentDark)
+                vars['--ui-accent-dark'] = c.accentDark;
+            if (c.accentContrast)
+                vars['--ui-accent-contrast'] = c.accentContrast;
+        }
+        const tertiarySource = c.tertiary ?? c.accent;
+        if (tertiarySource) {
+            const tertiary = parseColor(tertiarySource);
+            setColor(vars, 'tertiary', tertiarySource, tertiary);
+            setTertiaryDark(vars, c.tertiaryDark ?? (tertiary ? toHex(darken(tertiary, 0.45)) : tertiarySource));
+            vars['--ui-tertiary-light'] =
+                c.tertiaryLight ?? (tertiary ? toHex(lighten(tertiary, 0.5)) : tertiarySource);
+        }
+        else {
+            if (c.tertiaryDark)
+                setTertiaryDark(vars, c.tertiaryDark);
+            if (c.tertiaryLight)
+                vars['--ui-tertiary-light'] = c.tertiaryLight;
+        }
+        if (c.link)
+            vars['--ui-link-color'] = c.link;
+        if (c.linkHover)
+            vars['--ui-link-hover-color'] = c.linkHover;
+    }
+    if (config.fontFamily)
+        vars['--ui-font-family'] = config.fontFamily;
+    if (config.variables)
+        Object.assign(vars, config.variables);
+    return vars;
+}
+function setColor(vars, name, raw, rgb) {
+    if (rgb) {
+        vars[`--ui-${name}-rgb`] = rgb.join(' ');
+        vars[`--ui-${name}-rgbc`] = rgb.join(', ');
+        vars[`--ui-${name}`] = `rgb(var(--ui-${name}-rgb))`;
+    }
+    else {
+        vars[`--ui-${name}`] = raw;
+    }
+}
+function setTertiaryDark(vars, value) {
+    const rgb = parseColor(value);
+    if (rgb) {
+        vars['--ui-tertiary-dark-rgbc'] = rgb.join(', ');
+        vars['--ui-tertiary-dark'] = 'rgb(var(--ui-tertiary-dark-rgbc))';
+    }
+    else {
+        vars['--ui-tertiary-dark'] = value;
+    }
+}
+function toRule(selector, vars) {
+    const body = Object.entries(vars)
+        .map(([k, v]) => `\t${k}: ${v};`)
+        .join('\n');
+    return `${selector} {\n${body}\n}`;
+}
+/** Selector for the dark-mode block: `.dark` sits on `<html>`, so root selectors get it appended. */
+function darkSelector(selector) {
+    return /^(html|:root)/.test(selector) ? `${selector}.dark` : `.dark ${selector}`;
+}
+/**
+ * Render a theme config as CSS: a light-mode rule on `selector` (default `:root`)
+ * and, when `dark` overrides are given, a second rule scoped to the `.dark` class.
+ * Put the result in a `<style>` tag in `app.html` so the brand is present before
+ * JavaScript runs.
+ */
+export function themeToCss(config, selector = ':root') {
+    const rules = [toRule(selector, themeToVariables(config))];
+    if (config.dark) {
+        const darkVars = themeToVariables(config.dark);
+        if (Object.keys(darkVars).length)
+            rules.push(toRule(darkSelector(selector), darkVars));
+    }
+    return rules.join('\n\n');
+}
+// ============================================
+// Runtime application
+// ============================================
+const STYLE_ID = 'placeholderui-theme';
+/**
+ * Apply a theme config at runtime. Injects (or replaces) a `<style>` element in
+ * `<head>` containing the light and dark rules, and registers the logo(s).
+ * Safe to call during SSR (the style injection is skipped).
+ */
+export function applyTheme(config) {
+    if (config.logo !== undefined || config.dark?.logo !== undefined) {
+        setLogo(config.logo, config.dark?.logo);
+    }
+    if (typeof document === 'undefined')
+        return;
+    let style = document.getElementById(STYLE_ID);
+    if (!style) {
+        style = document.createElement('style');
+        style.id = STYLE_ID;
+        document.head.appendChild(style);
+    }
+    style.textContent = themeToCss(config);
+}
+/** Remove the theme rules injected by `applyTheme` and clear the logos. */
+export function resetTheme() {
+    setLogo(undefined);
+    if (typeof document === 'undefined')
+        return;
+    document.getElementById(STYLE_ID)?.remove();
+}

package/dist/util/DateFunctions.js

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs from "./dayjs.js";
 export function getDateInXTimeAgo(date) {
     const d = dayjs(date);
     const now = dayjs();

package/dist/util/DragDrop.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Low-level drag/drop primitives for the UI library.
+ *
+ * Two Svelte actions — `draggable` and `droppable` — communicate via a shared
+ * in-memory drag context. The HTML5 DnD API's dataTransfer is intentionally NOT
+ * used to carry rich payloads (it stringifies and is unreadable during dragover),
+ * so the context lives in module scope and any droppable can inspect it.
+ */
+export interface DragContext<T = unknown> {
+    /** Identifier of the source widget — e.g. the Sortable instance id */
+    source: string;
+    /** Application payload (item, index, ids, etc.) */
+    payload: T;
+    /** Logical type used by droppables to filter what they accept */
+    type: string;
+}
+export declare function getActiveDrag(): DragContext | null;
+export interface DraggableOptions<T = unknown> {
+    /** Application payload to carry */
+    payload: T;
+    /** Logical type — droppables filter by this */
+    type?: string;
+    /** Source widget identifier */
+    source?: string;
+    /** When true, drag is suppressed */
+    disabled?: boolean;
+    /** Optional CSS selector — drag only initiates if pointerdown hit this element inside the node */
+    handle?: string;
+    onDragStart?: (ctx: DragContext<T>, event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+}
+export declare function draggable<T>(node: HTMLElement, opts: DraggableOptions<T>): {
+    update(next: DraggableOptions<T>): void;
+    destroy(): void;
+};
+export interface DroppableOptions<T = unknown> {
+    /** Accept only these logical types. Omit to accept any active drag. */
+    accepts?: string | string[];
+    /** Custom predicate — return false to ignore the active drag */
+    canDrop?: (ctx: DragContext<T>) => boolean;
+    disabled?: boolean;
+    onDragEnter?: (ctx: DragContext<T>, event: DragEvent) => void;
+    onDragOver?: (ctx: DragContext<T>, event: DragEvent) => void;
+    onDragLeave?: (ctx: DragContext<T>, event: DragEvent) => void;
+    onDrop?: (ctx: DragContext<T>, event: DragEvent) => void;
+}
+export declare function droppable<T>(node: HTMLElement, opts: DroppableOptions<T>): {
+    update(next: DroppableOptions<T>): void;
+    destroy(): void;
+};

package/dist/util/DragDrop.js

@@ -0,0 +1,154 @@
+/**
+ * Low-level drag/drop primitives for the UI library.
+ *
+ * Two Svelte actions — `draggable` and `droppable` — communicate via a shared
+ * in-memory drag context. The HTML5 DnD API's dataTransfer is intentionally NOT
+ * used to carry rich payloads (it stringifies and is unreadable during dragover),
+ * so the context lives in module scope and any droppable can inspect it.
+ */
+let activeDrag = null;
+export function getActiveDrag() {
+    return activeDrag;
+}
+/**
+ * The element the browser chose as the drag source: the nearest draggable ancestor
+ * of the event target. Drag events bubble, so a draggable's listeners also receive
+ * events from drags that started on a nested draggable — those are not ours to
+ * claim (that would overwrite the shared drag context) or cancel via preventDefault.
+ * Native draggables without the attribute (img, a[href]) resolve to their host node,
+ * so dragging those still starts the host item's drag.
+ */
+function dragSourceOf(e) {
+    const target = e.target;
+    return target?.closest?.('[draggable="true"]') ?? null;
+}
+export function draggable(node, opts) {
+    let options = opts;
+    let handleActive = !options.handle;
+    function onPointerDown(e) {
+        if (!options.handle) {
+            handleActive = true;
+            return;
+        }
+        const target = e.target;
+        handleActive = !!target?.closest(options.handle);
+    }
+    function onDragStart(e) {
+        if (dragSourceOf(e) !== node)
+            return;
+        if (options.disabled || !handleActive) {
+            e.preventDefault();
+            return;
+        }
+        const ctx = {
+            source: options.source ?? '',
+            payload: options.payload,
+            type: options.type ?? 'default'
+        };
+        activeDrag = ctx;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            // Firefox requires data to be set to initiate drag
+            try {
+                e.dataTransfer.setData('text/plain', '');
+            }
+            catch {
+                /* ignore */
+            }
+        }
+        node.classList.add('pui-dragging');
+        options.onDragStart?.(ctx, e);
+    }
+    function onDragEnd(e) {
+        if (dragSourceOf(e) !== node)
+            return;
+        node.classList.remove('pui-dragging');
+        options.onDragEnd?.(e);
+        activeDrag = null;
+    }
+    node.setAttribute('draggable', 'true');
+    node.addEventListener('pointerdown', onPointerDown);
+    node.addEventListener('dragstart', onDragStart);
+    node.addEventListener('dragend', onDragEnd);
+    return {
+        update(next) {
+            options = next;
+            if (!options.handle)
+                handleActive = true;
+        },
+        destroy() {
+            node.removeEventListener('pointerdown', onPointerDown);
+            node.removeEventListener('dragstart', onDragStart);
+            node.removeEventListener('dragend', onDragEnd);
+        }
+    };
+}
+export function droppable(node, opts) {
+    let options = opts;
+    let depth = 0;
+    function shouldAccept() {
+        if (!activeDrag || options.disabled)
+            return false;
+        if (options.accepts) {
+            const list = Array.isArray(options.accepts) ? options.accepts : [options.accepts];
+            if (!list.includes(activeDrag.type))
+                return false;
+        }
+        if (options.canDrop && !options.canDrop(activeDrag))
+            return false;
+        return true;
+    }
+    function onDragEnter(e) {
+        if (!shouldAccept())
+            return;
+        depth++;
+        e.preventDefault();
+        if (depth === 1) {
+            node.classList.add('pui-drop-over');
+            options.onDragEnter?.(activeDrag, e);
+        }
+    }
+    function onDragOver(e) {
+        if (!shouldAccept())
+            return;
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'move';
+        options.onDragOver?.(activeDrag, e);
+    }
+    function onDragLeave(e) {
+        if (!shouldAccept())
+            return;
+        depth--;
+        if (depth <= 0) {
+            depth = 0;
+            node.classList.remove('pui-drop-over');
+            options.onDragLeave?.(activeDrag, e);
+        }
+    }
+    function onDrop(e) {
+        if (!shouldAccept())
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        depth = 0;
+        node.classList.remove('pui-drop-over');
+        const ctx = activeDrag;
+        options.onDrop?.(ctx, e);
+    }
+    node.addEventListener('dragenter', onDragEnter);
+    node.addEventListener('dragover', onDragOver);
+    node.addEventListener('dragleave', onDragLeave);
+    node.addEventListener('drop', onDrop);
+    return {
+        update(next) {
+            options = next;
+        },
+        destroy() {
+            node.removeEventListener('dragenter', onDragEnter);
+            node.removeEventListener('dragover', onDragOver);
+            node.removeEventListener('dragleave', onDragLeave);
+            node.removeEventListener('drop', onDrop);
+        }
+    };
+}

package/dist/util/NavigateTo.js

@@ -1,5 +1,5 @@
 import { goto } from "$app/navigation";
-import { base } from "$app/paths";
+import { resolve } from "$app/paths";
 export function navigateTo(url) {
-    goto(base + url);
+    goto(resolve(url));
 }

package/dist/util/dayjs.d.ts

@@ -0,0 +1,4 @@
+import dayjs from 'dayjs';
+export { dayjs };
+export default dayjs;
+export type { Dayjs, ConfigType, OpUnitType, QUnitType, UnitType } from 'dayjs';

package/dist/util/dayjs.js

@@ -0,0 +1,15 @@
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat.js';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+// Configure the shared dayjs singleton. dayjs is a singleton, so extending it
+// here applies globally wherever this module is loaded: every date component
+// gets the same setup, and consumers can import a ready-to-use instance instead
+// of installing and configuring dayjs themselves.
+// - customParseFormat: used internally — the date/time pickers parse input
+//   against format arrays such as ['D MMMM YYYY', 'DD/MM/YYYY'].
+// - advancedFormat: not used by this library's own components; bundled as a
+//   convenience so consumers get tokens like Do / Q / X out of the box.
+dayjs.extend(advancedFormat);
+dayjs.extend(customParseFormat);
+export { dayjs };
+export default dayjs;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "1.0.12",
-  "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support",
+  "version": "2.0.0",
+  "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
+  "author": "Placeholderco",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/PlaceholderUI/placeholder-ui.git"
@@ -19,16 +20,21 @@
     "design-system",
     "css-variables",
     "theming",
-    "dark-mode"
+    "dark-mode",
+    "tiptap",
+    "codemirror"
   ],
-  "author": "Placeholderco",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "files": [
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/util/dayjs.js"
   ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -38,44 +44,78 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
-    "./styles": {
-      "import": "./dist/styles/index.css"
-    }
+    "./app.css": "./dist/app.css",
+    "./bootstrap.css": "./dist/bootstrap.min.css"
   },
   "peerDependencies": {
+    "@sveltejs/kit": "^2.26.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.55.0",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.3.1",
-    "jsdom": "^28.1.0",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.5.1",
-    "publint": "^0.3.18",
-    "svelte": "^5.53.12",
-    "svelte-check": "^4.4.5",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.0"
+    "@sveltejs/kit": "^2.70.3",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@types/node": "^26.2.0",
+    "globals": "^17.11.0",
+    "prettier": "^3.9.6",
+    "prettier-plugin-svelte": "^4.1.1",
+    "publint": "^0.3.24",
+    "rimraf": "^6.1.3",
+    "svelte": "^5.56.10",
+    "svelte-check": "^4.7.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2"
   },
   "dependencies": {
-    "dayjs": "^1.11.20",
-    "svelte-sonner": "^1.1.0"
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/legacy-modes": "^6.5.3",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.9",
+    "@lezer/highlight": "^1.2.3",
+    "@tiptap/core": "^3.30.3",
+    "@tiptap/extension-bubble-menu": "^3.30.3",
+    "@tiptap/extension-code-block": "^3.30.3",
+    "@tiptap/extension-collaboration": "^3.30.3",
+    "@tiptap/extension-collaboration-caret": "^3.30.3",
+    "@tiptap/extension-color": "^3.30.3",
+    "@tiptap/extension-image": "^3.30.3",
+    "@tiptap/extension-link": "^3.30.3",
+    "@tiptap/extension-placeholder": "^3.30.3",
+    "@tiptap/extension-subscript": "^3.30.3",
+    "@tiptap/extension-superscript": "^3.30.3",
+    "@tiptap/extension-table": "^3.30.3",
+    "@tiptap/extension-text-align": "^3.30.3",
+    "@tiptap/extension-text-style": "^3.30.3",
+    "@tiptap/extension-underline": "^3.30.3",
+    "@tiptap/pm": "^3.30.3",
+    "@tiptap/starter-kit": "^3.30.3",
+    "dayjs": "^1.11.23",
+    "svelte-sonner": "^1.2.1",
+    "yjs": "^13.6.32"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && npm run prepack",
+    "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",
-    "test": "vitest run"
+    "clean": "rimraf dist build .svelte-kit",
+    "publish:package": "pnpm publish --access public"
   }
 }