@morphemecms/cms 0.5.0 → 0.7.0

package/src/Parts.tsx

@@ -7,6 +7,9 @@
 import { useMemo, useRef, useState } from 'react';
 import {
   AppWindow,
+  Article,
+  Eye,
+  SlidersHorizontal,
   Gear,
   ArrowDown,
   ArrowsDownUp,
@@ -29,6 +32,8 @@ import {
   Trash,
 } from '@phosphor-icons/react';
 import Screen from './Screen';
+import EditorFooter from './EditorFooter';
+import { MainDrawerSample } from './MainDrawerParts';
 import { Part, PartGroup, PartsShown, useGrouped, useSearched } from './PartsShown';
 import {
   EmptyNote,
@@ -89,6 +94,11 @@ import {
   ChoiceRow,
   IconSwatches,
   ListItem,
+  MenuRow,
+  SectionList,
+  SectionPane,
+  SectionSheet,
+  SectionsButton,
 } from './ui';
 import { FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
 import { newValue, problemAt } from './check';
@@ -100,6 +110,7 @@ import type { Field } from './schema';
 import { defaultColors } from '@site/editor';
 import { BASE_COLORS, canSetBaseColor, wheelColor, wheelColors, wheelDots, withBaseColor, type Dynamic } from '../lib/dynamic-colors';
 import { iconPacks } from './iconPacks';
+import { jurisdictionName } from './r2Caching';
 import type { Env } from './App';
 import { t } from './i18n';
 
@@ -125,6 +136,7 @@ export default function Parts({ env }: { env: Env }) {
   const [phone, setPhone] = useState({ code: '+45', number: examples.contact.phone });
   const [tile, setTile] = useState(0);
   const [placement, setPlacement] = useState('top');
+  const [menuPick, setMenuPick] = useState('auto');
   const [unfolded, setUnfolded] = useState(false);
   const [front, setFront] = useState(true);
   // An e-mail address without its domain: the field says what is wrong.
@@ -134,6 +146,13 @@ export default function Parts({ env }: { env: Env }) {
   const [picture, setPicture] = useState(examplePicture);
   const [folded, setFolded] = useState<number | null>(0);
   const [sectionOpen, setSectionOpen] = useState<number | null>(0);
+  const [sectionsSheet, setSectionsSheet] = useState(false);
+  const [sectionPicked, setSectionPicked] = useState('content');
+  const sectionItems = [
+    { id: 'content', label: t.forms.sections.content, icon: Article },
+    { id: 'status', label: t.forms.sections.status, icon: Eye, badge: 2 },
+    { id: 'other', label: t.forms.otherFields, icon: SlidersHorizontal },
+  ];
   const [tags, setTags] = useState(['a', 'b']);
   const dialog = useRef<HTMLDialogElement>(null);
   const fieldsDialog = useRef<HTMLDialogElement>(null);
@@ -423,6 +442,26 @@ export default function Parts({ env }: { env: Env }) {
               </section>
             </Part>
 
+            <Part name="MenuRow" use={use.menuRow}>
+              <MenuRow
+                label={t.advanced.place}
+                hint={t.advanced.placeHint}
+                value={menuPick}
+                options={[
+                  { value: 'auto', label: t.advanced.placeAuto },
+                  { value: 'eu', label: jurisdictionName('eu') },
+                ]}
+                onChange={setMenuPick}
+              />
+              <MenuRow
+                label={t.advanced.place}
+                value="auto"
+                options={[{ value: 'auto', label: t.advanced.placeAuto }]}
+                disabled
+                onChange={() => {}}
+              />
+            </Part>
+
             <Part name="UnfoldButton, subListClass" use={use.unfold}>
               <ul className={listClass}>
                 <ListItem
@@ -645,6 +684,14 @@ export default function Parts({ env }: { env: Env }) {
               />
             </Part>
 
+            <Part name="MainDrawer, MainDrawerSection, MainDrawerItem, MenuButton" use={use.mainDrawer}>
+              <MainDrawerSample />
+            </Part>
+
+            <Part name="EditorFooter" use={use.editorFooter}>
+              <EditorFooter />
+            </Part>
+
             <Part name="FoldSection" use={use.foldSection}>
               <div>
                 {[t.forms.sections.content, t.forms.otherFields].map((title, i) => (
@@ -660,6 +707,30 @@ export default function Parts({ env }: { env: Env }) {
               </div>
             </Part>
 
+            <Part name="SectionList, SectionPane, SectionSheet, SectionsButton" use={use.sectionList}>
+              <div className="space-y-4">
+                <div className={row}>
+                  <SectionsButton label={t.forms.sections.title} open={sectionsSheet} onClick={() => setSectionsSheet(true)} />
+                </div>
+                <div className="max-w-sm">
+                  <SectionPane title={t.forms.sections.title} open>
+                    <SectionList title={t.forms.sections.title} items={sectionItems} value={sectionPicked} onChange={setSectionPicked} />
+                  </SectionPane>
+                </div>
+              </div>
+              <SectionSheet title={t.forms.sections.title} open={sectionsSheet} onClose={() => setSectionsSheet(false)}>
+                <SectionList
+                  title={t.forms.sections.title}
+                  items={sectionItems}
+                  value={sectionPicked}
+                  onChange={(id) => {
+                    setSectionPicked(id);
+                    setSectionsSheet(false);
+                  }}
+                />
+              </SectionSheet>
+            </Part>
+
             <Part name="SharePreview" use={use.sharePreview}>
               <SharePreview image={examplePicture} domain={sample.domain} title={examples.pages[0]} description={examples.text} />
             </Part>

package/src/PartsShown.tsx

@@ -31,7 +31,7 @@ export const useSearched = () => useContext(Shown).query.trim();
 export const useGrouped = () => useContext(Shown).sort === 'group';
 
 /** The search, the order and the filter over the parts (`children`, PartGroup), with "Ingen dele passer
- * til søgningen." (or `none`) when none is shown. `keep`: the key they are kept under; `search`: the search's name. */
+ * til søgningen" (or `none`) when none is shown. `keep`: the key they are kept under; `search`: the search's name. */
 export function PartsShown({
   groups,
   keep,

package/src/PickerParts.tsx

@@ -38,7 +38,7 @@ export default function PickerParts() {
       <Part name="DatePicker" use={say.datePicker}>
         <Preview>
           <div className="space-y-6 p-4">
-            <div className="grid gap-6 sm:grid-cols-2" role="group" aria-label={say.fields}>
+            <div className="grid gap-6 medium:grid-cols-2" role="group" aria-label={say.fields}>
               <SiteDatePicker label={say.date} name="date" />
               <SiteDatePicker label={say.date} name="date-modal" kind="modal" value={picked} />
               <SiteDatePicker label={say.period} name="from" endName="to" range value={start} endValue={end} />
@@ -126,7 +126,7 @@ export default function PickerParts() {
       </Part>
       <Part name="TimePicker" use={say.timePicker}>
         <Preview>
-          <div className="grid gap-6 p-4 sm:grid-cols-2" role="group" aria-label={say.fields}>
+          <div className="grid gap-6 p-4 medium:grid-cols-2" role="group" aria-label={say.fields}>
             <SiteTimePicker label={say.time} name="time" />
             <SiteTimePicker label={say.time} name="time-set" value="14:30" />
             <SiteTimePicker label={`${say.time} (${say.twelveHours})`} name="time-12" value="14:30" timeFormat="12h" />

package/src/Redirects.tsx

@@ -1,4 +1,4 @@
-// "Videresendelser" under Indstillinger › "Søgemaskineoptimering" (#seo/videresendelser): two rows with how many
+// "Videresendelser" under Indhold (#seo/videresendelser): two rows with how many
 // each has, each opening a screen of its own.
 // "Alle videresendelser" (#seo/videresendelser/alle): every address of a page the site sends on elsewhere
 // (redirectData.ts), by address, with where it sends to, and search. Tapping one opens a sheet where
@@ -45,6 +45,7 @@ import { byText } from './schema';
 import { savedText } from './deploy';
 import { config, whatIsAt } from '@site/editor';
 import { siteT, t } from './i18n';
+import { backFrom } from './site';
 
 // An address as typed, as one: "/ny-side/", "/" for the front page, a #part kept, the site's own
 // domain left out; a link to another site as it is. '' when nothing is typed.
@@ -251,7 +252,7 @@ export default function Redirects({ env, tab }: { env: Env; tab?: Tab }) {
       { tab: 'missing' as const, label: t.redirects.missing.title, icon: LinkBreak, count: missing && files ? stillMissing.length : null },
     ];
     return (
-      <Screen title={t.common.parts.redirects} wide back={{ href: '#seo', label: t.common.parts.seo }}>
+      <Screen title={t.common.parts.redirects} wide back={backFrom('videresendelser')}>
         {problem && <ProblemNote>{problem}</ProblemNote>}
         <Group>
           {rows.map((r) => (

package/src/Screen.tsx

@@ -1,22 +1,26 @@
-// A screen of the editor: a top bar like in an app (a back arrow, the screen's title, actions on the
-// right) above the content. The back arrow goes to the screen above, back in the history when that is
-// the screen before (nav.ts up), so it goes the same way as the phone's back gesture. Without a back
-// arrow (the start screen), the logo is there instead. On a computer the top bar goes across the whole
-// window beside the sidebar (which has the logo and the site's name, App.tsx): at the left the way there
-// as breadcrumbs (the start screen and the screen above, when that is not the start screen), the title
-// and the status after it; at the right the actions, the notifications, the settings and the account, on every screen.
-// On a phone the notifications are on every screen too, the settings and the account only on the start screen (`home`). The bar stays at
-// the top while scrolling and keeps clear of a phone's notch. A screen's tabs (`tabs`) are the bottom of the bar, under the title,
-// as wide as the content, and stay with it. The content is as wide as a form reads
-// well, or wider for lists and the grid of files (`wide`) and for a form with its fields beside the text
-// (`panel`).
+// A screen of the editor: a top bar like in an app, beside the navigation rail and the drawer (it is drawn into
+// topBarSlot.tsx's place, at the top of the content), above the content. Below medium, where there is no rail, the panel
+// button at its start opens and closes the main drawer (MainMenu.tsx, menuOpen.ts; from medium it is the rail's); at expanded and wider the logo and the site's name after it (one link to the start screen,
+// through `back.guard`), below expanded the back arrow, the title and the status as in an app (the logo only on the start
+// screen); at the end the actions, the notifications and the account, on every screen (on a phone the account only on the
+// start screen, `home`). At expanded and wider the way here as breadcrumbs (the screen above, when that is not the start
+// screen), the title and the status stand in a row under the bar, at the top of the content. The bar stays at the top while
+// scrolling and keeps clear of a phone's notch. A screen's tabs (`tabs`) are the bottom of the bar, under the title, as wide
+// as the content, and stay with it. The back arrow goes to the screen above, back in the history when that is the screen
+// before (nav.ts up). The content is as wide as a form reads well, or wider for lists and the grid of files (`wide`) and for
+// a form with its fields beside the text (`panel`).
+// Under the content of every screen is the editor's footer (EditorFooter.tsx).
 import { useId, type ReactNode } from 'react';
-import { ArrowLeft, Bell, CaretRight, Gear, UserCircle } from '@phosphor-icons/react';
-import { settings, siteName } from '@site/editor';
+import { createPortal } from 'react-dom';
+import { ArrowLeft, Bell, CaretRight, UserCircle } from '@phosphor-icons/react';
 import { t } from './i18n';
-import { IconButton, IconLink, TabPanel, TabRow, TopAppBar, type TabChoice } from './ui';
+import { IconLink, MenuButton, TabPanel, TabRow, TopAppBar, useMenuLayout, type TabChoice } from './ui';
 import { up } from './nav';
+import EditorFooter from './EditorFooter';
+import { useMenuOpen } from './menuOpen';
 import { unseen, useNotifications } from './notificationData';
+import { SiteLogoLink } from './SiteLogoLink';
+import { useTopBarSlot } from './topBarSlot';
 
 // `label` is the screen back goes to, named by the back arrow and the breadcrumbs. `guard` takes every
 // way out of the screen (back, the breadcrumbs and the logo) and goes it, after warning about changes
@@ -25,9 +29,9 @@ export type Back = { href: string; label: string; guard?: (go: () => void) => vo
 
 // `status`: more about the screen, e.g. when it was last saved: under the title, on a computer after it.
 // `wide`: the content is wider on a computer (lists, the files); `panel`: a form with its other fields
-// beside the text on a wide computer screen (FormColumns in ui.tsx). `drawer`: the icon of the screen's navigation
-// drawer (NavigationDrawerButton, ModalNavigationDrawer), the last in the bar, after the account. `home`: the start screen,
-// with the settings and the account on a phone too. `tabs`: the screen's tabs, in the bar, with the open one's content.
+// beside the text on a wide computer screen (FormColumns in ui.tsx). `drawer`: a button at the end of the
+// bar, after the account (a form's SectionsButton). `home`: the start screen,
+// with the account on a phone too. `tabs`: the screen's tabs, in the bar, with the open one's content.
 type Props<T extends string> = {
   title: string;
   back?: Back;
@@ -56,7 +60,7 @@ export function AccountLink({ className = '' }: { className?: string }) {
   );
 }
 
-/** The bell in the top bar, at the left of the gear: the notifications (#notifikationer, Notifications.tsx), with a dot
+/** The bell in the top bar, before the account: the notifications (#notifikationer, Notifications.tsx), with a dot
  * while some are not seen yet. */
 export function NotificationsLink({ className = '' }: { className?: string }) {
   const count = unseen(useNotifications());
@@ -74,24 +78,6 @@ export function NotificationsLink({ className = '' }: { className?: string }) {
   );
 }
 
-/** The gear in the top bar, at the left of the account: "Indstillinger" (#indstillinger, Library.tsx Settings), marked
- * there and on the settings it opens ("Udseende", "Apps", "Analytics" … and their screens). Only when the site has any. */
-export function SettingsLink({ className = '' }: { className?: string }) {
-  if (!settings.length) return null;
-  const route = location.hash.slice(1);
-  const current = route === 'indstillinger' || settings.some((id) => route === id || route.startsWith(`${id}/`));
-  return (
-    <IconLink
-      href="#indstillinger"
-      icon={Gear}
-      label={t.common.parts.settings}
-      aria-current={current ? 'page' : undefined}
-      selected={current}
-      className={className}
-    />
-  );
-}
-
 export default function Screen<T extends string>({
   title,
   back,
@@ -105,7 +91,9 @@ export default function Screen<T extends string>({
   children,
 }: Props<T>) {
   const id = useId();
-  const width = wide ? 'max-w-3xl md:max-w-5xl' : panel ? 'max-w-3xl xl:max-w-6xl' : 'max-w-3xl';
+  const menu = useMenuOpen();
+  const { menuButtonInTopBar } = useMenuLayout();
+  const width = wide ? 'max-w-3xl medium:max-w-5xl' : panel ? 'max-w-3xl large:max-w-6xl' : 'max-w-3xl';
   // A link out of the screen, through `guard`: the back arrow goes up (nav.ts), the other links as links.
   const leave = (go?: () => void) => (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (!go && !back?.guard) return;
@@ -115,62 +103,76 @@ export default function Screen<T extends string>({
     if (back?.guard) back.guard(way);
     else way();
   };
-  return (
-    <div className="min-h-dvh">
-      <TopAppBar>
-        <div className="flex h-16 items-center gap-1 px-2 md:gap-3 md:px-6">
-          {back ? (
-            <a
-              href={back.href}
-              onClick={leave(() => up(back.href))}
-              title={t.common.backTo(back.label)}
-              aria-label={t.common.backTo(back.label)}
-              className="flex size-12 shrink-0 items-center justify-center rounded-full hover:bg-tint md:hidden"
-            >
-              <ArrowLeft size={24} />
-            </a>
-          ) : (
-            // The start screen: the logo before the name.
-            <img src="/editor/icon-192.png" alt="" className="mx-2 size-9 shrink-0 rounded-xl md:hidden" />
+  const slot = useTopBarSlot();
+  // The way here, without the start screen: the logo in the bar is the way there.
+  const crumbs = back && back.href !== '#' ? [back] : [];
+  const bar = (
+    <TopAppBar>
+      <div className="flex h-16 items-center gap-1 px-2 medium:gap-3 medium:px-6">
+        {menuButtonInTopBar && (
+          <MenuButton
+            label={menu.open ? t.library.closeMenu : t.library.openMenu}
+            open={menu.open}
+            onClick={menu.toggle}
+            className="shrink-0"
+          />
+        )}
+        <SiteLogoLink onClick={leave()} className={home ? '' : 'hidden expanded:flex'} />
+        {back && (
+          <a
+            href={back.href}
+            onClick={leave(() => up(back.href))}
+            title={t.common.backTo(back.label)}
+            aria-label={t.common.backTo(back.label)}
+            className="flex size-12 shrink-0 items-center justify-center rounded-full hover:bg-tint expanded:hidden"
+          >
+            <ArrowLeft size={24} />
+          </a>
+        )}
+        <div className="flex min-w-0 flex-1 flex-col pl-1 expanded:hidden">
+          <h1 className="truncate text-xl leading-tight">{title}</h1>
+          {status && (
+            <p data-subtitle className="truncate text-xs text-muted">
+              {status}
+            </p>
           )}
-          <div className="flex min-w-0 flex-1 flex-col pl-1 md:hidden">
-            <h1 className="truncate text-xl leading-tight">{title}</h1>
-            {status && (
-              <p data-subtitle className="truncate text-xs text-muted">
-                {status}
-              </p>
-            )}
-          </div>
-          {/* On a computer: the way here, the title and the status. */}
-          <div className="hidden min-w-0 flex-1 items-center gap-x-2 md:flex">
-            {back && (
-              <nav aria-label={t.library.breadcrumbs} className="flex shrink-0 items-center gap-2 text-muted">
-                {(back.href === '#' ? [back] : [{ href: '#', label: siteName }, back]).map((c) => (
-                  <span key={c.href} className="flex items-center gap-2">
-                    <a href={c.href} onClick={leave()} className="max-w-48 truncate hover:text-accent hover:underline">
-                      {c.label}
-                    </a>
-                    <CaretRight size={14} className="shrink-0" />
-                  </span>
-                ))}
-              </nav>
-            )}
-            <h1 className="truncate font-medium">{title}</h1>
-            {status && <p className="shrink-0 text-sm text-muted">{status}</p>}
-          </div>
-          <div className="flex shrink-0 items-center justify-end gap-1">{actions}</div>
-          <NotificationsLink />
-          <SettingsLink className={home ? '' : 'hidden md:inline-grid'} />
-          <AccountLink className={home ? '' : 'hidden md:inline-grid'} />
-          {drawer}
         </div>
-        {tabs && (
-          <div className={`mx-auto md:px-6 ${width}`}>
+        <div className="hidden min-w-0 flex-1 expanded:block" />
+        <div className="flex shrink-0 items-center justify-end gap-1">{actions}</div>
+        <NotificationsLink />
+        <AccountLink className={home ? '' : 'hidden medium:inline-grid'} />
+        {drawer}
+      </div>
+      {tabs && (
+        <div className="editor-bar-tabs">
+          <div className={`mx-auto medium:px-6 ${width}`}>
             <TabRow id={id} {...tabs} />
           </div>
-        )}
-      </TopAppBar>
-      <main className={`editor-screen mx-auto px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] md:px-6 md:pt-8 ${width}`}>
+        </div>
+      )}
+    </TopAppBar>
+  );
+  return (
+    <div className="min-h-dvh">
+      {slot ? createPortal(bar, slot) : bar}
+      <main className={`editor-screen mx-auto px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 ${width}`}>
+        {/* At expanded and wider: the way here, the title and the status, under the bar. */}
+        <div className="mb-6 hidden min-w-0 items-center gap-x-2 expanded:flex">
+          {crumbs.length > 0 && (
+            <nav aria-label={t.library.breadcrumbs} className="flex shrink-0 items-center gap-2 text-muted">
+              {crumbs.map((c) => (
+                <span key={c.href} className="flex items-center gap-2">
+                  <a href={c.href} onClick={leave()} className="max-w-48 truncate hover:text-accent hover:underline">
+                    {c.label}
+                  </a>
+                  <CaretRight size={14} className="shrink-0" />
+                </span>
+              ))}
+            </nav>
+          )}
+          <h1 className="truncate font-medium">{title}</h1>
+          {status && <p className="shrink-0 text-sm text-muted">{status}</p>}
+        </div>
         {tabs ? (
           <TabPanel id={id} value={tabs.value}>
             {children}
@@ -178,6 +180,7 @@ export default function Screen<T extends string>({
         ) : (
           children
         )}
+        <EditorFooter />
       </main>
     </div>
   );

package/src/SelectionParts.tsx

@@ -1,10 +1,10 @@
-// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Kontakter, valg og sideark": the theme's switches, radio buttons,
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Kontakter, valg og sideark": the theme's switches, setting rows, radio buttons,
 // sliders, dividers and side sheets (packages/editor/theme/ui/, through @site/editor) as the site draws them, in every
 // kind and state (the sliders also centered, in each size, with an icon and vertical), with made-up texts. The
 // switches, radio buttons and sliders can be tried (a slider's tracks and labels follow it here as on the site);
 // nothing is saved, and the side sheets are only drawn (on the site a modal one opens over the page with sideSheet()).
 // On a phone the standard one is drawn without the page beside it, as there is no room for both.
-import { SiteButton, SiteDivider, SiteRadioButton, SiteRadioGroup, SiteSideSheet, SiteSlider, SiteSwitch } from './themeUi';
+import { SiteButton, SiteDivider, SiteRadioButton, SiteRadioGroup, SiteSettingRow, SiteSideSheet, SiteSlider, SiteSwitch } from './themeUi';
 import { Part } from './PartsShown';
 import { Preview } from './ui';
 import { t } from './i18n';
@@ -14,7 +14,7 @@ const dividerKinds = ['full-width', 'inset', 'middle-inset'] as const;
 const sliderSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 
 export default function SelectionParts() {
-  const grid = 'grid gap-6 p-4 sm:grid-cols-2';
+  const grid = 'grid gap-6 p-4 medium:grid-cols-2';
   const sheet = (kind: 'standard' | 'modal') => (
     <SiteSideSheet
       kind={kind}
@@ -44,6 +44,22 @@ export default function SelectionParts() {
           </div>
         </Preview>
       </Part>
+      <Part name="SettingRow" use={say.settingRow}>
+        <Preview>
+          <div className={grid}>
+            <SiteSettingRow label={say.switchLabel} supporting={say.switchSupporting}>
+              <SiteButton kind="text" size="small">
+                {say.choices[0]}
+              </SiteButton>
+            </SiteSettingRow>
+            <SiteSettingRow label={say.switchLabel}>
+              <SiteButton kind="text" size="small" disabled>
+                {say.choices[1]}
+              </SiteButton>
+            </SiteSettingRow>
+          </div>
+        </Preview>
+      </Part>
       <Part name="RadioButton" use={say.radioButton}>
         <Preview>
           <div className={grid}>
@@ -69,7 +85,7 @@ export default function SelectionParts() {
       </Part>
       <Part name="Slider" use={say.slider}>
         <Preview>
-          <div className="grid gap-8 p-4 sm:grid-cols-2">
+          <div className="grid gap-8 p-4 medium:grid-cols-2">
             <SiteSlider label={say.volume} value={40} valueLabel />
             <SiteSlider label={say.count} max={10} value={6} stops valueLabel="always" />
             <SiteSlider label={say.price} max={1000} step={50} range={[200, 700]} handleLabels={say.handles} valueLabel="always" />
@@ -77,7 +93,7 @@ export default function SelectionParts() {
             <SiteSlider label={say.balance} min={-50} max={50} value={20} centered valueLabel />
             <SiteSlider label={say.balance} min={-50} max={50} step={10} value={-30} centered stops valueLabel="always" />
           </div>
-          <div className="grid gap-8 p-4 sm:grid-cols-2">
+          <div className="grid gap-8 p-4 medium:grid-cols-2">
             {sliderSizes.map((size) => (
               <SiteSlider key={size} label={say.sliderSizes[size]} size={size} value={60} />
             ))}
@@ -118,7 +134,7 @@ export default function SelectionParts() {
             <div className="space-y-2">
               <p className="px-2 text-sm text-muted">{say.sheetKinds.standard}</p>
               <div className="flex h-80 overflow-hidden">
-                <p className="hidden min-w-0 flex-1 p-4 text-muted sm:block">{say.page}</p>
+                <p className="hidden min-w-0 flex-1 p-4 text-muted medium:block">{say.page}</p>
                 {sheet('standard')}
               </div>
             </div>

package/src/SiteLogoLink.tsx

@@ -0,0 +1,14 @@
+// The logo and the site's name at the start of the top bar, after the menu button (Screen.tsx), and in the modal drawer after its close button (ui.tsx): one link to the start screen.
+// Exposes SiteLogoLink; the link's click goes through `onClick` (Screen's `leave`, so the unsaved-changes warning shows).
+import type { MouseEventHandler } from 'react';
+import { siteName } from '@site/editor';
+
+/** The site's logo (/editor/icon-192.png) and the site's name (at expanded and wider; for screen readers below), as a link to `#`. */
+export function SiteLogoLink({ onClick, className = '' }: { onClick?: MouseEventHandler<HTMLAnchorElement>; className?: string }) {
+  return (
+    <a href="#" onClick={onClick} className={`flex min-w-0 shrink-0 items-center gap-3 font-semibold ${className}`}>
+      <img src="/editor/icon-192.png" alt="" className="size-7 shrink-0 rounded-lg" />
+      <span className="max-w-48 truncate max-expanded:sr-only">{siteName}</span>
+    </a>
+  );
+}

package/src/StartFab.tsx

@@ -0,0 +1,22 @@
+// The start screen's FAB menu (Start in Library.tsx): a new page and a new blog post, each opening its empty form
+// (#ny/<list>), as the + on its list does. Exposes newOnStart (the actions) and StartFab. Uses FabMenu (ui.tsx) and the
+// collections and icons of site.ts.
+import { Plus } from '@phosphor-icons/react';
+import { t } from './i18n';
+import { collections, icons } from './site';
+import { FabMenu, type FabAction } from './ui';
+
+/** The lists a new entry can be made in from the start screen, in this order. */
+const ON_START = ['pages', 'blog'];
+
+/** The start screen's actions: the lists of ON_START the site has and can make a new entry in (`create`). */
+export function newOnStart(): FabAction[] {
+  return ON_START.flatMap((id) => {
+    const c = collections.find((x) => x.id === id);
+    return c?.create ? [{ icon: icons[id] ?? Plus, label: c.create, href: `#ny/${id}` }] : [];
+  });
+}
+
+export function StartFab() {
+  return <FabMenu icon={Plus} label={t.library.createNew} items={newOnStart()} />;
+}

package/src/StartStatus.tsx

@@ -14,7 +14,7 @@ export function StartStatus({ builtAt }: { builtAt: Date | null }) {
   const updated = builtAt ? t.library.siteUpdated(when(builtAt, { short: true })) : null;
   return (
     <>
-      <span className="expanded:inline hidden">
+      <span className="hidden expanded:inline">
         <CmsVersion />
         {updated && `${t.library.statusSeparator}${updated}`}
       </span>

package/src/autoTags.d.mts

@@ -0,0 +1,28 @@
+/**
+ * @typedef {import('./fileRecords.mjs').StoredRecord} StoredRecord
+ * @typedef {import('./fileRecords.mjs').RecordChange} RecordChange
+ */
+/**
+ * @param {string} text
+ * @param {Iterable<string>} srcs
+ * @returns {string[]}
+ */
+export function filesIn(text: string, srcs: Iterable<string>): string[];
+/**
+ * @param {string} before
+ * @param {string} after
+ * @param {Iterable<string>} srcs
+ * @returns {string[]}
+ */
+export function newlyUsed(before: string, after: string, srcs: Iterable<string>): string[];
+/**
+ * @param {StoredRecord[]} records
+ * @param {string} folder
+ * @param {string[]} srcs
+ * @param {string[]} pageTags
+ * @param {() => number} [random]
+ * @returns {RecordChange[]}
+ */
+export function autoTagChanges(records: StoredRecord[], folder: string, srcs: string[], pageTags: string[], random?: () => number): RecordChange[];
+export type StoredRecord = import("./fileRecords.mjs").StoredRecord;
+export type RecordChange = import("./fileRecords.mjs").RecordChange;

package/src/autoTags.mjs

@@ -0,0 +1,68 @@
+// The tags a file gets when it is newly used in a page or post (EntryForm.tsx, at "Gem"): every Filer file the saved page refers to and its last saved version did not gets the page's tags,
+// except those removed from the file before (tagsFor), saved in the same commit as the page. Pure, so node --test can run it.
+
+import { inherit } from './fileTags.mjs';
+import { recordFor, writeRecords } from './fileRecords.mjs';
+
+/**
+ * @typedef {import('./fileRecords.mjs').StoredRecord} StoredRecord
+ * @typedef {import('./fileRecords.mjs').RecordChange} RecordChange
+ */
+
+/**
+ * @param {string} text
+ * @param {Iterable<string>} srcs
+ * @returns {string[]}
+ */
+export function filesIn(text, srcs) {
+  const results = [];
+  for (const src of srcs) {
+    if (results.includes(src)) continue;
+    const escaped = src.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`${escaped}(?![\\w.-])`);
+    if (regex.test(text)) {
+      results.push(src);
+    }
+  }
+  return results;
+}
+
+/**
+ * @param {string} before
+ * @param {string} after
+ * @param {Iterable<string>} srcs
+ * @returns {string[]}
+ */
+export function newlyUsed(before, after, srcs) {
+  const srcArray = Array.from(srcs);
+  const beforeSet = new Set(filesIn(before, srcArray));
+  return filesIn(after, srcArray).filter((src) => !beforeSet.has(src));
+}
+
+/**
+ * @param {StoredRecord[]} records
+ * @param {string} folder
+ * @param {string[]} srcs
+ * @param {string[]} pageTags
+ * @param {() => number} [random]
+ * @returns {RecordChange[]}
+ */
+export function autoTagChanges(records, folder, srcs, pageTags, random) {
+  if (pageTags.length === 0 || srcs.length === 0) {
+    return [];
+  }
+
+  const updates = [];
+  const seen = new Set();
+  for (const src of srcs) {
+    if (seen.has(src)) continue;
+    seen.add(src);
+    const record = recordFor(records, src);
+    updates.push({ src, next: inherit(record?.record, src, pageTags) });
+  }
+
+  if (random) {
+    return writeRecords(records, folder, updates, random);
+  }
+  return writeRecords(records, folder, updates);
+}