@protobase/ui 0.19.8 → 0.19.10

package/dist/markdown/markdown-excerpt.js

@@ -0,0 +1,36 @@
+//#region src/markdown/markdown-excerpt.ts
+const blockMarks = [
+	[/^\s*(```|~~~).*$/, ""],
+	[/^\s*\[[^\]]+\]:\s+\S.*$/, ""],
+	[/^\s*([-*_]\s*){3,}$/, ""],
+	[/^\s*\|?(\s*:?-+:?\s*\|)+\s*:?-*:?\s*$/, ""],
+	[/^\s*#{1,6}\s+/, ""],
+	[/^\s*(>\s?)+/, ""],
+	[/^\s*([-*+]|\d+[.)])\s+(\[[ xX]\]\s+)?/, ""]
+];
+const inlineMarks = [
+	[/!\[([^\]]*)\]\([^)]*\)/g, "$1"],
+	[/\[([^\]]*)\]\([^)]*\)/g, "$1"],
+	[/\[([^\]]+)\]\[[^\]]*\]/g, "$1"],
+	[/<((?:https?|mailto):[^>\s]+)>/gi, "$1"],
+	[/<\/?[a-z][^>]*>/gi, ""],
+	[/`([^`]+)`/g, "$1"],
+	[/(?<!\\)(\*\*|__)(?=\S)(.+?)(?<=\S)\1/g, "$2"],
+	[/(?<![\\\w*])\*(?=\S)(.+?)(?<=\S)\*/g, "$1"],
+	[/(?<![\\\w])_(?=\S)(.+?)(?<=\S)_(?!\w)/g, "$1"],
+	[/(?<!\\)~~(.+?)~~/g, "$1"],
+	[/\s*\|\s*/g, " "],
+	[/\\([\\`*_{}[\]()#+\-.!>~|])/g, "$1"]
+];
+const longest = 200;
+/**
+* Markdown as one line of plain text, as a list's cell shows it: the text of its headings, lists, links and emphasis
+* without their marks, at most 200 characters.
+*/
+const markdownExcerpt = (source) => {
+	const lines = source.split(/\r?\n/).map((line) => blockMarks.reduce((text, [mark, kept]) => text.replace(mark, kept), line));
+	const text = inlineMarks.reduce((joined, [mark, kept]) => joined.replace(mark, kept), lines.join("\n")).replace(/\s+/g, " ").trim();
+	return text.length > longest ? `${text.slice(0, 199).trimEnd()}…` : text;
+};
+//#endregion
+export { markdownExcerpt };

package/dist/markdown/markdown-hint.js

@@ -0,0 +1,5 @@
+//#region src/markdown/markdown-hint.ts
+/** Whether the view shows a field as markdown (`.markdown()`), which only a text field takes. */
+const isMarkdown = (field, hints) => field.type === "text" && Boolean(hints?.markdown);
+//#endregion
+export { isMarkdown };

package/dist/markdown/markdown-html.js

@@ -0,0 +1,59 @@
+import { Marked } from "marked";
+//#region src/markdown/markdown-html.ts
+const escapes = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (char) => escapes[char]);
+const scheme = /^([a-z][a-z0-9+.-]*):/i;
+const linkSchemes = /* @__PURE__ */ new Set([
+	"http",
+	"https",
+	"mailto",
+	"tel"
+]);
+const imageSchemes = /* @__PURE__ */ new Set(["http", "https"]);
+const ignoredByBrowsers = /[\u0000-\u0020\u007f]/g;
+const safeAddress = (href, schemes) => {
+	const named = scheme.exec(href.replace(ignoredByBrowsers, ""))?.[1]?.toLowerCase();
+	if (named !== void 0 && !schemes.has(named)) return null;
+	try {
+		return encodeURI(href).replace(/%25/g, "%");
+	} catch (error) {
+		if (error instanceof URIError) return null;
+		throw error;
+	}
+};
+const titled = (title) => title ? ` title="${escapeHtml(title)}"` : "";
+const parser = ({ inLink = false }) => new Marked({
+	gfm: true,
+	breaks: true,
+	renderer: {
+		html: ({ text, block }) => block ? `<p>${escapeHtml(text)}</p>` : escapeHtml(text),
+		link({ href, title, tokens }) {
+			const text = this.parser.parseInline(tokens);
+			const address = inLink ? null : safeAddress(href, linkSchemes);
+			if (address === null) return text;
+			return `<a href="${escapeHtml(address)}"${titled(title)} target="_blank" rel="noopener noreferrer nofollow">${text}</a>`;
+		},
+		image({ href, title, text }) {
+			const address = inLink ? null : safeAddress(href, imageSchemes);
+			if (address === null) return escapeHtml(text);
+			return `<img src="${escapeHtml(address)}" alt="${escapeHtml(text)}"${titled(title)} loading="lazy">`;
+		}
+	}
+});
+const parsers = {
+	inLink: parser({ inLink: true }),
+	page: parser({})
+};
+/**
+* Markdown as HTML (GitHub's flavour, line breaks kept): raw HTML escaped, links and images only to http(s), mailto and
+* tel addresses or relative ones, and links opening in a new tab. The page sanitises the result again before showing it.
+*/
+const markdownHtml = (source, options = {}) => (options.inLink ? parsers.inLink : parsers.page).parse(source, { async: false });
+//#endregion
+export { markdownHtml };

package/dist/markdown/markdown.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/cn.js";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/markdown/markdown.tsx
+const MarkdownContent = lazy(() => import("./markdown-content.js").then((module) => ({ default: module.MarkdownContent })));
+/** Markdown rendered and sanitised; its source, line breaks kept, until the renderer has loaded. */
+const Markdown = (props) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx("div", {
+		className: cn("whitespace-pre-line break-words", props.className),
+		children: props.source
+	}),
+	children: /* @__PURE__ */ jsx(MarkdownContent, { ...props })
+});
+//#endregion
+export { Markdown };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.8";
+var version = "0.19.10";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/choices.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/primitives/choices.d.ts
+export type ChoiceOption<T extends string> = {
+  value: T;
+  label: string;
+  description?: ReactNode;
+  disabled?: boolean;
+};
+/**
+ * `name` groups the radio buttons, so that the arrow keys move between them; `label` names the group for screen
+ * readers. A disabled option shows and cannot be chosen.
+ */
+export type ChoicesProps<T extends string> = {
+  name: string;
+  label?: string;
+  options: Array<ChoiceOption<T>>;
+  value: T | undefined;
+  onChange: (value: T) => void;
+};
+/** One of a few options, each a card of its own row with a line that says what it means; the chosen one is outlined. */
+export declare const Choices: <T extends string>({ name, label, options, value, onChange }: ChoicesProps<T>) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/choices.js

@@ -0,0 +1,33 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/choices.tsx
+/** One of a few options, each a card of its own row with a line that says what it means; the chosen one is outlined. */
+const Choices = ({ name, label, options, value, onChange }) => /* @__PURE__ */ jsx("div", {
+	role: "radiogroup",
+	"aria-label": label,
+	className: "flex flex-col gap-2",
+	children: options.map((option) => /* @__PURE__ */ jsxs("label", {
+		className: cn("block rounded-lg border p-3 transition-colors has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary", option.disabled ? "cursor-default bg-background opacity-60" : option.value === value ? "cursor-pointer border-primary bg-primary-soft" : "cursor-pointer bg-background hover:bg-surface"),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name,
+				value: option.value,
+				checked: option.value === value,
+				disabled: option.disabled,
+				onChange: () => onChange(option.value),
+				className: "sr-only"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("block font-medium", option.value === value && "text-primary-text"),
+				children: option.label
+			}),
+			option.description && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 block text-xs leading-snug text-muted-foreground",
+				children: option.description
+			})
+		]
+	}, option.value))
+});
+//#endregion
+export { Choices };

package/dist/primitives/dialog.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+//#region src/primitives/dialog.d.ts
+export type DialogProps = {
+  title: string;
+  description?: ReactNode;
+  onClose: () => void;
+  /** Buttons, rendered right-aligned. */
+  actions: ReactNode;
+  children?: ReactNode;
+  /** Room for a row of cards or a table in the body, instead of a short question. */
+  wide?: boolean;
+};
+/** A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. */
+export declare const Dialog: ({ title, description, onClose, actions, children, wide }: DialogProps) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/menu-select.d.ts

@@ -0,0 +1,14 @@
+import { SegmentedOption } from "./segmented.js";
+//#region src/primitives/menu-select.d.ts
+export type MenuSelectProps<T extends string> = {
+  value: T;
+  options: Array<SegmentedOption<T>>;
+  onChange: (value: T) => void;
+  label: string;
+};
+/**
+ * The choices of a Segmented switch in a menu, for a row without room for every option: a button with the chosen
+ * option's icon and label, opening the options under its right edge.
+ */
+export declare const MenuSelect: <T extends string>({ value, options, onChange, label }: MenuSelectProps<T>) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/segmented.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType } from "react";
+//#region src/primitives/segmented.d.ts
+export type SegmentedOption<T extends string> = {
+  value: T;
+  label: string;
+  icon?: ComponentType<{
+    className?: string;
+  }>;
+};
+/**
+ * `md` matches a medium Button, for a switch that sits among buttons. `iconOnly` draws each option as its icon alone,
+ * its label the button's name, for a row without room for the words.
+ */
+export type SegmentedProps<T extends string> = {
+  value: T;
+  options: Array<SegmentedOption<T>>;
+  onChange: (value: T) => void;
+  label?: string;
+  size?: 'sm' | 'md';
+  iconOnly?: boolean;
+};
+export declare const Segmented: <T extends string>({ value, options, onChange, label, size, iconOnly }: SegmentedProps<T>) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/textarea.d.ts

@@ -0,0 +1,9 @@
+import { TextareaHTMLAttributes } from "react";
+//#region src/primitives/textarea.d.ts
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
+  value: string;
+  invalid?: boolean;
+};
+/** A text box of several lines that grows with its text instead of scrolling inside. */
+export declare const Textarea: ({ invalid, className, rows, value, ...rest }: TextareaProps) => import("react").JSX.Element;
+//#endregion

package/dist/record-view/field.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/record-view/field.d.ts
+export type FieldConflict = {
+  user: {
+    name: string;
+    initials: string;
+    hue: number;
+  };
+  ago: string;
+  theirValue: string;
+  onKeepMine: () => void;
+  onUseTheirs: () => void;
+};
+export type FieldProps = {
+  label: string;
+  /** Marks the label with an asterisk. */
+  required?: boolean;
+  help?: string;
+  example?: string;
+  error?: string;
+  conflict?: FieldConflict;
+  /** Takes the whole row of a grid of two columns, as a text of several lines does. */
+  wide?: boolean;
+  children: ReactNode;
+};
+export declare const Field: ({ label, required, help, example, error, conflict, wide, children }: FieldProps) => import("react").JSX.Element;
+//#endregion

package/dist/record-view/section.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/record-view/section.d.ts
+/** A titled part of the record page; `actions` sit at the end of the title's line. */
+export declare const Section: ({ title, help, actions, children }: {
+  title: string;
+  help?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+}) => import("react").JSX.Element;
+//#endregion