@sincpro/web-framework 0.1.0 → 0.2.0

package/dist/web/workspace/skin.js

@@ -11,21 +11,33 @@ import { AppWindow, ArrowLeft, Ellipsis, Eye, Maximize2, Minimize2, Minus, Panel
  * `Peek` drawer, its `Dialog` for «discard what you typed?», its `Missing` where a view could not
  * be drawn. `<SincproApp>` uses it by default; any piece can still be replaced on top of it.
  */
+/**
+ * A lucide icon at the composer's size. The composer draws an icon as `<Icon />`, sized by the
+ * icon itself (its own glyphs are 16 px), and lucide's default is 24 px: unsized, every glyph
+ * overflowed its 22 px control — a record link's peek/side/window grew larger than the name.
+ */
+function sized(Icon) {
+    function Sized({ className, strokeWidth = 2 }) {
+        return _jsx(Icon, { size: 16, strokeWidth: strokeWidth, className: className, "aria-hidden": true });
+    }
+    Sized.displayName = Icon.displayName ?? "Icon";
+    return Sized;
+}
 export const webUiSkin = {
     icons: {
-        more: Ellipsis,
-        expand: SquareArrowOutUpRight,
-        minimize: Minus,
-        maximize: Maximize2,
-        restore: Minimize2,
-        close: X,
-        left: PanelLeft,
-        right: PanelRight,
-        bottom: PanelBottom,
-        window: AppWindow,
-        back: ArrowLeft,
-        search: Search,
-        peek: Eye,
+        more: sized(Ellipsis),
+        expand: sized(SquareArrowOutUpRight),
+        minimize: sized(Minus),
+        maximize: sized(Maximize2),
+        restore: sized(Minimize2),
+        close: sized(X),
+        left: sized(PanelLeft),
+        right: sized(PanelRight),
+        bottom: sized(PanelBottom),
+        window: sized(AppWindow),
+        back: sized(ArrowLeft),
+        search: sized(Search),
+        peek: sized(Eye),
     },
     Peek: ({ title, onClose, actions, children }) => (_jsx(Peek, { open: true, title: title, onClose: onClose, actions: actions, children: children })),
     Confirm: ({ open, title, detail, keep, discard, onAnswer }) => (_jsx(Dialog, { open: open, title: title, onClose: () => onAnswer(false), footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", role: "secondary", onClick: () => onAnswer(true), children: discard }), _jsx(Button, { size: "sm", role: "primary", onClick: () => onAnswer(false), children: keep })] }), children: _jsx("p", { className: "text-ink", children: detail }) })),

package/dist/web/workspace/workspace.d.ts

@@ -1,5 +1,6 @@
-import type { AnyRecord } from "@sincpro/criteria";
-import type { WorkspaceApi } from "@sincpro/web-composer";
+import { type AnyRecord } from "@sincpro/criteria";
+import { type WorkspaceApi } from "@sincpro/web-composer";
+import type { Entity } from "../../core/entity.js";
 import type { RecordReading } from "../../react/useRecord.js";
 /**
  * A record told to the workspace it is open in: its real name and whether it holds unsaved work.
@@ -10,7 +11,34 @@ import type { RecordReading } from "../../react/useRecord.js";
  * away what was typed. The record already knows both (its `display`, its `edit.dirty`), so the
  * screen only has to connect them — one line.
  *
- *     const invoice = useRecord(invoices, resource.id);
+ * A NEW record (opened with `entity.newRef()`) reads «Facturas · nuevo» until it exists; the
+ * moment its create answers, the surface is REPLACED by the record it became (`api.replace`):
+ * no crumb leads back to an empty form, and the window, peek or page it was in stays.
+ *
+ *     const invoice = useRecord(invoices, resource.id ?? "");
  *     useRecordInWorkspace(api, invoice);
  */
 export declare function useRecordInWorkspace<T extends AnyRecord>(api: WorkspaceApi, record: RecordReading<T>): void;
+/**
+ * «Browse everything» of an `EntityPicker` as the composer's chooser: the entity's own list
+ * opens in a window and the row clicked there answers the field.
+ *
+ *     <EntityPicker entity={customers} onChange={set} onBrowseAll={chooserIn(api, customers, set)} />
+ */
+export declare function chooserIn<T extends AnyRecord>(api: WorkspaceApi, entity: Entity<T>, onChange: (id: string) => void, options?: Parameters<WorkspaceApi["pick"]>[2]): (query?: unknown) => void;
+/**
+ * The record of an entity the person is on right now — what a detail panel beside a list
+ * follows, without knowing the list.
+ *
+ * Context: a list publishes what is ticked (`api.select`) and the workspace knows what is
+ * focused; both are references (`domain:kind/id`). A panel that shows «the invoice I am on»
+ * only needs the last one of ITS entity: the last ticked, else the focused record. It redraws
+ * when either changes (composer's `useWorkspaceContext`), and is `undefined` when the person is
+ * on none — the panel says so.
+ *
+ *     function Detail({ api }: ViewProps) {
+ *       const id = useFollowed(api, invoices);
+ *       const invoice = useRecord(invoices, id ?? "");   // or «tick an invoice»
+ *     }
+ */
+export declare function useFollowed<T extends AnyRecord>(api: WorkspaceApi, entity: Entity<T>): string | undefined;

package/dist/web/workspace/workspace.js

@@ -1,4 +1,7 @@
 "use client";
+import { nameOf } from "@sincpro/criteria";
+import { useWorkspaceContext, } from "@sincpro/web-composer";
+import { frameworkCopy } from "../../core/copy.js";
 import { textOf } from "../../core/present.js";
 import { useEffect } from "react";
 /**
@@ -10,15 +13,28 @@ import { useEffect } from "react";
  * away what was typed. The record already knows both (its `display`, its `edit.dirty`), so the
  * screen only has to connect them — one line.
  *
- *     const invoice = useRecord(invoices, resource.id);
+ * A NEW record (opened with `entity.newRef()`) reads «Facturas · nuevo» until it exists; the
+ * moment its create answers, the surface is REPLACED by the record it became (`api.replace`):
+ * no crumb leads back to an empty form, and the window, peek or page it was in stays.
+ *
+ *     const invoice = useRecord(invoices, resource.id ?? "");
  *     useRecordInWorkspace(api, invoice);
  */
 export function useRecordInWorkspace(api, record) {
     const display = record.meta?.display || record.meta?.identity || "";
-    const title = record.status === "ready" && display !== ""
-        ? textOf(record.meta, display, record.record[display], record.locale)
-        : null;
+    const title = record.isNew
+        ? newTitle(record.meta, record.locale)
+        : record.status === "ready" && display !== ""
+            ? textOf(record.meta, display, record.record[display], record.locale)
+            : null;
     const dirty = record.edit.dirty;
+    const opened = api.self.id ?? "";
+    const { entity, id } = record;
+    // Created here: show what it became, in place of the form.
+    useEffect(() => {
+        if (opened === "" && id !== "")
+            api.replace(entity.ref(id));
+    }, [api, opened, entity, id]);
     useEffect(() => {
         api.setTitle(title);
     }, [api, title]);
@@ -27,3 +43,40 @@ export function useRecordInWorkspace(api, record) {
         return () => api.setDirty(false);
     }, [api, dirty]);
 }
+function newTitle(meta, locale) {
+    return frameworkCopy().record.creating(nameOf(meta, locale) || "");
+}
+/**
+ * «Browse everything» of an `EntityPicker` as the composer's chooser: the entity's own list
+ * opens in a window and the row clicked there answers the field.
+ *
+ *     <EntityPicker entity={customers} onChange={set} onBrowseAll={chooserIn(api, customers, set)} />
+ */
+export function chooserIn(api, entity, onChange, options) {
+    // A button's `onClick` hands it the event: only a text is what was typed.
+    return (query) => api.pick(entity.chooserRef(typeof query === "string" ? query : undefined), (ref) => ref.id === undefined || onChange(ref.id), options);
+}
+/**
+ * The record of an entity the person is on right now — what a detail panel beside a list
+ * follows, without knowing the list.
+ *
+ * Context: a list publishes what is ticked (`api.select`) and the workspace knows what is
+ * focused; both are references (`domain:kind/id`). A panel that shows «the invoice I am on»
+ * only needs the last one of ITS entity: the last ticked, else the focused record. It redraws
+ * when either changes (composer's `useWorkspaceContext`), and is `undefined` when the person is
+ * on none — the panel says so.
+ *
+ *     function Detail({ api }: ViewProps) {
+ *       const id = useFollowed(api, invoices);
+ *       const invoice = useRecord(invoices, id ?? "");   // or «tick an invoice»
+ *     }
+ */
+export function useFollowed(api, entity) {
+    const { focused, selection } = useWorkspaceContext(api);
+    const mine = (ref) => ref != null &&
+        ref.domain === entity.domain &&
+        ref.kind === entity.kind &&
+        ref.id !== undefined;
+    const ticked = [...selection].reverse().find(mine);
+    return ticked?.id ?? (mine(focused) ? focused.id : undefined);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-framework",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The web client of sincpro_framework: entities, lists and records bound to the metadata the server publishes, drawn with @sincpro/web-ui and arranged with @sincpro/web-composer.",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,8 +25,8 @@
   "peerDependencies": {
     "@sincpro/criteria": "^0.3.0",
     "@sincpro/criteria-react": "^0.3.0",
-    "@sincpro/web-composer": "^1.0.0",
-    "@sincpro/web-ui": "^0.2.0",
+    "@sincpro/web-composer": "^1.4.0",
+    "@sincpro/web-ui": "^1.1.0",
     "react": ">=19",
     "react-dom": ">=19"
   },
@@ -34,8 +34,8 @@
     "@eslint/js": "^10.0.1",
     "@sincpro/criteria": "^0.3.0",
     "@sincpro/criteria-react": "^0.3.0",
-    "@sincpro/web-composer": "^1.0.0",
-    "@sincpro/web-ui": "^0.2.0",
+    "@sincpro/web-composer": "^1.4.0",
+    "@sincpro/web-ui": "^1.1.0",
     "@storybook/addon-a11y": "10.6.5",
     "@storybook/addon-docs": "10.6.5",
     "@storybook/addon-mcp": "10.6.5",