@r2digisolutions/components 0.1.1

package/dist/utils/markdown.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Lightweight GFM-ish markdown → HTML (no deps).
+ * Escapes HTML by default; safe for untrusted source.
+ */
+export declare function escapeHtml(s: string): string;
+/** Stable heading id for TOC / in-page anchors */
+export declare function slugifyHeading(text: string): string;
+/**
+ * Split a markdown table row on `|`, ignoring pipes inside `inline code`
+ * and treating `\|` as a literal pipe.
+ */
+export declare function splitTableRow(row: string): string[];
+/** Inline markdown → HTML. */
+export declare function renderInline(text: string): string;
+export type MarkdownRenderOptions = {
+    prefix?: string;
+};
+/**
+ * Convert markdown source to HTML string.
+ */
+export declare function renderMarkdown(source: string, _options?: MarkdownRenderOptions): string;

package/dist/utils/markdown.js

@@ -0,0 +1,295 @@
+/**
+ * Lightweight GFM-ish markdown → HTML (no deps).
+ * Escapes HTML by default; safe for untrusted source.
+ */
+export function escapeHtml(s) {
+    return s
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/** Stable heading id for TOC / in-page anchors */
+export function slugifyHeading(text) {
+    return text
+        .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/[*_~]+/g, '')
+        .trim()
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^a-z0-9\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '') || 'section';
+}
+function sanitizeUrl(url) {
+    const trimmed = url.trim().replace(/^<|>$/g, '');
+    if (/^(https?:|mailto:|tel:|#|\/)/i.test(trimmed))
+        return trimmed;
+    return '#';
+}
+/**
+ * Split a markdown table row on `|`, ignoring pipes inside `inline code`
+ * and treating `\|` as a literal pipe.
+ */
+export function splitTableRow(row) {
+    const cells = [];
+    let cur = '';
+    let inCode = false;
+    let raw = row.trim();
+    if (raw.startsWith('|'))
+        raw = raw.slice(1);
+    if (raw.endsWith('|'))
+        raw = raw.slice(0, -1);
+    for (let i = 0; i < raw.length; i++) {
+        const ch = raw[i];
+        if (ch === '`') {
+            inCode = !inCode;
+            cur += ch;
+            continue;
+        }
+        if (!inCode && ch === '\\' && raw[i + 1] === '|') {
+            cur += '|';
+            i += 1;
+            continue;
+        }
+        if (ch === '|' && !inCode) {
+            cells.push(cur.trim());
+            cur = '';
+            continue;
+        }
+        cur += ch;
+    }
+    cells.push(cur.trim());
+    return cells;
+}
+/** Inline markdown → HTML. */
+export function renderInline(text) {
+    const tokens = [];
+    const protect = (html) => {
+        const id = tokens.length;
+        tokens.push(html);
+        return `\uE000${id}\uE001`;
+    };
+    let s = text;
+    // Images — match on raw text BEFORE escaping quotes in titles
+    s = s.replace(/!\[([^\]]*)\]\(\s*<?([^\s)>]+)>?(?:\s+(?:"([^"]*)"|'([^']*)'))?\s*\)/g, (_, alt, url, titleDouble, titleSingle) => {
+        const title = titleDouble ?? titleSingle;
+        const t = title ? ` title="${escapeHtml(title)}"` : '';
+        return protect(`<img class="md-img" src="${escapeHtml(sanitizeUrl(url))}" alt="${escapeHtml(alt)}"${t} loading="lazy" />`);
+    });
+    // Links
+    s = s.replace(/\[([^\]]+)\]\(\s*<?([^\s)>]+)>?(?:\s+(?:"([^"]*)"|'([^']*)'))?\s*\)/g, (_, label, url, titleDouble, titleSingle) => {
+        const title = titleDouble ?? titleSingle;
+        const t = title ? ` title="${escapeHtml(title)}"` : '';
+        return protect(`<a class="md-a" href="${escapeHtml(sanitizeUrl(url))}" rel="noopener noreferrer" target="_blank"${t}>${escapeHtml(label)}</a>`);
+    });
+    // Inline code (protect before escaping)
+    s = s.replace(/`([^`]+)`/g, (_, code) => protect(`<code class="md-code">${escapeHtml(code)}</code>`));
+    // Escape the remaining plain text (placeholders use private-use chars)
+    s = escapeHtml(s);
+    // Autolink bare URLs in escaped text
+    s = s.replace(/(^|[\s(])(https?:\/\/[^\s<&]+)/g, (_, pre, url) => {
+        const clean = url.replace(/[.,;:!?)]+$/, '');
+        const trail = url.slice(clean.length);
+        return `${pre}${protect(`<a class="md-a" href="${escapeHtml(sanitizeUrl(clean))}" rel="noopener noreferrer" target="_blank">${escapeHtml(clean)}</a>`)}${trail}`;
+    });
+    // Bold + italic
+    s = s.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
+    s = s.replace(/___([^_]+)___/g, '<strong><em>$1</em></strong>');
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[^*\w])\*([^*]+)\*(?!\*)/g, '$1<em>$2</em>');
+    s = s.replace(/(^|[^_\w])_([^_]+)_(?!_)/g, '$1<em>$2</em>');
+    s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    // Restore protected HTML
+    s = s.replace(/\uE000(\d+)\uE001/g, (_, id) => tokens[Number(id)] ?? '');
+    return s;
+}
+/**
+ * Convert markdown source to HTML string.
+ */
+export function renderMarkdown(source, _options = {}) {
+    const lines = source.replace(/\r\n/g, '\n').split('\n');
+    const out = [];
+    let i = 0;
+    const usedIds = new Map();
+    const uniqueId = (raw) => {
+        const base = slugifyHeading(raw);
+        const count = usedIds.get(base) ?? 0;
+        usedIds.set(base, count + 1);
+        return count === 0 ? base : `${base}-${count + 1}`;
+    };
+    let inCode = false;
+    let codeLang = '';
+    let codeBuf = [];
+    let listKind = null;
+    const closeList = () => {
+        if (listKind === 'ul' || listKind === 'task')
+            out.push('</ul>');
+        if (listKind === 'ol')
+            out.push('</ol>');
+        listKind = null;
+    };
+    const openList = (kind) => {
+        if (listKind === kind)
+            return;
+        closeList();
+        listKind = kind;
+        if (kind === 'ol')
+            out.push('<ol class="md-ol">');
+        else if (kind === 'task')
+            out.push('<ul class="md-task">');
+        else
+            out.push('<ul class="md-ul">');
+    };
+    const isSepRow = (line) => /^\s*\|?(\s*:?-+:?\s*\|)+\s*:?-+:?\s*\|?\s*$/.test(line) ||
+        /^\s*\|?[\s:|-]+\|[\s:|-]+\|?\s*$/.test(line);
+    while (i < lines.length) {
+        const line = lines[i];
+        // Fenced code
+        const fence = line.match(/^```([\w-]*)\s*$/);
+        if (fence) {
+            if (inCode) {
+                const lang = codeLang ? ` data-lang="${escapeHtml(codeLang)}"` : '';
+                const label = codeLang
+                    ? `<div class="md-pre-label">${escapeHtml(codeLang)}</div>`
+                    : '';
+                out.push(`<div class="md-pre-wrap">${label}<pre class="md-pre"${lang}><code>${escapeHtml(codeBuf.join('\n'))}</code></pre></div>`);
+                codeBuf = [];
+                codeLang = '';
+                inCode = false;
+            }
+            else {
+                closeList();
+                inCode = true;
+                codeLang = fence[1] ?? '';
+            }
+            i += 1;
+            continue;
+        }
+        if (inCode) {
+            codeBuf.push(line);
+            i += 1;
+            continue;
+        }
+        // Horizontal rule
+        if (/^(\*{3,}|-{3,}|_{3,})\s*$/.test(line)) {
+            closeList();
+            out.push('<hr class="md-hr" />');
+            i += 1;
+            continue;
+        }
+        // Table
+        if (line.includes('|') && i + 1 < lines.length && isSepRow(lines[i + 1])) {
+            closeList();
+            const headers = splitTableRow(line);
+            const aligns = splitTableRow(lines[i + 1]).map((cell) => {
+                const left = cell.startsWith(':');
+                const right = cell.endsWith(':');
+                if (left && right)
+                    return 'center';
+                if (right)
+                    return 'right';
+                return 'left';
+            });
+            i += 2;
+            const rows = [];
+            while (i < lines.length && lines[i].includes('|') && lines[i].trim() && !isSepRow(lines[i])) {
+                rows.push(splitTableRow(lines[i]));
+                i += 1;
+            }
+            const th = headers
+                .map((h, idx) => `<th class="md-th" style="text-align:${aligns[idx] ?? 'left'}">${renderInline(h)}</th>`)
+                .join('');
+            const body = rows
+                .map((row) => {
+                const tds = headers
+                    .map((_, idx) => `<td class="md-td" style="text-align:${aligns[idx] ?? 'left'}">${renderInline(row[idx] ?? '')}</td>`)
+                    .join('');
+                return `<tr>${tds}</tr>`;
+            })
+                .join('');
+            out.push(`<div class="md-table-wrap"><table class="md-table"><thead><tr>${th}</tr></thead><tbody>${body}</tbody></table></div>`);
+            continue;
+        }
+        // Headings
+        const heading = line.match(/^(#{1,6})\s+(.+)$/);
+        if (heading) {
+            closeList();
+            const level = heading[1].length;
+            const raw = heading[2];
+            const id = uniqueId(raw);
+            out.push(`<h${level} id="${escapeHtml(id)}" class="md-h md-h${level} scroll-mt-4">${renderInline(raw)}</h${level}>`);
+            i += 1;
+            continue;
+        }
+        // Blockquote
+        if (/^>\s?/.test(line)) {
+            closeList();
+            const quote = [];
+            while (i < lines.length && /^>\s?/.test(lines[i])) {
+                quote.push(lines[i].replace(/^>\s?/, ''));
+                i += 1;
+            }
+            out.push(`<blockquote class="md-quote">${quote.map((q) => `<p>${renderInline(q)}</p>`).join('')}</blockquote>`);
+            continue;
+        }
+        // Task list
+        const task = line.match(/^[-*]\s+\[([ xX])\]\s+(.+)$/);
+        if (task) {
+            openList('task');
+            const checked = task[1].toLowerCase() === 'x';
+            out.push(`<li class="md-task-item"><span class="md-check" aria-hidden="true">${checked ? '☑' : '☐'}</span><span>${renderInline(task[2])}</span></li>`);
+            i += 1;
+            continue;
+        }
+        // Unordered list
+        const ul = line.match(/^[-*+]\s+(.+)$/);
+        if (ul) {
+            openList('ul');
+            out.push(`<li>${renderInline(ul[1])}</li>`);
+            i += 1;
+            continue;
+        }
+        // Ordered list
+        const ol = line.match(/^\d+[.)]\s+(.+)$/);
+        if (ol) {
+            openList('ol');
+            out.push(`<li>${renderInline(ol[1])}</li>`);
+            i += 1;
+            continue;
+        }
+        // Blank line
+        if (!line.trim()) {
+            closeList();
+            i += 1;
+            continue;
+        }
+        // Paragraph
+        closeList();
+        const para = [line];
+        i += 1;
+        while (i < lines.length) {
+            const next = lines[i];
+            if (!next.trim())
+                break;
+            if (/^(#{1,6}\s|```|>\s?|[-*+]\s|\d+[.)]\s|(\*{3,}|-{3,}|_{3,})\s*$)/.test(next))
+                break;
+            if (next.includes('|') && i + 1 < lines.length && isSepRow(lines[i + 1]))
+                break;
+            para.push(next);
+            i += 1;
+        }
+        out.push(`<p class="md-p">${para.map((p) => renderInline(p)).join('<br />')}</p>`);
+    }
+    closeList();
+    if (inCode) {
+        out.push(`<div class="md-pre-wrap"><pre class="md-pre"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre></div>`);
+    }
+    return out.join('\n');
+}

package/dist/utils/network.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Reactive network online/offline store.
+ *
+ * @example
+ * ```ts
+ * import { network } from '@r2digisolutions/components';
+ * if (!network.online) showBanner();
+ * ```
+ */
+declare class NetworkStore {
+    #private;
+    constructor();
+    get online(): boolean;
+    get offline(): boolean;
+    /** Force online/offline (stories / tests). Pass null to clear. */
+    setForced(value: boolean | null): void;
+    get forced(): boolean | null;
+}
+export declare const network: NetworkStore;
+export {};

package/dist/utils/network.svelte.js

@@ -0,0 +1,41 @@
+/**
+ * Reactive network online/offline store.
+ *
+ * @example
+ * ```ts
+ * import { network } from '@r2digisolutions/components';
+ * if (!network.online) showBanner();
+ * ```
+ */
+class NetworkStore {
+    #online = $state(typeof navigator !== 'undefined' ? navigator.onLine : true);
+    #listening = false;
+    #forced = $state(null);
+    constructor() {
+        this.#ensureListening();
+    }
+    #ensureListening() {
+        if (this.#listening || typeof window === 'undefined')
+            return;
+        this.#listening = true;
+        this.#online = navigator.onLine;
+        const sync = () => (this.#online = navigator.onLine);
+        window.addEventListener('online', sync);
+        window.addEventListener('offline', sync);
+    }
+    get online() {
+        this.#ensureListening();
+        return this.#forced === null ? this.#online : this.#forced;
+    }
+    get offline() {
+        return !this.online;
+    }
+    /** Force online/offline (stories / tests). Pass null to clear. */
+    setForced(value) {
+        this.#forced = value;
+    }
+    get forced() {
+        return this.#forced;
+    }
+}
+export const network = new NetworkStore();

package/dist/utils/pageVisibility.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Reactive page visibility store — tab active vs hidden.
+ *
+ * Uses the Page Visibility API (`document.visibilityState`).
+ *
+ * @example
+ * ```ts
+ * import { pageVisibility } from '@r2digisolutions/components';
+ * if (pageVisibility.visible) { poll(); }
+ * ```
+ */
+export type VisibilityState = 'visible' | 'hidden';
+declare class PageVisibilityStore {
+    #private;
+    constructor();
+    get state(): VisibilityState;
+    get visible(): boolean;
+    get hidden(): boolean;
+    get forced(): VisibilityState | null;
+    setForced(value: VisibilityState | null): void;
+    get effective(): VisibilityState;
+    get isVisible(): boolean;
+    get isHidden(): boolean;
+}
+export declare const pageVisibility: PageVisibilityStore;
+export {};

package/dist/utils/pageVisibility.svelte.js

@@ -0,0 +1,57 @@
+/**
+ * Reactive page visibility store — tab active vs hidden.
+ *
+ * Uses the Page Visibility API (`document.visibilityState`).
+ *
+ * @example
+ * ```ts
+ * import { pageVisibility } from '@r2digisolutions/components';
+ * if (pageVisibility.visible) { poll(); }
+ * ```
+ */
+class PageVisibilityStore {
+    #state = $state(typeof document !== 'undefined' && document.visibilityState === 'hidden'
+        ? 'hidden'
+        : 'visible');
+    #listening = false;
+    constructor() {
+        this.#ensureListening();
+    }
+    #ensureListening() {
+        if (this.#listening || typeof document === 'undefined')
+            return;
+        this.#listening = true;
+        this.#state = document.visibilityState === 'hidden' ? 'hidden' : 'visible';
+        document.addEventListener('visibilitychange', () => {
+            this.#state = document.visibilityState === 'hidden' ? 'hidden' : 'visible';
+        });
+    }
+    get state() {
+        this.#ensureListening();
+        return this.#state;
+    }
+    get visible() {
+        return this.state === 'visible';
+    }
+    get hidden() {
+        return this.state === 'hidden';
+    }
+    /** Force a state (useful in stories / tests). Pass null to clear override. */
+    #forced = $state(null);
+    get forced() {
+        return this.#forced;
+    }
+    setForced(value) {
+        this.#forced = value;
+    }
+    get effective() {
+        return this.#forced ?? this.state;
+    }
+    get isVisible() {
+        return this.effective === 'visible';
+    }
+    get isHidden() {
+        return this.effective === 'hidden';
+    }
+}
+export const pageVisibility = new PageVisibilityStore();

package/dist/utils/permissions.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Pure permission helpers — RBAC checks over a `PermissionMap`
+ * (compatible with `<PermissionsMatrix>`).
+ *
+ * Hierarchy: `admin` ⊃ `write` ⊃ `read`.
+ */
+export type PermissionLevel = 'read' | 'write' | 'admin';
+/** roleId → resourceId → levels granted */
+export type PermissionMap = Record<string, Record<string, PermissionLevel[]>>;
+export declare const PERMISSION_LEVELS: PermissionLevel[];
+export declare const LEVEL_RANK: Record<PermissionLevel, number>;
+/** True when `granted` covers `required` (admin implies write implies read). */
+export declare function levelSatisfies(granted: PermissionLevel[] | readonly PermissionLevel[], required: PermissionLevel): boolean;
+/** Unique levels sorted by rank ascending. */
+export declare function mergeLevels(...lists: Array<PermissionLevel[] | readonly PermissionLevel[] | undefined>): PermissionLevel[];
+export declare function getRoleLevels(map: PermissionMap, roleId: string, resource: string): PermissionLevel[];
+/** Union of levels across all of the user's roles for a resource. */
+export declare function getEffectiveLevels(map: PermissionMap, roles: string[] | readonly string[], resource: string): PermissionLevel[];
+/**
+ * Can the given roles perform `level` on `resource`?
+ *
+ * @example
+ * ```ts
+ * can(map, ['member'], 'projects', 'write') // true if member has write|admin on projects
+ * ```
+ */
+export declare function can(map: PermissionMap, roles: string[] | readonly string[], resource: string, level?: PermissionLevel): boolean;
+export declare function hasRole(roles: string[] | readonly string[], role: string): boolean;
+export declare function hasAnyRole(roles: string[] | readonly string[], required: string[] | readonly string[]): boolean;
+export declare function hasAllRoles(roles: string[] | readonly string[], required: string[] | readonly string[]): boolean;
+export interface PermissionCheck {
+    /** Resource id (e.g. `projects`) */
+    resource?: string;
+    /** Minimum level required (default `read`). Implies lower levels. */
+    level?: PermissionLevel;
+    /** Exact role */
+    role?: string;
+    /** At least one of these roles */
+    anyRole?: string[];
+    /** All of these roles */
+    allRoles?: string[];
+}
+/**
+ * Evaluate a declarative check against roles + map.
+ * Resource checks and role checks are AND-ed when both are present.
+ */
+export declare function checkPermission(map: PermissionMap, roles: string[] | readonly string[], check: PermissionCheck): boolean;

package/dist/utils/permissions.js

@@ -0,0 +1,77 @@
+/**
+ * Pure permission helpers — RBAC checks over a `PermissionMap`
+ * (compatible with `<PermissionsMatrix>`).
+ *
+ * Hierarchy: `admin` ⊃ `write` ⊃ `read`.
+ */
+export const PERMISSION_LEVELS = ['read', 'write', 'admin'];
+export const LEVEL_RANK = {
+    read: 1,
+    write: 2,
+    admin: 3
+};
+/** True when `granted` covers `required` (admin implies write implies read). */
+export function levelSatisfies(granted, required) {
+    const need = LEVEL_RANK[required];
+    return granted.some((level) => LEVEL_RANK[level] >= need);
+}
+/** Unique levels sorted by rank ascending. */
+export function mergeLevels(...lists) {
+    const set = new Set();
+    for (const list of lists) {
+        if (!list)
+            continue;
+        for (const level of list)
+            set.add(level);
+    }
+    return PERMISSION_LEVELS.filter((l) => set.has(l));
+}
+export function getRoleLevels(map, roleId, resource) {
+    return map[roleId]?.[resource] ?? [];
+}
+/** Union of levels across all of the user's roles for a resource. */
+export function getEffectiveLevels(map, roles, resource) {
+    return mergeLevels(...roles.map((roleId) => getRoleLevels(map, roleId, resource)));
+}
+/**
+ * Can the given roles perform `level` on `resource`?
+ *
+ * @example
+ * ```ts
+ * can(map, ['member'], 'projects', 'write') // true if member has write|admin on projects
+ * ```
+ */
+export function can(map, roles, resource, level = 'read') {
+    return levelSatisfies(getEffectiveLevels(map, roles, resource), level);
+}
+export function hasRole(roles, role) {
+    return roles.includes(role);
+}
+export function hasAnyRole(roles, required) {
+    return required.some((r) => roles.includes(r));
+}
+export function hasAllRoles(roles, required) {
+    return required.every((r) => roles.includes(r));
+}
+/**
+ * Evaluate a declarative check against roles + map.
+ * Resource checks and role checks are AND-ed when both are present.
+ */
+export function checkPermission(map, roles, check) {
+    const parts = [];
+    if (check.resource) {
+        parts.push(can(map, roles, check.resource, check.level ?? 'read'));
+    }
+    if (check.role) {
+        parts.push(hasRole(roles, check.role));
+    }
+    if (check.anyRole?.length) {
+        parts.push(hasAnyRole(roles, check.anyRole));
+    }
+    if (check.allRoles?.length) {
+        parts.push(hasAllRoles(roles, check.allRoles));
+    }
+    if (parts.length === 0)
+        return true;
+    return parts.every(Boolean);
+}

package/dist/utils/permissions.svelte.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Reactive permissions store — current user roles + workspace PermissionMap.
+ *
+ * - Singleton: `import { permissions } from '@r2digisolutions/components'`
+ * - Prefer `<PermissionsProvider>` in the tree for scoped values via context
+ *
+ * @example
+ * ```ts
+ * permissions.configure({
+ *   roles: ['member'],
+ *   map: { member: { projects: ['read', 'write'] } }
+ * });
+ * permissions.can('projects', 'write'); // true
+ * ```
+ */
+import { type PermissionCheck, type PermissionLevel, type PermissionMap } from './permissions.js';
+export type { PermissionCheck, PermissionLevel, PermissionMap };
+export declare const PERMISSIONS_CONTEXT_KEY = "r2-permissions";
+export interface PermissionsState {
+    roles: string[];
+    map: PermissionMap;
+    can: (resource: string, level?: PermissionLevel) => boolean;
+    hasRole: (role: string) => boolean;
+    hasAnyRole: (roles: string[]) => boolean;
+    hasAllRoles: (roles: string[]) => boolean;
+    check: (check: PermissionCheck) => boolean;
+    levels: (resource: string) => PermissionLevel[];
+    setRoles: (roles: string[]) => void;
+    setMap: (map: PermissionMap) => void;
+    configure: (options: {
+        roles?: string[];
+        map?: PermissionMap;
+    }) => void;
+}
+/** Global default store (overridden in-tree by `<PermissionsProvider>`). */
+export declare const permissions: PermissionsState;
+/**
+ * Nearest `<PermissionsProvider>` API, or the global `permissions` store.
+ */
+export declare function getPermissionsContext(): PermissionsState;