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

package/src/components/layout.tsx

@@ -39,24 +39,50 @@ export function Screen({
   );
 }
 
+/**
+ * What a host that draws its own window chrome needs from the top bar: room at
+ * the leading edge for the platform's window controls (the macOS traffic
+ * lights, when the app hides the title bar), and the bar marked as the place
+ * the window is dragged by. The web and mobile apps have a browser or an OS
+ * doing this for them and pass nothing.
+ */
+export type WindowChrome = {
+  /** Width, in px, kept clear at the bar's leading edge. */
+  leadingInset?: number;
+  /**
+   * The bar's height, when it has to match the platform's title bar: the
+   * controls drawn over it are centred on that, not on the bar.
+   */
+  height?: number;
+};
+
 /** Horizontal top bar with left / center / right slots. */
 export function TopBar({
   left,
   center,
   right,
+  windowChrome,
 }: {
   left?: React.ReactNode;
   center?: React.ReactNode;
   right?: React.ReactNode;
+  windowChrome?: WindowChrome;
 }) {
   const t = useTheme();
   return (
     <View
+      // The bar is where a chromeless window is dragged from. The host reads
+      // this attribute (data-window-drag) on mousedown, and only over the bar
+      // itself: the controls on it stay controls.
+      // @ts-expect-error react-native-web accepts dataSet -> data-* attributes
+      dataSet={windowChrome ? { windowDrag: "true" } : undefined}
+      testID="top-bar"
       style={{
-        height: t.layout.topbar,
+        height: windowChrome?.height ?? t.layout.topbar,
         flexDirection: "row",
         alignItems: "center",
         paddingHorizontal: t.space(3),
+        paddingLeft: t.space(3) + (windowChrome?.leadingInset ?? 0),
         gap: t.space(3),
         borderBottomWidth: 1,
         // Hairline appropriate to the dark chrome in both modes.
@@ -176,6 +202,12 @@ export function Pane({
             gap: t.space(2),
             borderBottomWidth: 1,
             borderBottomColor: t.color.borderSubtle,
+            // Above the body, so a menu opened from the header (the master
+            // pane's title switcher) paints over the list beneath it rather
+            // than under it. Views stack in tree order otherwise, and the body
+            // comes second.
+            position: "relative",
+            zIndex: 10,
           }}
         >
           {header}

package/src/icons.ts

@@ -47,6 +47,11 @@ export const icons = {
   copy: ["M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Z", "M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2"],
   lock: ["M5 11h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z", "M7 11V7a5 5 0 0 1 10 0v4"],
   panelLeft: ["M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z", "M9 3v18"],
+  // Corner arrows (maximize/minimize): the pair the markdown editor already
+  // draws for its focus mode, so "take over the screen" reads the same whether
+  // it is a field or a whole pane doing it.
+  maximize: ["M15 3h6v6", "M9 21H3v-6", "m21 3-7 7", "m3 21 7-7"],
+  minimize: ["M4 14h6v6", "M20 10h-6V4", "m14 10 7-7", "m3 21 7-7"],
   more: ["M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", "M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", "M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"],
   gripVertical: [
     "M9 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", "M9 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", "M9 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",

package/src/index.ts

@@ -43,7 +43,9 @@ export type { SegmentProps, SegmentItem } from "./components/Segment";
 export { BranchMenu } from "./components/BranchMenu";
 export type { BranchMenuProps, BranchRef } from "./components/BranchMenu";
 export { ProjectMenu } from "./components/ProjectMenu";
-export type { ProjectMenuProps, ProjectRef } from "./components/ProjectMenu";
+export type { ProjectMenuProps, ProjectRef, ProjectMenuAction } from "./components/ProjectMenu";
+export { WorkspaceMenu, workspaceInitials } from "./components/WorkspaceMenu";
+export type { WorkspaceMenuProps, WorkspaceRef, WorkspaceMenuAction } from "./components/WorkspaceMenu";
 
 // Apply changes (merge) progress modal
 export { ApplyChangesModal } from "./components/ApplyChangesModal";
@@ -134,6 +136,7 @@ export {
   MobileScreen,
   ThemeToggle,
 } from "./components/layout";
+export type { WindowChrome } from "./components/layout";
 
 // Media: the picker control, its previews, and the host data seam
 export { MediaField, MediaPicker, MediaProvider, DocumentPathProvider, useMediaApi, useFieldMedia, pathForStoreAs } from "./components/MediaField";

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;

package/src/theme.ts

@@ -81,7 +81,9 @@ export function makeTheme(mode: ThemeMode) {
     space: (n: number) => n * 4,
     radius: { sm: 3, md: 5, lg: 8, pill: 999 },
     control: { sm: 28, md: 34, lg: 40 },
-    layout: { sidebar: 260, column: 300, topbar: 48, container: 1200 },
+    // `master` is the editor's master pane (sections at rest, a collection's
+    // entries pushed in): wide enough for a two-line entry row.
+    layout: { sidebar: 260, master: 340, column: 300, topbar: 48, container: 1200 },
     font: { sans: fontSans, mono: fontMono },
     type: {
       display: { size: 40, line: 44 },