@freighttech/ui 0.13.18

package/src/backend/dynamic-table/components/MentionPopup.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback, forwardRef, useImperativeHandle } from 'react';
+import ReactDOM from 'react-dom';
+import { apiFetch } from '../../utils/api';
+
+interface MentionUser {
+  id: string;
+  name: string;
+  email: string;
+}
+
+interface MentionPopupProps {
+  query: string;
+  anchorEl: HTMLElement;
+  onSelect: (user: MentionUser) => void;
+  onClose: () => void;
+  visible: boolean;
+}
+
+export interface MentionPopupHandle {
+  getElement: () => HTMLDivElement | null;
+}
+
+/**
+ * Avatar fills, picked deterministically from a name hash.
+ *
+ * A third palette again — identity colours, like the saved-view swatches and
+ * unlike the annotation washes: full saturation, theme-independent, and chosen
+ * to be told apart from one another rather than to sit behind text. Declared in
+ * m3.css with the others so there is one place a colour lives; referenced by
+ * `var()` so nothing here can drift from it.
+ */
+const AVATAR_COLORS = [
+  'var(--m3-avatar-1)', 'var(--m3-avatar-2)', 'var(--m3-avatar-3)',
+  'var(--m3-avatar-4)', 'var(--m3-avatar-5)', 'var(--m3-avatar-6)',
+  'var(--m3-avatar-7)', 'var(--m3-avatar-8)', 'var(--m3-avatar-9)',
+  'var(--m3-avatar-10)',
+];
+
+/**
+ * Diacritic-folded lower-case form, for the local fallback match.
+ *
+ * `NFD` splits "ś" into "s" + U+0301, which the combining-mark range then
+ * drops. "ł" survives that (it is a single codepoint with a stroke, not a
+ * base+mark pair), so it is folded explicitly — which matters here because the
+ * FMS user list is Polish.
+ */
+function foldForMatch(s: string): string {
+  return s
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/ł/g, 'l')
+    .replace(/Ł/g, 'L')
+    .toLowerCase();
+}
+
+function getAvatarColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+const MentionPopup = forwardRef<MentionPopupHandle, MentionPopupProps>(({ query, anchorEl, onSelect, onClose, visible }, ref) => {
+  const [users, setUsers] = useState<MentionUser[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    getElement: () => popupRef.current,
+  }));
+
+  const fetchUsers = useCallback(async (searchQuery: string) => {
+    setLoading(true);
+    const query = searchQuery.trim();
+    try {
+      const toUsers = (data: any): MentionUser[] =>
+        (data?.items || []).map((item: any) => ({
+          id: item.id,
+          name: item.name || '',
+          email: item.email || '',
+        }));
+
+      // `name=`, NOT `search=` (ledger 8.7). Both params exist on
+      // /api/auth/users and they do completely different things:
+      //   search= → search_tokens (encrypted email), organization name, role name
+      //   name=   → ILIKE on the user's display name + its name search-tokens
+      // Typing "Daria" for the user "Daria Nowak" therefore returned "No users
+      // found" — the human's own name was the one field `search=` never looked
+      // at. Verified against the live API: search=Daria → 0, name=Daria → 1.
+      // The route is upstream (@open-mercato/core, read-only here), and the two
+      // params are ANDed when both are sent, so this is a choice, not a merge.
+      const params = new URLSearchParams({ pageSize: '10' });
+      if (query) params.set('name', query);
+      const response = await apiFetch(`/api/auth/users?${params}`);
+      if (!response.ok) {
+        setUsers([]);
+        return;
+      }
+      let results = toUsers(await response.json());
+
+      // FALLBACK — one extra request, only when the server found nothing.
+      // `ILIKE` is case-insensitive but NOT diacritic-insensitive, so "Lukasz"
+      // misses "Łukasz" and "wisniewski" misses "Wiśniewski"; the same query
+      // also cannot match an email. Rather than leave a dead end, pull one page
+      // of users and match locally on a diacritic-folded name OR email. Bounded
+      // (≤50 rows, and only on a miss), so the common path is still one query.
+      if (query && results.length === 0) {
+        const all = await apiFetch('/api/auth/users?pageSize=50');
+        if (all.ok) {
+          const needle = foldForMatch(query);
+          results = toUsers(await all.json()).filter(
+            (u) => foldForMatch(u.name).includes(needle) || foldForMatch(u.email).includes(needle),
+          ).slice(0, 10);
+        }
+      }
+
+      setUsers(results);
+      setHighlightedIndex(0);
+    } catch {
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => fetchUsers(query), 250);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, visible, fetchUsers]);
+
+  useEffect(() => {
+    if (!visible) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setHighlightedIndex((prev) => Math.min(prev + 1, users.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === 'Enter' && users.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        onSelect(users[highlightedIndex]);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [visible, users, highlightedIndex, onSelect, onClose]);
+
+  if (!visible) return null;
+
+  const rect = anchorEl.getBoundingClientRect();
+
+  const popup = (
+    <div
+      ref={popupRef}
+      className="hot-mention-popup"
+      style={{
+        position: 'fixed',
+        bottom: window.innerHeight - rect.top + 4,
+        left: rect.left,
+        pointerEvents: 'auto',
+      }}
+    >
+      {loading && users.length === 0 ? (
+        <div className="hot-mention-popup-item" style={{ justifyContent: 'center', color: 'var(--m3-on-surface-variant)' }}>
+          Searching...
+        </div>
+      ) : users.length === 0 ? (
+        <div className="hot-mention-popup-item" style={{ justifyContent: 'center', color: 'var(--m3-on-surface-variant)' }}>
+          No users found
+        </div>
+      ) : (
+        users.map((user, index) => (
+          <div
+            key={user.id}
+            className={`hot-mention-popup-item ${index === highlightedIndex ? 'highlighted' : ''}`}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onSelect(user);
+            }}
+            onMouseEnter={() => setHighlightedIndex(index)}
+          >
+            <div
+              className="hot-mention-popup-avatar"
+              style={{ background: getAvatarColor(user.name || user.email) }}
+            >
+              {(user.name || user.email || '?')[0].toUpperCase()}
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+              <span style={{ fontWeight: 500, fontSize: 'var(--text-body-regular-sm)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {user.name || user.email}
+              </span>
+              {user.name && user.email && (
+                <span style={{ fontSize: 'var(--text-body-regular-2xs)', color: 'var(--m3-on-surface-variant)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {user.email}
+                </span>
+              )}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+
+  return ReactDOM.createPortal(popup, document.body);
+});
+
+MentionPopup.displayName = 'MentionPopup';
+
+export default MentionPopup;

package/src/backend/dynamic-table/components/PerspectiveDeleteDialog.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useEffect } from 'react';
+import { useT } from '@open-mercato/shared/lib/i18n/context';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../primitives/dialog';
+import { Button } from '../../../primitives-v2';
+
+export interface PerspectiveDeleteDialogProps {
+  /** Name of the view about to be deleted; `null` closes the dialog. */
+  name: string | null;
+  /**
+   * `'view'` deletes a named saved view. `'baseReset'` drops this user's own
+   * personalization of the "Default view" tab and falls back to the coded
+   * defaults — a different thing, so it says a different thing.
+   */
+  variant?: 'view' | 'baseReset';
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * Confirmation for deleting a saved view (workshop A6).
+ *
+ * The complaint was that the view vanished on one stray click of a bare `×`
+ * next to the label. The remedy is two-part: the action moved behind the tab's
+ * `⋯` menu, and it now names the view it is about to remove — an accidental
+ * open of this dialog costs an `Escape`, not a rebuilt 60-column layout.
+ *
+ * House keyboard contract: `Cmd/Ctrl+Enter` confirms, `Escape` cancels.
+ */
+const PerspectiveDeleteDialog: React.FC<PerspectiveDeleteDialogProps> = ({
+  name,
+  variant = 'view',
+  onConfirm,
+  onCancel,
+}) => {
+  const t = useT();
+  const isReset = variant === 'baseReset';
+
+  useEffect(() => {
+    if (!name) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault();
+        onConfirm();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [name, onConfirm]);
+
+  return (
+    <Dialog open={!!name} onOpenChange={(open) => { if (!open) onCancel(); }}>
+      <DialogContent className="hot-dialog">
+        <DialogHeader>
+          <DialogTitle>
+            {isReset
+              ? t('dynamicTable.perspectives.resetTitle', 'Reset Default view')
+              : t('dynamicTable.perspectives.deleteTitle', 'Delete view')}
+          </DialogTitle>
+          <DialogDescription>
+            {isReset
+              ? t(
+                  'dynamicTable.perspectives.resetConfirm',
+                  'Drop your own columns, sorting and filters on the Default view and go back to the standard layout? Your saved views are untouched, and nobody else is affected.',
+                )
+              : t(
+                  'dynamicTable.perspectives.deleteConfirm',
+                  'Delete the view "{name}"? Its columns, sorting and saved filters are removed for you. Other people\'s views are not affected.',
+                  { name: name ?? '' },
+                )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" size="sm" onClick={onCancel}>
+            {t('dynamicTable.perspectives.cancel', 'Cancel')}
+          </Button>
+          <Button variant="destructive" size="sm" onClick={onConfirm}>
+            {isReset
+              ? t('dynamicTable.perspectives.resetAction', 'Reset view')
+              : t('dynamicTable.perspectives.deleteAction', 'Delete view')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PerspectiveDeleteDialog;

package/src/backend/dynamic-table/components/PerspectivePublishDialog.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import { useT } from '@open-mercato/shared/lib/i18n/context';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../primitives/dialog';
+import { Button, Checkbox } from '../../../primitives-v2';
+import type { PerspectiveConfig } from '../types/perspective';
+
+export interface PerspectivePublishDialogProps {
+  /** The view being published; `null` closes the dialog. */
+  perspective: PerspectiveConfig | null;
+  /** Roles the publisher may share with. */
+  roles: Array<{ id: string; name: string }>;
+  onConfirm: (roleIds: string[]) => void;
+  onCancel: () => void;
+}
+
+/**
+ * "Publish as shared template" (personalization decision, 3 Aug 2026).
+ *
+ * Everything a user configures is PRIVATE by default. This dialog is the single
+ * deliberate step that makes a layout available to colleagues — and even then it
+ * is available to COPY, not applied. The copy explains that in one sentence,
+ * because the recorded incident (A3) was a user discovering *after the fact*
+ * that her change had reached everyone: „Czyli jak tu porobiłam, to porobiłam
+ * wszystkim?" The answer here is visibly no.
+ *
+ * Roles are the audience because that is what the perspectives API already
+ * scopes shared views by — no new entity, no new endpoint, and the same ACL
+ * feature (`perspectives.role_defaults`) already guards the write.
+ *
+ * House keyboard contract: `Cmd/Ctrl+Enter` confirms, `Escape` cancels.
+ */
+const PerspectivePublishDialog: React.FC<PerspectivePublishDialogProps> = ({
+  perspective,
+  roles,
+  onConfirm,
+  onCancel,
+}) => {
+  const t = useT();
+  const [selected, setSelected] = useState<string[]>([]);
+
+  // Pre-select whatever the view is already published to, so re-publishing
+  // after an edit is one click and cannot silently narrow the audience.
+  useEffect(() => {
+    if (!perspective) return;
+    setSelected(perspective.publication?.roleIds ?? []);
+  }, [perspective]);
+
+  const canConfirm = selected.length > 0;
+
+  useEffect(() => {
+    if (!perspective) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && canConfirm) {
+        e.preventDefault();
+        onConfirm(selected);
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [perspective, canConfirm, selected, onConfirm]);
+
+  const toggle = (roleId: string) => {
+    setSelected((prev) =>
+      prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId],
+    );
+  };
+
+  const allSelected = roles.length > 0 && selected.length === roles.length;
+
+  return (
+    <Dialog open={!!perspective} onOpenChange={(open) => { if (!open) onCancel(); }}>
+      <DialogContent className="hot-dialog">
+        <DialogHeader>
+          <DialogTitle>
+            {t('dynamicTable.perspectives.publishTitle', 'Share as a template')}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              'dynamicTable.perspectives.publishDescription',
+              'Colleagues can copy "{name}" into their own views. Nobody\'s screen changes until they do, and their copy is theirs to edit.',
+              { name: perspective?.name ?? '' },
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 py-1">
+          <div className="flex items-center justify-between">
+            <span className="text-body-medium-sm text-foreground-v2">
+              {t('dynamicTable.perspectives.publishAudience', 'Who can copy it')}
+            </span>
+            {roles.length > 1 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSelected(allSelected ? [] : roles.map((r) => r.id))}
+              >
+                {allSelected
+                  ? t('dynamicTable.perspectives.publishNone', 'Clear all')
+                  : t('dynamicTable.perspectives.publishAll', 'Select all')}
+              </Button>
+            )}
+          </div>
+
+          {roles.length === 0 ? (
+            <p className="text-body-regular-sm text-muted-v2-foreground">
+              {t(
+                'dynamicTable.perspectives.publishNoRoles',
+                'There are no roles you can share with.',
+              )}
+            </p>
+          ) : (
+            <div className="flex flex-col gap-2 max-h-64 overflow-y-auto">
+              {roles.map((role) => (
+                <Checkbox
+                  key={role.id}
+                  label={role.name}
+                  checked={selected.includes(role.id)}
+                  onChange={() => toggle(role.id)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" size="sm" onClick={onCancel}>
+            {t('dynamicTable.perspectives.cancel', 'Cancel')}
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            disabled={!canConfirm}
+            onClick={() => onConfirm(selected)}
+          >
+            {t('dynamicTable.perspectives.publishAction', 'Share template')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PerspectivePublishDialog;

package/src/backend/dynamic-table/components/PerspectiveTabMenu.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Pencil, SlidersHorizontal, Copy, Star, Trash2, Share2, Link2 } from 'lucide-react';
+import { useT } from '@open-mercato/shared/lib/i18n/context';
+import { computeAnchoredPosition, type AnchoredPlacement } from '../utils/anchoredPosition';
+
+export interface PerspectiveTabMenuProps {
+  /** The tab button this menu hangs off — the rect is re-read on open. */
+  anchorRect: DOMRect;
+  /** Name of the view the menu acts on (used in the ARIA label). */
+  perspectiveName: string;
+  /** True when this view is already the user's default. */
+  isDefault: boolean;
+  /** Omit to hide "Rename view" — the base ("Default view") tab cannot be renamed. */
+  onRename?: () => void;
+  /** Omit to hide "Duplicate view" (host has no copy handler). */
+  onDuplicate?: () => void;
+  /** Omit to hide "Set as my default" (host has no per-user default handler). */
+  onSetDefault?: () => void;
+  /**
+   * Omit to hide "Share as template…" — the host omits it when the server says
+   * this user lacks `perspectives.role_defaults`, so the affordance is absent
+   * exactly when the write would be refused.
+   */
+  onPublish?: () => void;
+  /** True when this view is already published as a shared template. */
+  isPublished?: boolean;
+  /** Name of the shared template this view was copied from, when it was. */
+  originTemplateName?: string | null;
+  /** Omit to hide the destructive row entirely. */
+  onDelete?: () => void;
+  /** Overrides the destructive row's label (the base tab RESETS rather than deletes). */
+  deleteLabel?: string;
+  onEditView?: () => void;
+  onClose: () => void;
+}
+
+/**
+ * The `⋯` menu on a saved-view tab (workshop A6).
+ *
+ * Deleting a view used to be a bare `×` sitting one pixel from the tab label —
+ * "zbyt łatwo go tu można usunąć". Every view action now lives behind this one
+ * trigger, with Delete last and visually separated, and Delete itself still
+ * asks for confirmation.
+ *
+ * Structure and CSS are the SAME as `ColumnHeaderMenu` (`.hot-col-menu`) so the
+ * two menus in the grid read as one component, not two.
+ */
+const PerspectiveTabMenu: React.FC<PerspectiveTabMenuProps> = ({
+  anchorRect,
+  perspectiveName,
+  isDefault,
+  onRename,
+  onDuplicate,
+  onSetDefault,
+  onPublish,
+  isPublished = false,
+  originTemplateName,
+  onDelete,
+  deleteLabel,
+  onEditView,
+  onClose,
+}) => {
+  const t = useT();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [placement, setPlacement] = useState<AnchoredPlacement | null>(null);
+
+  // Measured, not guessed. The old code clamped against a hardcoded 210px while
+  // the widest row ("Update shared template…") renders well past that, so the
+  // clamp let the menu hang off the right edge exactly when it was widest.
+  useLayoutEffect(() => {
+    const el = menuRef.current;
+    if (!el) return;
+    setPlacement(
+      computeAnchoredPosition(
+        anchorRect,
+        { width: window.innerWidth, height: window.innerHeight },
+        { width: el.offsetWidth, preferredHeight: el.offsetHeight, minHeight: 120 },
+      ),
+    );
+  }, [anchorRect]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();
+    };
+    // CAPTURE + stopPropagation, matching every other dropdown in the grid.
+    // A bubbling listener let the same Escape ALSO reach the grid's global
+    // handler, so dismissing this menu cleared the user's cell selection as a
+    // side effect.
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.stopPropagation();
+      onClose();
+    };
+    // The menu is `position: fixed` off a rect read once at open time, so any
+    // scroll leaves it floating detached from the tab it belongs to. Both
+    // reference dropdowns (CostLinePicker, InlineSelect) close instead.
+    const handleScroll = () => onClose();
+    // Capture phase — the tab strip's own mousedown handlers call
+    // stopPropagation, so a bubbling listener would never see the outside click.
+    document.addEventListener('mousedown', handleClickOutside, true);
+    document.addEventListener('keydown', handleEscape, true);
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, true);
+      document.removeEventListener('keydown', handleEscape, true);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [onClose]);
+
+  const style: React.CSSProperties = {
+    position: 'fixed',
+    top: placement ? placement.top : anchorRect.bottom + 4,
+    left: placement ? placement.left : anchorRect.left,
+    maxHeight: placement?.maxHeight,
+    overflowY: 'auto',
+    zIndex: 9999,
+    // First paint happens before the menu can be measured. Hiding that one
+    // frame avoids a visible jump from the unclamped position to the clamped
+    // one; `visibility` (not `display`) keeps it measurable.
+    ...(placement ? {} : { visibility: 'hidden' as const }),
+    ...(placement?.flipAbove ? { transform: 'translateY(-100%)' } : {}),
+  };
+
+  const menu = (
+    <div
+      ref={menuRef}
+      className="hot-col-menu hot-appearance-v2"
+      style={style}
+      role="menu"
+      aria-label={t('dynamicTable.perspectives.menuFor', 'View actions: {name}', { name: perspectiveName })}
+    >
+      {onRename && (
+        <button className="hot-col-menu-item" role="menuitem" onClick={() => { onRename(); onClose(); }}>
+          <Pencil className="w-4 h-4" />
+          <span>{t('dynamicTable.perspectives.rename', 'Rename view')}</span>
+        </button>
+      )}
+      {onEditView && (
+        <button className="hot-col-menu-item" role="menuitem" onClick={() => { onEditView(); onClose(); }}>
+          {/* The same glyph the column menu uses for "Advanced filter…" — one
+              icon means "open the Configure View drawer" everywhere in the grid. */}
+          <SlidersHorizontal className="w-4 h-4" />
+          <span>{t('dynamicTable.perspectives.configure', 'Configure view…')}</span>
+        </button>
+      )}
+      {onDuplicate && (
+        <button className="hot-col-menu-item" role="menuitem" onClick={() => { onDuplicate(); onClose(); }}>
+          <Copy className="w-4 h-4" />
+          <span>{t('dynamicTable.perspectives.duplicate', 'Duplicate view')}</span>
+        </button>
+      )}
+      {onSetDefault && (
+        <button
+          className="hot-col-menu-item"
+          role="menuitem"
+          disabled={isDefault}
+          onClick={() => { onSetDefault(); onClose(); }}
+        >
+          <Star className="w-4 h-4" />
+          <span>
+            {isDefault
+              ? t('dynamicTable.perspectives.isMyDefault', 'This is my default view')
+              : t('dynamicTable.perspectives.setDefault', 'Set as my default')}
+          </span>
+        </button>
+      )}
+      {onPublish && (
+        <button className="hot-col-menu-item" role="menuitem" onClick={() => { onPublish(); onClose(); }}>
+          <Share2 className="w-4 h-4" />
+          <span>
+            {isPublished
+              ? t('dynamicTable.perspectives.updateTemplate', 'Update shared template…')
+              : t('dynamicTable.perspectives.publish', 'Share as template…')}
+          </span>
+        </button>
+      )}
+      {originTemplateName ? (
+        <>
+          <div className="hot-col-menu-divider" />
+          {/* Provenance, not an action: a copy stays yours, and this is the only
+              place that says where it came from. */}
+          <div className="hot-col-menu-note">
+            <Link2 className="w-4 h-4" />
+            <span>
+              {t('dynamicTable.perspectives.copiedFrom', 'Copied from "{name}"', {
+                name: originTemplateName,
+              })}
+            </span>
+          </div>
+        </>
+      ) : null}
+      {onDelete && (
+        <>
+          <div className="hot-col-menu-divider" />
+          <button
+            className="hot-col-menu-item hot-col-menu-item-danger"
+            role="menuitem"
+            onClick={() => { onDelete(); onClose(); }}
+          >
+            <Trash2 className="w-4 h-4" />
+            <span>{deleteLabel ?? t('dynamicTable.perspectives.deleteView', 'Delete view…')}</span>
+          </button>
+        </>
+      )}
+    </div>
+  );
+
+  return ReactDOM.createPortal(menu, document.body);
+};
+
+export default PerspectiveTabMenu;