@jxsuite/studio 6.1.2 → 8.0.0

package/src/surfaces/library-pane.ts

@@ -1,13 +1,14 @@
 /// <reference lib="dom" />
 /**
- * The Library surface: the pane that BROWSES a project's files, as a Jx document over the kit.
+ * The Content home surface: one collection, browsed, as a Jx document over the kit (studio.md
+ * §22.5).
  *
- * This is the adapter. `browse/library-pane.ts` keeps the Library — the scan, the filter, the
- * window, the creation and upload flows, the per-file menu — and hands this module one projection:
- * a word saying which of nine things to draw, the toolbar's chips already marked, and rows whose
+ * This is the adapter. `browse/library-pane.ts` keeps the home — the scan, the collection and its
+ * filter, the window, the header line, the per-file menu — and hands this module one projection: a
+ * word saying which of eight things to draw, the toolbar's chips already marked, and rows whose
  * every field is already a string. The document renders that and decides nothing.
  *
- * **Nine cases, one discriminant.** `$switch` over a value is the only conditional a document has,
+ * **Eight cases, one discriminant.** `$switch` over a value is the only conditional a document has,
  * and "is the scan running, did it finish, did the project have anything in it, did the filter keep
  * any of it, and which layout is on" is five questions. The pane answers them once and the surface
  * reads a word — which is also what keeps the four honest empty states from collapsing back into
@@ -22,8 +23,8 @@
  * **The container is CLEARED, because this is a pane and not a panel.** A panel is handed
  * `.panel-content`, a node lit renders `nothing` into, whose comment markers must survive; the
  * canvas stage is handed to whichever mode owns it whole, and `canvas/canvas-render.ts` hands it
- * over by emptying it. So the mount empties it too, which is what stops two Libraries stacking when
- * a repaint lands before the first mount has settled.
+ * over by emptying it. So the mount empties it too, which is what stops two homes stacking when a
+ * repaint lands before the first mount has settled.
  *
  * @docs studio/projects/browse
  */
@@ -40,11 +41,11 @@ import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 registerSurface("library-pane", libraryDoc);
 
 /**
- * Which of nine things the body draws.
+ * Which of eight things the body draws.
  *
  * The first four are the states the Manage view called "No files found" — a scan still running, a
- * scan that could not finish, a project with no files at all, and a filter that matched none of
- * them — and the last five are the layouts. One word, so no two of them can be true at once.
+ * scan that could not finish, a collection with nothing in it, and a filter that matched none of it
+ * — and the last four are the views. One word, so no two of them can be true at once.
  */
 export type LibraryViewKind =
   | "loading"
@@ -52,7 +53,6 @@ export type LibraryViewKind =
   | "empty"
   | "nomatch"
   | "cards"
-  | "media"
   | "table"
   | "calendar"
   | "board";
@@ -69,9 +69,7 @@ export interface LibraryRow {
    * Which of three things stands in the art box.
    *
    * `image` is the file itself, `doc` is the live-preview island the host fills, and `glyph` is the
-   * honest answer for a file nothing here can draw. Media tiles never say `doc`: a tile is a
-   * thumbnail of an asset, and a live document render inside one is the cost the Media layout
-   * exists to avoid.
+   * honest answer for a file nothing here can draw.
    */
   art: "image" | "doc" | "glyph";
   /** The URL an `image` loads. Empty for the other two. */
@@ -99,10 +97,10 @@ export interface LibraryColumn {
  * note; only Board prints a count, and only the Calendar's undated section is dimmed.
  */
 export interface LibraryGroup {
-  /** The group's identity across repaints — the date, or the category name. */
+  /** The group's identity across repaints — the date, or the folder. */
   id: string;
   title: string;
-  /** Board's honest total for the category, already a string. Empty for a Calendar day. */
+  /** Board's honest total for the folder, already a string. Empty for a Calendar day. */
   count: string;
   /** What this group left out, or the undated section's count. */
   note: string;
@@ -112,21 +110,53 @@ export interface LibraryGroup {
   files: LibraryRow[];
 }
 
-/** A toolbar chip: a category or a layout, and whether it is the one in force. */
+/** A toolbar chip: a view, and whether it is the one in force. */
 export interface LibraryChip {
   key: string;
   label: string;
   checked: "true" | "false";
 }
 
+/**
+ * The header line: where a collection's entries are published (§22.5).
+ *
+ * `page` reads "Each post has a page at `/blog/:slug` using Post" with **Design the post page**;
+ * `none` reads "Entries have no page of their own" with **Add one**; `loading` is the sentence
+ * shown while the pages are being read; `hidden` draws nothing (Pages, a file-backed collection).
+ */
+export interface LibraryPageLine {
+  state: "hidden" | "loading" | "page" | "none";
+  /** The sentence before the pattern, or the whole sentence for `loading` and `none`. */
+  text: string;
+  /** The URL pattern, drawn as code. */
+  pattern: string;
+  /** "using Post", or "with no template". */
+  template: string;
+  /** The button that opens the page in Design. */
+  designLabel: string;
+}
+
 /** Everything the document draws, as one value. */
 export interface LibraryView {
-  /** The region id stamped on the root, so the screenshot pipeline can address the Library. */
+  /** The region id stamped on the root, so the screenshot pipeline can address the home. */
   region: string;
-  /** The region id on the scroller, which is also the drop zone. */
-  dropRegion: string;
   view: LibraryViewKind;
-  categories: LibraryChip[];
+  /** The collection's title: "Pages", "Posts". */
+  title: string;
+  /** The line under the title, or "" for none. */
+  subtitle: string;
+  /** The search field's label: "Search posts". */
+  searchLabel: string;
+  /** The create button's label: "New post". */
+  newLabel: string;
+  /** Whether **New <item>** is drawn: a file-backed collection (one CSV) gains rows in its file. */
+  newState: "hidden" | "shown";
+  /**
+   * Whether **Fields** and **Edit in grid** are drawn: a declared collection has fields and a grid
+   * of its own, Pages does not.
+   */
+  fieldsState: "hidden" | "shown";
+  page: LibraryPageLine;
   layouts: LibraryChip[];
   /**
    * Whether the language facet is drawn at all.
@@ -137,15 +167,13 @@ export interface LibraryView {
   localeState: "hidden" | "shown";
   localeOptions: SurfaceOption[];
   localeValue: string;
+  /** The Filter: drawn when something groups the entries (their status, or the Board's field). */
+  filterState: "hidden" | "shown";
+  filterOptions: SurfaceOption[];
+  filterValue: string;
   query: string;
-  /** Where an upload lands, as the label's tooltip says it — before the files are chosen. */
-  uploadHint: string;
-  /** The picker's `accept`, from the media registry. */
-  uploadAccept: string;
   bannerState: "hidden" | "shown";
   bannerText: string;
-  /** `"true"` while a drag is over the body. A state the host holds, not a class a handler adds. */
-  dropActive: "true" | "false";
   /** The `nomatch` sentence, naming the filters that produced it. */
   emptyMessage: string;
   /** The second line of `incomplete` and `nomatch`. */
@@ -162,28 +190,25 @@ export interface LibraryView {
   truncatedState: "hidden" | "shown";
 }
 
-/** What a control can ask the Library to do. Every one of them is a decision the pane owns. */
+/** What a control can ask the home to do. Every one of them is a decision the pane owns. */
 export interface LibraryActions {
-  setCategory: (key: string) => void;
   setLayout: (key: string) => void;
   setLocale: (value: string) => void;
+  setFilter: (value: string) => void;
   search: (value: string) => void;
   openFile: (path: string) => void;
   /** Right-click on a row, at the pointer. */
   contextMenu: (path: string, x: number, y: number) => void;
-  /** The New menu opens under its own button. */
-  openNewMenu: (opener: HTMLElement) => void;
-  /**
-   * A file picker settled.
-   *
-   * The ELEMENT rather than its list, because a file input that is not cleared refuses the same
-   * file twice — and the picker is the surface's own control, so the host is the one that clears
-   * it.
-   */
-  upload: (input: HTMLInputElement) => void;
-  dragOver: () => void;
-  dragOut: () => void;
-  drop: (files: FileList | null) => void;
+  /** **New <item>** opens Add new on the collection's kind. */
+  openNew: () => void;
+  /** **Fields** opens Project Settings › Content types on this collection. */
+  openFields: () => void;
+  /** **Edit in grid** opens the collection's grid (`collection.editInGrid`). */
+  openGrid: () => void;
+  /** **Design the <item> page** opens the collection's page in Design. */
+  designPage: () => void;
+  /** **Add one** writes the collection's page. */
+  addPage: () => void;
   scrolled: () => void;
   retry: () => void;
   reset: () => void;
@@ -211,19 +236,24 @@ interface LibraryScope extends LibraryView, LibraryActions {}
 /** Write a projection into the scope. */
 function project(scope: LibraryScope, view: LibraryView): void {
   scope.region = view.region;
-  scope.dropRegion = view.dropRegion;
   scope.view = view.view;
-  scope.categories = view.categories;
+  scope.title = view.title;
+  scope.subtitle = view.subtitle;
+  scope.searchLabel = view.searchLabel;
+  scope.newLabel = view.newLabel;
+  scope.newState = view.newState;
+  scope.fieldsState = view.fieldsState;
+  scope.page = view.page;
   scope.layouts = view.layouts;
+  scope.filterState = view.filterState;
+  scope.filterOptions = view.filterOptions;
+  scope.filterValue = view.filterValue;
   scope.localeState = view.localeState;
   scope.localeOptions = view.localeOptions;
   scope.localeValue = view.localeValue;
   scope.query = view.query;
-  scope.uploadHint = view.uploadHint;
-  scope.uploadAccept = view.uploadAccept;
   scope.bannerState = view.bannerState;
   scope.bannerText = view.bannerText;
-  scope.dropActive = view.dropActive;
   scope.emptyMessage = view.emptyMessage;
   scope.emptyDetail = view.emptyDetail;
   scope.pad = view.pad;
@@ -251,7 +281,7 @@ function rowPath(state: JxScope | undefined): string {
 }
 
 /**
- * Mount the Library document into `host`, wired to `actions`.
+ * Mount the Content home document into `host`, wired to `actions`.
  *
  * @param {HTMLElement} host - The pane's canvas stage
  * @param {LibraryView} view - What to draw right now
@@ -269,25 +299,29 @@ export function mountLibrarySurface(
   const listening = new AbortController();
   placeholderBrokenImages(host, listening.signal);
   const scope: LibraryScope = reactive<LibraryScope>({
+    addPage: actions.addPage,
     bannerState: "hidden",
     bannerText: "",
-    categories: [],
     columns: [],
     contextMenu: actions.contextMenu,
-    dragOut: actions.dragOut,
-    dragOver: actions.dragOver,
-    drop: actions.drop,
-    dropActive: "false",
-    dropRegion: "",
+    designPage: actions.designPage,
     emptyDetail: "",
     emptyMessage: "",
+    fieldsState: "hidden",
     groups: [],
     layouts: [],
+    filterOptions: [],
+    filterState: "hidden",
+    filterValue: "",
     localeOptions: [],
     localeState: "hidden",
     localeValue: "",
+    newLabel: "",
+    newState: "hidden",
+    openFields: actions.openFields,
+    openGrid: actions.openGrid,
     openFile: actions.openFile,
-    openNewMenu: actions.openNewMenu,
+    openNew: actions.openNew,
     pad: "",
     padBottom: "",
     padTop: "",
@@ -296,18 +330,19 @@ export function mountLibrarySurface(
     region: "",
     reset: actions.reset,
     retry: actions.retry,
+    page: { designLabel: "", pattern: "", state: "hidden", template: "", text: "" },
     rows: [],
     scrolled: actions.scrolled,
     scroller: actions.scroller,
     search: actions.search,
-    setCategory: actions.setCategory,
+    searchLabel: "",
     setLayout: actions.setLayout,
+    setFilter: actions.setFilter,
     setLocale: actions.setLocale,
+    subtitle: "",
+    title: "",
     truncated: "",
     truncatedState: "hidden",
-    upload: actions.upload,
-    uploadAccept: "",
-    uploadHint: "",
     view: "loading",
   });
   project(scope, view);

package/src/surfaces/media-browser.json

@@ -87,9 +87,14 @@
           "fontSize": "var(--jx-text-xs)"
         },
         "& [part=\"more\"]": {
-          "margin": "0",
-          "color": "var(--fg-dim)",
-          "fontSize": "var(--jx-text-xs)"
+          "justifyContent": "flex-start"
+        },
+        "& [part=\"browse-all\"]": {
+          "$description": "The last row, set apart by a rule: it does not pick a file, it opens the picker that shows all of them.",
+          "marginTop": "var(--jx-space-1)",
+          "paddingTop": "var(--jx-space-2)",
+          "borderTop": "1px solid var(--border)",
+          "justifyContent": "flex-start"
         }
       },
       "children": [
@@ -288,14 +293,65 @@
           },
           "cases": {
             "shown": {
-              "$description": "A truncated list says so. Fifty rows is the cap the list has always had; the sentence is what keeps the cap from reading as \"that is all there is\".",
-              "tagName": "p",
+              "$description": "A truncated list says so, and the marker is a control (the rule studio.md §5.6 states for every truncation marker): it raises the cap by fifty, so every file the Media workspace lists can be reached from here without a search. Inert \"…21 more\" text was the panel holding the answer and not showing it.",
+              "tagName": "jx-button",
               "attributes": {
                 "part": "more"
               },
-              "textContent": "${state.moreLabel}"
+              "$props": {
+                "variant": "secondary",
+                "size": "sm",
+                "quiet": true
+              },
+              "onclick": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "operator": "call",
+                    "target": {
+                      "$ref": "#/state/showMore"
+                    },
+                    "value": []
+                  }
+                ]
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "${state.moreLabel}"
+                }
+              ]
             }
           }
+        },
+        {
+          "tagName": "jx-button",
+          "attributes": {
+            "part": "browse-all"
+          },
+          "$props": {
+            "variant": "secondary",
+            "size": "sm",
+            "quiet": true
+          },
+          "onclick": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "call",
+                "target": {
+                  "$ref": "#/state/browseAll"
+                },
+                "value": []
+              }
+            ]
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "${state.browseAllLabel}"
+            }
+          ]
         }
       ]
     }

package/src/surfaces/media-browser.ts

@@ -14,6 +14,10 @@
  * which is the whole reason `panels/seo-modal.ts` had to fork its own Browse onto the kit menu, and
  * a top-layer popover has no such problem.
  *
+ * **The last row opens the big picker.** **Browse all media…** hands the same commit to the Media
+ * workspace's own surface in a dialog (`media/media-library.ts`), so the compact list and the full
+ * one are two sizes of one picker rather than two pickers.
+ *
  * **The filter takes the caret, and the adapter is what puts it there.** A `jx-popover` moves focus
  * into itself but has no opinion about which control; the panel is a search box over a list, so the
  * box is where typing should land. The node is reached through the mounted root rather than a
@@ -60,8 +64,10 @@ export interface MediaBrowserView {
   /** What stands in for the list when nothing matches. */
   emptyLabel: string;
   moreState: "hidden" | "shown";
-  /** "…10 more" — the cap is fifty and a truncated list says so. */
+  /** "Show 10 more": a truncated list says so, and the marker raises the cap. */
   moreLabel: string;
+  /** The last row: "Browse all media…", or "Browse all images…" for a field that holds a picture. */
+  browseAllLabel: string;
 }
 
 /** What a control asks the flow to do. */
@@ -70,6 +76,10 @@ export interface MediaBrowserActions {
   pick: (path: string) => void;
   /** A thumbnail finished decoding at that size. The flow decides whether it is news. */
   measure: (file: string, width: number, height: number) => void;
+  /** Raise the cap on listed rows: the truncation marker is a control, not a sentence. */
+  showMore: () => void;
+  /** Open the full-size picker: the Media workspace's surface, in a dialog (studio.md §9.3). */
+  browseAll: () => void;
   /** The platform closed the panel: clicked outside, Escape, or a second press on the invoker. */
   dismissed?: () => void;
 }
@@ -90,6 +100,7 @@ function project(scope: MediaBrowserScope, view: MediaBrowserView): void {
   scope.emptyLabel = view.emptyLabel;
   scope.moreState = view.moreState;
   scope.moreLabel = view.moreLabel;
+  scope.browseAllLabel = view.browseAllLabel;
 }
 
 /**
@@ -106,6 +117,8 @@ export function openMediaBrowserSurface(
   anchor: HTMLElement | null,
 ): MediaBrowserSurfaceHandle {
   const scope: MediaBrowserScope = reactive<MediaBrowserScope>({
+    browseAll: actions.browseAll,
+    browseAllLabel: view.browseAllLabel,
     emptyLabel: view.emptyLabel,
     filter: view.filter,
     measure: actions.measure,
@@ -115,6 +128,7 @@ export function openMediaBrowserSurface(
     rows: view.rows,
     rowsState: view.rowsState,
     setFilter: actions.setFilter,
+    showMore: actions.showMore,
     x: view.x,
     y: view.y,
   });

package/src/surfaces/media-field.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioMediaField",
-  "$description": "The media field: a thumbnail of what the value names, the value itself, and the two doors to a different one. It is a LEAF a caller interpolates \u2014 the Inspector's Content tab, the Signals panel and the grid's image-cell panel each draw an empty host and `ui/media-picker.ts` mounts this into it \u2014 so it has no chrome of its own and takes its width from whatever row it lands in. **Browse is addressed through its `part`, not through a class.** `ui/regions.ts` derives `inspector/field:<prop>/browse` by finding the Browse control inside the Inspector's own `[data-prop]` row; the handle used to be `.media-picker-browse`, and a document emits no class, so `[part=\"browse\"]` is the handle now. The four `.media-picker*` rules from `styles/overlays.css` are TRANSCRIBED here rather than shared, for the reason `doc-header.json` gives: a class a document does not emit cannot style it. `--radius` becomes `--jx-radius-sm` on the way, because a document mounted in a pane's stage is outside `<sp-theme>` and would otherwise take a fallback rather than follow the theme.",
+  "$description": "The media field: a thumbnail of what the value names, the value itself, and the two doors to a different one. It is a LEAF a caller interpolates \u2014 the Inspector's Content tab, the Signals panel and the grid's image-cell panel each draw an empty host and `ui/media-picker.ts` mounts this into it \u2014 so it has no chrome of its own and takes its width from whatever row it lands in. **Browse is addressed through its `part`, not through a class.** `ui/regions.ts` derives `inspector/field:<prop>/browse` by finding the Browse control inside the Inspector's own `[data-prop]` row; the handle used to be `.media-picker-browse`, and a document emits no class, so `[part=\"browse\"]` is the handle now. The four `.media-picker*` rules from `styles/overlays.css` are TRANSCRIBED here rather than shared, because a class a document does not emit cannot style it. `--radius` becomes `--jx-radius-sm` on the way, because a document mounted in a pane's stage is outside `<sp-theme>` and would otherwise take a fallback rather than follow the theme.",
   "tagName": "div",
   "attributes": {
     "part": "media-field"