@protobase/ui 0.19.8 → 0.19.10

package/dist/app/pages/blocks/link.js

@@ -1,5 +1,5 @@
-import { AppLink } from "../../use-app-address.js";
 import { useLayoutRecord } from "../record-scope.js";
+import { AppLink } from "../../use-app-address.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
 import { appPath } from "@protobase/schema";

package/dist/app/pages/blocks/modal-form.js

@@ -4,15 +4,15 @@ import { useClient } from "../../../data/api-provider.js";
 import { humanize } from "../../../live/naming.js";
 import { useToast } from "../../../toasts/toast-provider.js";
 import { useAdminMeta, usePermissions } from "../../meta-gate.js";
-import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
-import { ErrorBanner } from "../../error-banner.js";
-import { FieldEditor } from "../../field-editor.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { can } from "../../permissions.js";
-import { Field } from "../../../record-view/field.js";
-import { createBody, isChosen } from "../../create/create-values.js";
 import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
+import { ErrorBanner } from "../../error-banner.js";
+import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
+import { Field } from "../../../record-view/field.js";
+import { createBody, isChosen } from "../../create/create-values.js";
+import { FieldEditor } from "../../field-editor.js";
 import { useState } from "react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/app/pages/blocks/progress.js

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
-import { usePathValue } from "../use-path-value.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
+import { usePathValue } from "../use-path-value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/progress.tsx
 /** A number as given, or the number in a field of the record around it. */

package/dist/app/pages/blocks/record-card.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { ErrorBanner } from "../../error-banner.js";
-import { useFirstRecord } from "../use-layout-data.js";
 import { RecordScope } from "../record-scope.js";
+import { useFirstRecord } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
+import { ErrorBanner } from "../../error-banner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/record-card.tsx
 const LoadedRecordCard = ({ model, filter, sort, recordKey, title, description, empty, actions, children }) => {

package/dist/app/pages/blocks/record-row.js

@@ -1,7 +1,7 @@
 import { useAdminMeta } from "../../meta-gate.js";
-import { RecordRowBody } from "../../record-row/record-row-body.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";
+import { RecordRowBody } from "../../record-row/record-row-body.js";
 import { SavedRecordRow } from "../../record-row/saved-record-row.js";
 import { SavedSearchRows } from "../../searches/saved-search-rows.js";
 import { jsx } from "react/jsx-runtime";

package/dist/app/pages/blocks/show.js

@@ -1,9 +1,9 @@
 import { useClient } from "../../../data/api-provider.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { countQuery } from "../use-layout-data.js";
-import { usePathValues } from "../use-path-value.js";
 import { useLayoutRecord } from "../record-scope.js";
+import { countQuery } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
+import { usePathValues } from "../use-path-value.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useQueries } from "@tanstack/react-query";

package/dist/app/pages/blocks/stat.js

@@ -1,12 +1,12 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { AppLink } from "../../use-app-address.js";
 import { useCount } from "../use-layout-data.js";
-import { FieldValue } from "../field-value.js";
-import { usePathValue } from "../use-path-value.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";
+import { FieldValue } from "../field-value.js";
+import { usePathValue } from "../use-path-value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/stat.tsx
 const big = "text-2xl font-semibold tracking-tight tabular-nums";

package/dist/app/pages/blocks/table.js

@@ -1,7 +1,7 @@
 import { useAdminMeta } from "../../meta-gate.js";
-import { EmbeddedDisplaySwitch, EmbeddedList } from "../../embedded-list/embedded-list.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";
+import { EmbeddedDisplaySwitch, EmbeddedList } from "../../embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "../../embedded-list/use-embedded-display.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/table.tsx

package/dist/app/pages/field-value.js

@@ -1,15 +1,17 @@
 import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { fetchLabels } from "../../live/relation-labels.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
+import { fetchLabels } from "../../live/relation-labels.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { ValueBadge } from "../value-badge.js";
+import { Markdown } from "../../markdown/markdown.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
@@ -70,6 +72,7 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 			})]
 		});
 	}
+	if (isMarkdown(field, hints)) return /* @__PURE__ */ jsx(Markdown, { source: String(value) });
 	const text = displayValue(field, value, hints);
 	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
 		value,

package/dist/app/pages/record-actions.js

@@ -1,7 +1,7 @@
-import { AppLink, useAppAddress } from "../use-app-address.js";
-import { ActionRail } from "../../record-view/action-rail.js";
 import { ConfirmAction } from "./confirm-action.js";
+import { AppLink, useAppAddress } from "../use-app-address.js";
 import { useActionRunner } from "./use-run-action.js";
+import { ActionRail } from "../../record-view/action-rail.js";
 import { actionIcon } from "../action-icon.js";
 import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";

package/dist/app/pages/use-run-action.js

@@ -2,10 +2,10 @@ import { useClient, useResourceClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { useProjectUi } from "./project-ui.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
-import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";
-import { useRefreshResource } from "./use-layout-data.js";
+import { useAppAddress } from "../use-app-address.js";
 import { actionFor, linkTarget, openLink } from "./action-href.js";
+import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
 import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/use-run-action.ts

package/dist/app/record-page.js

@@ -9,27 +9,29 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
+import { can, fieldAccess } from "./permissions.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
-import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
-import { FieldEditor } from "./field-editor.js";
-import { can, fieldAccess } from "./permissions.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
+import { toneFor } from "../live/columns-from-model.js";
+import { ValueBadge } from "./value-badge.js";
+import { Markdown } from "../markdown/markdown.js";
+import { FieldValue } from "./pages/field-value.js";
 import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
 import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
-import { toneFor } from "../live/columns-from-model.js";
+import { FieldEditor } from "./field-editor.js";
+import { namedIcon } from "./named-icon.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
-import { namedIcon } from "./named-icon.js";
-import { ValueBadge } from "./value-badge.js";
-import { FieldValue } from "./pages/field-value.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { MapSection } from "./map/map-section.js";
@@ -164,7 +166,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			label: hint(name)?.label ?? humanize(name),
 			help: fieldHelp(hint(name), view, editing),
 			error: editor.errors[name],
-			wide: Boolean(hint(name)?.multiline),
+			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
 			conflict: conflict === void 0 ? void 0 : {
 				user: {
 					name: "Someone else",
@@ -211,7 +213,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		return {
 			label: hint(name)?.label ?? humanize(name),
 			help: fieldHelp(hint(name), view, editing),
-			wide: Boolean(hint(name)?.multiline),
+			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
 			value
 		};
 	};
@@ -222,11 +224,13 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
 			const text = displayValue(field, stored.record[name], hint(name));
+			const value = stored.record[name];
+			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
 			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
-				value: stored.record[name],
+				value,
 				hints: hint(name),
 				children: text
-			}) : /* @__PURE__ */ jsx("strong", {
+			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : /* @__PURE__ */ jsx("strong", {
 				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
 				children: text
 			});

package/dist/app/record-row/record-row-body.js

@@ -1,14 +1,14 @@
 import { useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { displaysOf, loadedFields } from "../displays/list-displays.js";
 import { defaultOrderBy } from "../list-order.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { useLiveRows } from "../../live/use-live-rows.js";
-import { FilterChipList } from "../searches/filter-chip-list.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.js";
+import { FilterChipList } from "../searches/filter-chip-list.js";
 import { useFilterChips } from "../searches/use-filter-chips.js";
 import { RecordRow } from "./record-row.js";
 import { useMemo } from "react";

package/dist/app/record-row/saved-record-row.js

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { listedResource } from "../current-address.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { listedResource } from "../current-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { savedScope } from "../saved/saved-records.js";
 import { useSavedRecords } from "../saved/use-saved-records.js";

package/dist/app/related-section.js

@@ -3,8 +3,8 @@ import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { ErrorBanner } from "./error-banner.js";
-import { Section } from "../record-view/section.js";
 import { listColumnNames } from "../live/columns-from-model.js";
+import { Section } from "../record-view/section.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { jsx } from "react/jsx-runtime";

package/dist/app/searches/saved-search-rows.js

@@ -5,8 +5,8 @@ import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { InlineFilterChips } from "./filter-chip-list.js";
-import { useSavedSearches } from "./use-saved-searches.js";
 import { RecordRowBody } from "../record-row/record-row-body.js";
+import { useSavedSearches } from "./use-saved-searches.js";
 import { useSearchRow } from "./use-search-row.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { encodeKey } from "@protobase/schema/internal";

package/dist/app/searches/saved-search-section.js

@@ -5,10 +5,10 @@ import { useToast } from "../../toasts/toast-provider.js";
 import { AppLink } from "../use-app-address.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { InlineFilterChips } from "./filter-chip-list.js";
-import { SearchNameDialog } from "./search-name-dialog.js";
 import { RecordRowBody } from "../record-row/record-row-body.js";
-import { SearchControls } from "./search-controls.js";
 import { useSearchRow } from "./use-search-row.js";
+import { SearchNameDialog } from "./search-name-dialog.js";
+import { SearchControls } from "./search-controls.js";
 import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/searches/saved-searches.js

@@ -3,11 +3,11 @@ import { PageHeader } from "../../app-shell/page-header.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
+import { can } from "../permissions.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
-import { can } from "../permissions.js";
-import { useDeleteFlow } from "../delete/use-delete-flow.js";
 import { useSavedSearches } from "./use-saved-searches.js";
+import { useDeleteFlow } from "../delete/use-delete-flow.js";
 import { SavedSearchSection } from "./saved-search-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { encodeKey } from "@protobase/schema/internal";

package/dist/app/searches/search-controls.js

@@ -1,8 +1,8 @@
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { Switch } from "../../primitives/switch.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
+import { Switch } from "../../primitives/switch.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";

package/dist/app/searches/search-name-dialog.js

@@ -1,7 +1,7 @@
 import { Input } from "../../primitives/input.js";
 import { Button } from "../../primitives/button.js";
-import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { FilterChipList } from "./filter-chip-list.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/searches/search-name-dialog.tsx

package/dist/app/searches/update-search-dialog.js

@@ -3,11 +3,11 @@ import { Button } from "../../primitives/button.js";
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
 import { defaultOrderBy } from "../list-order.js";
-import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { countQuery } from "../pages/use-layout-data.js";
+import { useFilterChips } from "./use-filter-chips.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { EmbeddedList } from "../embedded-list/embedded-list.js";
 import { addedFilter, filterChanges, netChange, removedFilter } from "./search-diff.js";
-import { useFilterChips } from "./use-filter-chips.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";

package/dist/app/searches/use-filter-chips.js

@@ -1,7 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { fetchLabels } from "../../live/relation-labels.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { fetchLabels } from "../../live/relation-labels.js";
 import { chosenRelations, filterChips } from "./saved-search.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/searches/use-filter-chips.ts

package/dist/app/searches/use-save-search.js

@@ -3,11 +3,11 @@ import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";
+import { useAppAddress } from "../use-app-address.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
-import { useOpenedSearch } from "./use-opened-search.js";
 import { useSavedSearches } from "./use-saved-searches.js";
+import { useOpenedSearch } from "./use-opened-search.js";
 import { useMutation } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/searches/use-save-search.ts

package/dist/app/searches/use-saved-searches.js

@@ -1,7 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { defaultOrderBy } from "../list-order.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { defaultOrderBy } from "../list-order.js";
 import { useQuery } from "@tanstack/react-query";
 //#region src/app/searches/use-saved-searches.ts
 /** Where the user's saved searches of `resource` are cached; a list key, so a write to the resource refreshes it. */

package/dist/app/searches/use-search-row.js

@@ -1,8 +1,8 @@
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
 import { countQuery, useRefreshResource } from "../pages/use-layout-data.js";
-import { isUnseen, unseenFilter } from "./saved-search.js";
 import { chipsText } from "./filter-chip-list.js";
+import { isUnseen, unseenFilter } from "./saved-search.js";
 import { useFilterChips } from "./use-filter-chips.js";
 import { useMutation, useQuery } from "@tanstack/react-query";
 //#region src/app/searches/use-search-row.ts

package/dist/app/sensitive-field.js

@@ -3,8 +3,8 @@ import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
 import { displayValue } from "../live/display-value.js";
-import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
+import { toDraft } from "../live/field-values.js";
 import { useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/use-app-address.js

@@ -1,7 +1,7 @@
 import { useIsXs } from "../lib/use-media-query.js";
 import { Link, useRouter } from "./router.js";
-import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
 import { useAdminMeta } from "./meta-gate.js";
+import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { appPath, readAppPath } from "@protobase/schema";

package/dist/app/value-badge.js

@@ -1,6 +1,6 @@
 import { Badge } from "../primitives/badge.js";
-import { valueColor } from "../live/value-color.js";
 import { toneFor } from "../live/columns-from-model.js";
+import { valueColor } from "../live/value-color.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/value-badge.tsx
 /** A stored value as a badge: filled with the colour the view gives it and in its badge shape, else in its tone. */

package/dist/auth/sign-in-prompt.js

@@ -2,8 +2,8 @@ import { RouteLink } from "../primitives/route-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
-import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
 import { namedIcon } from "../app/named-icon.js";
+import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
 import { useId } from "react";
 import { Check, LogIn } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/data-grid/cells.js

@@ -6,8 +6,8 @@ import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime } from "../format/date.js";
 import { fileShown, shownImage } from "../live/file-values.js";
 import { FileImage } from "../live/file-image.js";
-import { userById } from "../mocks/users.js";
 import { valueColor } from "../live/value-color.js";
+import { userById } from "../mocks/users.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";

package/dist/index.d.ts

@@ -48,5 +48,13 @@ import { CodeForm, CodeFormProps } from "./auth/code-form.js";
 import { ResendCodeButton, ResendCodeButtonProps } from "./auth/resend-code-button.js";
 import { Button, ButtonProps, buttonClass } from "./primitives/button.js";
 import { Input, InputProps } from "./primitives/input.js";
+import { Textarea, TextareaProps } from "./primitives/textarea.js";
+import { Segmented, SegmentedOption, SegmentedProps } from "./primitives/segmented.js";
+import { MenuSelect, MenuSelectProps } from "./primitives/menu-select.js";
+import { ChoiceOption, Choices, ChoicesProps } from "./primitives/choices.js";
+import { Dialog, DialogProps } from "./primitives/dialog.js";
+import { Field, FieldProps } from "./record-view/field.js";
+import { Section } from "./record-view/section.js";
+import { Form, FormProps } from "./app/create/form.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,7 +1,9 @@
 import { LogoMark } from "./app-shell/logo.js";
+import { Segmented } from "./primitives/segmented.js";
 import { Input } from "./primitives/input.js";
 import { Spinner } from "./primitives/spinner.js";
 import { Button, buttonClass } from "./primitives/button.js";
+import { Dialog } from "./primitives/dialog.js";
 import { OtpInput } from "./primitives/otp-input.js";
 import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
 import { AuthLayout } from "./auth/auth-layout.js";
@@ -30,14 +32,20 @@ import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
+import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { Field } from "./record-view/field.js";
+import { Section } from "./record-view/section.js";
+import { Textarea } from "./primitives/textarea.js";
 import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
+import { MenuSelect } from "./primitives/menu-select.js";
+import { Form } from "./app/create/form.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
-import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, CodeForm, CompactTable, Composer, DiffView, FieldList, Input, LogoMark, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, SidePanel, SignInPrompt, Spinner, StepList, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+import { Choices } from "./primitives/choices.js";
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, MenuSelect, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/live/columns-from-model.js

@@ -1,4 +1,6 @@
 import { humanize } from "./naming.js";
+import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {
@@ -94,6 +96,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 				value: (row) => row[name] == null ? null : currencyCents(row[name])
 			},
 			...(kind === "datetime" || kind === "date") && { value: (row) => row[name] == null ? null : Date.parse(String(row[name])) },
+			...isMarkdown(field, viewField) && { value: (row) => typeof row[name] === "string" ? markdownExcerpt(row[name]) : row[name] },
 			...(kind === "percent" || kind === "number" && field.type === "decimal") && { value: (row) => row[name] == null ? null : Number(row[name]) }
 		}];
 	});

package/dist/live/grid-loader.js

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
-import { listLabels, withLabels } from "./relation-labels.js";
 import { listPhotos, withPhotos } from "./row-photos.js";
+import { listLabels, withLabels } from "./relation-labels.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**

package/dist/live/use-filter-config.js

@@ -5,9 +5,9 @@ import { humanize } from "./naming.js";
 import { fetchLabels } from "./relation-labels.js";
 import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";
+import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
 import { labelKeys, matchOptions } from "./reference-options.js";
 import { useReferenceSearch } from "./use-reference-search.js";
-import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/use-filter-config.ts

package/dist/markdown/markdown-content.js

@@ -0,0 +1,18 @@
+import { cn } from "../lib/cn.js";
+import { markdownHtml } from "./markdown-html.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+//#region src/markdown/markdown-content.tsx
+const page = cn("break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "[&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_pre]:my-2 [&_blockquote]:my-2 [&_table]:my-2 [&_hr]:my-3", "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold", "[&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li:has(>input)]:list-none [&_li>input]:mr-1.5 [&_li>input]:-ml-5 [&_li>input]:align-middle", "[&_a]:text-primary-text [&_a]:underline [&_a]:underline-offset-2 hover:[&_a]:text-primary-hover", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em]", "[&_pre]:whitespace-pre-wrap [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_table]:w-full [&_table]:border-collapse [&_th]:border [&_th]:border-border [&_th]:bg-surface [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold", "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_td]:[overflow-wrap:anywhere]", "[&_hr]:border-border [&_img]:inline [&_img]:max-w-full [&_img]:rounded [&_del]:text-muted-foreground");
+const inLink = cn("[&_*]:my-0 [&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold [&_ul]:list-inside [&_ol]:list-inside [&_pre]:whitespace-pre-wrap [&_code]:font-mono [&_code]:text-[0.9em]");
+/** Markdown rendered, sanitised before it reaches the page: raw HTML shows as text, links open in a new tab. */
+const MarkdownContent = ({ source, inLink: insideLink = false, className }) => {
+	const html = useMemo(() => DOMPurify.sanitize(markdownHtml(source, { inLink: insideLink }), { ADD_ATTR: ["target"] }), [source, insideLink]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(insideLink ? inLink : page, className),
+		dangerouslySetInnerHTML: { __html: html }
+	});
+};
+//#endregion
+export { MarkdownContent };

package/dist/markdown/markdown-editor.js

@@ -0,0 +1,46 @@
+import { Segmented } from "../primitives/segmented.js";
+import { Markdown } from "./markdown.js";
+import { Textarea } from "../primitives/textarea.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/markdown/markdown-editor.tsx
+const modes = [{
+	value: "write",
+	label: "Write"
+}, {
+	value: "preview",
+	label: "Preview"
+}];
+/**
+* Markdown source in a box that grows with it, as GitHub edits a comment, and a switch to its rendered preview: the
+* text is stored exactly as typed.
+*/
+const MarkdownEditor = ({ value, onChange, label, invalid, placeholder }) => {
+	const [mode, setMode] = useState("write");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "self-start",
+			children: /* @__PURE__ */ jsx(Segmented, {
+				value: mode,
+				options: modes,
+				onChange: setMode,
+				label
+			})
+		}), mode === "write" ? /* @__PURE__ */ jsx(Textarea, {
+			rows: 5,
+			invalid,
+			placeholder,
+			value,
+			onChange: (event) => onChange(event.target.value)
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "min-h-[7.5rem] rounded-md border border-border px-2.5 py-1.5",
+			children: value.trim() === "" ? /* @__PURE__ */ jsx("span", {
+				className: "text-faint-foreground",
+				children: "Nothing to preview"
+			}) : /* @__PURE__ */ jsx(Markdown, { source: value })
+		})]
+	});
+};
+//#endregion
+export { MarkdownEditor };