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

package/dist/docs.d.ts

@@ -0,0 +1,64 @@
+export declare const docsBase = "https://github.com/sdboyer/thema/blob/main/docs/";
+export declare function themaDoc(path: string): string;
+export interface Doc {
+    href: string;
+    title: string;
+}
+export declare const docs: {
+    lineage: {
+        href: string;
+        title: string;
+    };
+    versions: {
+        href: string;
+        title: string;
+    };
+    forms: {
+        href: string;
+        title: string;
+    };
+    bind: {
+        href: string;
+        title: string;
+    };
+    validate: {
+        href: string;
+        title: string;
+    };
+    "validate-any": {
+        href: string;
+        title: string;
+    };
+    translate: {
+        href: string;
+        title: string;
+    };
+    openapi: {
+        href: string;
+        title: string;
+    };
+    jsonschema: {
+        href: string;
+        title: string;
+    };
+    typescript: {
+        href: string;
+        title: string;
+    };
+    lacunas: {
+        href: string;
+        title: string;
+    };
+    diagnostics: {
+        href: string;
+        title: string;
+    };
+};
+export type Topic = keyof typeof docs;
+export declare function hasDoc(name: string): name is Topic;
+export declare function lacunaTypeDoc(type: string): Doc;
+export declare function DocLink(props: {
+    topic: Topic;
+} | {
+    doc: Doc;
+}): import("preact").JSX.Element;

package/dist/docs.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// Where the page points for what thema's terms mean: thema's own docs, which
+// live in this tree beside the playground, and pkg.go.dev for what only the
+// Go API documents.
+// docsBase is where thema's docs/ is published.
+export const docsBase = "https://github.com/sdboyer/thema/blob/main/docs/";
+// themaDoc is the URL of a file under thema's docs/.
+export function themaDoc(path) {
+    return docsBase + path;
+}
+// ref is the URL of an entry in thema's reference docs, docs/reference/.
+function ref(page, anchor = "") {
+    return themaDoc(`reference/${page}${anchor ? "#" + anchor : ""}`);
+}
+// docs are the terms the page links to their reference entries. Operations
+// are keyed by their names.
+export const docs = {
+    lineage: { href: ref("lineage.md"), title: "Lineages" },
+    versions: { href: ref("lineage.md", "versions"), title: "Versions, minor and major" },
+    forms: { href: ref("lineage.md", "forms"), title: "The normal form and the authoring form" },
+    bind: { href: ref("lineage.md", "binding"), title: "Binding: what thema checks of a lineage" },
+    validate: { href: ref("operations.md", "validate"), title: "validate" },
+    "validate-any": { href: ref("operations.md", "validate-any"), title: "validate-any" },
+    translate: { href: ref("operations.md", "translate"), title: "translate" },
+    openapi: { href: ref("codegen.md", "openapi"), title: "Generating OpenAPI" },
+    jsonschema: { href: ref("codegen.md", "json-schema"), title: "Generating JSON Schema" },
+    typescript: { href: ref("codegen.md", "typescript"), title: "Generating TypeScript" },
+    lacunas: { href: ref("lacunas.md"), title: "Lacunas" },
+    diagnostics: { href: themaDoc("errors/README.md"), title: "Diagnostic codes" },
+};
+export function hasDoc(name) {
+    return Object.hasOwn(docs, name);
+}
+// lacunaTypeDoc is the reference entry for a lacuna type.
+export function lacunaTypeDoc(type) {
+    return { href: ref("lacunas.md", type.toLowerCase()), title: `The ${type} lacuna type` };
+}
+// DocLink is the small ? beside a term, opening its reference entry.
+export function DocLink(props) {
+    const d = "doc" in props ? props.doc : docs[props.topic];
+    return (_jsx("a", { class: "doc-link", href: d.href, target: "_blank", rel: "noreferrer", title: d.title, "aria-label": `Reference: ${d.title}`, children: "?" }));
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./cue-lang";
+export * from "./Diagnostics";
+export * from "./docs";
+export * from "./Editor";
+export * from "./markers";
+export * from "./OpBar";
+export * from "./ops";
+export * from "./Output";
+export * from "./positions";
+export * from "./Tabs";
+export * from "./theme";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,18 @@
+// The pieces of the thema playground's frontend that other tools build on:
+// the CUE language mode, the editor and its theme, diagnostics shown in place,
+// the operations bar, tabs and an operation's output, and the wire types of
+// thema's diagnostics and session API. The playground
+// itself imports everything it shares from here, so this is exactly what it
+// uses.
+export * from "./cue-lang";
+export * from "./Diagnostics";
+export * from "./docs";
+export * from "./Editor";
+export * from "./markers";
+export * from "./OpBar";
+export * from "./ops";
+export * from "./Output";
+export * from "./positions";
+export * from "./Tabs";
+export * from "./theme";
+export * from "./types";

package/dist/markers.d.ts

@@ -0,0 +1,11 @@
+import type { Diagnostic } from "./types";
+export interface Marker {
+    from: number;
+    to: number;
+    severity: "error" | "warning" | "info";
+    message: string;
+    code: string;
+}
+export declare function markersFor(ds: readonly Diagnostic[], file: string, text: string): Marker[];
+export declare function docsURL(code: string): string;
+export declare function filesOf(ds: readonly Diagnostic[]): Set<string>;

package/dist/markers.js

@@ -0,0 +1,45 @@
+import { themaDoc } from "./docs";
+import { offsetOf, spanAt } from "./positions";
+export function markersFor(ds, file, text) {
+    const out = [];
+    const at = (p) => {
+        if (!p || p.file !== file || p.origin === "thema")
+            return null;
+        const off = offsetOf(text, p);
+        return off === null ? null : spanAt(text, off);
+    };
+    for (const d of ds) {
+        const primary = at(d.primary);
+        if (primary) {
+            const extra = [...(d.help ?? []).map((h) => `help: ${h}`)];
+            out.push({
+                ...primary,
+                severity: d.severity === "warning" ? "warning" : d.severity === "note" ? "info" : "error",
+                message: [`${d.code}: ${d.headline}`, ...extra].join("\n"),
+                code: d.code,
+            });
+        }
+        for (const n of d.notes ?? []) {
+            const span = at(n.pos);
+            if (span) {
+                out.push({ ...span, severity: "info", message: `${d.code}: ${n.label}`, code: d.code });
+            }
+        }
+    }
+    return out;
+}
+// docsURL is where a code is explained, in the docs of the thema the page
+// runs.
+export function docsURL(code) {
+    return themaDoc(`errors/${encodeURIComponent(code)}.md`);
+}
+// filesOf lists the files diagnostics point into, so a file tab can say it
+// has problems without being open.
+export function filesOf(ds) {
+    const s = new Set();
+    for (const d of ds) {
+        if (d.primary && d.primary.origin !== "thema")
+            s.add(d.primary.file);
+    }
+    return s;
+}

package/dist/ops.d.ts

@@ -0,0 +1,13 @@
+export type DataOp = "validate" | "validate-any" | "translate";
+export type CodegenOp = "openapi" | "jsonschema" | "typescript";
+export type UserOp = DataOp | CodegenOp;
+export declare const dataOps: readonly DataOp[];
+export declare const codegenOps: readonly CodegenOp[];
+export interface OpArgs {
+    version: string;
+    from: string;
+    to: string;
+    format: string;
+}
+export declare function isCodegen(op: string): op is CodegenOp;
+export declare function argsOf(op: UserOp): ReadonlyArray<"version" | "from" | "to" | "format">;

package/dist/ops.js

@@ -0,0 +1,22 @@
+// The operations a user runs on data or on a lineage, and the arguments each
+// takes: what OpBar offers and Output renders the result of.
+export const dataOps = ["validate", "validate-any", "translate"];
+export const codegenOps = ["openapi", "jsonschema", "typescript"];
+export function isCodegen(op) {
+    return op === "openapi" || op === "jsonschema" || op === "typescript";
+}
+// The arguments each operation takes, for the panel to offer.
+export function argsOf(op) {
+    switch (op) {
+        case "validate":
+        case "typescript":
+            return ["version"];
+        case "validate-any":
+            return [];
+        case "translate":
+            return ["from", "to"];
+        case "openapi":
+        case "jsonschema":
+            return ["version", "format"];
+    }
+}

package/dist/positions.d.ts

@@ -0,0 +1,7 @@
+import type { Pos } from "./types";
+export declare function offsetOf(text: string, pos: Pick<Pos, "line" | "col">): number | null;
+export declare function charIndexOfByte(s: string, b: number): number;
+export declare function spanAt(text: string, from: number): {
+    from: number;
+    to: number;
+};

package/dist/positions.js

@@ -0,0 +1,40 @@
+// offsetOf is pos as an offset into text, or null when text has no such
+// line. A column past the line's end is clamped to it.
+export function offsetOf(text, pos) {
+    if (pos.line < 1)
+        return null;
+    let start = 0;
+    for (let l = 1; l < pos.line; l++) {
+        const nl = text.indexOf("\n", start);
+        if (nl < 0)
+            return null;
+        start = nl + 1;
+    }
+    let end = text.indexOf("\n", start);
+    if (end < 0)
+        end = text.length;
+    const line = text.slice(start, end);
+    return start + charIndexOfByte(line, Math.max(0, pos.col - 1));
+}
+// charIndexOfByte is the index of the character that starts at byte b of
+// s's UTF-8 encoding.
+export function charIndexOfByte(s, b) {
+    let bytes = 0;
+    let i = 0;
+    while (i < s.length && bytes < b) {
+        const cp = s.codePointAt(i);
+        bytes += cp < 0x80 ? 1 : cp < 0x800 ? 2 : cp < 0x10000 ? 3 : 4;
+        i += cp > 0xffff ? 2 : 1;
+    }
+    return i;
+}
+// spanAt is the range to underline for a position: the word or quoted string
+// that starts there, or one character.
+export function spanAt(text, from) {
+    if (from >= text.length)
+        return { from: Math.max(0, text.length - 1), to: text.length };
+    const rest = text.slice(from);
+    const m = /^("(?:[^"\\\n]|\\.)*"|#?[\w$.]+)/.exec(rest);
+    const len = m ? m[0].length : 1;
+    return { from, to: from + Math.max(1, len) };
+}

package/dist/theme.d.ts

@@ -0,0 +1,16 @@
+import { HighlightStyle } from "@codemirror/language";
+export declare const tokenColors: {
+    readonly keyword: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly string: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly literal: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly type: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly definition: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly property: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly comment: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly meta: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+    readonly punctuation: readonly [import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag, import("@lezer/highlight").Tag];
+};
+export declare const highlight: HighlightStyle;
+export declare const lightTheme: import("@codemirror/state").Extension;
+export declare const darkTheme: import("@codemirror/state").Extension;
+export declare function darkScheme(): MediaQueryList | null;

package/dist/theme.js

@@ -0,0 +1,55 @@
+// The editors' look. Colors come from the page's stylesheet, as CSS
+// variables with a light and a dark value each, so the editors follow the
+// system's color scheme with the rest of the page. CodeMirror's own
+// light/dark rules (caret, search panel, bracket matching) key off whether
+// the editor theme says it is dark, so the editor also needs telling.
+import { HighlightStyle } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+// The token colors, each a --syn-* variable in style.css. A test holds every
+// one to readable contrast against the editor's background in both schemes.
+export const tokenColors = {
+    keyword: [t.keyword, t.controlKeyword, t.moduleKeyword, t.operatorKeyword],
+    string: [t.string, t.special(t.string), t.regexp, t.escape],
+    literal: [t.number, t.bool, t.null, t.atom],
+    type: [t.typeName, t.standard(t.typeName)],
+    definition: [t.className, t.definition(t.typeName)],
+    property: [t.propertyName, t.definition(t.propertyName)],
+    comment: [t.comment, t.lineComment, t.blockComment],
+    meta: [t.meta, t.annotation],
+    punctuation: [t.punctuation, t.bracket, t.separator, t.operator],
+};
+// One rule per tag: a later rule naming the same tag replaces an earlier one
+// rather than adding to it, so a comment's italics ride with its color.
+export const highlight = HighlightStyle.define([
+    ...Object.entries(tokenColors).map(([name, tag]) => ({
+        tag: [...tag],
+        color: `var(--syn-${name})`,
+        ...(name === "comment" ? { fontStyle: "italic" } : {}),
+    })),
+    { tag: t.invalid, color: "var(--error)" },
+]);
+const spec = {
+    "&": { height: "100%", fontSize: "var(--code-size)", color: "var(--text)", backgroundColor: "var(--bg)" },
+    ".cm-scroller": { fontFamily: "var(--mono)", lineHeight: "1.5" },
+    ".cm-content": { caretColor: "var(--text)" },
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--text)" },
+    ".cm-gutters": { background: "var(--panel)", color: "var(--muted)", border: "none" },
+    ".cm-activeLine": { background: "var(--active-line)" },
+    ".cm-activeLineGutter": { background: "var(--active-line)", color: "var(--text)" },
+    ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+        background: "var(--selection)",
+    },
+    ".cm-tooltip": { background: "var(--panel)", color: "var(--text)", border: "1px solid var(--border)" },
+    ".cm-tooltip-lint": { fontFamily: "var(--mono)", fontSize: "var(--code-size)" },
+    ".cm-diagnostic": { whiteSpace: "pre-wrap" },
+    ".cm-diagnosticSource": { color: "var(--muted)" },
+    "&.cm-focused": { outline: "none" },
+};
+export const lightTheme = EditorView.theme(spec, { dark: false });
+export const darkTheme = EditorView.theme(spec, { dark: true });
+// darkScheme is the system's color-scheme preference, or null where there is
+// no way to ask (jsdom).
+export function darkScheme() {
+    return typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
+}