@sdboyer/thema-ui 0.0.0-bootstrap.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,26 @@
 # @sdboyer/thema-ui
 
-A placeholder reserving the name. thema publishes it from https://github.com/sdboyer/thema, starting at v0.1.0.
+The pieces of the [thema playground](../ui)'s frontend that other browser tools build on. The playground imports everything it shares from this package, so the package's API is exactly what the playground uses.
+
+- `cue`, `cueParser`: the CUE language mode for CodeMirror 6.
+- `Editor`: a Preact CodeMirror editor for CUE, JSON and YAML, with markers.
+- `Diagnostics`: thema's diagnostics as a list, each linking to its error page.
+- `OpBar`: the operations bar: a button per operation, the arguments the chosen one takes, and Run. The host holds the operation and its arguments (`OpArgs`) and passes `ops` to offer only some.
+- `Output`: what an operation returned (an `Outcome`): its result in its own terms, lacunas included, then its diagnostics.
+- `Tabs`: tabs over named texts, with adding, renaming, removing and a frozen group.
+- `dataOps`, `codegenOps`, `argsOf`, `isCodegen` and the `UserOp` types: the operations a user runs and the arguments each takes.
+- `markersFor`, `filesOf`, `docsURL`: diagnostics as editor markers.
+- `offsetOf`, `charIndexOfByte`, `spanAt`: CUE positions (1-based line, byte column) as editor offsets.
+- `lightTheme`, `darkTheme`, `highlight`, `tokenColors`, `darkScheme`: the editor's theme.
+- `docs`, `DocLink`, `themaDoc`, `lacunaTypeDoc`: links into thema's reference docs.
+- The wire types of thema's diagnostics and the playground's session API (`Diagnostic`, `Pos`, `LineageInput`, …). They are generated from thema's Go types by `playground/tsapi` (`github.com/sdboyer/thema/playground/tsapi`), so they match the thema release they come from. A Go program whose own wire types embed thema's can generate them by running the `tsapi.Types` jenny on a `tsapi.Config` of its own. With the Config's `Import` set to `tsapi.UIModule`, the generated file imports thema's types from this package instead of declaring them again.
+
+The components are Preact components. `preact` and the CodeMirror packages are peer dependencies, so the host application provides one copy of each, which CodeMirror requires.
+
+The bar, tabs and output are styled by the host through their class names: `ops`, `bar`, `op-group`, `op`, `op-args`, `primary`; `tabs`, `tab`, `active`, `frozen`, `flag`, `add`, `close`, `tab-group`, `group-label`; `output`, `status`, `ok`, `failed`, `per-version`, `result`, `lacunas`. The playground's `ui/src/style.css` is a complete set.
+
+The theme colors through CSS custom properties that the host page defines: `--bg`, `--panel`, `--text`, `--muted`, `--border`, `--selection`, `--active-line`, `--error`, `--mono`, `--code-size`, and the token colors `--syn-comment`, `--syn-keyword`, `--syn-property`, `--syn-string` and `--syn-type`. The playground's `ui/src/style.css` defines them for light and dark schemes.
+
+## Developing
+
+The package lives in the npm workspace at `playground/`. Run `npm ci` there, then `npm test` and `npm run build --workspace components`. The playground resolves the package to its source (the `source` export condition), so there is no build step between editing a component and seeing it in the playground.

package/dist/Diagnostics.d.ts

@@ -0,0 +1,8 @@
+import type { Diagnostic } from "./types";
+interface Props {
+    diagnostics: readonly Diagnostic[];
+    onOpen?: (file: string) => void;
+    empty?: string;
+}
+export declare function Diagnostics({ diagnostics, onOpen, empty }: Props): import("preact").JSX.Element;
+export {};

package/dist/Diagnostics.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { docsURL } from "./markers";
+export function Diagnostics({ diagnostics, onOpen, empty }) {
+    if (diagnostics.length === 0) {
+        return _jsx("p", { class: "muted", children: empty ?? "Nothing to report." });
+    }
+    return (_jsx("ul", { class: "diagnostics", children: diagnostics.map((d, i) => (_jsxs("li", { class: `diagnostic ${d.severity}`, children: [_jsxs("div", { class: "headline", children: [_jsxs("a", { class: "code", href: docsURL(d.code), target: "_blank", rel: "noreferrer", title: "What this code means", children: [d.severity, "[", d.code, "]"] }), " ", d.headline] }), d.primary && _jsx(Where, { pos: d.primary, onOpen: onOpen }), (d.notes ?? []).map((n, j) => (_jsxs("div", { class: "note", children: [_jsx("span", { class: "label", children: "note:" }), " ", n.label, " ", n.pos && _jsx(Where, { pos: n.pos, onOpen: onOpen, inline: true })] }, j))), (d.help ?? []).map((h, j) => (_jsxs("div", { class: "help", children: [_jsx("span", { class: "label", children: "help:" }), " ", h] }, j))), d.detail && (_jsxs("details", { class: "detail", children: [_jsx("summary", { children: "CUE says" }), _jsx("pre", { children: d.detail })] }))] }, i))) }));
+}
+function Where({ pos, onOpen, inline }) {
+    const text = `${pos.file}:${pos.line}:${pos.col}`;
+    const own = pos.origin === "thema";
+    const body = own || !onOpen ? (_jsx("span", { children: own ? `thema's own CUE, ${text}` : text })) : (_jsx("button", { class: "link", onClick: () => onOpen(pos.file), children: text }));
+    return inline ? _jsxs("span", { class: "where", children: ["(", body, ")"] }) : _jsxs("div", { class: "where", children: ["--> ", body] });
+}

package/dist/Editor.d.ts

@@ -0,0 +1,12 @@
+import type { Marker } from "./markers";
+export type Language = "cue" | "json" | "yaml" | "text";
+interface Props {
+    text: string;
+    language: Language;
+    onChange?: (text: string) => void;
+    markers?: Marker[];
+    readOnly?: boolean;
+    label: string;
+}
+export declare function Editor({ text, language, onChange, markers, readOnly, label }: Props): import("preact").JSX.Element;
+export {};

package/dist/Editor.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// A CodeMirror editor for one text. The text is the parent's; the editor
+// reports edits and shows markers.
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { json } from "@codemirror/lang-json";
+import { bracketMatching, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
+import { lintGutter, setDiagnostics } from "@codemirror/lint";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, drawSelection, highlightActiveLine, keymap, lineNumbers } from "@codemirror/view";
+import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { cue } from "./cue-lang";
+import { darkScheme, darkTheme, highlight, lightTheme } from "./theme";
+const languages = {
+    // CUE's formatter indents with tabs, and so does every file it formats.
+    cue: () => [cue, indentUnit.of("\t")],
+    json: () => [json()],
+    yaml: () => [],
+    text: () => [],
+};
+export function Editor({ text, language, onChange, markers, readOnly, label }) {
+    const host = useRef(null);
+    const view = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const lang = useRef(new Compartment());
+    const ro = useRef(new Compartment());
+    const scheme = useRef(new Compartment());
+    useEffect(() => {
+        const v = new EditorView({
+            parent: host.current,
+            state: EditorState.create({
+                doc: text,
+                extensions: [
+                    lineNumbers(),
+                    history(),
+                    drawSelection(),
+                    indentOnInput(),
+                    bracketMatching(),
+                    highlightActiveLine(),
+                    highlightSelectionMatches(),
+                    syntaxHighlighting(highlight),
+                    lintGutter(),
+                    keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, indentWithTab]),
+                    lang.current.of(languages[language]()),
+                    ro.current.of(EditorState.readOnly.of(!!readOnly)),
+                    EditorView.contentAttributes.of({ "aria-label": label }),
+                    scheme.current.of(darkScheme()?.matches ? darkTheme : lightTheme),
+                    EditorView.updateListener.of((u) => {
+                        if (u.docChanged)
+                            onChangeRef.current?.(u.state.doc.toString());
+                    }),
+                ],
+            }),
+        });
+        view.current = v;
+        // Follow the system when it switches between light and dark.
+        const mq = darkScheme();
+        const follow = (e) => v.dispatch({ effects: scheme.current.reconfigure(e.matches ? darkTheme : lightTheme) });
+        mq?.addEventListener("change", follow);
+        return () => {
+            mq?.removeEventListener("change", follow);
+            v.destroy();
+        };
+    }, []);
+    // A new text from outside (another file opened, an example loaded)
+    // replaces the document; an edit from this editor is already in it. This
+    // must be a layout effect: a plain effect waits for a frame, and a keystroke
+    // arriving before it would leave text one edit behind the document, so the
+    // effect would put the old text back, report it as an edit, and the parent
+    // and the editor would trade the two texts forever.
+    useLayoutEffect(() => {
+        const v = view.current;
+        if (v && v.state.doc.toString() !== text) {
+            v.dispatch({ changes: { from: 0, to: v.state.doc.length, insert: text } });
+        }
+    }, [text]);
+    useEffect(() => {
+        view.current?.dispatch({ effects: lang.current.reconfigure(languages[language]()) });
+    }, [language]);
+    useEffect(() => {
+        view.current?.dispatch({ effects: ro.current.reconfigure(EditorState.readOnly.of(!!readOnly)) });
+    }, [readOnly]);
+    useEffect(() => {
+        const v = view.current;
+        if (!v)
+            return;
+        const len = v.state.doc.length;
+        const ds = (markers ?? [])
+            .filter((m) => m.from <= len)
+            .map((m) => ({ from: m.from, to: Math.min(m.to, len), severity: m.severity, message: m.message, source: m.code }));
+        v.dispatch(setDiagnostics(v.state, ds));
+    }, [markers, text]);
+    return _jsx("div", { class: "editor", ref: host });
+}

package/dist/OpBar.d.ts

@@ -0,0 +1,14 @@
+import { type OpArgs, type UserOp } from "./ops";
+export interface OpBarProps {
+    op: UserOp;
+    args: OpArgs;
+    versions: readonly string[];
+    label: (version: string) => string;
+    onOp: (op: UserOp) => void;
+    onArgs: (args: OpArgs) => void;
+    onRun: () => void;
+    running: boolean;
+    disabled?: string;
+    ops?: readonly UserOp[];
+}
+export declare function OpBar({ op, args, versions, label, onOp, onArgs, onRun, running, disabled, ops }: OpBarProps): import("preact").JSX.Element;

package/dist/OpBar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The operations bar: a button per operation, the arguments the chosen one
+// takes, and Run. The host holds the state; the bar only shows and changes it.
+import { DocLink, hasDoc } from "./docs";
+import { argsOf, codegenOps, dataOps } from "./ops";
+export function OpBar({ op, args, versions, label, onOp, onArgs, onRun, running, disabled, ops }) {
+    const offered = (o) => !ops || ops.includes(o);
+    const setArg = (k, v) => onArgs({ ...args, [k]: v });
+    const versionSelect = (k, none) => (_jsxs("select", { value: args[k], onChange: (e) => setArg(k, e.target.value), "aria-label": k, children: [_jsx("option", { value: "", children: none }), versions.map((v) => (_jsx("option", { value: v, children: label(v) }, v)))] }));
+    const takes = argsOf(op);
+    const opButton = (o) => (_jsxs("span", { class: "op", children: [_jsx("button", { "aria-pressed": op === o, onClick: () => onOp(o), children: o }), hasDoc(o) && _jsx(DocLink, { topic: o })] }, o));
+    const onData = dataOps.filter(offered);
+    const codegen = codegenOps.filter(offered);
+    return (_jsxs("div", { class: "ops", children: [_jsxs("div", { class: "bar", role: "toolbar", "aria-label": "Operations", children: [onData.length > 0 && (_jsx("span", { class: "op-group", role: "group", "aria-label": "On data", children: onData.map(opButton) })), codegen.length > 0 && (_jsx("span", { class: "op-group", role: "group", "aria-label": "Code generation", children: codegen.map(opButton) }))] }), _jsxs("div", { class: "bar op-args", children: [takes.includes("version") && _jsxs("label", { children: ["schema ", versionSelect("version", "latest")] }), takes.includes("from") && _jsxs("label", { children: ["from ", versionSelect("from", "the data's")] }), takes.includes("to") && _jsxs("label", { children: ["to ", versionSelect("to", "choose")] }), takes.includes("format") && (_jsxs("label", { children: ["as", " ", _jsxs("select", { value: args.format, onChange: (e) => setArg("format", e.target.value), "aria-label": "format", children: [_jsx("option", { value: "", children: op === "openapi" ? "YAML" : "JSON" }), _jsx("option", { value: "json", children: "JSON" }), _jsx("option", { value: "yaml", children: "YAML" })] })] })), _jsx("button", { class: "primary", onClick: onRun, disabled: !!disabled || running, title: disabled || undefined, children: running ? "Running…" : "Run" })] })] }));
+}

package/dist/Output.d.ts

@@ -0,0 +1,20 @@
+import type { CodegenResponse, TranslateResponse, ValidateAnyResponse, ValidateResponse } from "./types";
+export type Outcome = {
+    op: "validate";
+    resp: ValidateResponse;
+} | {
+    op: "validate-any";
+    resp: ValidateAnyResponse;
+} | {
+    op: "translate";
+    resp: TranslateResponse;
+} | {
+    op: "openapi" | "jsonschema" | "typescript";
+    resp: CodegenResponse;
+};
+export interface OutputProps {
+    outcome: Outcome;
+    onOpen: (file: string) => void;
+    label?: (version: string) => string;
+}
+export declare function Output({ outcome, onOpen, label }: OutputProps): import("preact").JSX.Element;

package/dist/Output.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// What an operation returned: its result in its own terms, then its
+// diagnostics.
+import { Diagnostics } from "./Diagnostics";
+import { DocLink, lacunaTypeDoc } from "./docs";
+import { Editor } from "./Editor";
+const plain = (v) => v;
+export function Output({ outcome, onOpen, label = plain }) {
+    const { resp } = outcome;
+    return (_jsxs("div", { class: "output", children: [_jsx(Summary, { outcome: outcome, label: label }), _jsx(Body, { outcome: outcome, label: label }), (resp.diagnostics.length > 0 || outcome.op !== "validate-any") && (_jsx(Diagnostics, { diagnostics: resp.diagnostics, onOpen: onOpen, empty: "" }))] }));
+}
+function Summary({ outcome, label }) {
+    const { op, resp } = outcome;
+    if (!resp.ok)
+        return _jsxs("p", { class: "status failed", children: [op, " failed"] });
+    switch (op) {
+        case "validate":
+            return _jsxs("p", { class: "status ok", children: ["The data is an instance of schema ", label(outcome.resp.version ?? ""), "."] });
+        case "validate-any":
+            return _jsxs("p", { class: "status ok", children: ["The newest schema the data is an instance of is ", label(outcome.resp.version ?? ""), "."] });
+        case "translate":
+            return (_jsxs("p", { class: "status ok", children: ["Translated from ", label(outcome.resp.from ?? ""), " to ", label(outcome.resp.to ?? ""), lacunaCount(outcome.resp) === 0 ? ", with no lacunas" : lacunaCount(outcome.resp) === 1 ? ", with 1 lacuna" : `, with ${lacunaCount(outcome.resp)} lacunas`, "."] }));
+        default:
+            return _jsxs("p", { class: "status ok", children: ["Generated from schema ", label(outcome.resp.version ?? ""), "."] });
+    }
+}
+function Body({ outcome, label }) {
+    switch (outcome.op) {
+        case "validate-any":
+            return (_jsx("div", { class: "per-version", children: outcome.resp.perVersion.map((v) => (_jsxs("details", { open: !outcome.resp.ok, children: [_jsxs("summary", { children: ["schema ", label(v.version), ": ", v.diagnostics.length === 0 ? "accepts the data" : `${v.diagnostics.length} diagnostics`] }), _jsx(Diagnostics, { diagnostics: v.diagnostics, empty: "Accepts the data." })] }, v.version))) }));
+        case "translate": {
+            const r = outcome.resp;
+            if (!r.ok)
+                return null;
+            return (_jsxs(_Fragment, { children: [_jsx(Result, { text: JSON.stringify(r.output, null, 2), language: "json", label: "Translated instance" }), _jsx(Lacunas, { resp: r, label: label })] }));
+        }
+        case "openapi":
+        case "jsonschema":
+        case "typescript":
+            return outcome.resp.ok ? (_jsx(Result, { text: outcome.resp.output ?? "", language: outcome.op === "typescript" ? "text" : "json", label: "Generated code" })) : null;
+        default:
+            return null;
+    }
+}
+function Result({ text, language, label }) {
+    return (_jsx("div", { class: "result", children: _jsx(Editor, { text: text, language: language, readOnly: true, label: label }) }));
+}
+function Lacunas({ resp, label }) {
+    const steps = (resp.lacunas ?? []).filter((s) => s.lacunas.length > 0);
+    if (steps.length === 0)
+        return null;
+    return (_jsxs("table", { class: "lacunas", children: [_jsxs("caption", { children: ["Lacunas ", _jsx(DocLink, { topic: "lacunas" })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "step" }), _jsx("th", { children: "type" }), _jsx("th", { children: "fields" }), _jsx("th", { children: "message" })] }) }), _jsx("tbody", { children: steps.flatMap((s) => s.lacunas.map((l, i) => (_jsxs("tr", { children: [_jsxs("td", { children: [label(s.from.join(".")), " \u2192 ", label(s.to.join("."))] }), _jsxs("td", { children: [l.type, _jsx(DocLink, { doc: lacunaTypeDoc(l.type) })] }), _jsx("td", { children: [...(l.sourceFields ?? []), ...(l.targetFields ?? [])].map((f) => f.path).join(", ") }), _jsx("td", { children: l.message })] }, `${s.from}-${s.to}-${i}`)))) })] }));
+}
+function lacunaCount(r) {
+    return (r.lacunas ?? []).reduce((n, s) => n + s.lacunas.length, 0);
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { type Topic } from "./docs";
+export interface TabsProps {
+    names: readonly string[];
+    active: number;
+    flagged?: Set<string>;
+    onSelect: (i: number) => void;
+    onAdd?: () => void;
+    onRename?: (i: number, name: string) => void;
+    onRemove?: (i: number) => void;
+    label: string;
+    docs?: readonly (Topic | undefined)[];
+    frozen?: (name: string) => boolean;
+    frozenLabel?: string;
+}
+export declare function Tabs({ names, active, flagged, onSelect, onAdd, onRename, onRemove, label, docs, frozen, frozenLabel }: TabsProps): import("preact").JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// Tabs over a list of named texts, with adding, renaming and removing. Frozen
+// tabs are grouped after the others and can be opened but never renamed or
+// removed.
+import { DocLink } from "./docs";
+export function Tabs({ names, active, flagged, onSelect, onAdd, onRename, onRemove, label, docs, frozen, frozenLabel }) {
+    const isFrozen = (n) => !!frozen?.(n);
+    const tab = (n, i) => {
+        const fixed = isFrozen(n);
+        const rename = fixed ? undefined : onRename;
+        return (_jsxs("span", { class: `tab ${i === active ? "active" : ""} ${fixed ? "frozen" : ""}`, children: [_jsxs("button", { role: "tab", "aria-selected": i === active, onClick: () => onSelect(i), onDblClick: () => {
+                        if (!rename)
+                            return;
+                        const name = prompt("Rename to", n);
+                        if (name && name !== n)
+                            rename(i, name);
+                    }, title: fixed ? "Frozen: this version is cut and never changes" : rename ? "Double-click to rename" : undefined, children: [flagged?.has(n) && _jsx("span", { class: "flag", "aria-label": "has diagnostics", children: "\u25CF" }), n] }), docs?.[i] && _jsx(DocLink, { topic: docs[i] }), onRemove && !fixed && names.length > 1 && (_jsx("button", { class: "close", "aria-label": `Remove ${n}`, onClick: () => onRemove(i), children: "\u00D7" }))] }, i));
+    };
+    const indexed = names.map((n, i) => [n, i]);
+    const open = indexed.filter(([n]) => !isFrozen(n));
+    const fixed = indexed.filter(([n]) => isFrozen(n));
+    return (_jsxs("div", { class: "tabs", role: "tablist", "aria-label": label, children: [open.map(([n, i]) => tab(n, i)), onAdd && (_jsx("button", { class: "add", "aria-label": `Add to ${label}`, onClick: onAdd, children: "+" })), fixed.length > 0 && (_jsxs("span", { class: "tab-group frozen", role: "group", "aria-label": frozenLabel, children: [_jsx("span", { class: "group-label", "aria-hidden": "true", children: frozenLabel }), fixed.map(([n, i]) => tab(n, i))] }))] }));
+}

package/dist/cue-lang.d.ts

@@ -0,0 +1,8 @@
+import { StreamLanguage, type StreamParser } from "@codemirror/language";
+interface State {
+    inString: string | null;
+    inComment: boolean;
+}
+export declare const cueParser: StreamParser<State>;
+export declare const cue: StreamLanguage<State>;
+export {};

package/dist/cue-lang.js

@@ -0,0 +1,82 @@
+// A small CUE highlighter for CodeMirror. CUE has no CodeMirror 6 language
+// package; this tokenizes what an editor needs to colour: comments, strings,
+// numbers, keywords, builtin types, definitions, attributes and punctuation.
+// It does not parse.
+import { StreamLanguage } from "@codemirror/language";
+const keywords = new Set(["package", "import", "for", "in", "if", "let", "true", "false", "null"]);
+const types = new Set(["bool", "string", "bytes", "number", "int", "float", "uint", "rune", "_", "_|_", "int8", "int16", "int32", "int64", "uint8", "uint16", "uint32", "uint64", "float32", "float64"]);
+// The authoring form's own words.
+const authoring = new Set(["Schema", "ForwardLens", "BackwardLens", "lacunas", "_drop", "_coalesce", "_match", "_each", "_item", "when"]);
+export const cueParser = {
+    name: "cue",
+    startState: () => ({ inString: null, inComment: false }),
+    token(stream, state) {
+        if (state.inString) {
+            const close = state.inString;
+            while (!stream.eol()) {
+                if (stream.match(close)) {
+                    state.inString = null;
+                    return "string";
+                }
+                if (stream.next() === "\\")
+                    stream.next();
+            }
+            return "string";
+        }
+        if (stream.eatSpace())
+            return null;
+        if (stream.match("//")) {
+            stream.skipToEnd();
+            return "comment";
+        }
+        if (stream.match('"""') || stream.match("'''")) {
+            state.inString = stream.current();
+            return "string";
+        }
+        const ch = stream.peek();
+        if (ch === '"' || ch === "'") {
+            stream.next();
+            while (!stream.eol()) {
+                const c = stream.next();
+                if (c === "\\") {
+                    stream.next();
+                }
+                else if (c === ch) {
+                    break;
+                }
+            }
+            return "string";
+        }
+        if (ch === "@") {
+            stream.next();
+            stream.match(/^[A-Za-z_][\w]*/);
+            return "meta";
+        }
+        if (stream.match(/^-?(0x[0-9a-fA-F_]+|0o[0-7_]+|0b[01_]+|\d[\d_]*(\.\d+)?([eE][+-]?\d+)?[KMGTP]?i?)/)) {
+            return "number";
+        }
+        if (stream.match("_|_"))
+            return "typeName";
+        if (stream.match(/^#?[A-Za-z_$][\w$]*/)) {
+            const w = stream.current();
+            if (w.startsWith("#"))
+                return "className";
+            if (keywords.has(w))
+                return "keyword";
+            if (types.has(w))
+                return "typeName";
+            if (authoring.has(w))
+                return "keyword";
+            return stream.peek() === ":" || stream.match(/^\s*[?!]?\s*:/, false) ? "propertyName" : "variableName";
+        }
+        if (stream.match(/^(\.\.\.|=~|!~|[=!<>]=?|&&|\|\||[&|*+\-/])/))
+            return "operator";
+        stream.next();
+        return "punctuation";
+    },
+    languageData: {
+        commentTokens: { line: "//" },
+        closeBrackets: { brackets: ["(", "[", "{", '"'] },
+    },
+};
+export const cue = StreamLanguage.define(cueParser);