cursedbelt 5.46.2 → 5.48.0

package/src/react/components/calendar/EventChip.spec.tsx

@@ -3,6 +3,7 @@ import { cleanup, render, screen } from '@testing-library/react';
 import type { Occurrence } from 'cwip/calendar';
 import { dayKeyOf } from 'cwip/calendar';
 import { EventChip } from './EventChip.js';
+import { calendarColorClasses } from './colorUtils.js';
 import type { CalendarEventBase } from './types.js';
 
 afterEach(cleanup);
@@ -69,14 +70,17 @@ describe('EventChip', () => {
     expect(container.querySelector('button')?.className).toContain('line-through');
   });
 
-  test('hex color resolves to inline backgroundColor style', () => {
-    // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event
-    // color prop, not themeable chrome — calendar events carry arbitrary user colors.
-    const hex: CalendarEventBase = { ...base, color: '#4f86f7' };
-    const { container } = render(<EventChip occurrence={makeOccurrence(hex)} onClick={() => {}} />);
-    const style = (container.querySelector('button') as HTMLButtonElement).style;
-    // happy-dom preserves hex; browsers normalize to rgb — accept either
+  test('the time is in the name, so a phone that shows only the title still says when', () => {
+    render(<EventChip occurrence={makeOccurrence()} onClick={() => {}} />);
+    expect(screen.getByRole('button').getAttribute('aria-label')).toMatch(/^\d{1,2}:\d{2}\s?(AM|PM) Stand-up$/);
+  });
+
+  test('a hex colour is a TINT with same-hue ink, never a solid slab', () => {
+    // happy-dom drops `color-mix()` from a style, so the resolver is asserted; the browser spec
+    // (e2e/calendar-time.spec.ts) reads the painted colour.
+    // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event color, not themeable chrome
+    const { chipStyle } = calendarColorClasses('#4f86f7');
     // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event color, not themeable chrome
-    expect(style.backgroundColor).toMatch(/^(#4f86f7|rgb\(79,\s*134,\s*247\))$/i);
+    expect(chipStyle).toEqual({ backgroundColor: 'color-mix(in srgb, #4f86f7 18%, transparent)', color: 'color-mix(in srgb, #4f86f7 55%, var(--foreground))' });
   });
 });

package/src/react/components/calendar/EventChip.tsx

@@ -15,7 +15,11 @@ export interface EventChipProps {
 /**
  * A compact event pill for month and week calendar grid cells. Shows the time
  * (if not all-day) and title in the event's color; struck through when done.
- * Mobile: time stacks above title; desktop: side by side.
+ *
+ * Below `sm` the chip is the TITLE alone, one line: a month cell on a 390px phone is ~50px wide,
+ * and time stacked over title left "9:00 A" over "Sta…" — neither readable (forge task 2591).
+ * Apple Calendar's and Google Calendar's phone month views both drop the time for the title; the
+ * time stays in the accessible name and the tooltip, and the week and day views show it.
  */
 export function EventChip({ occurrence, onClick, color }: EventChipProps) {
   const { event } = occurrence;
@@ -24,7 +28,10 @@ export function EventChip({ occurrence, onClick, color }: EventChipProps) {
   const done = occurrence.done;
   const pending = event.source === 'timeoff' && event.pending;
 
-  const label = pending ? `${event.title} — not yet on your work calendar` : event.title;
+  const time = event.allDay ? null : fmtTime(occurrence.startAt);
+  // The name carries the time as well: on a phone the chip shows the title alone.
+  const named = time ? `${time} ${event.title}` : event.title;
+  const label = pending ? `${named} — not yet on your work calendar` : named;
 
   return (
     <Tooltip content={label} className='block w-full' multiline={pending}>
@@ -42,16 +49,14 @@ export function EventChip({ occurrence, onClick, color }: EventChipProps) {
         className={cn(
           'flex w-full min-w-0 truncate rounded px-1 py-0.5 text-left text-caption leading-tight',
           'min-h-11 sm:min-h-0',
-          'flex-col gap-0 sm:flex-row sm:items-center sm:gap-1 sm:px-1.5 sm:text-xs',
+          'items-center gap-1 sm:px-1.5 sm:text-xs',
           chip,
           done && 'line-through opacity-60',
           pending && 'outline-dashed outline-1 outline-tone-amber-ink',
         )}
         style={chipStyle}
       >
-        {!event.allDay && (
-          <span className='shrink-0 font-semibold tabular-nums'>{fmtTime(occurrence.startAt)}</span>
-        )}
+        {time && <span className='hidden shrink-0 font-semibold tabular-nums sm:inline'>{time}</span>}
         {pending && <span className='shrink-0'>⚠</span>}
         <span className='min-w-0 truncate'>{event.title}</span>
       </button>

package/src/react/components/calendar/MonthGrid.tsx

@@ -129,7 +129,7 @@ export function MonthGrid({
                   className={cn(
                     'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold',
                     ctx.isToday
-                      ? 'bg-accent-solid text-white'
+                      ? 'bg-accent-solid text-accent-solid-foreground'
                       : ctx.inMonth
                         ? 'text-foreground'
                         : // 🔴 Muted AND faded. `text-muted-foreground` alone was the same

package/src/react/components/calendar/WeekView.tsx

@@ -65,7 +65,9 @@ export function WeekView({
   return (
     <Surface level="flat" pad="none" radius="xl" className={cn('overflow-hidden bg-card', className)}>
       {/* Weekday header with date numbers */}
-      <div className='grid grid-cols-[repeat(7,minmax(0,1fr))] border-b border-border bg-muted/40'>
+      {/* The month grid's rules (MonthGrid.tsx): a softened header line and /40 inner rules, so the
+          two views of one calendar draw the same grid (forge task 2591). */}
+      <div className='grid grid-cols-[repeat(7,minmax(0,1fr))] border-b border-border/60 bg-muted/40'>
         {days.map((dayKey, i) => (
           <div key={dayKey} className='flex min-w-0 flex-col items-center px-1 py-2'>
             <span className='text-caption font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs'>
@@ -74,7 +76,7 @@ export function WeekView({
             <span
               className={cn(
                 'mt-0.5 flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold',
-                dayKey === today ? 'bg-accent-solid text-white' : 'text-foreground',
+                dayKey === today ? 'bg-accent-solid text-accent-solid-foreground' : 'text-foreground',
               )}
             >
               {parseDayKey(dayKey).day}
@@ -97,7 +99,7 @@ export function WeekView({
               onClick={() => onSelectDay(day)}
               className={cn(
                 'group flex min-h-40 min-w-0 cursor-pointer flex-col gap-1 overflow-hidden',
-                'border-r border-border p-1 last:border-r-0',
+                'border-r border-border/40 p-1 last:border-r-0',
                 'hover:bg-muted/30',
                 dayKey === today && 'bg-accent/5',
               )}

package/src/react/components/calendar/colorUtils.ts

@@ -53,15 +53,17 @@ const FALLBACK = COLOR_MAP.slate!;
 export const isHexColor = (color?: string): color is string =>
   !!color && /^#[0-9a-f]{6}$/i.test(color);
 
-/** WCAG relative luminance — returns near-black or near-white for readable contrast. */
-const readableTextOn = (hex: string): string => {
-  const n = Number.parseInt(hex.slice(1), 16);
-  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => {
-    const s = c / 255;
-    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-  }) as [number, number, number];
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.5 ? '#111827' : '#ffffff';
-};
+/**
+ * A custom colour drawn the way the named ones are: a soft tint of the hue with ink of the same hue
+ * pulled toward the theme's foreground — so it reads in light AND dark, and sits beside the
+ * `bg-sky-100 text-sky-800` chips as a peer. Until forge task 2591 a hex was a SOLID fill with
+ * white or black text, the loudest mark on the grid whatever it meant (Google Calendar and Linear
+ * both tint a custom colour rather than fill with it).
+ */
+const hexChip = (hex: string) => ({
+  backgroundColor: `color-mix(in srgb, ${hex} 18%, transparent)`,
+  color: `color-mix(in srgb, ${hex} 55%, var(--foreground))`,
+});
 
 // ─── Public API ───────────────────────────────────────────────────────────────
 
@@ -72,9 +74,9 @@ const readableTextOn = (hex: string): string => {
 export const calendarColorClasses = (color?: string): ColorClasses => {
   if (isHexColor(color)) {
     return {
-      chip: 'font-medium',
+      chip: '',
       dot: '',
-      chipStyle: { backgroundColor: color, color: readableTextOn(color) },
+      chipStyle: hexChip(color),
       dotStyle: { backgroundColor: color },
     };
   }

package/src/react/components/fieldErrorText.tsx

@@ -0,0 +1,17 @@
+import { AlertCircle } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+/**
+ * The inline error row a {@link Field} draws under its control — icon, colour and size in one
+ * place. Internal: a control that cannot sit in a `Field` (SignupForm's terms checkbox, whose
+ * label is the checkbox's own) draws this, so its error reads like every other one (forge task
+ * 2466 found that checkbox's error with no icon, as a bare red line).
+ */
+export function FieldErrorText({ id, children }: { id?: string; children: ReactNode }) {
+  return (
+    <p id={id} role='alert' className='m-0 flex items-center gap-1.5 text-sm text-field-error' data-cb-field-error=''>
+      <AlertCircle className='size-4 shrink-0' aria-hidden />
+      {children}
+    </p>
+  );
+}

package/src/react/deep-link/resume.spec.tsx

@@ -237,4 +237,20 @@ describe('createResumeClient', () => {
     });
     expect(await dead.read()).toBe(null);
   });
+
+  test('write and clear read their answer to the end, so the request finishes', async () => {
+    // Chromium reports a fetch whose body nobody reads as still loading: Playwright's
+    // `networkidle` then never comes, and music's design spec waited out its 10s cap at every
+    // place it audited — 200s of a 300s gate (forge task 2574).
+    const answers: Response[] = [];
+    const fetchImpl = (async () => {
+      const answer = new Response(JSON.stringify({ ok: true }));
+      answers.push(answer);
+      return answer;
+    }) as unknown as typeof fetch;
+    const client = createResumeClient({ key: 'library', fetchImpl });
+    await client.write('#/queue');
+    await client.clear();
+    expect(answers.map((a) => a.bodyUsed)).toEqual([true, true]);
+  });
 });

package/src/react/deep-link/resume.ts

@@ -60,6 +60,13 @@ export function createResumeClient(options: ResumeClientOptions = {}): ResumeCli
     const doFetch = options.fetchImpl ?? fetch;
     return doFetch(`${basePath}?key=${encodeURIComponent(key)}`, { credentials: 'same-origin', ...init });
   };
+  /**
+   * A write's answer is read to the end even though nothing uses it: Chromium reports an unread
+   * body as a request still loading, so a page that wrote its place never reaches network-idle.
+   */
+  const send = async (init: RequestInit): Promise<void> => {
+    await (await call(init)).text();
+  };
   return {
     async read() {
       try {
@@ -73,7 +80,7 @@ export function createResumeClient(options: ResumeClientOptions = {}): ResumeCli
     },
     async write(href) {
       try {
-        await call({
+        await send({
           method: 'PUT',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ location: href }),
@@ -84,7 +91,7 @@ export function createResumeClient(options: ResumeClientOptions = {}): ResumeCli
     },
     async clear() {
       try {
-        await call({ method: 'DELETE' });
+        await send({ method: 'DELETE' });
       } catch {
         /* as above */
       }

package/src/react/file-tree/FileTree.tsx

@@ -608,6 +608,9 @@ export interface FileTreeProps {
    * The row's menu on **right-click** (and ⌃-click, and Shift+F10 when {@link onRowMenu} is not
    * wired) — drawn by the tree at the pointer, VS Code's and Finder's gesture.
    *
+   * With {@link onRowMenu} and no `rowMenu`, a right-click calls `onRowMenu` at the pointer
+   * instead and the app draws its own menu — spread `folderViewMenuItems` into it.
+   *
    * Owner, 2026-09-30: *"add an option to the right click menu to hide a folder"*. Hand it the
    * SAME list your ⋯ menu draws (the shape is `DropdownMenu`'s), so the two can never offer
    * different things; {@link folderView}'s "Hide folder" and "Tags…" are appended to it on a
@@ -2699,7 +2702,17 @@ export function FileTree({
         }}
         onFocus={() => setFocused({ id: node.id, pinned: pinnedCopy })}
         onContextMenu={(event) => {
-          if (inTools(event) || !hasRowMenu(node)) return;
+          if (inTools(event)) return;
+          // An app that draws its own row menu (`onRowMenu`, no `rowMenu`) gets the right-click
+          // too, at the pointer — VS Code's gesture, and the one menu its ⋯ already opens.
+          if (!rowMenu && onRowMenu) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocused({ id: node.id, pinned: pinnedCopy });
+            onRowMenu(node, { x: event.clientX, y: event.clientY });
+            return;
+          }
+          if (!hasRowMenu(node)) return;
           event.preventDefault();
           event.stopPropagation();
           openRowMenu(node, pinnedCopy, { x: event.clientX, y: event.clientY });

package/src/react/file-tree/FolderViewMenus.tsx

@@ -72,7 +72,9 @@ export function folderTargets(
 }
 
 /**
- * "Hide folder" and "Tags…" for a folder — the row's half of the feature, as menu items.
+ * "Hide on this device", "Hide everywhere" and "Tags…" for a folder — the row's half of the
+ * feature, as menu items. With no device half kept (`useFolderView({ device: 'memory' })`) the
+ * two hides are one "Hide folder", which means everywhere.
  *
  * Exported so an app's own ⋯ menu offers exactly what the right-click does: spread it into
  * the list you hand `DropdownMenu`. `ids` is the folders it acts on (see {@link folderTargets});
@@ -82,24 +84,47 @@ export function folderViewMenuItems(
   view: FolderView,
   node: FileTreeNode,
   ids: readonly string[] = [node.id],
-  hiddenState: 'self' | 'inherited' | null = view.marks.hidden.includes(node.id) ? 'self' : null,
+  hiddenState: 'self' | 'inherited' | null = view.hiddenIn(node.id) ? 'self' : null,
 ): FileTreeMenuItem[] {
   if (node.kind !== 'folder') return [];
   const many = ids.length > 1;
   const what = many ? `${ids.length} folders` : `“${node.name}”`;
   const items: FileTreeMenuItem[] = [];
+  const everywhere = () => {
+    view.hide(ids);
+    said(`Hid ${what}, on every device`, () => view.unhide(ids, { scope: 'everywhere' }), many ? '“Show hidden folders” (⇧⌘.) shows them again' : '“Show hidden folders” (⇧⌘.) shows it again');
+  };
   if (hiddenState === 'self') {
-    items.push({
-      key: 'fv-unhide',
-      label: many ? `Unhide ${ids.length} folders` : 'Unhide folder',
-      title: `Show ${what} in the tree again, on every device`,
-      onClick: () => {
-        view.unhide(ids);
-        said(`${many ? `${ids.length} folders are` : `${what} is`} back in the tree, on every device`, () =>
-          view.hide(ids),
-        );
-      },
-    });
+    // Which list holds it decides the words: "Unhide" alone would not say where it comes back.
+    const scope = ids.length === 1 ? view.hiddenIn(node.id) : null;
+    const inDevice = scope === 'device' || scope === 'both' || (scope === null && ids.some((id) => view.local.hidden.includes(id)));
+    const inEverywhere = scope === 'everywhere' || scope === 'both' || (scope === null && ids.some((id) => view.marks.hidden.includes(id)));
+    if (inDevice)
+      items.push({
+        key: 'fv-unhide-device',
+        label: many ? `Unhide ${ids.length} folders on this device` : 'Unhide on this device',
+        title: inEverywhere
+          ? `Take ${what} off this device's list — it stays hidden everywhere until that is undone too`
+          : `Show ${what} in the tree on this device again`,
+        onClick: () => {
+          view.unhide(ids, { scope: 'device' });
+          said(`${many ? `${ids.length} folders are` : `${what} is`} back on this device`, () =>
+            view.hide(ids, { scope: 'device' }),
+          );
+        },
+      });
+    if (inEverywhere)
+      items.push({
+        key: 'fv-unhide',
+        label: many ? `Unhide ${ids.length} folders everywhere` : 'Unhide everywhere',
+        title: `Show ${what} in the tree again, on every device`,
+        onClick: () => {
+          view.unhide(ids, { scope: 'everywhere' });
+          said(`${many ? `${ids.length} folders are` : `${what} is`} back in the tree, on every device`, () =>
+            view.hide(ids),
+          );
+        },
+      });
   } else if (hiddenState === 'inherited') {
     items.push({
       key: 'fv-unhide',
@@ -107,15 +132,30 @@ export function folderViewMenuItems(
       disabled: true,
       title: 'It is inside a hidden folder — unhide that folder to bring this one back',
     });
+  } else if (view.deviceHiding) {
+    items.push(
+      {
+        key: 'fv-hide-device',
+        label: many ? `Hide ${ids.length} folders on this device` : 'Hide on this device',
+        title: `Leave ${what} out of the tree in this browser only. “Show hidden folders” (⇧⌘.) brings it back.`,
+        onClick: () => {
+          view.hide(ids, { scope: 'device' });
+          said(`Hid ${what}, on this device`, () => view.unhide(ids, { scope: 'device' }), '“Show hidden folders” (⇧⌘.) shows it again');
+        },
+      },
+      {
+        key: 'fv-hide',
+        label: many ? `Hide ${ids.length} folders everywhere` : 'Hide everywhere',
+        title: `Leave ${what} out of the tree on every device. “Show hidden folders” (⇧⌘.) brings it back.`,
+        onClick: everywhere,
+      },
+    );
   } else {
     items.push({
       key: 'fv-hide',
       label: many ? `Hide ${ids.length} folders` : 'Hide folder',
       title: `Leave ${what} out of the tree on every device. “Show hidden folders” (⇧⌘.) brings it back.`,
-      onClick: () => {
-        view.hide(ids);
-        said(`Hid ${what}, on every device`, () => view.unhide(ids), many ? '“Show hidden folders” (⇧⌘.) shows them again' : '“Show hidden folders” (⇧⌘.) shows it again');
-      },
+      onClick: everywhere,
     });
   }
   const current = view.marks.tags[node.id] ?? [];

package/src/react/file-tree/folderView.spec.ts

@@ -6,9 +6,11 @@ import {
   EMPTY_FOLDER_VIEW,
   type FolderMarks,
   type FolderViewLocal,
+  hiddenScope,
   normalizeTag,
   parseFolderMarks,
   parseFolderViewLocal,
+  remapFolderMarks,
   serializeFolderMarks,
   setHidden,
   setTagFilter,
@@ -94,6 +96,41 @@ describe('hiding a folder', () => {
   });
 });
 
+describe('hidden on THIS device only', () => {
+  test('🔴 a folder in the device list is gone from the tree, subtree and all, like an everywhere one', () => {
+    const out = applyFolderView(TREE, MARKS, view({ hidden: ['work'] }));
+    expect(ids(out.nodes)).not.toContain('work');
+    expect(ids(out.nodes)).not.toContain('dynatrace');
+    expect(out.hiddenCount).toBe(1);
+  });
+
+  test('"show hidden" draws a device-hidden folder back, marked `self`', () => {
+    const out = applyFolderView(TREE, MARKS, view({ hidden: ['work'], showHidden: true }));
+    expect(out.hiddenMarks.get('work')).toBe('self');
+    expect(out.hiddenMarks.get('dynatrace')).toBe('inherited');
+  });
+
+  test('one folder in both lists counts once', () => {
+    const out = applyFolderView(TREE, { ...MARKS, hidden: ['work'] }, view({ hidden: ['work'] }));
+    expect(out.hiddenCount).toBe(1);
+  });
+
+  test('hiddenScope names which list holds a folder', () => {
+    const marks = { ...MARKS, hidden: ['work', 'home'] };
+    const local = view({ hidden: ['home', 'code'] });
+    expect(hiddenScope(marks, local, 'work')).toBe('everywhere');
+    expect(hiddenScope(marks, local, 'code')).toBe('device');
+    expect(hiddenScope(marks, local, 'home')).toBe('both');
+    expect(hiddenScope(marks, local, 'scratch')).toBeNull();
+  });
+
+  test('setHidden works on the device list too', () => {
+    const local = setHidden(EMPTY_FOLDER_VIEW, ['work'], true);
+    expect(local.hidden).toEqual(['work']);
+    expect(local.showHidden).toBe(false);
+  });
+});
+
 describe('filtering by tag (this device)', () => {
   test('"only home + code" keeps those folders WITH their subtrees, and the path to a nested one', () => {
     const out = applyFolderView(TREE, MARKS, view({ only: ['home', 'code'] }));
@@ -159,6 +196,30 @@ describe('tags', () => {
   });
 });
 
+describe('remapFolderMarks — a path-keyed tree renamed a folder', () => {
+  const marks: FolderMarks = {
+    hidden: ['a/b', 'c'],
+    tags: { 'a/b': ['work'], 'a/b/d': ['home'], c: ['code'] },
+  };
+  const rename = (id: string) => (id === 'a/b' || id.startsWith('a/b/') ? `x${id.slice(3)}` : id);
+
+  test('🔴 hidden and tags follow the folder and everything under it', () => {
+    const out = remapFolderMarks(marks, rename);
+    expect(out.hidden).toEqual(['x', 'c']);
+    expect(out.tags).toEqual({ x: ['work'], 'x/d': ['home'], c: ['code'] });
+  });
+
+  test('null forgets a mark — a deleted folder', () => {
+    const out = remapFolderMarks(marks, (id) => (id === 'c' ? null : id));
+    expect(out.hidden).toEqual(['a/b']);
+    expect(out.tags.c).toBeUndefined();
+  });
+
+  test('nothing moved → the same value back', () => {
+    expect(remapFolderMarks(marks, (id) => id)).toBe(marks);
+  });
+});
+
 describe('storage', () => {
   test('marks round-trip, and empty marks store as nothing so the key can be forgotten', () => {
     const marks: FolderMarks = { hidden: ['a'], tags: { b: ['home'] } };
@@ -169,6 +230,7 @@ describe('storage', () => {
   test('🔴 a corrupt value reads as NOTHING rather than throwing — it must never cost the tree', () => {
     expect(parseFolderMarks('{not json')).toEqual(EMPTY_FOLDER_MARKS);
     expect(parseFolderMarks('{"hidden":"x","tags":[1]}')).toEqual({ hidden: [], tags: {} });
-    expect(parseFolderViewLocal('[]')).toEqual({ showHidden: false, only: [], hide: [] });
+    expect(parseFolderViewLocal('[]')).toEqual({ showHidden: false, only: [], hide: [], hidden: [] });
+    expect(parseFolderViewLocal('{"hidden":["a",1,"a",""]}').hidden).toEqual(['a']);
   });
 });

package/src/react/file-tree/folderView.ts

@@ -13,8 +13,11 @@
  *     folder, so it follows the person to every device (the app syncs it — see
  *     `useFolderView`, which announces it on the preference bus like every other synced key).
  *   · {@link FolderViewLocal} — HOW this device is looking: whether hidden folders are drawn,
- *     and which tags it is narrowed to. *"viewing the 'home' tag at home doesn't change my
- *     work computer"*, so this is never announced and never leaves the browser.
+ *     which tags it is narrowed to, and the folders hidden on THIS device only. *"viewing the
+ *     'home' tag at home doesn't change my work computer"*, so this is never announced and
+ *     never leaves the browser. The device-only list is desk's owner request, 2026-09-30:
+ *     *"a way to hide on the current device or to hide everywhere … and unhide them on just
+ *     the device or unhide them everywhere"* — a folder hidden by either list is hidden.
  *
  * Hiding a folder in general and filtering by tag are therefore different verbs on purpose:
  * one is a decision about the folder, the other is a lens on the tree.
@@ -50,6 +53,8 @@ export interface FolderViewLocal {
   only: readonly string[];
   /** Leave out folders carrying any of these. Wins over {@link only}. */
   hide: readonly string[];
+  /** Folders hidden on this device only — {@link FolderMarks.hidden}'s per-device twin. */
+  hidden: readonly string[];
 }
 
 export const EMPTY_FOLDER_MARKS: FolderMarks = Object.freeze({
@@ -61,6 +66,7 @@ export const EMPTY_FOLDER_VIEW: FolderViewLocal = Object.freeze({
   showHidden: false,
   only: Object.freeze([]) as readonly string[],
   hide: Object.freeze([]) as readonly string[],
+  hidden: Object.freeze([]) as readonly string[],
 });
 
 /** Longest tag kept. A tag is a word or two; anything longer is a sentence in the wrong field. */
@@ -120,25 +126,69 @@ export function serializeFolderMarks(marks: FolderMarks): string | null {
 export function parseFolderViewLocal(raw: string | null | undefined): FolderViewLocal {
   if (!raw) return EMPTY_FOLDER_VIEW;
   try {
-    const value = JSON.parse(raw) as { showHidden?: unknown; only?: unknown; hide?: unknown };
+    const value = JSON.parse(raw) as { showHidden?: unknown; only?: unknown; hide?: unknown; hidden?: unknown };
     return {
       showHidden: value.showHidden === true,
       only: Array.isArray(value.only) ? uniqueTags(value.only as string[]) : [],
       hide: Array.isArray(value.hide) ? uniqueTags(value.hide as string[]) : [],
+      hidden: Array.isArray(value.hidden)
+        ? [...new Set(value.hidden.filter((id): id is string => typeof id === 'string' && id !== ''))]
+        : [],
     };
   } catch {
     return EMPTY_FOLDER_VIEW;
   }
 }
 
-/** Hide or unhide these ids — a new value; the input is never touched. */
-export function setHidden(marks: FolderMarks, ids: readonly string[], hidden: boolean): FolderMarks {
+/**
+ * Hide or unhide these ids in either list — {@link FolderMarks} (everywhere) or
+ * {@link FolderViewLocal} (this device). A new value; the input is never touched, and an
+ * unchanged list hands the input back so a caller can tell nothing happened.
+ */
+export function setHidden<T extends { hidden: readonly string[] }>(
+  holder: T,
+  ids: readonly string[],
+  hidden: boolean,
+): T {
   const next = hidden
-    ? [...marks.hidden, ...ids.filter((id) => !marks.hidden.includes(id))]
-    : marks.hidden.filter((id) => !ids.includes(id));
-  return next.length === marks.hidden.length && next.every((id, i) => id === marks.hidden[i])
-    ? marks
-    : { ...marks, hidden: next };
+    ? [...holder.hidden, ...ids.filter((id) => !holder.hidden.includes(id))]
+    : holder.hidden.filter((id) => !ids.includes(id));
+  return next.length === holder.hidden.length && next.every((id, i) => id === holder.hidden[i])
+    ? holder
+    : { ...holder, hidden: next };
+}
+
+/**
+ * Re-key the marks after folders were renamed, moved or deleted — for a tree whose folder ids
+ * are PATHS (music, vault), where a rename hands the folder and everything under it a new id.
+ * `move(id)` answers each marked id with its new id, the same id to keep it, or `null` to forget
+ * it. Hidden and tags both follow; the input comes back untouched when nothing moved.
+ */
+export function remapFolderMarks(marks: FolderMarks, move: (id: string) => string | null): FolderMarks {
+  let changed = false;
+  const hidden: string[] = [];
+  for (const id of marks.hidden) {
+    const to = move(id);
+    if (to !== id) changed = true;
+    if (to !== null && !hidden.includes(to)) hidden.push(to);
+  }
+  const tags: Record<string, readonly string[]> = {};
+  for (const [id, list] of Object.entries(marks.tags)) {
+    const to = move(id);
+    if (to !== id) changed = true;
+    if (to === null) continue;
+    tags[to] = tags[to] ? uniqueTags([...tags[to], ...list]) : list;
+  }
+  return changed ? { hidden, tags } : marks;
+}
+
+/** Where a folder is hidden, if it is: which of the two lists name it. */
+export type HiddenScope = 'everywhere' | 'device' | 'both';
+
+export function hiddenScope(marks: FolderMarks, local: FolderViewLocal, id: string): HiddenScope | null {
+  const everywhere = marks.hidden.includes(id);
+  const device = local.hidden.includes(id);
+  return everywhere && device ? 'both' : everywhere ? 'everywhere' : device ? 'device' : null;
 }
 
 /** Replace one folder's tags. An empty list forgets the folder entirely. */
@@ -242,9 +292,10 @@ export function applyFolderView(
 ): FolderViewResult {
   const hiddenMarks = new Map<string, 'self' | 'inherited'>();
   const filtering = tagFilterActive(local);
-  if (marks.hidden.length === 0 && !filtering) return { nodes, hiddenMarks, hiddenCount: 0 };
+  if (marks.hidden.length === 0 && local.hidden.length === 0 && !filtering)
+    return { nodes, hiddenMarks, hiddenCount: 0 };
 
-  const hiddenSet = new Set(marks.hidden);
+  const hiddenSet = new Set([...marks.hidden, ...local.hidden]);
   const only = new Set(local.only);
   const hide = new Set(local.hide);
   let hiddenCount = 0;