@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.148

package/dist/codemirror.js

@@ -8,91 +8,120 @@ import { EditorView } from "@codemirror/view";
  * `source` and `text` are records, `keyword` is a command, `namespace` a folder, `type` a type.
  */
 export const mdbasePopupTheme = EditorView.theme({
-    ".cm-tooltip": {
-        border: "1px solid var(--color-border-strong)",
-        borderRadius: "var(--control-radius, 2px)",
-        color: "var(--color-text)",
-        backgroundColor: "var(--color-surface)",
-        boxShadow: "none",
-        fontFamily: "var(--sans)"
-    },
-    ".cm-tooltip.cm-tooltip-autocomplete": { padding: "4px" },
-    ".cm-tooltip.cm-tooltip-autocomplete > ul": {
-        width: "min(440px, calc(100vw - 24px))",
-        minWidth: "0",
-        maxWidth: "none",
-        maxHeight: "min(252px, 45vh)",
-        fontFamily: "var(--sans)",
-        whiteSpace: "normal"
-    },
-    ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
-        display: "grid",
-        gridTemplateColumns: "20px minmax(0, 1fr)",
-        columnGap: "8px",
-        alignItems: "center",
-        padding: "6px 8px",
-        borderRadius: "var(--control-radius, 2px)",
-        lineHeight: "1.35"
-    },
-    ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
-        color: "var(--color-text)",
-        background: "var(--color-selected)"
-    },
-    ".cm-tooltip.cm-tooltip-autocomplete > ul > li > *": {
-        minWidth: "0",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-    },
-    ".cm-completionIcon": {
-        gridRow: "1 / span 2",
-        width: "20px",
-        padding: "0",
-        color: "var(--color-text-muted)",
-        fontSize: "13px",
-        lineHeight: "20px",
-        textAlign: "center",
-        opacity: "1"
-    },
-    ".cm-completionIcon-citation::after": { content: '"@"', color: "var(--color-accent)" },
-    ".cm-completionIcon-annotation::after": { content: '"❝"', color: "var(--color-accent)" },
-    ".cm-completionIcon-source::after, .cm-completionIcon-text::after": { content: '"§"' },
-    ".cm-completionIcon-keyword::after": { content: '"/"' },
-    ".cm-completionIcon-namespace::after": { content: '"▤"' },
-    ".cm-completionIcon-type::after": { content: '"T"' },
-    ".cm-completionLabel": {
-        gridColumn: "2",
-        color: "var(--color-text)",
-        fontSize: "13px",
-        fontWeight: "700"
-    },
-    ".cm-completionMatchedText": {
-        textDecoration: "none",
-        color: "var(--color-accent)"
-    },
-    ".cm-completionDetail": {
-        gridColumn: "2",
-        marginLeft: "0",
-        color: "var(--color-text-muted)",
-        fontSize: "11px",
-        fontStyle: "normal"
-    },
-    ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
-        color: "var(--color-text-faint)",
-        fontSize: "11px"
-    },
-    ".cm-tooltip.cm-completionInfo": {
-        maxWidth: "min(320px, calc(100vw - 24px))",
-        margin: "0 4px",
-        padding: "10px 12px",
-        color: "var(--color-text-soft)",
-        fontSize: "12px",
-        lineHeight: "1.5",
-        whiteSpace: "pre-line"
-    },
-    ".cm-tooltip.cm-tooltip-lint": { padding: "4px", fontSize: "12px" },
-    ".cm-diagnostic": { padding: "4px 8px", borderRadius: "var(--control-radius, 2px)", fontFamily: "var(--sans)" },
-    ".cm-diagnostic-error": { borderLeft: "3px solid var(--color-danger)" },
-    ".cm-diagnostic-warning": { borderLeft: "3px solid var(--color-warning)" },
-    ".cm-diagnostic-info, .cm-diagnostic-hint": { borderLeft: "3px solid var(--color-accent)" }
+  ".cm-tooltip": {
+    border: "1px solid var(--color-border-strong)",
+    borderRadius: "var(--control-radius, 2px)",
+    color: "var(--color-text)",
+    backgroundColor: "var(--color-surface)",
+    boxShadow: "none",
+    fontFamily: "var(--sans)"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    padding: "4px"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    width: "min(440px, calc(100vw - 24px))",
+    minWidth: "0",
+    maxWidth: "none",
+    maxHeight: "min(252px, 45vh)",
+    fontFamily: "var(--sans)",
+    whiteSpace: "normal"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+    display: "grid",
+    gridTemplateColumns: "20px minmax(0, 1fr)",
+    columnGap: "8px",
+    alignItems: "center",
+    padding: "6px 8px",
+    borderRadius: "var(--control-radius, 2px)",
+    lineHeight: "1.35"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    color: "var(--color-text)",
+    background: "var(--color-selected)"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li > *": {
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  ".cm-completionIcon": {
+    gridRow: "1 / span 2",
+    width: "20px",
+    padding: "0",
+    color: "var(--color-text-muted)",
+    fontSize: "13px",
+    lineHeight: "20px",
+    textAlign: "center",
+    opacity: "1"
+  },
+  ".cm-completionIcon-citation::after": {
+    content: '"@"',
+    color: "var(--color-accent)"
+  },
+  ".cm-completionIcon-annotation::after": {
+    content: '"❝"',
+    color: "var(--color-accent)"
+  },
+  ".cm-completionIcon-source::after, .cm-completionIcon-text::after": {
+    content: '"§"'
+  },
+  ".cm-completionIcon-keyword::after": {
+    content: '"/"'
+  },
+  ".cm-completionIcon-namespace::after": {
+    content: '"▤"'
+  },
+  ".cm-completionIcon-type::after": {
+    content: '"T"'
+  },
+  ".cm-completionLabel": {
+    gridColumn: "2",
+    color: "var(--color-text)",
+    fontSize: "13px",
+    fontWeight: "700"
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none",
+    color: "var(--color-accent)"
+  },
+  ".cm-completionDetail": {
+    gridColumn: "2",
+    marginLeft: "0",
+    color: "var(--color-text-muted)",
+    fontSize: "11px",
+    fontStyle: "normal"
+  },
+  ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
+    color: "var(--color-text-faint)",
+    fontSize: "11px"
+  },
+  ".cm-tooltip.cm-completionInfo": {
+    maxWidth: "min(320px, calc(100vw - 24px))",
+    margin: "0 4px",
+    padding: "10px 12px",
+    color: "var(--color-text-soft)",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    whiteSpace: "pre-line"
+  },
+  ".cm-tooltip.cm-tooltip-lint": {
+    padding: "4px",
+    fontSize: "12px"
+  },
+  ".cm-diagnostic": {
+    padding: "4px 8px",
+    borderRadius: "var(--control-radius, 2px)",
+    fontFamily: "var(--sans)"
+  },
+  ".cm-diagnostic-error": {
+    borderLeft: "3px solid var(--color-danger)"
+  },
+  ".cm-diagnostic-warning": {
+    borderLeft: "3px solid var(--color-warning)"
+  },
+  ".cm-diagnostic-info, .cm-diagnostic-hint": {
+    borderLeft: "3px solid var(--color-accent)"
+  }
 });

package/dist/collections/CollectionGate.d.ts

@@ -0,0 +1,52 @@
+import type { MdbaseApplicationConnection } from "@mdbase-dev/sdk";
+import { type JSX, type ReactNode } from "react";
+import { type CollectionView } from "./model.js";
+import { type CollectionSection, type CollectionSectionItem, type CollectionUiOptions } from "./use-collection-ui.js";
+/**
+ * The app's own actions on the gate's screens ("Try sample tasks"). A function
+ * gets the screen's view, to vary them by `view.kind` or return null.
+ */
+export type CollectionExtraActions = ReactNode | ((view: CollectionView) => ReactNode);
+/** What `renderAppCollection` gets besides the open item. */
+export interface AppCollectionContext {
+    readonly section: CollectionSection;
+    /** Close the item and return to the gate's list (with `onBeforeLeave("choose_another")`). */
+    readonly chooseAnother: () => void;
+}
+export interface CollectionGateOwnProps {
+    /** The app's actions: beside Sign in when signed out, in the footer on every other screen. */
+    readonly extraActions?: CollectionExtraActions;
+    /** "page" takes the viewport; "panel" sits inside the app's shell or a dialog. */
+    readonly layout?: "page" | "panel";
+    /** Call `mdbase.start()` when it hasn't started. Default true; safe with several gates. */
+    readonly autoStart?: boolean;
+}
+export interface CollectionGateProps extends CollectionUiOptions, CollectionGateOwnProps {
+    /** The app, rendered only once a collection is open and usable. */
+    readonly children: (connection: MdbaseApplicationConnection) => ReactNode;
+    /**
+     * The app, while one of its section items is open (`current`). Without it
+     * the gate keeps showing its screens. It takes precedence over the SDK's phase.
+     */
+    readonly renderAppCollection?: ((item: CollectionSectionItem, context: AppCollectionContext) => ReactNode) | undefined;
+}
+/**
+ * Everything before a collection is open: sign-in, choosing, approval, setup
+ * review and problems. In phase `ready` it renders the app, with a banner
+ * above it for a live problem (migrating, update required, access removed).
+ */
+export declare function CollectionGate({ children, renderAppCollection, extraActions, layout, autoStart, ...options }: CollectionGateProps): JSX.Element;
+export interface CollectionPanelProps extends CollectionUiOptions, Omit<CollectionGateOwnProps, "layout"> {
+}
+/**
+ * For write-first apps and settings dialogs: the gate's screens in a panel and,
+ * once a collection is open, the switcher's list inline.
+ */
+export declare function CollectionPanel({ extraActions, autoStart, ...options }: CollectionPanelProps): JSX.Element;
+export interface CollectionProblemProps extends CollectionUiOptions {
+    /** An error from the app's own call (a write that was refused). Default: the current phase's problem. */
+    readonly problem?: unknown;
+    readonly variant?: "block" | "banner";
+}
+/** One problem with its fix, for banners and toasts inside the app. Renders nothing when there is none. */
+export declare function CollectionProblem({ problem, variant, ...options }: CollectionProblemProps): JSX.Element | null;