contour-deck 0.0.0-stage → 0.1.0

package/dist/rehype/index.js

@@ -0,0 +1,221 @@
+/**
+ * Assembles the deck of docs/CONTRACT.md from the hast of a slide post:
+ * deck → block → slide → page, with notes, steps, reading times, legacy indexes and slide ids.
+ *
+ * - A top-level `<hr>` (`---`) starts a slide. Inside it, each `::vertical` child is a further page
+ *   of the slide, unless its first `h2` differs from the slide's own: then it starts a new slide
+ *   in the same block (a child without an `h2` is always a page).
+ * - Blocks: `::block{…}` starts one. A deck with no `::block` starts a block at every slide that
+ *   opens with a `####` kicker, titled by the kicker. A deck with neither uses section dividers:
+ *   a slide whose first page is just an `h1` (`# 拆解`) starts a block titled by it. A title
+ *   starting with 附錄 gets `data-kind="appendix"`. Without any of these the deck is one block.
+ * - `<section>` inside page content is left alone: the contract reads data attributes only.
+ *
+ * Run it after `contour-deck/remark`, which writes the markers this plugin reads.
+ */
+import { MARK_BLOCK, MARK_SLIDE, MARK_VERTICAL } from "../shared/markers.js";
+import { element, isBlank, isElement, markOf, plainText, walkElements, } from "./hast.js";
+import { buildPage } from "./page.js";
+import { dividerOf, firstHeading, kickerOf, kindOf, shortOf, slideTitle } from "./titles.js";
+const ORIGIN = "contour-deck:rehype";
+function isFootnotes(node) {
+    return isElement(node) && node.tagName === "section" && node.properties.dataFootnotes !== undefined;
+}
+/** Splits at breaks matching `isSplit`, dropping the breaks and the groups `keep` rejects. */
+function splitAt(nodes, isSplit, keep) {
+    const groups = [[]];
+    for (const node of nodes) {
+        if (isSplit(node))
+            groups.push([]);
+        else
+            groups[groups.length - 1].push(node);
+    }
+    return groups.filter(keep);
+}
+const isSlideBreak = (node) => isElement(node) && node.tagName === "hr" && markOf(node) === undefined;
+const isPageBreak = (node) => markOf(node) === MARK_VERTICAL;
+const hasContent = (group) => group.some(node => !isBlank(node));
+function blockSpecOf(marker) {
+    const { dataTitle, dataShort, dataMinutes, dataKind, id } = marker.properties;
+    return {
+        title: String(dataTitle),
+        short: dataShort === undefined ? undefined : String(dataShort),
+        minutes: dataMinutes === undefined ? undefined : String(dataMinutes),
+        kind: dataKind === undefined ? undefined : String(dataKind),
+        id: typeof id === "string" ? id : undefined,
+    };
+}
+/**
+ * Reads the slides out of the flow. A `---` always starts a slide. Inside a `---` group each
+ * `::vertical` child is a further page of the current slide, unless it starts a new slide:
+ * it has an `h2` that differs from the slide's own `h2`, or it carries `::block` or `::slide`.
+ * A child without an `h2` (only `h3`, or body text) is always a page.
+ */
+function readSlides(flow, file) {
+    const drafts = [];
+    let pending;
+    let legacy = -1;
+    for (const group of splitAt(flow, isSlideBreak, group => group.length > 0)) {
+        let current;
+        let vertical = 0;
+        for (const chunk of splitAt(group, isPageBreak, chunk => chunk.length > 0)) {
+            const blocks = chunk.filter(node => markOf(node) === MARK_BLOCK);
+            const slides = chunk.filter(node => markOf(node) === MARK_SLIDE);
+            const rest = chunk.filter(node => !blocks.includes(node) && !slides.includes(node));
+            if (blocks.length > 1)
+                file.fail("a page holds two ::block directives", blocks[1], ORIGIN);
+            if (slides.length > 1)
+                file.fail("a page holds two ::slide directives", slides[1], ORIGIN);
+            const spec = blocks[0] && blockSpecOf(blocks[0]);
+            const twice = () => file.fail(`::block "${spec?.title}" follows ::block "${pending?.title}" with no slide between`, blocks[0], ORIGIN);
+            if (!hasContent(rest)) {
+                if (slides.length)
+                    file.fail("::slide without any content in its slide", slides[0], ORIGIN);
+                if (spec) {
+                    if (pending)
+                        twice();
+                    pending = spec;
+                }
+                continue;
+            }
+            if (spec && pending)
+                twice();
+            const block = spec ?? pending;
+            const h2 = firstHeading(rest, 2);
+            const startsSlide = !current || block || slides.length || (h2 !== undefined && h2 !== current.h2);
+            if (startsSlide) {
+                if (!current)
+                    legacy += 1;
+                current = {
+                    pages: [rest],
+                    id: slides[0] && String(slides[0].properties.id),
+                    block,
+                    h2,
+                    legacy,
+                    legacyV: vertical,
+                };
+                drafts.push(current);
+            }
+            else {
+                current.pages.push(rest);
+            }
+            pending = undefined;
+            vertical += 1;
+        }
+    }
+    if (pending)
+        file.fail(`::block "${pending.title}" has no slide after it`, undefined, ORIGIN);
+    return drafts;
+}
+/** Fails on a block or slide marker that is not at the top level of a slide. */
+function rejectNestedMarkers(drafts, file) {
+    for (const draft of drafts) {
+        for (const page of draft.pages) {
+            walkElements(page, node => {
+                const mark = markOf(node);
+                if (mark === MARK_BLOCK || mark === MARK_SLIDE) {
+                    file.fail(`::${mark} must stand at the top level of a slide, not inside another element`, node, ORIGIN);
+                }
+            });
+        }
+    }
+}
+/**
+ * Groups slides into blocks by the rules in the header. Where a block gets no title of its own
+ * (slides before the first marker) it is titled by the deck title, else the deck's first `h1`,
+ * else its first slide.
+ */
+function groupBlocks(drafts, deckTitle) {
+    const explicit = drafts.some(draft => draft.block);
+    const kickers = !explicit && drafts.some(draft => kickerOf(draft.pages[0]));
+    const groups = [];
+    const heading = (draft) => {
+        const node = kickers ? kickerOf(draft.pages[0]) : dividerOf(draft.pages[0]);
+        return node && plainText(node);
+    };
+    for (const draft of drafts) {
+        let spec = draft.block;
+        if (!explicit) {
+            const title = heading(draft);
+            if (title)
+                spec = { title, short: shortOf(title), kind: kindOf(title) };
+        }
+        else if (spec) {
+            spec = { ...spec, short: spec.short ?? shortOf(spec.title) };
+        }
+        if (spec || !groups.length) {
+            const lead = deckTitle || firstHeading(drafts.flatMap(item => item.pages.flat()), 1) || slideTitle(draft.pages, "Slides");
+            groups.push({ spec: spec ?? { title: lead }, slides: [] });
+        }
+        groups[groups.length - 1].slides.push(draft);
+    }
+    return groups;
+}
+function ids(nodes) {
+    const found = new Set();
+    walkElements(nodes, node => {
+        if (typeof node.properties.id === "string")
+            found.add(node.properties.id);
+    });
+    return found;
+}
+function assemble(drafts, deckTitle, file) {
+    const taken = ids(drafts.flatMap(draft => draft.pages.flat()));
+    const claim = (id, what) => {
+        if (taken.has(id))
+            file.fail(`${what} id "${id}" is already used in the document`, undefined, ORIGIN);
+        taken.add(id);
+        return id;
+    };
+    return groupBlocks(drafts, deckTitle).map(({ spec, slides }, blockIndex) => {
+        const properties = { dataCtBlock: true, dataTitle: spec.title };
+        if (spec.short)
+            properties.dataShort = spec.short;
+        if (spec.minutes)
+            properties.dataMinutes = spec.minutes;
+        if (spec.kind)
+            properties.dataKind = spec.kind;
+        if (spec.id)
+            properties.id = claim(spec.id, "block");
+        const sections = slides.map((draft, slideIndex) => {
+            const ordinal = `${blockIndex + 1}-${slideIndex + 1}`;
+            const id = draft.id ? claim(draft.id, "slide") : claim(`s-${ordinal}`, "slide");
+            return element("section", {
+                dataCtSlide: true,
+                id,
+                dataTitle: slideTitle(draft.pages, `Slide ${ordinal.replace("-", ".")}`),
+                dataLegacy: draft.legacy,
+                dataLegacyV: draft.legacyV,
+            }, draft.pages.map(buildPage));
+        });
+        return element("section", properties, sections);
+    });
+}
+function frontmatterTitle(file) {
+    const { astro } = file.data;
+    const title = astro?.frontmatter?.title;
+    return typeof title === "string" ? title : undefined;
+}
+export function rehypeDeck(options = {}) {
+    return (tree, file) => {
+        if (options.match && !options.match(file))
+            return;
+        const deckTitle = options.title ?? frontmatterTitle(file);
+        const before = [];
+        const after = [];
+        const flow = [];
+        for (const node of tree.children ?? []) {
+            if (node.type === "mdxjsEsm")
+                before.push(node);
+            else if (isFootnotes(node))
+                after.push(node);
+            else
+                flow.push(node);
+        }
+        const drafts = readSlides(flow, file);
+        rejectNestedMarkers(drafts, file);
+        const blocks = assemble(drafts, deckTitle, file);
+        const deck = element("div", { dataCtDeck: true, ...(deckTitle ? { dataTitle: deckTitle } : {}) }, blocks);
+        tree.children = [...before, deck, ...after];
+    };
+}

package/dist/rehype/page.d.ts

@@ -0,0 +1,2 @@
+import { type Element, type HastNode } from "./hast.js";
+export declare function buildPage(children: HastNode[]): Element;

package/dist/rehype/page.js

@@ -0,0 +1,84 @@
+/** One page: its notes, its steps, its reading time. */
+import { NOTES, MARK_BUILD } from "../shared/markers.js";
+import { element, hasClass, isBlank, isElement, markOf, textOf, } from "./hast.js";
+import { PAGE_MS, readingMs, STEP_MS } from "./reading.js";
+function isNotes(node) {
+    return isElement(node) && NOTES in node.properties;
+}
+function isStep(node) {
+    return isElement(node) && "dataCtStep" in node.properties;
+}
+/** Removes every notes element, at any depth, and returns them in document order. */
+function takeNotes(children, notes) {
+    return children.filter(node => {
+        if (isNotes(node)) {
+            notes.push(node);
+            return false;
+        }
+        if (node.children)
+            node.children = takeNotes(node.children, notes);
+        return true;
+    });
+}
+/** What a `:::build` reveals one at a time: list items, table body rows, or other blocks. */
+function stepTargets(build) {
+    const targets = [];
+    for (const child of build.children) {
+        if (!isElement(child))
+            continue;
+        if (child.tagName === "ul" || child.tagName === "ol") {
+            targets.push(...child.children.filter((item) => isElement(item) && item.tagName === "li"));
+        }
+        else if (child.tagName === "table" || hasClass(child, "table-scroll")) {
+            const visit = (node) => {
+                if (!isElement(node) || node.tagName === "thead")
+                    return;
+                if (node.tagName === "tr")
+                    targets.push(node);
+                else
+                    node.children.forEach(visit);
+            };
+            visit(child);
+        }
+        else {
+            targets.push(child);
+        }
+    }
+    return targets;
+}
+/** Marks the children of each build marker as steps and replaces the marker by its children. */
+function applyBuilds(nodes) {
+    return nodes.flatMap(node => {
+        if (!isElement(node))
+            return [node];
+        node.children = applyBuilds(node.children);
+        if (markOf(node) !== MARK_BUILD)
+            return [node];
+        for (const target of stepTargets(node)) {
+            target.properties = {
+                ...target.properties,
+                dataCtStep: true,
+                dataMs: readingMs(textOf(target), STEP_MS),
+            };
+        }
+        return node.children;
+    });
+}
+/** `--i: n` on each content child, the order of the entrance animation. */
+function staggerIndex(content) {
+    content.filter(isElement).forEach((node, order) => {
+        const style = node.properties.style;
+        node.properties.style =
+            typeof style === "string" && style.trim() ? `--i: ${order}; ${style}` : `--i: ${order}`;
+    });
+}
+export function buildPage(children) {
+    const notes = [];
+    const content = applyBuilds(takeNotes(children, notes)).filter(node => !isBlank(node));
+    staggerIndex(content);
+    const withoutSteps = content.map(node => textOf(node, isStep)).join("");
+    return element("section", { dataCtPage: true, dataMs: readingMs(withoutSteps, PAGE_MS) }, [
+        ...content,
+        ...notes,
+    ]);
+}

package/dist/rehype/reading.d.ts

@@ -0,0 +1,11 @@
+/** Reading time for autoplay: the blog's formula (`rehype-slides.ts`), unchanged. */
+export interface Budget {
+    base: number;
+    perChar: number;
+    min: number;
+    max: number;
+}
+export declare const PAGE_MS: Budget;
+export declare const STEP_MS: Budget;
+/** Whole milliseconds to read `text`, whitespace not counted, rounded to 100. */
+export declare function readingMs(text: string, budget: Budget): number;

package/dist/rehype/reading.js

@@ -0,0 +1,9 @@
+/** Reading time for autoplay: the blog's formula (`rehype-slides.ts`), unchanged. */
+export const PAGE_MS = { base: 3000, perChar: 100, min: 3000, max: 20000 };
+export const STEP_MS = { base: 1500, perChar: 100, min: 1500, max: 12000 };
+/** Whole milliseconds to read `text`, whitespace not counted, rounded to 100. */
+export function readingMs(text, budget) {
+    const chars = text.replace(/\s+/g, "").length;
+    const ms = budget.base + chars * budget.perChar;
+    return Math.round(Math.min(budget.max, Math.max(budget.min, ms)) / 100) * 100;
+}

package/dist/rehype/titles.d.ts

@@ -0,0 +1,19 @@
+import { type Element, type HastNode } from "./hast.js";
+/** `#### 三、主要問題` style kicker: the first content element of the page is an `h4`. */
+export declare function kickerOf(page: HastNode[]): Element | undefined;
+/** A section divider: the page holds an `h1` and nothing else, such as `# 拆解`. */
+export declare function dividerOf(page: HastNode[]): Element | undefined;
+/** The first heading of `level` (1–6) in `nodes`, as plain text. */
+export declare function firstHeading(nodes: HastNode[], level: number): string | undefined;
+/**
+ * A slide's title: its first `h1`–`h3` heading (the kicker is an `h4`, so it never wins over the
+ * slide's own heading), else its first heading of any level, else a text snippet, else `fallback`.
+ */
+export declare function slideTitle(pages: HastNode[][], fallback: string): string;
+/**
+ * The locator label of a block title: `三、主要問題` gives `三`, `附錄 A｜…` gives `A`.
+ * Undefined when the title has no such lead, or the lead is longer than 3 characters.
+ */
+export declare function shortOf(title: string): string | undefined;
+/** Under the `####` fallback rule, a block titled `附錄 …` is an appendix. */
+export declare function kindOf(title: string): string | undefined;

package/dist/rehype/titles.js

@@ -0,0 +1,63 @@
+/** Titles and short labels the plugin derives when the author gives none. */
+import { NOTES } from "../shared/markers.js";
+import { isElement, plainText, walkElements } from "./hast.js";
+const SNIPPET_CHARS = 40;
+/** The element children of a page, not counting its notes. */
+function contentElements(page) {
+    return page.filter(isElement).filter(node => !(NOTES in node.properties));
+}
+/** `#### 三、主要問題` style kicker: the first content element of the page is an `h4`. */
+export function kickerOf(page) {
+    const [first] = contentElements(page);
+    return first?.tagName === "h4" ? first : undefined;
+}
+/** A section divider: the page holds an `h1` and nothing else, such as `# 拆解`. */
+export function dividerOf(page) {
+    const content = contentElements(page);
+    return content.length === 1 && content[0].tagName === "h1" ? content[0] : undefined;
+}
+/** The first heading of `level` (1–6) in `nodes`, as plain text. */
+export function firstHeading(nodes, level) {
+    let found;
+    walkElements(nodes, node => {
+        if (found === undefined && node.tagName === `h${level}`)
+            found = plainText(node);
+    });
+    return found || undefined;
+}
+/**
+ * A slide's title: its first `h1`–`h3` heading (the kicker is an `h4`, so it never wins over the
+ * slide's own heading), else its first heading of any level, else a text snippet, else `fallback`.
+ */
+export function slideTitle(pages, fallback) {
+    const headings = [];
+    for (const page of pages) {
+        walkElements(page, node => {
+            if (/^h[1-6]$/.test(node.tagName))
+                headings.push(node);
+        });
+    }
+    const preferred = headings.find(node => Number(node.tagName[1]) <= 3) ?? headings[0];
+    const heading = preferred && plainText(preferred);
+    if (heading)
+        return heading;
+    const text = plainText({ type: "root", children: pages.flat() });
+    if (!text)
+        return fallback;
+    const chars = [...text];
+    return chars.length > SNIPPET_CHARS ? `${chars.slice(0, SNIPPET_CHARS).join("")}…` : text;
+}
+const NUMERAL = /^([一二三四五六七八九十百零〇]+|\d+)\s*[、.．]/;
+const APPENDIX = /^附錄\s*(\S+?)\s*[｜|:：、]/;
+/**
+ * The locator label of a block title: `三、主要問題` gives `三`, `附錄 A｜…` gives `A`.
+ * Undefined when the title has no such lead, or the lead is longer than 3 characters.
+ */
+export function shortOf(title) {
+    const lead = NUMERAL.exec(title)?.[1] ?? APPENDIX.exec(title)?.[1];
+    return lead && [...lead].length <= 3 ? lead : undefined;
+}
+/** Under the `####` fallback rule, a block titled `附錄 …` is an appendix. */
+export function kindOf(title) {
+    return title.startsWith("附錄") ? "appendix" : undefined;
+}

package/dist/remark/index.d.ts

@@ -0,0 +1,20 @@
+interface MdNode {
+    type: string;
+    name?: string;
+    attributes?: Record<string, string | null | undefined> | null;
+    children?: MdNode[];
+    data?: {
+        hName?: string;
+        hProperties?: Record<string, unknown>;
+    };
+}
+export interface DeckFile {
+    data: object;
+    fail(reason: string, place?: unknown, origin?: string): never;
+}
+export interface RemarkDeckOptions {
+    /** Whether this file is a Contour deck. Default: every file. Pass the same test to `contour-deck/rehype`. */
+    match?: (file: DeckFile) => boolean;
+}
+export declare function remarkDeck(options?: RemarkDeckOptions): (tree: MdNode, file: DeckFile) => void;
+export {};

package/dist/remark/index.js

@@ -0,0 +1,117 @@
+/**
+ * Turns the slide directives of the blog's Markdown into marker elements for
+ * `contour-deck/rehype`. The host registers `remark-directive` before this plugin.
+ *
+ * | Markdown                                         | Becomes                                  |
+ * | ------------------------------------------------ | ---------------------------------------- |
+ * | `:::summary` … `:::`                             | `<aside data-ct-notes>`                  |
+ * | `:::build` … `:::`                               | build marker (rehype marks the steps)    |
+ * | `::vertical`                                     | page break marker                        |
+ * | `::block{title="…" minutes=5 kind=appendix}`     | block marker                             |
+ * | `::slide{#id}`                                   | marker that gives the slide its id       |
+ *
+ * A directive written in the wrong form (`::summary` for `:::summary`) is an error here,
+ * not an empty box, and so is an unknown attribute.
+ */
+import { MARK, MARK_BLOCK, MARK_BUILD, MARK_SLIDE, MARK_VERTICAL, NOTES } from "../shared/markers.js";
+const ORIGIN = "contour-deck:remark";
+const DIRECTIVES = {
+    summary: {
+        form: "container",
+        attributes: [],
+        hast: () => ({ hName: "aside", hProperties: { [NOTES]: true } }),
+    },
+    build: {
+        form: "container",
+        attributes: [],
+        hast: () => ({ hName: "div", hProperties: { [MARK]: MARK_BUILD } }),
+    },
+    vertical: {
+        form: "leaf",
+        attributes: [],
+        hast: () => ({ hName: "hr", hProperties: { [MARK]: MARK_VERTICAL } }),
+    },
+    slide: {
+        form: "leaf",
+        attributes: ["id"],
+        hast(node, attributes, file) {
+            if (!attributes.id)
+                file.fail("::slide needs an id: ::slide{#dilemma}", node, ORIGIN);
+            return { hName: "div", hProperties: { [MARK]: MARK_SLIDE, id: attributes.id } };
+        },
+    },
+    block: {
+        form: "leaf",
+        attributes: ["title", "short", "minutes", "kind", "id"],
+        hast(node, attributes, file) {
+            const title = attributes.title?.trim();
+            if (!title)
+                file.fail('::block needs a title: ::block{title="三、主要問題"}', node, ORIGIN);
+            const properties = { [MARK]: MARK_BLOCK, dataTitle: title };
+            if (attributes.short !== undefined) {
+                const short = attributes.short.trim();
+                if (!short || [...short].length > 3) {
+                    file.fail(`::block short must be 1 to 3 characters, got "${attributes.short}"`, node, ORIGIN);
+                }
+                properties.dataShort = short;
+            }
+            if (attributes.minutes !== undefined) {
+                const minutes = Number(attributes.minutes);
+                if (!/^\d+(\.\d+)?$/.test(attributes.minutes) || !(minutes > 0)) {
+                    file.fail(`::block minutes must be a positive number, got "${attributes.minutes}"`, node, ORIGIN);
+                }
+                properties.dataMinutes = String(minutes);
+            }
+            if (attributes.kind !== undefined) {
+                if (!/^\S+$/.test(attributes.kind)) {
+                    file.fail(`::block kind must be one token, got "${attributes.kind}"`, node, ORIGIN);
+                }
+                properties.dataKind = attributes.kind;
+            }
+            if (attributes.id)
+                properties.id = attributes.id;
+            return { hName: "div", hProperties: properties };
+        },
+    },
+};
+const FORM_OF_TYPE = {
+    containerDirective: "container",
+    leafDirective: "leaf",
+    textDirective: "text",
+};
+const EXAMPLE = {
+    container: name => `:::${name} … :::`,
+    leaf: name => `::${name}`,
+};
+function apply(node, file) {
+    const directive = node.name ? DIRECTIVES[node.name] : undefined;
+    if (!directive || !node.name)
+        return;
+    const form = FORM_OF_TYPE[node.type];
+    if (form !== directive.form) {
+        file.fail(`${node.name} is a ${directive.form} directive: write ${EXAMPLE[directive.form](node.name)}`, node, ORIGIN);
+    }
+    const attributes = {};
+    for (const [key, value] of Object.entries(node.attributes ?? {})) {
+        if (!directive.attributes.includes(key)) {
+            const known = directive.attributes.length ? directive.attributes.join(", ") : "none";
+            file.fail(`${node.name} has no attribute "${key}" (known: ${known})`, node, ORIGIN);
+        }
+        attributes[key] = value ?? "";
+    }
+    node.data = { ...node.data, ...directive.hast(node, attributes, file) };
+    if (directive.form === "leaf")
+        node.children = [];
+}
+function visit(node, file) {
+    apply(node, file);
+    for (const child of node.children ?? [])
+        visit(child, file);
+}
+export function remarkDeck(options = {}) {
+    return (tree, file) => {
+        if (options.match && !options.match(file))
+            return;
+        visit(tree, file);
+    };
+}

package/dist/shared/markers.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The hand-off between `contour-deck/remark` and `contour-deck/rehype`.
+ *
+ * The remark plugin writes these marker elements; the rehype plugin consumes them and
+ * removes every one, so none appears in the final HTML except `data-ct-notes`, which is
+ * already the contract's own attribute.
+ */
+/** hast property that names a marker (`data-ct-mark` in HTML). */
+export declare const MARK = "dataCtMark";
+/** hast property of a notes element (`data-ct-notes` in HTML). */
+export declare const NOTES = "dataCtNotes";
+export declare const MARK_BLOCK = "block";
+export declare const MARK_SLIDE = "slide";
+export declare const MARK_VERTICAL = "vertical";
+export declare const MARK_BUILD = "build";

package/dist/shared/markers.js

@@ -0,0 +1,15 @@
+/**
+ * The hand-off between `contour-deck/remark` and `contour-deck/rehype`.
+ *
+ * The remark plugin writes these marker elements; the rehype plugin consumes them and
+ * removes every one, so none appears in the final HTML except `data-ct-notes`, which is
+ * already the contract's own attribute.
+ */
+/** hast property that names a marker (`data-ct-mark` in HTML). */
+export const MARK = "dataCtMark";
+/** hast property of a notes element (`data-ct-notes` in HTML). */
+export const NOTES = "dataCtNotes";
+export const MARK_BLOCK = "block";
+export const MARK_SLIDE = "slide";
+export const MARK_VERTICAL = "vertical";
+export const MARK_BUILD = "build";