@gogitcms/design-system 0.16.0-next.12 → 0.16.0-next.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.12",
+  "version": "0.16.0-next.13",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ContentBrowser.media.test.tsx

@@ -68,6 +68,7 @@ const galleryField: EntryField = {
   type: "array",
   of: "string",
   component: "list",
+  itemComponent: "media",
   media: "uploads",
   storeAs: "public",
   value: ["/uploads/hero.png"],
@@ -89,7 +90,7 @@ test("array items render media pickers when the array names a media set", async
 });
 
 test("a list with no media set stays a plain list of inputs", () => {
-  renderWith([{ ...galleryField, media: undefined, storeAs: undefined, value: ["x"] }]);
+  renderWith([{ ...galleryField, itemComponent: undefined, media: undefined, storeAs: undefined, value: ["x"] }]);
   expect(screen.queryByTestId("media-choose")).not.toBeInTheDocument();
 });
 

package/src/__tests__/ContentBrowser.references.test.tsx

@@ -129,7 +129,7 @@ test("an object reference shows its embedded copies read-only and picks by key c
 
 test("an array of references renders a picker per item", async () => {
   renderWith([
-    { name: "related", label: "Related", type: "array", of: "string", component: "list", reference: authorDef, value: [ada.key, bob.key] },
+    { name: "related", label: "Related", type: "array", of: "string", component: "list", itemComponent: "reference", reference: authorDef, value: [ada.key, bob.key] },
   ]);
   expect(await screen.findAllByTestId("reference-choose")).toHaveLength(2);
   expect(await screen.findByText("Bob")).toBeInTheDocument();
@@ -137,7 +137,7 @@ test("an array of references renders a picker per item", async () => {
 
 test("Add item on a reference list opens the picker and appends the pick", async () => {
   renderWith([
-    { name: "related", label: "Related", type: "array", of: "string", component: "list", reference: authorDef, value: [ada.key] },
+    { name: "related", label: "Related", type: "array", of: "string", component: "list", itemComponent: "reference", reference: authorDef, value: [ada.key] },
   ]);
   expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
 
@@ -153,7 +153,7 @@ test("Add item on a reference list opens the picker and appends the pick", async
 
 test("Add item on a reference list without a seam is disabled rather than adding a slot", async () => {
   renderWith(
-    [{ name: "related", label: "Related", type: "array", of: "string", component: "list", reference: authorDef, value: [] }],
+    [{ name: "related", label: "Related", type: "array", of: "string", component: "list", itemComponent: "reference", reference: authorDef, value: [] }],
     null,
   );
   fireEvent.click(await screen.findByTestId("list-add"));

package/src/components/ContentBrowser.tsx

@@ -74,21 +74,26 @@ export type EntryField = {
   source?: string;
   format?: string;
   flavor?: string;
-  // For a media picker (`component: "media"`): which configured media set to
-  // browse, and — on a string field — which form of the path to write. `media`
-  // comes from display.media, `storeAs` from display.store_as. On an array
-  // field these describe its *items*, making each one a media picker.
+  // For a media picker (`component: "media"`, or an array whose items are —
+  // `itemComponent: "media"`): which configured media set to browse, and —
+  // for a string value — which form of the path to write. Both come from the
+  // field's `media:` block; on an array they describe its *items*.
   media?: string;
   storeAs?: string;
   // For a document picker (`component: "reference"`, or an array whose items
-  // are references): what the field points at and stores. An object-shaped
-  // reference's `fields` are the derived children — the key child and the
-  // embedded copies — which the server recomputes on every save and the
-  // editor shows read-only (docs/references.md).
+  // are — `itemComponent: "reference"`): what the field points at and stores.
+  // An object-shaped reference declares its `fields` — the key child and the
+  // embedded copies — and the copies are the server's: recomputed on every
+  // save and shown read-only here (docs/references.md).
   reference?: ReferenceDef;
   value: unknown;
   // Item type for an array field (string | number | boolean | object).
   of?: string;
+  // The control each item of an array renders, from display.item.component.
+  // `list` describes the array; what an item is — a text input, a media
+  // picker, a document picker — is declared here, never inferred from the
+  // array's media or reference block. Absent means the default for `of`.
+  itemComponent?: string;
   // Child fields for an object field (or an array whose `of` is object).
   fields?: EntryField[];
   // Object shapes a mixed-list array (component: "mixedList") can hold.
@@ -1715,8 +1720,10 @@ function ListControl({
   // what was picked: the only thing such an item can hold is a picked
   // document, so an empty slot to fill in afterwards is a step nobody wants.
   // Without a host seam there is nothing to pick from, and the button is
-  // disabled as the field's own Choose button is.
-  const reference = field.reference;
+  // disabled as the field's own Choose button is. "Reference list" is the
+  // item's declared control, not the presence of a block: an array whose
+  // items are not declared pickers is a plain list whatever else it carries.
+  const reference = field.itemComponent === "reference" ? field.reference : undefined;
   const referenceApi = useReferenceApi();
   const [pickingNew, setPickingNew] = React.useState(false);
   const addItem = () => {
@@ -1732,20 +1739,21 @@ function ListControl({
     onChange([...items, referenceValue(target, isObject ? "object" : "string", reference, undefined)]);
   };
 
-  // Items inherit the array's *item-level* display config, not the array's own
-  // component — `list` describes the array, and is not a control an item could
-  // render. An array that names a media set makes each item a media picker;
-  // everything else falls back to the default control for the item type.
+  // Items render the array's *declared* item control (display.item.component),
+  // not the array's own component — `list` describes the array, and is not a
+  // control an item could render. The media and reference blocks describe the
+  // items too, so they travel with the item; they never pick its control. An
+  // array that declares nothing falls back to the default control for `of`.
   const itemField: EntryField = {
     name: field.name,
     type: itemType,
     of: undefined,
     fields: field.fields,
     value: null,
-    ...(field.media ? { component: "media", media: field.media, storeAs: field.storeAs } : {}),
-    // An array that declares a reference makes each item a document picker, the
-    // same way an array naming a media set makes each item a media picker.
-    ...(field.reference ? { component: "reference", reference: field.reference } : {}),
+    component: field.itemComponent,
+    media: field.media,
+    storeAs: field.storeAs,
+    reference: field.reference,
   };
 
   // The list's own path, from the FieldControl wrapping this control; an item

package/src/components/MediaField.tsx

@@ -61,7 +61,7 @@ export type MediaFieldProps = {
   // object field and an empty string field look identical at runtime — and
   // guessing would write the wrong shape into the document on first pick.
   shape: "string" | "object";
-  // The media set this field browses, from the config's display.media.
+  // The media set this field browses, from the config's media block.
   set?: string;
   // Which form a string field writes. Ignored for the object form, which stores
   // the asset id.
@@ -388,7 +388,7 @@ function AmbiguousNotice({
 // for an image without knowing anything about the picker UI.
 //
 // `set` defaults to the first configured set when the field names none (a body
-// field has no display.media), and the picker's own switcher covers the rest.
+// field has no media block), and the picker's own switcher covers the rest.
 export function useFieldMedia(opts: { set?: string; storeAs?: string }): {
   media: FieldMediaApi | undefined;
   picker: React.ReactNode;

package/src/components/Notifications.tsx

@@ -127,10 +127,16 @@ function NotificationRow({
   item,
   divided,
   onPress,
+  // How much of the body a row shows. Two lines suits the bell's menu, which is
+  // a glance at what happened; the full-screen list gives it more, because the
+  // body of an error notification is the error itself and a reader who opened
+  // the list to find out what went wrong has nowhere else to read it.
+  bodyLines = 2,
 }: {
   item: NotificationItem;
   divided?: boolean;
   onPress?: () => void;
+  bodyLines?: number;
 }) {
   const t = useTheme();
   const titleColor = item.level === "error" ? t.color.diffDelFg : t.color.textPrimary;
@@ -199,7 +205,9 @@ function NotificationRow({
           </View>
           <Text variant="monoSm" color="tertiary">{relativeTime(item.createdAt)}</Text>
         </View>
-        {item.body ? <InlineCode text={item.body} variant="monoSm" color={t.color.textSecondary} numberOfLines={2} /> : null}
+        {item.body ? (
+          <InlineCode text={item.body} variant="monoSm" color={t.color.textSecondary} numberOfLines={bodyLines} />
+        ) : null}
         {meta ? (
           <Text variant="monoSm" color="tertiary" numberOfLines={1}>{meta}</Text>
         ) : null}
@@ -412,6 +420,7 @@ export function NotificationList({
           item={n}
           divided={i < notifications.length - 1}
           onPress={onPressItem ? () => onPressItem(n) : undefined}
+          bodyLines={8}
         />
       ))}
     </ScrollView>

package/src/references.ts

@@ -17,7 +17,7 @@ export interface ReferenceDef {
   key: string;
   // For the object shape, the child that holds the key ("ref" unless renamed).
   keyName: string;
-  // The embedded copies, in the order the derived children appear.
+  // The embedded copies, in the order their children are listed.
   embed: ReferenceEmbed[];
   // What deleting a referenced document does: restrict | unset.
   onDelete: string;