@vespercms/admin 0.1.0-next.0 → 0.1.0-next.1

package/dist/widgets/blank-date.d.ts

@@ -0,0 +1,8 @@
+import { type FocusEvent, type KeyboardEvent } from 'react';
+/** Props for a `date` or `datetime-local` input whose value is `value`. */
+export declare function useBlankWhenEmpty(value: string): {
+    'data-blank': string | undefined;
+    onPointerDown: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onBlur: (event: FocusEvent<HTMLInputElement>) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vespercms/admin",
-  "version": "0.1.0-next.0",
+  "version": "0.1.0-next.1",
   "description": "The Vesper studio: the editor UI served at /admin, one bundle for every storage mode.",
   "license": "MIT",
   "homepage": "https://vespercms.com",
@@ -45,7 +45,7 @@
     "@tiptap/pm": "^3.32.0",
     "@tiptap/react": "^3.32.0",
     "@tiptap/starter-kit": "^3.32.0",
-    "@vespercms/core": "0.1.0-next.0",
+    "@vespercms/core": "0.1.0-next.1",
     "dompurify": "^3.4.17",
     "maplibre-gl": "^6.14.0",
     "pdfjs-dist": "^6.4.299",

package/src/github/GitHubGate.tsx

@@ -29,6 +29,8 @@ type State =
   | { kind: 'checking' }
   | { kind: 'signed-out'; message?: string }
   | { kind: 'no-access'; login: string }
+  /** GitHub answered 404: most often the site's GitHub App isn't installed on the repository. */
+  | { kind: 'not-found'; login: string }
   | { kind: 'error'; message: string }
   | {
       kind: 'ready';
@@ -89,9 +91,25 @@ export function GitHubGate({
           ? ((await user.json()) as { login?: string; name?: string | null; avatar_url?: string })
           : {};
         const login = profile.login ?? '';
-        const details = repo.ok
-          ? ((await repo.json()) as { permissions?: { push?: boolean }; private?: boolean })
-          : {};
+        // A GitHub App's sign-in sees only repositories the app is installed on,
+        // so a 404 isn't the editor's access: blaming it sent an owner to ask
+        // themselves for write access (DECISIONS.md, "GitHub mode tells a missing
+        // install apart from missing access").
+        if (repo.status === 404) {
+          set({ kind: 'not-found', login });
+          return;
+        }
+        if (!repo.ok) {
+          set({
+            kind: 'error',
+            message: `GitHub couldn’t open ${settings.owner}/${settings.repo} just now. Try again in a few minutes.`,
+          });
+          return;
+        }
+        const details = (await repo.json()) as {
+          permissions?: { push?: boolean };
+          private?: boolean;
+        };
         const permissions = details.permissions;
         if (!permissions?.push) {
           set({ kind: 'no-access', login });
@@ -121,6 +139,10 @@ export function GitHubGate({
   const signIn = useCallback(() => {
     void startSignIn(settings, window.location.hash);
   }, [settings]);
+  const tryAgain = useCallback(() => {
+    setState({ kind: 'checking' });
+    setAttempt((n) => n + 1);
+  }, []);
   const leave = useCallback(() => {
     signOut();
     setExpired(false);
@@ -210,17 +232,30 @@ export function GitHubGate({
             </div>
           </>
         )}
+        {state.kind === 'not-found' && (
+          <>
+            <p>
+              {state.login ? `You’re signed in to GitHub as @${state.login}. ` : ''}The site’s
+              GitHub App may not be installed on {repo}, or your account may not be able to see it.
+            </p>
+            <p>
+              The site’s owner installs the app from its settings on GitHub, under Install App, then
+              tries again here. If it’s installed already, ask the owner to give your account write
+              access to {repo}.
+            </p>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="primary" onPress={tryAgain}>
+                Try again
+              </Button>
+              <Button onPress={leave}>Sign out of GitHub</Button>
+            </div>
+          </>
+        )}
         {state.kind === 'error' && (
           <>
             <p role="alert">{state.message}</p>
             <div>
-              <Button
-                variant="primary"
-                onPress={() => {
-                  setState({ kind: 'checking' });
-                  setAttempt((n) => n + 1);
-                }}
-              >
+              <Button variant="primary" onPress={tryAgain}>
                 Try again
               </Button>
             </div>
@@ -237,6 +272,8 @@ function titleOf(state: State): string {
       return 'Opening the studio';
     case 'no-access':
       return 'Your GitHub account can’t change this site';
+    case 'not-found':
+      return 'GitHub can’t find this site’s repository';
     case 'error':
       return 'GitHub couldn’t be reached';
     default:

package/src/schedule/ScheduleDialog.tsx

@@ -13,6 +13,7 @@ import { useStudio } from '../app/context.tsx';
 import { useDrafts } from '../cloud/editor.tsx';
 import { ChoosePageButton } from '../editor/PagePicker.tsx';
 import { inputClass } from '../widgets/basic.tsx';
+import { useBlankWhenEmpty } from '../widgets/blank-date.ts';
 import { cloudKeepsTime } from './cloud.ts';
 import { useNow } from './now.ts';
 import { everyText, redirectField, siteZone, type ScheduleTimes } from './times.ts';
@@ -234,6 +235,7 @@ function TimeField({
   action?: ReactNode;
 }) {
   const note = value ? dstNote(value, zone, now) : null;
+  const blank = useBlankWhenEmpty(value);
   const described = [describedBy, note ? `${id}-note` : '', problem ? `${id}-problem` : '']
     .filter(Boolean)
     .join(' ');
@@ -249,6 +251,7 @@ function TimeField({
         onChange={(event) => {
           onChange(event.target.value);
         }}
+        {...blank}
         aria-describedby={described}
         aria-invalid={problem ? true : undefined}
         className={cx(inputClass, 'max-w-64')}

package/src/schedule/times.ts

@@ -3,7 +3,6 @@ import {
   offsetOf,
   publishWindow,
   resolveTimeZone,
-  scheduleStatus,
   type CollectionManifest,
   type DataObject,
   type DataValue,
@@ -91,16 +90,6 @@ export function withTimes(
   return next;
 }
 
-/** The entry's schedule as status words, or null when there's nothing to say. */
-export function scheduleWords(
-  schedule: SchedulePresentation | undefined,
-  data: DataValue,
-  zone: string,
-  now: Date = new Date(),
-): string | null {
-  return scheduleStatus(schedule, data, now, zone);
-}
-
 /** An entry row's schedule (ISO times) as values under the schedule's field names. */
 export function rowData(
   schedule: SchedulePresentation | undefined,

package/src/screens/EntryEditor.tsx

@@ -77,7 +77,8 @@ import { useNow } from '../schedule/now.ts';
 import { ScheduleDialog } from '../schedule/ScheduleDialog.tsx';
 import { ScheduleSummary } from '../schedule/ScheduleSummary.tsx';
 import { holdUntil } from '../schedule/cloud.ts';
-import { scheduleKeys, scheduleWords, siteZone, timesOf, withTimes } from '../schedule/times.ts';
+import { scheduleKeys, siteZone, timesOf, withTimes } from '../schedule/times.ts';
+import { StateWords, entryState, isNewInDraft } from './status.tsx';
 import { useEntryNotes } from '../a11y/useNotes.ts';
 import {
   ConflictCompare,
@@ -909,7 +910,6 @@ function EntryForm({
   const later = (date: Date | undefined) => date !== undefined && date.getTime() > now.getTime();
   /** Live already, so Schedule… sets only when it comes down (call 8). */
   const live = !isNew && !later(savedTimes.publishAt);
-  const scheduleText = schedule && !isNew ? scheduleWords(schedule, saved.values, zone, now) : null;
   const nowLabel = publishes ? 'Publish now' : 'Make it live now';
   /** Sets the values and saves them, or publishes them where saves are drafts. */
   const saveWith = async (next: DataObject) => {
@@ -1008,12 +1008,22 @@ function EntryForm({
     });
   };
 
-  // Never empty, so the way back (or the title) above it always sits in the same place.
+  // What the entry is, its word coloured, then how its changes stand: never
+  // empty, so the way back (or the title) above it always sits in the same place.
+  const state =
+    linkCopied > 0 || (isNew && !draft)
+      ? null
+      : entryState(
+          collection,
+          {
+            draft,
+            times: isNew ? null : saved.values,
+            newDraft: isNewInDraft(entryDraft ? [entryDraft] : [], filePath),
+          },
+          { zone, cloud: Boolean(cloud), now },
+        );
   const statusLine =
-    linkCopied > 0
-      ? 'Link copied'
-      : [draft ? 'Draft' : '', scheduleText ?? '', statusText].filter(Boolean).join(' · ') ||
-        (editable ? 'No changes' : 'Read only');
+    linkCopied > 0 ? 'Link copied' : statusText || (editable ? 'No changes' : 'Read only');
   // Content, the collection's own tabs, then Details; no tab list when Content is all there is.
   const panels = sourceOnly
     ? []
@@ -1066,8 +1076,12 @@ function EntryForm({
         {pane && Boolean(arranged.title) && !sourceOnly && (
           <span className="truncate font-semibold text-content">{titleText}</span>
         )}
-        <InlineStatus dot className="h-5 min-w-0">
-          <span className="min-w-0 truncate">{statusLine}</span>
+        <InlineStatus dot busy={saving || publishing} className="h-5 min-w-0">
+          <span className="min-w-0 truncate">
+            <StateWords state={state} />
+            {state ? ' · ' : ''}
+            <span>{statusLine}</span>
+          </span>
         </InlineStatus>
       </div>
       {notes.length > 0 && !notesInMenu && (

package/src/screens/EntryList.tsx

@@ -9,7 +9,9 @@ import { useLoad } from '../app/load.ts';
 import { hrefFor, navigate } from '../app/router.ts';
 import { collectionIcon } from '../app/collection-icon.ts';
 import { Screen } from '../app/Screen.tsx';
-import { hasUpcoming, rowData, scheduleWords, siteZone } from '../schedule/times.ts';
+import { useDrafts } from '../cloud/editor.tsx';
+import { hasUpcoming, rowData, siteZone } from '../schedule/times.ts';
+import { StateWords, entryState, isNewInDraft, kindText, type EntryState } from './status.tsx';
 
 type Filter = 'all' | 'drafts' | 'attention' | 'scheduled';
 
@@ -21,6 +23,7 @@ type Filter = 'all' | 'drafts' | 'attention' | 'scheduled';
 export function EntryList({ collection }: { collection: CollectionManifest }) {
   const { api, cloud, manifest } = useStudio();
   const { zone } = siteZone(manifest);
+  const { drafts } = useDrafts();
   const [load] = useLoad(() => api.listEntries(collection.name), collection.name);
   const [query, setQuery] = useState('');
   const [filter, setFilter] = useState<Filter>('all');
@@ -71,11 +74,15 @@ export function EntryList({ collection }: { collection: CollectionManifest }) {
     );
     return [...shown].sort(compareBy(sort));
   }, [entries, query, filter, sort]);
-  const words = (entry: EntrySummary) =>
-    scheduleWords(
-      collection.presentation.schedule,
-      rowData(collection.presentation.schedule, entry.schedule),
-      zone,
+  const stateOf = (entry: EntrySummary) =>
+    entryState(
+      collection,
+      {
+        draft: entry.draft === true,
+        times: rowData(collection.presentation.schedule, entry.schedule),
+        newDraft: isNewInDraft(drafts, entry.path),
+      },
+      { zone, cloud: Boolean(cloud) },
     );
 
   return (
@@ -150,7 +157,7 @@ export function EntryList({ collection }: { collection: CollectionManifest }) {
           }
           emptyState={entries.length === 0 ? 'No entries yet.' : 'No entries match.'}
           renderCell={(entry, column) => (
-            <Cell entry={entry} column={column} schedule={words(entry)} />
+            <Cell entry={entry} column={column} state={stateOf(entry)} />
           )}
         />
       )}
@@ -168,11 +175,11 @@ export const TITLE_KEYS = new Set(['title', 'name', 'heading', 'label']);
 function Cell({
   entry,
   column,
-  schedule,
+  state,
 }: {
   entry: EntrySummary;
   column: string;
-  schedule: string | null;
+  state: EntryState | null;
 }) {
   if (column === 'title') {
     return (
@@ -194,27 +201,18 @@ function Cell({
     );
   }
   if (column === 'status') {
-    return <span className="text-content-muted">{statusText(entry, schedule)}</span>;
+    const kind = kindText(entry.status);
+    return (
+      <span className="text-content-muted">
+        <StateWords state={state} />
+        {state && kind ? ' · ' : ''}
+        {kind}
+      </span>
+    );
   }
   return <span>{formatListValue(entry.fields[column.slice('field:'.length)])}</span>;
 }
 
-/** An entry's status in words: what it is, then its schedule ("Draft · Scheduled · Sat, Oct 31, 8:00 AM"). */
-export function statusText(
-  entry: Pick<EntrySummary, 'status' | 'draft'>,
-  schedule: string | null = null,
-): string {
-  const kind =
-    entry.status === 'read-only'
-      ? 'Read only'
-      : entry.status === 'source-only'
-        ? 'Edit as YAML'
-        : entry.draft
-          ? 'Draft'
-          : '';
-  return [kind, schedule ?? ''].filter(Boolean).join(' · ');
-}
-
 /** A list field's value as short text. Dates at midnight UTC are calendar dates. */
 export function formatListValue(encoded: unknown): string {
   const value = decodeValue(encoded);

package/src/screens/ListPane.tsx

@@ -26,15 +26,17 @@ import { hasUnsavedChanges, hrefFor, navigate } from '../app/router.ts';
 import { collectionIcon } from '../app/collection-icon.ts';
 import { PaneFrame, useLeadHeading } from '../app/Screen.tsx';
 import { entryShownTo, mayCreateIn } from '../cloud/access.ts';
-import { hasUpcoming, rowData, scheduleWords, siteZone } from '../schedule/times.ts';
+import { useDrafts } from '../cloud/editor.tsx';
+import { hasUpcoming, rowData, siteZone } from '../schedule/times.ts';
+import { compareBy, defaultSort, formatListValue, labelFor, TITLE_KEYS } from './EntryList.tsx';
 import {
-  compareBy,
-  defaultSort,
-  formatListValue,
-  labelFor,
-  statusText,
-  TITLE_KEYS,
-} from './EntryList.tsx';
+  StateWords,
+  entryState,
+  isNewInDraft,
+  kindText,
+  stateText,
+  type EntryState,
+} from './status.tsx';
 
 /*
  * A flat collection's list as a pane (DECISIONS.md, "The studio is panes,
@@ -90,7 +92,12 @@ function cacheOf(api: StudioApi): Map<string, EntrySummary[]> {
 type Row = TreeNode & {
   title: string;
   entryId: string;
+  /** The line under the title, in words: list fields, state, when it was edited. */
   meta: string;
+  /** The same line in parts, so the state's word can take its colour. */
+  fields: string[];
+  state: EntryState | null;
+  after: string[];
   /** The entry open beside the list. */
   current: boolean;
   children: Row[];
@@ -130,6 +137,7 @@ export function ListPane({
 }) {
   const { api, cloud, manifest } = useStudio();
   const { zone } = siteZone(manifest);
+  const { drafts } = useDrafts();
   const memory = memoryOf(api, collection.name);
   const heading = useRef<HTMLHeadingElement>(null);
   useLeadHeading(collection.label, heading);
@@ -193,28 +201,34 @@ export function ListPane({
             (filter === 'scheduled' && hasUpcoming(entry.schedule))),
       )
       .sort(compareBy(descriptorOf(collection, sort)))
-      .map((entry) => ({
-        id: entry.id,
-        title: entry.title,
-        entryId: entry.id,
-        meta: [
-          ...listKeys.map((key) => formatListValue(entry.fields[key])),
-          statusText(
-            entry,
-            scheduleWords(
-              collection.presentation.schedule,
-              rowData(collection.presentation.schedule, entry.schedule),
-              zone,
-            ),
-          ),
+      .map((entry) => {
+        const fields = listKeys.map((key) => formatListValue(entry.fields[key])).filter(Boolean);
+        const state = entryState(
+          collection,
+          {
+            draft: entry.draft === true,
+            times: rowData(collection.presentation.schedule, entry.schedule),
+            newDraft: isNewInDraft(drafts, entry.path),
+          },
+          { zone, cloud: Boolean(cloud) },
+        );
+        const after = [
+          kindText(entry.status),
           entry.updatedAt ? `edited ${formatRelative(entry.updatedAt)}` : '',
-        ]
-          .filter(Boolean)
-          .join(' · '),
-        current: entry.id === currentId,
-        children: [],
-      }));
-  }, [visible, query, filter, sort, collection, currentId, zone]);
+        ].filter(Boolean);
+        return {
+          id: entry.id,
+          title: entry.title,
+          entryId: entry.id,
+          meta: [...fields, stateText(state), ...after].filter(Boolean).join(' · '),
+          fields,
+          state,
+          after,
+          current: entry.id === currentId,
+          children: [],
+        };
+      });
+  }, [visible, query, filter, sort, collection, currentId, zone, drafts, cloud]);
 
   // In order, whole and editable: then rows move. Searching, filtering or another sort
   // would leave neighbours out of sight, and a member who can't see every entry can't
@@ -421,7 +435,11 @@ export function ListPane({
                   </span>
                   {row.meta && (
                     <span className="block truncate text-caption text-content-muted">
-                      {row.meta}
+                      {row.fields.join(' · ')}
+                      {row.fields.length > 0 && row.state ? ' · ' : ''}
+                      <StateWords state={row.state} />
+                      {(row.fields.length > 0 || row.state) && row.after.length > 0 ? ' · ' : ''}
+                      {row.after.join(' · ')}
                     </span>
                   )}
                 </span>

package/src/screens/PageTree.tsx

@@ -17,11 +17,14 @@ import { useCallback, useEffect, useMemo, useState, type KeyboardEvent } from 'r
 import { useStudio } from '../app/context.tsx';
 import { onEntriesChanged } from '../app/entries-changed.ts';
 import { mayCreateIn, treeCovered } from '../cloud/access.ts';
+import { useDrafts } from '../cloud/editor.tsx';
+import { siteZone } from '../schedule/times.ts';
 import { useLoad } from '../app/load.ts';
 import { hrefFor, navigate } from '../app/router.ts';
 import { collectionIcon } from '../app/collection-icon.ts';
 import { usePane } from '../app/pane-context.ts';
 import { Screen } from '../app/Screen.tsx';
+import { StateWords, entryState, isNewInDraft, kindText } from './status.tsx';
 
 /*
  * The outline of a tree collection (spec §6.15.2), in place of the flat
@@ -64,9 +67,19 @@ export function PageTree({
   /** The page open beside the outline, among panes. */
   currentId?: string | null;
 }) {
-  const { api, cloud } = useStudio();
+  const { api, cloud, manifest } = useStudio();
+  const { drafts } = useDrafts();
   const pane = usePane();
   const [load, reload] = useLoad(() => api.pageTree(collection.name), collection.name);
+  // A row knows no schedule times, so a scheduled collection's rows never claim Live.
+  const stateOf = (row: Row) =>
+    row.entryId === undefined
+      ? null
+      : entryState(
+          collection,
+          { draft: row.draft === true, times: null, newDraft: isNewInDraft(drafts, row.file) },
+          { zone: siteZone(manifest).zone, cloud: Boolean(cloud) },
+        );
   // A save beside the outline can change a title or a status.
   useEffect(() => onEntriesChanged(collection.name, reload), [collection.name, reload]);
   const [expanded, setExpanded] = useState<Set<Key>>(() => new Set());
@@ -336,28 +349,36 @@ export function PageTree({
             {...(editable && covered('') ? { dragAndDropHooks } : {})}
             emptyState={rows.length === 0 ? 'No pages yet.' : 'No pages match.'}
             currentKey={currentKey}
-            renderRow={(row) => (
-              <>
-                <span className="min-w-0 flex-1 px-1">
-                  <span className="block truncate font-semibold text-content">{row.title}</span>
-                  <span className="block truncate font-mono text-caption text-content-muted">
-                    {row.url ?? `${row.path}/`}
+            renderRow={(row) => {
+              const state = stateOf(row);
+              const words = statusOf(row);
+              return (
+                <>
+                  <span className="min-w-0 flex-1 px-1">
+                    <span className="block truncate font-semibold text-content">{row.title}</span>
+                    <span className="block truncate font-mono text-caption text-content-muted">
+                      {row.url ?? `${row.path}/`}
+                    </span>
+                  </span>
+                  <span className="shrink-0 text-small text-content-muted">
+                    <StateWords state={state} />
+                    {state && words ? ' · ' : ''}
+                    {words}
                   </span>
-                </span>
-                <span className="shrink-0 text-small text-content-muted">{statusOf(row)}</span>
-                <Menu
-                  label={`More actions for ${row.title}`}
-                  items={menuItems(byKey.get(row.id) ?? row, rows, byPath, {
-                    editable,
-                    maxDepth,
-                    covered,
-                  })}
-                  onAction={(action) => {
-                    onMenu(row, action);
-                  }}
-                />
-              </>
-            )}
+                  <Menu
+                    label={`More actions for ${row.title}`}
+                    items={menuItems(byKey.get(row.id) ?? row, rows, byPath, {
+                      editable,
+                      maxDepth,
+                      covered,
+                    })}
+                    onAction={(action) => {
+                      onMenu(row, action);
+                    }}
+                  />
+                </>
+              );
+            }}
           />
         </div>
       )}
@@ -641,11 +662,10 @@ function menuItems(
   return items;
 }
 
+/** What the row is besides its state: a folder with no page, or what can be done with it. */
 function statusOf(row: Row): string {
   if (row.entryId === undefined) return 'No section page';
-  if (row.status === 'read-only') return 'Read only';
-  if (row.status === 'source-only') return 'Edit as YAML';
-  return row.draft ? 'Draft' : '';
+  return kindText(row.status);
 }
 
 function toRows(nodes: PageTreeNode[]): Row[] {

package/src/screens/status.tsx

@@ -0,0 +1,104 @@
+import {
+  scheduleState,
+  type CollectionManifest,
+  type DataValue,
+  type Draft,
+  type EntryStatus,
+} from '@vespercms/core';
+import { StatusPill, type StatusTone } from '@vespercms/ui';
+
+/*
+ * An entry's state as one coloured word and the words after it (DECISIONS.md,
+ * "Status words have colour"): Draft, Scheduled, Live or Unpublished. The
+ * words are the ones the studio already said; only the first takes a colour,
+ * so what a screen reader hears, and what type-ahead matches, is unchanged.
+ */
+
+export type EntryState = {
+  tone: StatusTone;
+  /** "Draft", "Scheduled", "Live" or "Unpublished". */
+  word: string;
+  /** What follows the word, its joiner included: " · Sat, Oct 31, 8:00 AM". */
+  rest: string;
+};
+
+/**
+ * What an entry is now. `times` is the entry's data with its schedule's
+ * fields, or null where they aren't known (a page tree's rows), which then
+ * never claims Live. Live is said only where an entry could be something
+ * else: a collection with a schedule or a `draft` field, or any in the cloud,
+ * where a new entry starts as a draft. Elsewhere every entry is live, and
+ * saying so on every row would only be noise.
+ */
+export function entryState(
+  collection: CollectionManifest,
+  entry: { draft: boolean; times: DataValue | null; newDraft?: boolean },
+  options: { zone: string; cloud: boolean; now?: Date },
+): EntryState | null {
+  const schedule =
+    entry.times === null
+      ? null
+      : scheduleState(
+          collection.presentation.schedule,
+          entry.times,
+          options.now ?? new Date(),
+          options.zone,
+        );
+  if (entry.draft) {
+    return {
+      tone: 'neutral',
+      word: 'Draft',
+      rest: schedule ? ` · ${schedule.word}${schedule.rest}` : '',
+    };
+  }
+  if (schedule) {
+    return {
+      tone:
+        schedule.phase === 'scheduled'
+          ? 'scheduled'
+          : schedule.phase === 'live'
+            ? 'live'
+            : 'neutral',
+      word: schedule.word,
+      rest: schedule.rest,
+    };
+  }
+  if (entry.newDraft) return { tone: 'neutral', word: 'Draft', rest: '' };
+  const couldBeOther =
+    options.cloud ||
+    collection.presentation.schedule !== undefined ||
+    (collection.fields ?? []).some((field) => field.path.length === 1 && field.path[0] === 'draft');
+  if (entry.times === null && collection.presentation.schedule !== undefined) return null;
+  return couldBeOther ? { tone: 'live', word: 'Live', rest: '' } : null;
+}
+
+/** Whether a file is in a draft that would create it: in the cloud, an entry never published. */
+export function isNewInDraft(drafts: readonly Draft[], path: string | undefined): boolean {
+  return (
+    path !== undefined &&
+    drafts.some((draft) =>
+      draft.files.some((file) => file.path === path && file.op === 'put' && file.base === null),
+    )
+  );
+}
+
+/** "Read only" or "Edit as YAML": what can be done with the entry, after its state. */
+export function kindText(status: EntryStatus | undefined): string {
+  return status === 'read-only' ? 'Read only' : status === 'source-only' ? 'Edit as YAML' : '';
+}
+
+/** The state as plain words, for names and type-ahead. */
+export function stateText(state: EntryState | null): string {
+  return state ? `${state.word}${state.rest}` : '';
+}
+
+/** The state's word on its colour, then the words after it as text. */
+export function StateWords({ state }: { state: EntryState | null }) {
+  if (!state) return null;
+  return (
+    <>
+      <StatusPill tone={state.tone}>{state.word}</StatusPill>
+      {state.rest}
+    </>
+  );
+}

package/src/studio.css

@@ -67,6 +67,11 @@
     outline: 3px solid var(--color-focus);
     outline-offset: 3px;
   }
+
+  /* An empty date field shows no date until it's used: Safari's is today's (widgets/blank-date.ts). */
+  input[data-blank]::-webkit-datetime-edit {
+    opacity: 0;
+  }
 }
 
 @layer components {