@protobase/ui 0.55.4 → 0.55.6

package/dist/app/current-address.d.ts

@@ -25,6 +25,7 @@ export type CurrentAddress = ListAddress | {
   edit?: true;
   open?: readonly string[];
   tab?: string;
+  standard?: true;
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

@@ -36,7 +36,8 @@ const currentAddress = (read, defaults) => {
 		key: encodeKey(read.key),
 		...read.edit && { edit: true },
 		...read.open && { open: read.open },
-		...read.tab && { tab: read.tab }
+		...read.tab && { tab: read.tab },
+		...read.standard && { standard: true }
 	};
 	if (read?.kind !== "list") return read;
 	return {

package/dist/app/full-area-record.js

@@ -0,0 +1,33 @@
+import { useProjectUi } from "./pages/project-ui.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { RecordScope } from "./pages/record-scope.js";
+import { usePageScroll } from "../app-shell/page-scroll.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/full-area-record.tsx
+/**
+* A record page that is a component of the app's own (`.record({ component })`), with the record around it as
+* `useLayoutRecord()` gives it. It fills the content area, which does not scroll while it shows; `standard`, the
+* record's standard page, shows instead while the component is missing or when it throws.
+*/
+const FullAreaRecord = ({ component, scope, standard }) => {
+	const { components } = useProjectUi();
+	const Component = components?.[component];
+	if (!Component) return standard;
+	return /* @__PURE__ */ jsx(CustomBoundary, {
+		name: component,
+		fallback: standard,
+		children: /* @__PURE__ */ jsx(FullArea, { children: /* @__PURE__ */ jsx(RecordScope, {
+			value: scope,
+			children: /* @__PURE__ */ jsx(Component, {})
+		}) })
+	});
+};
+const FullArea = ({ children }) => {
+	usePageScroll(false);
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)]",
+		children
+	});
+};
+//#endregion
+export { FullAreaRecord };

package/dist/app/record-page.js

@@ -47,6 +47,7 @@ import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
+import { FullAreaRecord } from "./full-area-record.js";
 import { MapSection } from "./map/map-section.js";
 import { RecordChartSection } from "./record-chart/record-chart-section.js";
 import { RecordActions } from "./pages/record-actions.js";
@@ -101,7 +102,8 @@ const layoutFor = (model, view, read) => {
 	];
 };
 const RecordPage = ({ resource, recordKey }) => {
-	const { resources } = useAdminMeta();
+	const { resources, views } = useAdminMeta();
+	const { address } = useAppAddress();
 	const model = resources[resource];
 	const record = useOpenedRecord(resource, recordKey);
 	if (!model) return /* @__PURE__ */ jsx(Notice, {
@@ -122,12 +124,30 @@ const RecordPage = ({ resource, recordKey }) => {
 			error: record.error
 		})
 	});
-	return /* @__PURE__ */ jsx(LoadedRecord, {
+	const standard = /* @__PURE__ */ jsx(LoadedRecord, {
 		model,
 		recordKey,
 		stored: record.data,
 		preview: record.isPlaceholderData
 	}, record.isPlaceholderData ? "preview" : "loaded");
+	const fullArea = views[resource]?.record;
+	if (!fullArea || address?.kind === "record" && address.standard) return standard;
+	if (record.isPlaceholderData) return /* @__PURE__ */ jsx(Notice, {
+		title: text$1("loading"),
+		children: text$1("fetching")
+	});
+	const { record: fields, etag, permissions } = record.data;
+	return /* @__PURE__ */ jsx(FullAreaRecord, {
+		component: fullArea.component,
+		scope: {
+			model,
+			record: fields,
+			key: recordKey,
+			etag,
+			permissions
+		},
+		standard
+	});
 };
 const RecordNotFound = ({ model, recordKey }) => {
 	const elsewhere = useRecordElsewhere(model, recordKey);
@@ -178,13 +198,15 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const openGroups = address?.kind === "record" ? address.open : void 0;
 	const atEdit = address?.kind === "record" && address.edit === true;
 	const addressedTab = address?.kind === "record" ? address.tab : void 0;
+	const standard = address?.kind === "record" && address.standard === true;
 	const recordAt = (open = [], edit = false, tab) => ({
 		kind: "record",
 		resource: model.name,
 		key: recordKey,
 		...edit && { edit },
 		...open.length > 0 && { open },
-		...tab && { tab }
+		...tab && { tab },
+		...standard && { standard }
 	});
 	const readAddress = recordAt(openGroups, false, addressedTab);
 	const editAddress = recordAt(openGroups, true, addressedTab);

package/dist/chat/composer-files.js

@@ -0,0 +1,13 @@
+//#region src/chat/composer-files.ts
+/** Whether a drag carries files, which the composer takes, rather than text, which the box takes as usual. */
+const carriesFiles = (transfer) => transfer.types.includes("Files");
+/**
+* The files a paste gives, or none when it also holds text: a copy from a spreadsheet or a web page can hold an image
+* of its text too, and text pasted into the box stays text.
+*/
+const pastedFiles = (transfer) => {
+	if (transfer.types.includes("text/plain")) return [];
+	return [...transfer.files];
+};
+//#endregion
+export { carriesFiles, pastedFiles };

package/dist/chat/composer-send.js

@@ -0,0 +1,8 @@
+//#region src/chat/composer-send.ts
+/** Whether the composer may send `message`, its trimmed text: never while busy, and empty text only when allowed, such as for a message of files alone. */
+const canSend = (message, { busy, canSendEmpty }) => {
+	if (busy) return false;
+	return message !== "" || canSendEmpty === true;
+};
+//#endregion
+export { canSend };

package/dist/chat/composer.d.ts

@@ -1,6 +1,6 @@
 import { PeopleSearch } from "../mentions/use-people-search.js";
 import "../mentions/index.js";
-import { Ref } from "react";
+import { ReactNode, Ref } from "react";
 //#region src/chat/composer.d.ts
 export type ComposerProps = {
   /** Gets the trimmed text and the ids of the people it mentions, each once. */
@@ -11,10 +11,19 @@ export type ComposerProps = {
   inputRef?: Ref<HTMLTextAreaElement>;
   /** Finds the people `@` lists by the name typed after it, such as a channel's members; without it, `@` is plain text. */
   searchPeople?: PeopleSearch;
+  /** Drawn inside the composer above the box, such as a tray of the files picked for the message. */
+  attachments?: ReactNode;
+  /** Drawn left of the box, such as a button that picks files. */
+  actions?: ReactNode;
+  /** Enter and the button send even with no text, `onSend('', [])`, such as when files are picked. */
+  canSendEmpty?: boolean;
+  /** Gets the files pasted into the box or dropped on the composer; the composer itself uploads and sends nothing. A paste that holds text stays text. */
+  onFiles?: (files: File[]) => void;
 };
 /**
  * The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
- * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+ * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead. With `canSendEmpty`,
+ * such as while files are picked, it sends with no text too.
  */
-export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople }: ComposerProps) => import("react").JSX.Element;
+export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople, attachments, actions, canSendEmpty, onFiles }: ComposerProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/composer.js

@@ -2,19 +2,26 @@ import { Button } from "../primitives/button.js";
 import { text } from "./messages.js";
 import { mentionedIds } from "../mentions/mention-text.js";
 import { MentionBox, emptyDraft } from "../mentions/mention-box.js";
+import { carriesFiles, pastedFiles } from "./composer-files.js";
+import { canSend } from "./composer-send.js";
 import { useState } from "react";
 import { SendHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
 /**
 * The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
-* Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+* Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead. With `canSendEmpty`,
+* such as while files are picked, it sends with no text too.
 */
-const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople }) => {
+const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople, attachments, actions, canSendEmpty, onFiles }) => {
 	const [draft, setDraft] = useState(emptyDraft);
 	const message = draft.text.trim();
+	const sendable = canSend(message, {
+		busy,
+		canSendEmpty
+	});
 	const send = () => {
-		if (!message || busy) return;
+		if (!sendable) return;
 		onSend?.(message, mentionedIds(message, draft.picked));
 		setDraft(emptyDraft);
 	};
@@ -23,33 +30,60 @@ const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople }) => {
 		event.preventDefault();
 		send();
 	};
+	const onPaste = (event) => {
+		if (!onFiles) return;
+		const files = pastedFiles(event.clipboardData);
+		if (files.length === 0) return;
+		event.preventDefault();
+		onFiles(files);
+	};
+	const onDragOver = (event) => {
+		if (!onFiles || !carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+	};
+	const onDrop = (event) => {
+		if (!onFiles || !carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+		onFiles([...event.dataTransfer.files]);
+	};
 	return /* @__PURE__ */ jsxs("form", {
-		className: "flex items-end gap-2",
+		className: "flex flex-wrap items-end gap-2",
 		onSubmit: (event) => {
 			event.preventDefault();
 			send();
 		},
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ jsx(MentionBox, {
-				ref: inputRef,
-				rows: 1,
-				"aria-label": text("message"),
-				placeholder,
-				value: draft,
-				onChange: setDraft,
-				searchPeople,
-				listAt: "above",
-				onKeyDown
+		onDragOver,
+		onDrop,
+		children: [
+			attachments && /* @__PURE__ */ jsx("div", {
+				className: "basis-full",
+				children: attachments
+			}),
+			actions,
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ jsx(MentionBox, {
+					ref: inputRef,
+					rows: 1,
+					"aria-label": text("message"),
+					placeholder,
+					value: draft,
+					onChange: setDraft,
+					searchPeople,
+					listAt: "above",
+					onKeyDown,
+					onPaste
+				})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant: "primary",
+				className: "w-8 px-0",
+				"aria-label": text("send"),
+				disabled: !sendable,
+				children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
 			})
-		}), /* @__PURE__ */ jsx(Button, {
-			type: "submit",
-			variant: "primary",
-			className: "w-8 px-0",
-			"aria-label": text("send"),
-			disabled: !message || busy,
-			children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
-		})]
+		]
 	});
 };
 //#endregion

package/dist/package.js

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