@next-buildr/editor 0.0.0-stage → 2.0.1

package/dist/panels/issues/collect.js

@@ -0,0 +1,96 @@
+const RANK = { error: 0, warning: 1, info: 2 };
+/** The node a diagnostic is about: the one its path points into, else the one it names in `details`. */
+export function nodeOfDiagnostic(diagnostic) {
+    const [head, id] = diagnostic.path ?? [];
+    if (head === 'nodes' && typeof id === 'string')
+        return id;
+    const named = diagnostic.details?.['nodeId'];
+    return typeof named === 'string' ? named : undefined;
+}
+/**
+ * Merges the findings of validation, the accessibility rules and the canvas into one list: worst
+ * first, then in the order the checks reported them. A finding about a node that is gone keeps its
+ * text but loses its node, so clicking it does nothing rather than selecting a stale id.
+ */
+export function collectIssues(input) {
+    const { doc } = input;
+    const known = (id) => id !== undefined && Object.hasOwn(doc.nodes, id) ? id : undefined;
+    const items = [];
+    for (const [index, issue] of (input.validation ?? []).entries()) {
+        items.push({
+            key: `validation:${index}`,
+            source: 'validation',
+            severity: issue.severity,
+            code: issue.code,
+            message: issue.message,
+            nodeId: known(nodeOfDiagnostic(issue)),
+            blocking: issue.blocking,
+        });
+    }
+    for (const [index, issue] of (input.a11y ?? []).entries()) {
+        items.push({
+            key: `a11y:${index}`,
+            source: 'a11y',
+            severity: issue.severity,
+            code: issue.ruleId,
+            message: issue.message,
+            help: issue.help,
+            nodeId: known(issue.nodeId),
+            blocking: false,
+            fix: issue.fix,
+            locale: issue.locale,
+        });
+    }
+    for (const [index, issue] of (input.canvas ?? []).entries()) {
+        items.push({
+            key: `canvas:${index}`,
+            source: 'canvas',
+            severity: issue.severity,
+            code: issue.code,
+            message: issue.message,
+            nodeId: known(nodeOfDiagnostic(issue)),
+            blocking: false,
+        });
+    }
+    // `sort` is stable, so the order the checks gave is kept within a severity.
+    return items.sort((a, b) => RANK[a.severity] - RANK[b.severity]);
+}
+export function filterIssues(items, filter) {
+    return filter === 'all' ? [...items] : items.filter((item) => item.severity === filter);
+}
+export function countIssues(items) {
+    const counts = { all: items.length, error: 0, warning: 0, info: 0 };
+    for (const item of items)
+        counts[item.severity] += 1;
+    return counts;
+}
+/**
+ * Whether the findings allow publishing. A blocking validation issue (a corrupt structure) stops
+ * it under any policy; under `publishPolicy: 'block'` so does any error, from validation or from
+ * the accessibility rules. Under `'warn'` (the default) the author is told and may go on.
+ */
+export function publishGate(items, policy = 'warn') {
+    const counts = countIssues(items);
+    if (items.some((item) => item.blocking))
+        return { blocked: true, reason: 'blocking', counts };
+    if (policy === 'block' && counts.error > 0)
+        return { blocked: true, reason: 'errors', counts };
+    return { blocked: false, reason: undefined, counts };
+}
+/** The rule that flags a translatable text with no translation; the panel lists its findings per language. */
+export const MISSING_TRANSLATION = 'missing-translation';
+/** Splits the findings into the ordinary ones and the missing translations, those grouped by language in the order the languages first appear. */
+export function groupMissingTranslations(items) {
+    const rest = [];
+    const byLocale = new Map();
+    for (const item of items) {
+        if (item.code !== MISSING_TRANSLATION || item.locale === undefined) {
+            rest.push(item);
+            continue;
+        }
+        const list = byLocale.get(item.locale) ?? [];
+        list.push(item);
+        byLocale.set(item.locale, list);
+    }
+    return { rest, groups: [...byLocale].map(([locale, list]) => ({ locale, items: list })) };
+}

package/dist/panels/issues/index.d.ts

@@ -0,0 +1,5 @@
+export type { CollectInput, IssueCounts, IssueItem, IssueSeverity, IssueSource, MissingGroup, PublishGate, PublishPolicy, SeverityFilter, } from './collect.ts';
+export { collectIssues, countIssues, filterIssues, groupMissingTranslations, MISSING_TRANSLATION, nodeOfDiagnostic, publishGate, } from './collect.ts';
+export type { IssuesPanelProps } from './issues-panel.tsx';
+export { IssuesPanel, SEVERITY_ICON, useIssues } from './issues-panel.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/panels/issues/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,aAAa,EACb,WAAW,EACX,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/panels/issues/index.js

@@ -0,0 +1,2 @@
+export { collectIssues, countIssues, filterIssues, groupMissingTranslations, MISSING_TRANSLATION, nodeOfDiagnostic, publishGate, } from './collect.js';
+export { IssuesPanel, SEVERITY_ICON, useIssues } from './issues-panel.js';

package/dist/panels/issues/issues-panel.d.ts

@@ -0,0 +1,17 @@
+import type { Diagnostic } from '@next-buildr/core';
+import { type IconName } from '../../ui/index.ts';
+import { type IssueItem, type IssueSeverity } from './collect.ts';
+export interface IssuesPanelProps {
+    /** What the canvas reported; the host keeps them from the protocol's `diagnostics` messages. */
+    readonly canvasDiagnostics?: readonly Diagnostic[] | undefined;
+}
+/** Everything the checks found, as one list: validation, accessibility and the canvas. */
+export declare function useIssues(canvasDiagnostics?: readonly Diagnostic[]): IssueItem[];
+export declare const SEVERITY_ICON: Readonly<Record<IssueSeverity, IconName>>;
+/**
+ * The Issues panel (docs/editor.md#issues-and-publishing): the findings of validation, the
+ * accessibility rules and the canvas, filterable by severity. Choosing one selects the node it is
+ * about; a finding with an unambiguous repair offers it as a button that runs it as a command.
+ */
+export declare function IssuesPanel({ canvasDiagnostics }: IssuesPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=issues-panel.d.ts.map

package/dist/panels/issues/issues-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"issues-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/issues-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMpD,OAAO,EAA+B,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EAEnB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;CAChE;AAED,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,EAAE,CAahF;AAWD,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAInE,CAAC;AAQF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,+BA4GlE"}

package/dist/panels/issues/issues-panel.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { componentMeta, useManifest } from '../../app/manifest.js';
+import { useT } from '../../messages/index.js';
+import { useEditor, useEditorState, useLocaleState } from '../../store/index.js';
+import { Button, ComponentIcon, Icon } from '../../ui/index.js';
+import { collectIssues, countIssues, filterIssues, groupMissingTranslations, } from './collect.js';
+/** Everything the checks found, as one list: validation, accessibility and the canvas. */
+export function useIssues(canvasDiagnostics) {
+    const doc = useEditorState((state) => state.doc);
+    const validation = useEditorState((state) => state.validation);
+    return useMemo(() => collectIssues({
+        doc,
+        validation: validation?.issues,
+        a11y: validation?.a11y,
+        canvas: canvasDiagnostics,
+    }), [doc, validation, canvasDiagnostics]);
+}
+const FILTERS = [
+    { filter: 'all', key: 'issues.filter.all' },
+    { filter: 'error', key: 'issues.filter.error' },
+    { filter: 'warning', key: 'issues.filter.warning' },
+    { filter: 'info', key: 'issues.filter.info' },
+];
+const SEVERITIES = ['error', 'warning', 'info'];
+export const SEVERITY_ICON = {
+    error: 'circle-alert',
+    warning: 'triangle-alert',
+    info: 'info',
+};
+const SOURCE_KEY = {
+    validation: 'issues.source.validation',
+    a11y: 'issues.source.a11y',
+    canvas: 'issues.source.canvas',
+};
+/**
+ * The Issues panel (docs/editor.md#issues-and-publishing): the findings of validation, the
+ * accessibility rules and the canvas, filterable by severity. Choosing one selects the node it is
+ * about; a finding with an unambiguous repair offers it as a button that runs it as a command.
+ */
+export function IssuesPanel({ canvasDiagnostics }) {
+    const t = useT();
+    const store = useEditor();
+    const readOnly = useEditorState((state) => state.readOnly);
+    const checked = useEditorState((state) => state.validation !== undefined);
+    const items = useIssues(canvasDiagnostics);
+    const [filter, setFilter] = useState('all');
+    const [failed, setFailed] = useState();
+    const counts = countIssues(items);
+    const shown = filterIssues(items, filter);
+    const config = useLocaleState((state) => state.config);
+    const doc = useEditorState((state) => state.doc);
+    const manifest = useManifest();
+    const fix = (item) => {
+        if (item.fix === undefined)
+            return;
+        const result = store.dispatch(item.fix, { label: item.message });
+        setFailed(result.ok ? undefined : item.key);
+    };
+    const row = (item) => {
+        const node = item.nodeId === undefined ? undefined : doc.nodes[item.nodeId];
+        const meta = node === undefined ? undefined : componentMeta(manifest, node.type);
+        const owner = node === undefined ? t('issues.nodeless') : (node.name ?? meta?.label ?? node.type);
+        return (_jsxs("li", { className: "bd-issue", "data-severity": item.severity, children: [_jsxs("button", { type: "button", className: "bd-issue-target", disabled: item.nodeId === undefined, onClick: () => {
+                        if (item.nodeId !== undefined)
+                            store.select(item.nodeId);
+                    }, children: [_jsxs("span", { className: "bd-issue-head", children: [_jsx(Icon, { name: SEVERITY_ICON[item.severity], label: t(`issues.filter.${item.severity}`), className: "bd-issue-severity" }), node !== undefined && _jsx(ComponentIcon, { meta: meta, className: "bd-issue-component" }), _jsx("span", { className: "bd-issue-owner", children: owner })] }), _jsx("span", { className: "bd-issue-message", children: item.message }), _jsxs("span", { className: "bd-issue-source", children: [t(SOURCE_KEY[item.source]), " \u00B7 ", item.code] })] }), item.help !== undefined ? _jsx("p", { className: "bd-issue-help", children: item.help }) : null, item.fix !== undefined ? (_jsx(Button, { disabled: readOnly, onClick: () => fix(item), children: t('issues.fix') })) : null, failed === item.key ? (_jsx("p", { role: "alert", className: "bd-issue-error", children: t('issues.fix.failed') })) : null] }, item.key));
+    };
+    const severitySection = (severity) => {
+        const own = shown.filter((item) => item.severity === severity);
+        if (own.length === 0)
+            return null;
+        const { rest, groups } = groupMissingTranslations(own);
+        return (_jsxs("section", { className: "bd-issues-severity", "data-severity": severity, children: [_jsxs("h3", { className: "bd-issues-heading", children: [_jsx(Icon, { name: SEVERITY_ICON[severity] }), t(`issues.group.${severity}`), " (", own.length, ")"] }), rest.length > 0 ? _jsx("ul", { className: "bd-issues-list", children: rest.map(row) }) : null, groups.map((group) => (_jsxs("details", { className: "bd-issues-group", "data-locale": group.locale, open: true, children: [_jsxs("summary", { children: [t('issues.missingTranslations'), ": ", config.intl[group.locale] ?? group.locale, " (", group.items.length, ")"] }), _jsx("ul", { className: "bd-issues-list", children: group.items.map(row) })] }, group.locale)))] }, severity));
+    };
+    return (_jsxs("section", { className: "bd-issues", "aria-label": t('issues.title'), children: [_jsx("h2", { className: "bd-panel-title", children: t('issues.title') }), _jsx("fieldset", { className: "bd-issues-filters", "aria-label": t('issues.filter'), children: FILTERS.map((entry) => (_jsxs(Button, { variant: "ghost", "aria-pressed": filter === entry.filter, onClick: () => setFilter(entry.filter), children: [t(entry.key), " (", counts[entry.filter], ")"] }, entry.filter))) }), !checked ? _jsx("p", { className: "bd-field-hint", children: t('issues.pending') }) : null, checked && shown.length === 0 ? _jsx("p", { className: "bd-field-hint", children: t('issues.empty') }) : null, SEVERITIES.map(severitySection)] }));
+}

package/dist/panels/layers/flatten.d.ts

@@ -0,0 +1,28 @@
+import type { BuilderDocument, NodeId, PageNode } from '@next-buildr/core';
+/** One line of the layers tree. */
+export interface LayerRow {
+    readonly id: NodeId;
+    readonly node: PageNode;
+    readonly parentId: NodeId | null;
+    /** 1 for the root (ARIA levels start at 1). */
+    readonly level: number;
+    /** Position among its parent's children, and how many there are (1-based, for `aria-posinset` / `aria-setsize`). */
+    readonly posInSet: number;
+    readonly setSize: number;
+    readonly hasChildren: boolean;
+    readonly expanded: boolean;
+    /** The slot of the parent it sits in; `'default'` for the usual one. */
+    readonly slot: string;
+}
+/** The children of a node in slot order, with the slot each is in; ids the document lacks are skipped. */
+export declare function childrenWithSlots(doc: BuilderDocument, node: PageNode): {
+    id: NodeId;
+    slot: string;
+}[];
+/**
+ * The tree as the rows that are visible: a node's children follow it when it is expanded. Iterative
+ * (a document may be deep) and guarded against a node reached twice, so a corrupt document cannot
+ * loop it.
+ */
+export declare function flattenTree(doc: BuilderDocument, expanded: ReadonlySet<NodeId>): LayerRow[];
+//# sourceMappingURL=flatten.d.ts.map

package/dist/panels/layers/flatten.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flatten.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/flatten.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE3E,mCAAmC;AACnC,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oHAAoH;IACpH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,0GAA0G;AAC1G,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,QAAQ,GACb;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAMhC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,QAAQ,EAAE,CAmD3F"}

package/dist/panels/layers/flatten.js

@@ -0,0 +1,61 @@
+/** The children of a node in slot order, with the slot each is in; ids the document lacks are skipped. */
+export function childrenWithSlots(doc, node) {
+    const out = [];
+    for (const [slot, ids] of Object.entries(node.slots ?? {})) {
+        for (const id of ids)
+            if (Object.hasOwn(doc.nodes, id))
+                out.push({ id, slot });
+    }
+    return out;
+}
+/**
+ * The tree as the rows that are visible: a node's children follow it when it is expanded. Iterative
+ * (a document may be deep) and guarded against a node reached twice, so a corrupt document cannot
+ * loop it.
+ */
+export function flattenTree(doc, expanded) {
+    const rows = [];
+    const seen = new Set();
+    const root = doc.nodes[doc.root];
+    if (root === undefined)
+        return rows;
+    const stack = [
+        { id: doc.root, parentId: null, level: 1, pos: 1, size: 1, slot: 'default' },
+    ];
+    while (stack.length > 0) {
+        const frame = stack.pop();
+        if (seen.has(frame.id))
+            continue;
+        seen.add(frame.id);
+        const node = doc.nodes[frame.id];
+        if (node === undefined)
+            continue;
+        const children = childrenWithSlots(doc, node);
+        const open = children.length > 0 && expanded.has(frame.id);
+        rows.push({
+            id: frame.id,
+            node,
+            parentId: frame.parentId,
+            level: frame.level,
+            posInSet: frame.pos,
+            setSize: frame.size,
+            hasChildren: children.length > 0,
+            expanded: open,
+            slot: frame.slot,
+        });
+        if (open) {
+            for (let i = children.length - 1; i >= 0; i--) {
+                const child = children[i];
+                stack.push({
+                    id: child.id,
+                    parentId: frame.id,
+                    level: frame.level + 1,
+                    pos: i + 1,
+                    size: children.length,
+                    slot: child.slot,
+                });
+            }
+        }
+    }
+    return rows;
+}

package/dist/panels/layers/layers-panel.d.ts

@@ -0,0 +1,14 @@
+/** Every row is this tall, which is what lets the list render only the rows in view. */
+export declare const ROW_HEIGHT = 28;
+export interface LayersPanelProps {
+    /** The component a "Wrap in container" wraps the selection in. */
+    readonly wrapperType?: string;
+}
+/**
+ * The document as a tree (docs/editor.md#layers): a WAI-ARIA tree that is fully operable with the
+ * keyboard, virtualized (only the rows in view exist), kept in step with the selection and hover in
+ * the store (the canvas and the tree show the same node), with rename, badges and a context menu.
+ * Focus stays on the tree and `aria-activedescendant` names the row; the selection follows it.
+ */
+export declare function LayersPanel({ wrapperType }: LayersPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=layers-panel.d.ts.map

package/dist/panels/layers/layers-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/layers-panel.tsx"],"names":[],"mappings":"AAqCA,wFAAwF;AACxF,eAAO,MAAM,UAAU,KAAK,CAAC;AAS7B,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAmBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,WAA0B,EAAE,EAAE,gBAAgB,+BA8X3E"}