@k2b/ui 0.45.0 → 0.47.0

package/dist/ssr/layout/detail-sections-messages.js

@@ -0,0 +1,127 @@
+import { i18n } from "@k2b/stdlib";
+import { useLocale } from "../intl/locale";
+
+/** Titles and sentences of the shared detail sections: presence, access, links, properties, and tags. */
+const detailSectionMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      hereNow: "Here now",
+      onlyYou: "Only you",
+      you: "You",
+      writesIn: "in",
+      writing: "writing",
+      reading: "reading",
+      readingAlong: ({
+        names,
+        count
+      }) => count > 2 ? `${count} reading along` : `${names} ${count === 1 ? "is" : "are"} reading along`,
+      and: "and",
+      jumpTo: ({
+        name,
+        place
+      }) => `${name}, writing in “${place}”. Jump there`,
+      personWriting: ({
+        name,
+        place
+      }) => place ? `${name}, writing in “${place}”` : `${name}, writing`,
+      personReading: ({
+        name
+      }) => `${name}, reading`,
+      everyoneHere: ({
+        count
+      }) => `Here now: all ${count}, with you`,
+      presenceLoading: "Loading who is here",
+      presenceUnavailable: "Presence is unavailable right now",
+      retry: "Try again",
+      access: "Access",
+      accessLoading: "Loading who has access",
+      accessFailed: "Could not load who has access",
+      accessSummary: ({
+        names,
+        more
+      }) => more > 0 ? `${names} and ${more} more` : names,
+      links: "Links",
+      linkedBy: ({
+        count
+      }) => `Linked from ${count}`,
+      linksTo: ({
+        count
+      }) => `Links to ${count}`,
+      linkedBySummary: ({
+        names,
+        more
+      }) => more > 0 ? `Linked from ${names} and ${more} more` : `Linked from ${names}`,
+      linksToSummary: ({
+        names,
+        more
+      }) => more > 0 ? `Links to ${names} and ${more} more` : `Links to ${names}`,
+      linksLoading: "Loading links",
+      linksFailed: "Could not load all links",
+      properties: "Properties",
+      tags: "Tags"
+    },
+    de: {
+      hereNow: "Gerade hier",
+      onlyYou: "Nur du",
+      you: "Du",
+      writesIn: "in",
+      writing: "schreibt",
+      reading: "liest",
+      readingAlong: ({
+        names,
+        count
+      }) => count > 2 ? `${count} lesen mit` : `${names} ${count === 1 ? "liest" : "lesen"} mit`,
+      and: "und",
+      jumpTo: ({
+        name,
+        place
+      }) => `${name}, schreibt in „${place}“. Zur Stelle springen`,
+      personWriting: ({
+        name,
+        place
+      }) => place ? `${name}, schreibt in „${place}“` : `${name}, schreibt`,
+      personReading: ({
+        name
+      }) => `${name}, liest`,
+      everyoneHere: ({
+        count
+      }) => `Gerade hier: alle ${count}, mit dir`,
+      presenceLoading: "Lädt, wer gerade hier ist",
+      presenceUnavailable: "Anwesenheit gerade nicht verfügbar",
+      retry: "Erneut versuchen",
+      access: "Zugriff",
+      accessLoading: "Lädt, wer Zugriff hat",
+      accessFailed: "Zugriff konnte nicht geladen werden",
+      accessSummary: ({
+        names,
+        more
+      }) => more > 0 ? `${names} und ${more} weitere` : names,
+      links: "Verknüpfungen",
+      linkedBy: ({
+        count
+      }) => `Verlinkt von ${count}`,
+      linksTo: ({
+        count
+      }) => `Verweist auf ${count}`,
+      linkedBySummary: ({
+        names,
+        more
+      }) => more > 0 ? `Verlinkt von ${names} und ${more} weiteren` : `Verlinkt von ${names}`,
+      linksToSummary: ({
+        names,
+        more
+      }) => more > 0 ? `Verweist auf ${names} und ${more} weitere` : `Verweist auf ${names}`,
+      linksLoading: "Lädt Verknüpfungen",
+      linksFailed: "Nicht alle Verknüpfungen konnten geladen werden",
+      properties: "Eigenschaften",
+      tags: "Tags"
+    }
+  }
+});
+export const useDetailSectionMessages = () => {
+  const locale = useLocale();
+  return () => detailSectionMessages.resolve([locale()]).t;
+};
+export const checkDetailSectionMessages = () => detailSectionMessages.check();
+//# sourceMappingURL=detail-sections-messages.js.map

package/dist/ssr/layout/detail-sections-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/detail-sections-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\n/** Titles and sentences of the shared detail sections: presence, access, links, properties, and tags. */\nconst detailSectionMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      hereNow: \"Here now\",\n      onlyYou: \"Only you\",\n      you: \"You\",\n      writesIn: \"in\",\n      writing: \"writing\",\n      reading: \"reading\",\n      readingAlong: ({ names, count }: { names: string; count: number }) =>\n        count > 2 ? `${count} reading along` : `${names} ${count === 1 ? \"is\" : \"are\"} reading along`,\n      and: \"and\",\n      jumpTo: ({ name, place }: { name: string; place: string }) => `${name}, writing in “${place}”. Jump there`,\n      personWriting: ({ name, place }: { name: string; place: string }) => (place ? `${name}, writing in “${place}”` : `${name}, writing`),\n      personReading: ({ name }: { name: string }) => `${name}, reading`,\n      everyoneHere: ({ count }: { count: number }) => `Here now: all ${count}, with you`,\n      presenceLoading: \"Loading who is here\",\n      presenceUnavailable: \"Presence is unavailable right now\",\n      retry: \"Try again\",\n      access: \"Access\",\n      accessLoading: \"Loading who has access\",\n      accessFailed: \"Could not load who has access\",\n      accessSummary: ({ names, more }: { names: string; more: number }) => (more > 0 ? `${names} and ${more} more` : names),\n      links: \"Links\",\n      linkedBy: ({ count }: { count: number }) => `Linked from ${count}`,\n      linksTo: ({ count }: { count: number }) => `Links to ${count}`,\n      linkedBySummary: ({ names, more }: { names: string; more: number }) =>\n        more > 0 ? `Linked from ${names} and ${more} more` : `Linked from ${names}`,\n      linksToSummary: ({ names, more }: { names: string; more: number }) =>\n        more > 0 ? `Links to ${names} and ${more} more` : `Links to ${names}`,\n      linksLoading: \"Loading links\",\n      linksFailed: \"Could not load all links\",\n      properties: \"Properties\",\n      tags: \"Tags\",\n    },\n    de: {\n      hereNow: \"Gerade hier\",\n      onlyYou: \"Nur du\",\n      you: \"Du\",\n      writesIn: \"in\",\n      writing: \"schreibt\",\n      reading: \"liest\",\n      readingAlong: ({ names, count }) => (count > 2 ? `${count} lesen mit` : `${names} ${count === 1 ? \"liest\" : \"lesen\"} mit`),\n      and: \"und\",\n      jumpTo: ({ name, place }) => `${name}, schreibt in „${place}“. Zur Stelle springen`,\n      personWriting: ({ name, place }) => (place ? `${name}, schreibt in „${place}“` : `${name}, schreibt`),\n      personReading: ({ name }) => `${name}, liest`,\n      everyoneHere: ({ count }) => `Gerade hier: alle ${count}, mit dir`,\n      presenceLoading: \"Lädt, wer gerade hier ist\",\n      presenceUnavailable: \"Anwesenheit gerade nicht verfügbar\",\n      retry: \"Erneut versuchen\",\n      access: \"Zugriff\",\n      accessLoading: \"Lädt, wer Zugriff hat\",\n      accessFailed: \"Zugriff konnte nicht geladen werden\",\n      accessSummary: ({ names, more }) => (more > 0 ? `${names} und ${more} weitere` : names),\n      links: \"Verknüpfungen\",\n      linkedBy: ({ count }) => `Verlinkt von ${count}`,\n      linksTo: ({ count }) => `Verweist auf ${count}`,\n      linkedBySummary: ({ names, more }) => (more > 0 ? `Verlinkt von ${names} und ${more} weiteren` : `Verlinkt von ${names}`),\n      linksToSummary: ({ names, more }) => (more > 0 ? `Verweist auf ${names} und ${more} weitere` : `Verweist auf ${names}`),\n      linksLoading: \"Lädt Verknüpfungen\",\n      linksFailed: \"Nicht alle Verknüpfungen konnten geladen werden\",\n      properties: \"Eigenschaften\",\n      tags: \"Tags\",\n    },\n  },\n});\n\nexport type DetailSectionMessages = ReturnType<(typeof detailSectionMessages)[\"resolve\"]>[\"t\"];\n\nexport const useDetailSectionMessages = (): (() => DetailSectionMessages) => {\n  const locale = useLocale();\n  return () => detailSectionMessages.resolve([locale()]).t;\n};\n\nexport const checkDetailSectionMessages = () => detailSectionMessages.check();\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/layout/index.js

@@ -1,12 +1,15 @@
 export { AnchoredPopover } from "./AnchoredPopover";
 export { default as AppOverview } from "./AppOverview";
 export { appWorkspaceDetailElementId, default as AppWorkspace } from "./AppWorkspace";
+export { AppWorkspaceSidebarItemStatus } from "./AppWorkspaceSidebarItemStatus";
 export { watchAppHostWidth } from "./app-host-width";
 export { installAppWorkspaceController, parkWorkspaceDetailDrawers } from "./app-workspace-controller";
 export { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_MAIN_MIN_HEIGHT, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable, appWorkspaceResizeLimits, normalizeAppWorkspaceLayoutState, parseAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, serializeAppWorkspaceLayoutState, shouldCollapseAppWorkspaceSidebar } from "./app-workspace-state";
 export { bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
 export { DataPanel } from "./DataPanel";
 export { default as DetailPanel } from "./DetailPanel";
+export { DetailAccess, DetailLinks, DetailPresence, DetailPresenceSlot, DetailProperties, DetailTags } from "./DetailSections";
+export { DETAILS_ICON, DetailsToggle } from "./DetailsToggle";
 export { default as Discussion } from "./Discussion";
 export { default as FloatingWindow, fitFloatingWindowRect, openFloatingWindow } from "./FloatingWindow";
 export { default as MobileShell, observeMobileShell } from "./MobileShell";

package/dist/ssr/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/index.ts"],"sourcesContent":["export { AnchoredPopover, type AnchoredPopoverProps } from \"./AnchoredPopover\";\nexport type {\n  AppOverviewCardsProps,\n  AppOverviewEmptyStateProps,\n  AppOverviewPanelProps,\n  AppOverviewProps,\n} from \"./AppOverview\";\nexport { default as AppOverview } from \"./AppOverview\";\nexport type {\n  AppWorkspaceBottomDrawerHeight,\n  AppWorkspaceBottomDrawerProps,\n  AppWorkspaceContentProps,\n  AppWorkspaceDetailProps,\n  AppWorkspaceDetailWidth,\n  AppWorkspaceHeadProps,\n  AppWorkspaceMainPaneProps,\n  AppWorkspaceMainProps,\n  AppWorkspaceNavTreeItemProps,\n  AppWorkspaceNavTreeMove,\n  AppWorkspaceNavTreeProps,\n  AppWorkspaceProps,\n  AppWorkspaceSidebarAccessoryVisibility,\n  AppWorkspaceSidebarBodyProps,\n  AppWorkspaceSidebarIconActionProps,\n  AppWorkspaceSidebarIconActionTone,\n  AppWorkspaceSidebarIconGridProps,\n  AppWorkspaceSidebarItemActionProps,\n  AppWorkspaceSidebarItemActionsProps,\n  AppWorkspaceSidebarItemIconProps,\n  AppWorkspaceSidebarItemLabelProps,\n  AppWorkspaceSidebarItemMetaProps,\n  AppWorkspaceSidebarItemProps,\n  AppWorkspaceSidebarItemStatusProps,\n  AppWorkspaceSidebarItemTone,\n  AppWorkspaceSidebarProps,\n  AppWorkspaceSidebarSectionProps,\n  AppWorkspaceSidebarVisibility,\n  AppWorkspaceWidthShare,\n} from \"./AppWorkspace\";\nexport { appWorkspaceDetailElementId, default as AppWorkspace } from \"./AppWorkspace\";\nexport { watchAppHostWidth } from \"./app-host-width\";\nexport type { AppWorkspaceControllerOptions } from \"./app-workspace-controller\";\nexport { installAppWorkspaceController, parkWorkspaceDetailDrawers } from \"./app-workspace-controller\";\nexport type {\n  AppWorkspaceLayoutState,\n  AppWorkspaceResizeKind,\n} from \"./app-workspace-state\";\nexport {\n  APP_WORKSPACE_DETAIL_DEFAULT,\n  APP_WORKSPACE_DETAIL_MAX,\n  APP_WORKSPACE_DETAIL_MIN,\n  APP_WORKSPACE_DRAWER_DEFAULT,\n  APP_WORKSPACE_DRAWER_MAX,\n  APP_WORKSPACE_DRAWER_MIN,\n  APP_WORKSPACE_MAIN_MIN,\n  APP_WORKSPACE_MAIN_MIN_HEIGHT,\n  APP_WORKSPACE_PANE_DEFAULT,\n  APP_WORKSPACE_PANE_MAX,\n  APP_WORKSPACE_PANE_MIN,\n  APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD,\n  APP_WORKSPACE_SIDEBAR_COLLAPSED,\n  APP_WORKSPACE_SIDEBAR_DEFAULT,\n  APP_WORKSPACE_SIDEBAR_MAX,\n  APP_WORKSPACE_SIDEBAR_MIN,\n  appWorkspaceLayoutStyle,\n  appWorkspacePanelVariable,\n  appWorkspaceResizeLimits,\n  normalizeAppWorkspaceLayoutState,\n  parseAppWorkspaceLayoutState,\n  resolveAppWorkspaceSidebarWidth,\n  safeAppWorkspacePanelId,\n  serializeAppWorkspaceLayoutState,\n  shouldCollapseAppWorkspaceSidebar,\n} from \"./app-workspace-state\";\nexport { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from \"./BottomSheet\";\nexport type { DataPanelProps } from \"./DataPanel\";\nexport { DataPanel } from \"./DataPanel\";\nexport type {\n  DetailPanelActionButtonProps,\n  DetailPanelActionLinkProps,\n  DetailPanelActionProps,\n  DetailPanelActionSecondary,\n  DetailPanelBodyProps,\n  DetailPanelGroupProps,\n  DetailPanelHeaderProps,\n  DetailPanelProps,\n  DetailPanelSectionProps,\n  DetailPanelSummaryProps,\n  DetailPanelTone,\n} from \"./DetailPanel\";\nexport { default as DetailPanel } from \"./DetailPanel\";\nexport type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps, DiscussionProps } from \"./Discussion\";\nexport { default as Discussion } from \"./Discussion\";\nexport type {\n  FloatingWindowClose,\n  FloatingWindowProps,\n  OpenFloatingWindowOptions,\n} from \"./FloatingWindow\";\nexport {\n  default as FloatingWindow,\n  type FloatingWindowRect,\n  fitFloatingWindowRect,\n  openFloatingWindow,\n} from \"./FloatingWindow\";\nexport type { MobileShellHeaderProps, MobileShellProps, MobileShellSidebarItem, MobileShellSidebarProps } from \"./MobileShell\";\nexport { default as MobileShell, observeMobileShell } from \"./MobileShell\";\nexport { default as Navigation, type NavigationProps } from \"./Navigation\";\nexport {\n  createNavigation,\n  findNavigationItem,\n  type NavigationController,\n  type NavigationItem,\n  type NavigationOptions,\n  type NavigationStatus,\n} from \"./navigation-model\";\nexport type { PageTitleProps, PageTrailLink, PageTrailState } from \"./PageTitle\";\nexport { followPageTrail, PAGE_TRAIL_EVENT, PageTitle, PageTrailProvider, readPageTrail, setPageTrail, usePageTrail } from \"./PageTitle\";\nexport type {\n  PanelDialogBodyProps,\n  PanelDialogFooterProps,\n  PanelDialogHeaderProps,\n  PanelDialogProps,\n  PanelDialogSectionProps,\n  PanelDialogSurface,\n  PanelDialogTabOption,\n  PanelDialogTabsProps,\n} from \"./PanelDialog\";\nexport {\n  confirmDiscardIfDirty,\n  default as PanelDialog,\n  panelDialogFixedOptions,\n  panelDialogFixedPanelClass,\n  panelDialogOptions,\n  panelDialogPanelClass,\n  panelDialogWideOptions,\n  panelDialogWidePanelClass,\n  panelDialogWorkspaceOptions,\n  panelDialogWorkspacePanelClass,\n} from \"./PanelDialog\";\nexport type { PanelHeaderProps } from \"./PanelHeader\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport type { PanesItem, PanesProps } from \"./Panes\";\nexport { default as Panes } from \"./Panes\";\nexport type { PullToRefreshProps, PullToRefreshState } from \"./PullToRefresh\";\nexport { default as PullToRefresh } from \"./PullToRefresh\";\nexport { installPageTitleController } from \"./page-title-controller\";\nexport type {\n  AddPanesItemOptions,\n  PanesDirection,\n  PanesGroup,\n  PanesIntent,\n  PanesLayout,\n  PanesNode,\n  PanesPath,\n  PanesPathSegment,\n  PanesSide,\n  PanesSplit,\n} from \"./panes-layout\";\nexport {\n  activatePanesItem,\n  addPanesItem,\n  applyPanesIntent,\n  createPanesLayout,\n  isPanesItemVisible,\n  PANES_LAYOUT_VERSION,\n  parsePanesLayout,\n  reconcilePanesLayout,\n  removePanesItem,\n  resizePanesSplit,\n} from \"./panes-layout\";\nexport { default as ResizeSeparator, type ResizeSeparatorProps } from \"./ResizeSeparator\";\nexport { attachResizeSeparator, type ResizeSeparatorOptions } from \"./resize-separator\";\nexport type { ScrollAreaProps } from \"./ScrollArea\";\nexport { default as ScrollArea } from \"./ScrollArea\";\nexport type {\n  SaveStatusProps,\n  SaveStatusState,\n  SettingsFieldControlProps,\n  SettingsFieldProps,\n  SettingsFieldWidth,\n  SettingsGroupActionProps,\n  SettingsGroupProps,\n  SettingsPageProps,\n  SettingsPanelFooterProps,\n  SettingsSaveBarProps,\n  SettingsSectionProps,\n} from \"./Settings\";\nexport {\n  readSettingsError,\n  SaveStatus,\n  SettingsField,\n  SettingsGroup,\n  SettingsPage,\n  SettingsPanelFooter,\n  SettingsSaveBar,\n  SettingsSection,\n  sameSettingValue,\n} from \"./Settings\";\nexport type {\n  SettingsCollectionActionProps,\n  SettingsCollectionItemActionsProps,\n  SettingsCollectionItemProps,\n  SettingsCollectionItemReorderProps,\n  SettingsCollectionItemStatusProps,\n  SettingsCollectionProps,\n} from \"./SettingsCollection\";\nexport { default as SettingsCollection } from \"./SettingsCollection\";\nexport type {\n  SettingsModalFooterProps,\n  SettingsModalGroupProps,\n  SettingsModalProps,\n  SettingsModalTabProps,\n  SettingsModalTabTone,\n} from \"./SettingsModal\";\nexport { default as SettingsModal } from \"./SettingsModal\";\nexport {\n  APP_WORKSPACE_SWITCHER_SEARCH_FROM,\n  type AppWorkspaceSidebarSwitcherProps,\n  type AppWorkspaceSwitcherAction,\n  type AppWorkspaceSwitcherOption,\n} from \"./SidebarSwitcher\";\nexport { measureScrollFade } from \"./scroll-fade\";\nexport type { TabBarItem, TabBarProps } from \"./TabBar\";\nexport { default as TabBar } from \"./TabBar\";\nexport type { TableOfContentsItem, TableOfContentsProps } from \"./TableOfContents\";\nexport { TableOfContents } from \"./TableOfContents\";\n"],"mappings":"AAAA,SAAS,eAAe,QAAmC,mBAAmB;AAO9E,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAgCtD,SAAS,2BAA2B,EAAE,OAAO,IAAI,YAAY,QAAQ,gBAAgB;AACrF,SAAS,iBAAiB,QAAQ,kBAAkB;AAEpD,SAAS,6BAA6B,EAAE,0BAA0B,QAAQ,4BAA4B;AAKtG,SACE,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,wCAAwC,EACxC,+BAA+B,EAC/B,6BAA6B,EAC7B,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,gCAAgC,EAChC,4BAA4B,EAC5B,+BAA+B,EAC/B,uBAAuB,EACvB,gCAAgC,EAChC,iCAAiC,QAC5B,uBAAuB;AAC9B,SAAgC,0BAA0B,EAAE,kBAAkB,EAAE,OAAO,IAAI,WAAW,QAAQ,eAAe;AAE7H,SAAS,SAAS,QAAQ,aAAa;AAcvC,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAMpD,SACE,OAAO,IAAI,cAAc,EAEzB,qBAAqB,EACrB,kBAAkB,QACb,kBAAkB;AAEzB,SAAS,OAAO,IAAI,WAAW,EAAE,kBAAkB,QAAQ,eAAe;AAC1E,SAAS,OAAO,IAAI,UAAU,QAA8B,cAAc;AAC1E,SACE,gBAAgB,EAChB,kBAAkB,QAKb,oBAAoB;AAE3B,SAAS,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,QAAQ,aAAa;AAWxI,SACE,qBAAqB,EACrB,OAAO,IAAI,WAAW,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,QACzB,eAAe;AAEtB,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,OAAO,IAAI,KAAK,QAAQ,SAAS;AAE1C,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SAAS,0BAA0B,QAAQ,yBAAyB;AAapE,SACE,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,QACX,gBAAgB;AACvB,SAAS,OAAO,IAAI,eAAe,QAAmC,mBAAmB;AACzF,SAAS,qBAAqB,QAAqC,oBAAoB;AAEvF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAcpD,SACE,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,gBAAgB,QACX,YAAY;AASnB,SAAS,OAAO,IAAI,kBAAkB,QAAQ,sBAAsB;AAQpE,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SACE,kCAAkC,QAI7B,mBAAmB;AAC1B,SAAS,iBAAiB,QAAQ,eAAe;AAEjD,SAAS,OAAO,IAAI,MAAM,QAAQ,UAAU;AAE5C,SAAS,eAAe,QAAQ,mBAAmB","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/index.ts"],"sourcesContent":["export { AnchoredPopover, type AnchoredPopoverProps } from \"./AnchoredPopover\";\nexport type {\n  AppOverviewCardsProps,\n  AppOverviewEmptyStateProps,\n  AppOverviewPanelProps,\n  AppOverviewProps,\n} from \"./AppOverview\";\nexport { default as AppOverview } from \"./AppOverview\";\nexport type {\n  AppWorkspaceBottomDrawerHeight,\n  AppWorkspaceBottomDrawerProps,\n  AppWorkspaceContentProps,\n  AppWorkspaceDetailProps,\n  AppWorkspaceDetailWidth,\n  AppWorkspaceHeadProps,\n  AppWorkspaceMainPaneProps,\n  AppWorkspaceMainProps,\n  AppWorkspaceNavTreeItemProps,\n  AppWorkspaceNavTreeMove,\n  AppWorkspaceNavTreeProps,\n  AppWorkspaceProps,\n  AppWorkspaceSidebarAccessoryVisibility,\n  AppWorkspaceSidebarBodyProps,\n  AppWorkspaceSidebarIconActionProps,\n  AppWorkspaceSidebarIconActionTone,\n  AppWorkspaceSidebarIconGridProps,\n  AppWorkspaceSidebarItemActionProps,\n  AppWorkspaceSidebarItemActionsProps,\n  AppWorkspaceSidebarItemIconProps,\n  AppWorkspaceSidebarItemLabelProps,\n  AppWorkspaceSidebarItemMetaProps,\n  AppWorkspaceSidebarItemProps,\n  AppWorkspaceSidebarItemStatusProps,\n  AppWorkspaceSidebarItemTone,\n  AppWorkspaceSidebarProps,\n  AppWorkspaceSidebarSectionProps,\n  AppWorkspaceSidebarVisibility,\n  AppWorkspaceWidthShare,\n} from \"./AppWorkspace\";\nexport { appWorkspaceDetailElementId, default as AppWorkspace } from \"./AppWorkspace\";\nexport { AppWorkspaceSidebarItemStatus } from \"./AppWorkspaceSidebarItemStatus\";\nexport { watchAppHostWidth } from \"./app-host-width\";\nexport type { AppWorkspaceControllerOptions } from \"./app-workspace-controller\";\nexport { installAppWorkspaceController, parkWorkspaceDetailDrawers } from \"./app-workspace-controller\";\nexport type {\n  AppWorkspaceLayoutState,\n  AppWorkspaceResizeKind,\n} from \"./app-workspace-state\";\nexport {\n  APP_WORKSPACE_DETAIL_DEFAULT,\n  APP_WORKSPACE_DETAIL_MAX,\n  APP_WORKSPACE_DETAIL_MIN,\n  APP_WORKSPACE_DRAWER_DEFAULT,\n  APP_WORKSPACE_DRAWER_MAX,\n  APP_WORKSPACE_DRAWER_MIN,\n  APP_WORKSPACE_MAIN_MIN,\n  APP_WORKSPACE_MAIN_MIN_HEIGHT,\n  APP_WORKSPACE_PANE_DEFAULT,\n  APP_WORKSPACE_PANE_MAX,\n  APP_WORKSPACE_PANE_MIN,\n  APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD,\n  APP_WORKSPACE_SIDEBAR_COLLAPSED,\n  APP_WORKSPACE_SIDEBAR_DEFAULT,\n  APP_WORKSPACE_SIDEBAR_MAX,\n  APP_WORKSPACE_SIDEBAR_MIN,\n  appWorkspaceLayoutStyle,\n  appWorkspacePanelVariable,\n  appWorkspaceResizeLimits,\n  normalizeAppWorkspaceLayoutState,\n  parseAppWorkspaceLayoutState,\n  resolveAppWorkspaceSidebarWidth,\n  safeAppWorkspacePanelId,\n  serializeAppWorkspaceLayoutState,\n  shouldCollapseAppWorkspaceSidebar,\n} from \"./app-workspace-state\";\nexport { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from \"./BottomSheet\";\nexport type { DataPanelProps } from \"./DataPanel\";\nexport { DataPanel } from \"./DataPanel\";\nexport type {\n  DetailPanelActionButtonProps,\n  DetailPanelActionLinkProps,\n  DetailPanelActionProps,\n  DetailPanelActionSecondary,\n  DetailPanelBodyProps,\n  DetailPanelGroupProps,\n  DetailPanelHeaderProps,\n  DetailPanelProps,\n  DetailPanelRowProps,\n  DetailPanelSectionProps,\n  DetailPanelSummaryProps,\n  DetailPanelTone,\n} from \"./DetailPanel\";\nexport { default as DetailPanel } from \"./DetailPanel\";\nexport type {\n  DetailAccessEntry,\n  DetailAccessProps,\n  DetailLinkItem,\n  DetailLinksProps,\n  DetailPresencePerson,\n  DetailPresenceProps,\n  DetailPresenceState,\n  DetailPropertiesProps,\n  DetailProperty,\n  DetailTag,\n  DetailTagsProps,\n} from \"./DetailSections\";\nexport { DetailAccess, DetailLinks, DetailPresence, DetailPresenceSlot, DetailProperties, DetailTags } from \"./DetailSections\";\nexport { DETAILS_ICON, DetailsToggle, type DetailsToggleProps } from \"./DetailsToggle\";\nexport type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps, DiscussionProps } from \"./Discussion\";\nexport { default as Discussion } from \"./Discussion\";\nexport type {\n  FloatingWindowClose,\n  FloatingWindowProps,\n  OpenFloatingWindowOptions,\n} from \"./FloatingWindow\";\nexport {\n  default as FloatingWindow,\n  type FloatingWindowRect,\n  fitFloatingWindowRect,\n  openFloatingWindow,\n} from \"./FloatingWindow\";\nexport type { MobileShellHeaderProps, MobileShellProps, MobileShellSidebarItem, MobileShellSidebarProps } from \"./MobileShell\";\nexport { default as MobileShell, observeMobileShell } from \"./MobileShell\";\nexport { default as Navigation, type NavigationProps } from \"./Navigation\";\nexport {\n  createNavigation,\n  findNavigationItem,\n  type NavigationController,\n  type NavigationItem,\n  type NavigationOptions,\n  type NavigationStatus,\n} from \"./navigation-model\";\nexport type { PageTitleProps, PageTrailLink, PageTrailState } from \"./PageTitle\";\nexport { followPageTrail, PAGE_TRAIL_EVENT, PageTitle, PageTrailProvider, readPageTrail, setPageTrail, usePageTrail } from \"./PageTitle\";\nexport type {\n  PanelDialogBodyProps,\n  PanelDialogFooterProps,\n  PanelDialogHeaderProps,\n  PanelDialogProps,\n  PanelDialogSectionProps,\n  PanelDialogSurface,\n  PanelDialogTabOption,\n  PanelDialogTabsProps,\n} from \"./PanelDialog\";\nexport {\n  confirmDiscardIfDirty,\n  default as PanelDialog,\n  panelDialogFixedOptions,\n  panelDialogFixedPanelClass,\n  panelDialogOptions,\n  panelDialogPanelClass,\n  panelDialogWideOptions,\n  panelDialogWidePanelClass,\n  panelDialogWorkspaceOptions,\n  panelDialogWorkspacePanelClass,\n} from \"./PanelDialog\";\nexport type { PanelHeaderProps } from \"./PanelHeader\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport type { PanesItem, PanesProps } from \"./Panes\";\nexport { default as Panes } from \"./Panes\";\nexport type { PullToRefreshProps, PullToRefreshState } from \"./PullToRefresh\";\nexport { default as PullToRefresh } from \"./PullToRefresh\";\nexport { installPageTitleController } from \"./page-title-controller\";\nexport type {\n  AddPanesItemOptions,\n  PanesDirection,\n  PanesGroup,\n  PanesIntent,\n  PanesLayout,\n  PanesNode,\n  PanesPath,\n  PanesPathSegment,\n  PanesSide,\n  PanesSplit,\n} from \"./panes-layout\";\nexport {\n  activatePanesItem,\n  addPanesItem,\n  applyPanesIntent,\n  createPanesLayout,\n  isPanesItemVisible,\n  PANES_LAYOUT_VERSION,\n  parsePanesLayout,\n  reconcilePanesLayout,\n  removePanesItem,\n  resizePanesSplit,\n} from \"./panes-layout\";\nexport { default as ResizeSeparator, type ResizeSeparatorProps } from \"./ResizeSeparator\";\nexport { attachResizeSeparator, type ResizeSeparatorOptions } from \"./resize-separator\";\nexport type { ScrollAreaProps } from \"./ScrollArea\";\nexport { default as ScrollArea } from \"./ScrollArea\";\nexport type {\n  SaveStatusProps,\n  SaveStatusState,\n  SettingsFieldControlProps,\n  SettingsFieldProps,\n  SettingsFieldWidth,\n  SettingsGroupActionProps,\n  SettingsGroupProps,\n  SettingsPageProps,\n  SettingsPanelFooterProps,\n  SettingsSaveBarProps,\n  SettingsSectionProps,\n} from \"./Settings\";\nexport {\n  readSettingsError,\n  SaveStatus,\n  SettingsField,\n  SettingsGroup,\n  SettingsPage,\n  SettingsPanelFooter,\n  SettingsSaveBar,\n  SettingsSection,\n  sameSettingValue,\n} from \"./Settings\";\nexport type {\n  SettingsCollectionActionProps,\n  SettingsCollectionItemActionsProps,\n  SettingsCollectionItemProps,\n  SettingsCollectionItemReorderProps,\n  SettingsCollectionItemStatusProps,\n  SettingsCollectionProps,\n} from \"./SettingsCollection\";\nexport { default as SettingsCollection } from \"./SettingsCollection\";\nexport type {\n  SettingsModalFooterProps,\n  SettingsModalGroupProps,\n  SettingsModalProps,\n  SettingsModalTabProps,\n  SettingsModalTabTone,\n} from \"./SettingsModal\";\nexport { default as SettingsModal } from \"./SettingsModal\";\nexport {\n  APP_WORKSPACE_SWITCHER_SEARCH_FROM,\n  type AppWorkspaceSidebarSwitcherProps,\n  type AppWorkspaceSwitcherAction,\n  type AppWorkspaceSwitcherOption,\n} from \"./SidebarSwitcher\";\nexport { measureScrollFade } from \"./scroll-fade\";\nexport type { TabBarItem, TabBarProps } from \"./TabBar\";\nexport { default as TabBar } from \"./TabBar\";\nexport type { TableOfContentsItem, TableOfContentsProps } from \"./TableOfContents\";\nexport { TableOfContents } from \"./TableOfContents\";\n"],"mappings":"AAAA,SAAS,eAAe,QAAmC,mBAAmB;AAO9E,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAgCtD,SAAS,2BAA2B,EAAE,OAAO,IAAI,YAAY,QAAQ,gBAAgB;AACrF,SAAS,6BAA6B,QAAQ,iCAAiC;AAC/E,SAAS,iBAAiB,QAAQ,kBAAkB;AAEpD,SAAS,6BAA6B,EAAE,0BAA0B,QAAQ,4BAA4B;AAKtG,SACE,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,wCAAwC,EACxC,+BAA+B,EAC/B,6BAA6B,EAC7B,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,gCAAgC,EAChC,4BAA4B,EAC5B,+BAA+B,EAC/B,uBAAuB,EACvB,gCAAgC,EAChC,iCAAiC,QAC5B,uBAAuB;AAC9B,SAAgC,0BAA0B,EAAE,kBAAkB,EAAE,OAAO,IAAI,WAAW,QAAQ,eAAe;AAE7H,SAAS,SAAS,QAAQ,aAAa;AAevC,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AActD,SAAS,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,UAAU,QAAQ,kBAAkB;AAC9H,SAAS,YAAY,EAAE,aAAa,QAAiC,iBAAiB;AAEtF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAMpD,SACE,OAAO,IAAI,cAAc,EAEzB,qBAAqB,EACrB,kBAAkB,QACb,kBAAkB;AAEzB,SAAS,OAAO,IAAI,WAAW,EAAE,kBAAkB,QAAQ,eAAe;AAC1E,SAAS,OAAO,IAAI,UAAU,QAA8B,cAAc;AAC1E,SACE,gBAAgB,EAChB,kBAAkB,QAKb,oBAAoB;AAE3B,SAAS,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,QAAQ,aAAa;AAWxI,SACE,qBAAqB,EACrB,OAAO,IAAI,WAAW,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,QACzB,eAAe;AAEtB,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,OAAO,IAAI,KAAK,QAAQ,SAAS;AAE1C,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SAAS,0BAA0B,QAAQ,yBAAyB;AAapE,SACE,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,QACX,gBAAgB;AACvB,SAAS,OAAO,IAAI,eAAe,QAAmC,mBAAmB;AACzF,SAAS,qBAAqB,QAAqC,oBAAoB;AAEvF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAcpD,SACE,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,gBAAgB,QACX,YAAY;AASnB,SAAS,OAAO,IAAI,kBAAkB,QAAQ,sBAAsB;AAQpE,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SACE,kCAAkC,QAI7B,mBAAmB;AAC1B,SAAS,iBAAiB,QAAQ,eAAe;AAEjD,SAAS,OAAO,IAAI,MAAM,QAAQ,UAAU;AAE5C,SAAS,eAAe,QAAQ,mBAAmB","ignoreList":[]}

package/dist/ssr/surfaces/Avatar.js

@@ -18,6 +18,8 @@ import { personTint } from "./person-color";
 
 /** `square` marks an agent or service account; people stay round. */
 
+/** `person` tints initials and icons by name; `neutral` keeps them gray, such as for someone outside the team. */
+
 const initialsFor = name => {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";
@@ -51,7 +53,7 @@ export function Avatar(props) {
       return _$memo(() => !!!failed())() ? props.src || undefined : undefined;
     },
     get fallback() {
-      return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-shape", props.shape === "square" ? "square" : _$escape(undefined, true), false) + _$ssrAttribute("data-tint", _$escape(personTint(props.name), true), false) + _$ssrAttribute("data-ring", _$escape(ring(), true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(props.alt ?? avatarMessages().avatarLabel({
+      return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-shape", props.shape === "square" ? "square" : _$escape(undefined, true), false) + _$ssrAttribute("data-tint", props.tone === "neutral" ? _$escape(undefined, true) : _$escape(personTint(props.name), true), false) + _$ssrAttribute("data-ring", _$escape(ring(), true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(props.alt ?? avatarMessages().avatarLabel({
         name: label()
       }), true), false), _$escape(fallbackContent()));
     },

package/dist/ssr/surfaces/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/Avatar.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, on, Show } from \"solid-js\";\nimport { useAvatarMessages } from \"./avatar-messages\";\nimport { personTint } from \"./person-color\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * A status ring around the avatar: `\"success\"` for an active state such as someone working on a task, or an explicit\n * color, for example a collaborator's cursor color.\n */\nexport type AvatarRing = \"success\" | { color: string };\n\n/** `square` marks an agent or service account; people stay round. */\nexport type AvatarShape = \"circle\" | \"square\";\n\nexport type AvatarProps = {\n  name: string;\n  src?: string | null;\n  icon?: string;\n  alt?: string;\n  fallback?: string;\n  size?: AvatarSize;\n  /** Draws a ring with a small transparent gap inside the avatar's own box, so the avatar keeps its size and no container clips the ring. */\n  ring?: AvatarRing;\n  shape?: AvatarShape;\n  loading?: \"eager\" | \"lazy\";\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nconst initialsFor = (name: string): string => {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n  if (parts.length === 1) return parts[0]?.slice(0, 2).toUpperCase() ?? \"?\";\n  return `${parts[0]?.[0] ?? \"\"}${parts.at(-1)?.[0] ?? \"\"}`.toUpperCase();\n};\n\nexport function Avatar(props: AvatarProps): JSX.Element {\n  const avatarMessages = useAvatarMessages();\n  const [failed, setFailed] = createSignal(false);\n  const label = () => props.name.trim() || avatarMessages().unknownUser;\n  // Derive initials from the given name, not from the accessible-name fallback:\n  // an empty `name` must render \"?\" the way Cloud's avatar does, not \"UU\".\n  const fallback = () => props.fallback ?? initialsFor(props.name);\n  const fallbackContent = () => (props.icon ? <i class={props.icon} aria-hidden=\"true\" /> : fallback());\n  const className = () => `k2b-avatar ${props.class ?? \"\"}`;\n  const ring = () => (props.ring === undefined ? undefined : typeof props.ring === \"string\" ? props.ring : \"color\");\n  const style = (): JSX.CSSProperties | string | undefined => {\n    const color = typeof props.ring === \"object\" ? props.ring.color : undefined;\n    if (color === undefined) return props.style;\n    if (typeof props.style === \"string\") return `${props.style ? `${props.style};` : \"\"}--k2b-avatar-ring:${color}`;\n    return { ...props.style, \"--k2b-avatar-ring\": color };\n  };\n\n  createEffect(\n    on(\n      () => props.src,\n      () => setFailed(false),\n      { defer: true },\n    ),\n  );\n\n  return (\n    <Show\n      when={!failed() ? props.src || undefined : undefined}\n      fallback={\n        <span\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          data-shape={props.shape === \"square\" ? \"square\" : undefined}\n          data-tint={personTint(props.name)}\n          data-ring={ring()}\n          style={style()}\n          role=\"img\"\n          aria-label={props.alt ?? avatarMessages().avatarLabel({ name: label() })}\n        >\n          {fallbackContent()}\n        </span>\n      }\n    >\n      {(src) => (\n        <img\n          src={src()}\n          alt={props.alt ?? avatarMessages().avatarLabel({ name: label() })}\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          data-shape={props.shape === \"square\" ? \"square\" : undefined}\n          data-ring={ring()}\n          style={style()}\n          loading={props.loading ?? \"lazy\"}\n          decoding=\"async\"\n          onError={() => setFailed(true)}\n        />\n      )}\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/Avatar.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, on, Show } from \"solid-js\";\nimport { useAvatarMessages } from \"./avatar-messages\";\nimport { personTint } from \"./person-color\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * A status ring around the avatar: `\"success\"` for an active state such as someone working on a task, or an explicit\n * color, for example a collaborator's cursor color.\n */\nexport type AvatarRing = \"success\" | { color: string };\n\n/** `square` marks an agent or service account; people stay round. */\nexport type AvatarShape = \"circle\" | \"square\";\n\n/** `person` tints initials and icons by name; `neutral` keeps them gray, such as for someone outside the team. */\nexport type AvatarTone = \"person\" | \"neutral\";\n\nexport type AvatarProps = {\n  name: string;\n  src?: string | null;\n  icon?: string;\n  alt?: string;\n  fallback?: string;\n  size?: AvatarSize;\n  /** Draws a ring with a small transparent gap inside the avatar's own box, so the avatar keeps its size and no container clips the ring. */\n  ring?: AvatarRing;\n  shape?: AvatarShape;\n  tone?: AvatarTone;\n  loading?: \"eager\" | \"lazy\";\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nconst initialsFor = (name: string): string => {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n  if (parts.length === 1) return parts[0]?.slice(0, 2).toUpperCase() ?? \"?\";\n  return `${parts[0]?.[0] ?? \"\"}${parts.at(-1)?.[0] ?? \"\"}`.toUpperCase();\n};\n\nexport function Avatar(props: AvatarProps): JSX.Element {\n  const avatarMessages = useAvatarMessages();\n  const [failed, setFailed] = createSignal(false);\n  const label = () => props.name.trim() || avatarMessages().unknownUser;\n  // Derive initials from the given name, not from the accessible-name fallback:\n  // an empty `name` must render \"?\" the way Cloud's avatar does, not \"UU\".\n  const fallback = () => props.fallback ?? initialsFor(props.name);\n  const fallbackContent = () => (props.icon ? <i class={props.icon} aria-hidden=\"true\" /> : fallback());\n  const className = () => `k2b-avatar ${props.class ?? \"\"}`;\n  const ring = () => (props.ring === undefined ? undefined : typeof props.ring === \"string\" ? props.ring : \"color\");\n  const style = (): JSX.CSSProperties | string | undefined => {\n    const color = typeof props.ring === \"object\" ? props.ring.color : undefined;\n    if (color === undefined) return props.style;\n    if (typeof props.style === \"string\") return `${props.style ? `${props.style};` : \"\"}--k2b-avatar-ring:${color}`;\n    return { ...props.style, \"--k2b-avatar-ring\": color };\n  };\n\n  createEffect(\n    on(\n      () => props.src,\n      () => setFailed(false),\n      { defer: true },\n    ),\n  );\n\n  return (\n    <Show\n      when={!failed() ? props.src || undefined : undefined}\n      fallback={\n        <span\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          data-shape={props.shape === \"square\" ? \"square\" : undefined}\n          data-tint={props.tone === \"neutral\" ? undefined : personTint(props.name)}\n          data-ring={ring()}\n          style={style()}\n          role=\"img\"\n          aria-label={props.alt ?? avatarMessages().avatarLabel({ name: label() })}\n        >\n          {fallbackContent()}\n        </span>\n      }\n    >\n      {(src) => (\n        <img\n          src={src()}\n          alt={props.alt ?? avatarMessages().avatarLabel({ name: label() })}\n          class={className()}\n          data-size={props.size ?? \"md\"}\n          data-shape={props.shape === \"square\" ? \"square\" : undefined}\n          data-ring={ring()}\n          style={style()}\n          loading={props.loading ?? \"lazy\"}\n          decoding=\"async\"\n          onError={() => setFailed(true)}\n        />\n      )}\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/surfaces/AvatarStack.js

@@ -13,9 +13,11 @@ var _tmpl$ = ["<span class=\"k2b-avatar-stack__row-badge\">", "</span>"],
   _tmpl$9 = ["<ul class=\"k2b-avatar-stack__rows\" tabindex=\"-1\">", "", "</ul>"],
   _tmpl$0 = ["<header class=\"k2b-avatar-stack__header\"><h3", ">", "</h3><span class=\"k2b-count-chip\">", "</span></header>"],
   _tmpl$1 = ["<p class=\"k2b-avatar-stack__hint\">", "</p>"],
-  _tmpl$10 = ["<div class=\"k2b-avatar-stack__sheet\" role=\"group\" aria-labelledby=\"", "\">", "</div>"],
+  _tmpl$10 = ["<span class=\"k2b-avatar-stack__faces\"", " aria-hidden=\"true\">", "</span>"],
   _tmpl$11 = ["<span class=\"k2b-avatar-stack__more\" aria-hidden=\"true\"", ">+", "</span>"],
-  _tmpl$12 = ["<span class=\"", "\"><button type=\"button\" class=\"k2b-avatar-stack__trigger\"", " aria-haspopup=\"dialog\"", "><span class=\"k2b-avatar-stack__faces\" aria-hidden=\"true\">", "</span>", "</button><div", " popover=\"auto\" role=\"dialog\"", " class=\"k2b-avatar-stack__popover\">", "</div></span>"];
+  _tmpl$12 = ["<div class=\"k2b-avatar-stack__sheet\" role=\"group\" aria-labelledby=\"", "\">", "</div>"],
+  _tmpl$13 = ["<span class=\"", "\"><button type=\"button\" class=\"k2b-avatar-stack__trigger\"", " aria-haspopup=\"dialog\"", ">", "</button><div", " popover=\"auto\" role=\"dialog\"", " class=\"k2b-avatar-stack__popover\">", "</div></span>"],
+  _tmpl$14 = ["<span class=\"k2b-avatar-stack__custom\" aria-hidden=\"true\">", "</span>"];
 import { createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show } from "solid-js";
 import { dropdownPosition } from "../actions/Dropdown";
 import { prefersMenuSheet } from "../actions/menu-sheet";
@@ -136,6 +138,49 @@ const PeopleList = props => [_$ssr(_tmpl$0, _$ssrAttribute("id", _$escape(props.
     return _$ssr(_tmpl$1, _$escape(props.hint));
   }
 })];
+/**
+ * The stack's faces and "+n" without its button or list, for a row or link that is already interactive. The faces
+ * are decorative: name the people in the surrounding label or a tooltip.
+ */
+export function AvatarFaces(props) {
+  const messages = useAvatarMessages();
+  const max = () => Math.max(1, props.max ?? 3);
+  const shown = () => props.people.slice(0, max());
+  const more = () => Math.max(0, Math.max(props.total ?? 0, props.people.length) - shown().length);
+  return [_$ssr(_tmpl$10, _$ssrAttribute("data-faces-size", props.size === "md" ? "md" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return shown();
+    },
+    children: person => _$createComponent(Avatar, {
+      get name() {
+        return person.name;
+      },
+      get src() {
+        return person.src;
+      },
+      get icon() {
+        return person.icon;
+      },
+      get shape() {
+        return person.shape;
+      },
+      get tone() {
+        return person.tone;
+      },
+      size: "xs",
+      alt: ""
+    })
+  }))), _$createComponent(Show, {
+    get when() {
+      return more() > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$11, _$ssrAttribute("title", _$escape(messages().moreCount({
+        count: more()
+      }), true), false), _$escape(more()));
+    }
+  })];
+}
 
 /**
  * A few overlapping faces, then "+n", as one button. It opens the full list of people beside it, or as a bottom sheet
@@ -143,7 +188,6 @@ const PeopleList = props => [_$ssr(_tmpl$0, _$ssrAttribute("id", _$escape(props.
  */
 export function AvatarStack(props) {
   const locale = useLocale();
-  const messages = useAvatarMessages();
   const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-");
   const popoverId = `k2b-avatar-stack-${id}`;
   const titleId = `${popoverId}-title`;
@@ -154,9 +198,6 @@ export function AvatarStack(props) {
   const disposed = new AbortController();
   onCleanup(() => disposed.abort());
   const faces = () => props.people.filter(person => !person.self);
-  const max = () => Math.max(1, props.max ?? 3);
-  const shown = () => faces().slice(0, max());
-  const more = () => Math.max(0, faces().length - max());
   const place = () => {
     const rect = dropdownPosition(trigger.getBoundingClientRect(), popover.getBoundingClientRect(), "bottom-left", {
       width: window.innerWidth,
@@ -194,7 +235,7 @@ export function AvatarStack(props) {
           get children() {
             return _$createComponent(BottomSheet.Body, {
               get children() {
-                return _$ssr(_tmpl$10, `${_$escape(titleId, true)}-sheet`, _$escape(_$createComponent(PeopleList, {
+                return _$ssr(_tmpl$12, `${_$escape(titleId, true)}-sheet`, _$escape(_$createComponent(PeopleList, {
                   get people() {
                     return props.people;
                   },
@@ -237,34 +278,22 @@ export function AvatarStack(props) {
     popover.showPopover();
     place();
   };
-  return _$ssr(_tmpl$12, `k2b-avatar-stack ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(popoverId, true), false), _$escape(_$createComponent(For, {
-    get each() {
-      return shown();
-    },
-    children: person => _$createComponent(Avatar, {
-      get name() {
-        return person.name;
-      },
-      get src() {
-        return person.src;
-      },
-      get icon() {
-        return person.icon;
-      },
-      get shape() {
-        return person.shape;
-      },
-      size: "xs",
-      alt: ""
-    })
-  })), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$13, `k2b-avatar-stack ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(popoverId, true), false), _$escape(_$createComponent(Show, {
     get when() {
-      return more() > 0;
+      return props.trigger === undefined;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$14, _$escape(props.trigger));
     },
     get children() {
-      return _$ssr(_tmpl$11, _$ssrAttribute("title", _$escape(messages().moreCount({
-        count: more()
-      }), true), false), _$escape(more()));
+      return _$createComponent(AvatarFaces, {
+        get people() {
+          return faces();
+        },
+        get max() {
+          return props.max;
+        }
+      });
     }
   })), _$ssrAttribute("id", _$escape(popoverId, true), false), _$ssrAttribute("aria-labelledby", _$escape(titleId, true), false), _$escape(_$createComponent(PeopleList, {
     get people() {

package/dist/ssr/surfaces/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/AvatarStack.tsx"],"sourcesContent":["import { createMemo, createSignal, createUniqueId, For, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { dropdownPosition } from \"../actions/Dropdown\";\nimport { prefersMenuSheet } from \"../actions/menu-sheet\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider, useLocale } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport { Avatar, type AvatarShape } from \"./Avatar\";\nimport { useAvatarMessages } from \"./avatar-messages\";\n\nexport type AvatarStackPerson = {\n  /** Stable key, such as the account id. */\n  id: string;\n  name: string;\n  src?: string | null;\n  /** Shown instead of initials when there is no picture. */\n  icon?: string;\n  /** `square` for agents and service accounts. */\n  shape?: AvatarShape;\n  /** A short tag after the name, such as \"Agent\". */\n  badge?: JSX.Element;\n  /** One line below the name; it ends with an ellipsis instead of wrapping. */\n  detail?: JSX.Element;\n  /** Icon class before `detail`. */\n  detailIcon?: string;\n  /** Short text at the end of the row, such as \"2 tabs\". */\n  trailing?: JSX.Element;\n  /** The person viewing: listed last, below a gap, and never in the stack. */\n  self?: boolean;\n  /** Makes the row a button. The list closes first. */\n  onSelect?: () => void;\n};\n\nexport type AvatarStackProps = {\n  people: readonly AvatarStackPerson[];\n  /** Title of the list that the stack opens, such as \"Here now\". */\n  title: string;\n  /** Accessible name of the stack button, such as \"Here now: Jana Berger and 2 more\". */\n  label: string;\n  /** One quiet line below the list. */\n  hint?: JSX.Element;\n  /** Faces before \"+n\". Defaults to 3. */\n  max?: number;\n  class?: string;\n};\n\nconst PersonRows = (props: { people: readonly AvatarStackPerson[]; choose: (person: AvatarStackPerson) => void }): JSX.Element => {\n  let list!: HTMLUListElement;\n  /**\n   * A focused row that stops being a button (the person can no longer be chosen) or leaves hands focus to the nearest\n   * row that still is one, else to the list, so focus never drops out of the open list.\n   */\n  const keepFocus = (button: HTMLButtonElement) => {\n    if (!button.contains(document.activeElement)) return;\n    const buttons = Array.from(list.querySelectorAll<HTMLButtonElement>(\"button.k2b-avatar-stack__row\"));\n    const index = buttons.indexOf(button);\n    const candidates = [...buttons.slice(index + 1), ...buttons.slice(0, Math.max(0, index)).reverse()];\n    queueMicrotask(() => {\n      if (!list.isConnected) return;\n      (candidates.find((candidate) => candidate.isConnected) ?? list).focus();\n    });\n  };\n  const others = () => props.people.filter((person) => !person.self);\n  const selves = () => props.people.filter((person) => person.self);\n  // A row reads its person through an accessor, so a live update changes the row in place and a focused row keeps focus.\n  const row = (person: () => AvatarStackPerson) => {\n    const content = (\n      <>\n        <Avatar name={person().name} src={person().src} icon={person().icon} shape={person().shape} size=\"sm\" />\n        <span class=\"k2b-avatar-stack__row-copy\">\n          <span class=\"k2b-avatar-stack__row-name\">\n            <span>{person().name}</span>\n            <Show when={person().badge}>\n              <span class=\"k2b-avatar-stack__row-badge\">{person().badge}</span>\n            </Show>\n          </span>\n          <Show when={person().detail}>\n            <span class=\"k2b-avatar-stack__row-detail\">\n              <Show when={person().detailIcon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n              <span>{person().detail}</span>\n            </span>\n          </Show>\n        </span>\n        <Show when={person().trailing}>\n          <span class=\"k2b-avatar-stack__row-trailing\">{person().trailing}</span>\n        </Show>\n      </>\n    );\n    return (\n      <li data-self={person().self ? \"true\" : undefined}>\n        <Show when={Boolean(person().onSelect)} fallback={<div class=\"k2b-avatar-stack__row\">{content}</div>}>\n          {(() => {\n            let button!: HTMLButtonElement;\n            // Browser only: a server render never mounts the button.\n            onMount(() => onCleanup(() => keepFocus(button)));\n            return (\n              <button ref={button} type=\"button\" class=\"k2b-avatar-stack__row\" onClick={() => props.choose(person())}>\n                {content}\n              </button>\n            );\n          })()}\n        </Show>\n      </li>\n    );\n  };\n  // Rows follow each person by id: a row stays with its person when others leave or the order changes, and still\n  // shows that person's latest details.\n  const byId = createMemo(() => new Map(props.people.map((person) => [person.id, person])));\n  const keyed = (id: string) => row(() => byId().get(id) ?? { id, name: \"\" });\n  return (\n    <ul ref={list} class=\"k2b-avatar-stack__rows\" tabIndex={-1}>\n      <For each={others().map((person) => person.id)}>{keyed}</For>\n      <For each={selves().map((person) => person.id)}>{keyed}</For>\n    </ul>\n  );\n};\n\nconst PeopleList = (props: {\n  people: readonly AvatarStackPerson[];\n  title: string;\n  titleId: string;\n  hint?: JSX.Element;\n  choose: (person: AvatarStackPerson) => void;\n}): JSX.Element => (\n  <>\n    <header class=\"k2b-avatar-stack__header\">\n      <h3 id={props.titleId}>{props.title}</h3>\n      <span class=\"k2b-count-chip\">{props.people.length}</span>\n    </header>\n    <PersonRows people={props.people} choose={props.choose} />\n    <Show when={props.hint}>\n      <p class=\"k2b-avatar-stack__hint\">{props.hint}</p>\n    </Show>\n  </>\n);\n\n/**\n * A few overlapping faces, then \"+n\", as one button. It opens the full list of people beside it, or as a bottom sheet\n * on phones. People with `self` are listed last and never shown in the stack.\n */\nexport function AvatarStack(props: AvatarStackProps): JSX.Element {\n  const locale = useLocale();\n  const messages = useAvatarMessages();\n  const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const popoverId = `k2b-avatar-stack-${id}`;\n  const titleId = `${popoverId}-title`;\n  const [open, setOpen] = createSignal(false);\n  let trigger!: HTMLButtonElement;\n  let popover!: HTMLDivElement;\n  let sheetOpen = false;\n  const disposed = new AbortController();\n  onCleanup(() => disposed.abort());\n\n  const faces = () => props.people.filter((person) => !person.self);\n  const max = () => Math.max(1, props.max ?? 3);\n  const shown = () => faces().slice(0, max());\n  const more = () => Math.max(0, faces().length - max());\n\n  const place = () => {\n    const rect = dropdownPosition(trigger.getBoundingClientRect(), popover.getBoundingClientRect(), \"bottom-left\", {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    popover.style.left = `${rect.left}px`;\n    popover.style.top = `${rect.top}px`;\n  };\n  // Like a dropdown menu, the open list follows its trigger when the window resizes or scrolls, and its own size.\n  let resizeObserver: ResizeObserver | undefined;\n  const follow = (on: boolean) => {\n    const method = on ? \"addEventListener\" : \"removeEventListener\";\n    window[method](\"resize\", place);\n    window[method](\"scroll\", place, true);\n    if (on && typeof ResizeObserver !== \"undefined\") {\n      resizeObserver ??= new ResizeObserver(place);\n      resizeObserver.observe(popover);\n    } else resizeObserver?.disconnect();\n  };\n  // Only the browser ever follows; a server render has no window to let go of.\n  onMount(() => onCleanup(() => follow(false)));\n\n  const openSheet = () => {\n    if (sheetOpen) return;\n    sheetOpen = true;\n    setOpen(true);\n    let chosen: AvatarStackPerson | undefined;\n    const current = locale();\n    void dialogCore\n      .open<void>(\n        (close, context) => (\n          <LocaleProvider locale={current}>\n            <BottomSheet onDismiss={context.requestDismiss}>\n              <BottomSheet.Body>\n                <div class=\"k2b-avatar-stack__sheet\" role=\"group\" aria-labelledby={`${titleId}-sheet`}>\n                  <PeopleList\n                    people={props.people}\n                    title={props.title}\n                    titleId={`${titleId}-sheet`}\n                    hint={props.hint}\n                    choose={(person) => {\n                      chosen = person;\n                      close();\n                    }}\n                  />\n                </div>\n              </BottomSheet.Body>\n            </BottomSheet>\n          </LocaleProvider>\n        ),\n        { ...bottomSheetOptions, ariaLabel: props.title, history: true, signal: disposed.signal },\n      )\n      .then(() => chosen?.onSelect?.())\n      .finally(() => {\n        sheetOpen = false;\n        setOpen(false);\n      });\n  };\n\n  const toggle = () => {\n    if (prefersMenuSheet()) {\n      openSheet();\n      return;\n    }\n    if (popover.matches(\":popover-open\")) {\n      popover.hidePopover();\n      return;\n    }\n    popover.showPopover();\n    place();\n  };\n\n  return (\n    <span class={`k2b-avatar-stack ${props.class ?? \"\"}`}>\n      <button\n        ref={trigger}\n        type=\"button\"\n        class=\"k2b-avatar-stack__trigger\"\n        aria-label={props.label}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open()}\n        aria-controls={popoverId}\n        onClick={toggle}\n      >\n        <span class=\"k2b-avatar-stack__faces\" aria-hidden=\"true\">\n          <For each={shown()}>\n            {(person) => <Avatar name={person.name} src={person.src} icon={person.icon} shape={person.shape} size=\"xs\" alt=\"\" />}\n          </For>\n        </span>\n        <Show when={more() > 0}>\n          <span class=\"k2b-avatar-stack__more\" aria-hidden=\"true\" title={messages().moreCount({ count: more() })}>\n            +{more()}\n          </span>\n        </Show>\n      </button>\n      <div\n        ref={popover}\n        id={popoverId}\n        popover=\"auto\"\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        class=\"k2b-avatar-stack__popover\"\n        onToggle={(event) => {\n          const next = (event as ToggleEvent).newState === \"open\";\n          setOpen(next);\n          follow(next);\n          if (!next && document.activeElement && popover.contains(document.activeElement)) trigger.focus();\n        }}\n      >\n        <PeopleList\n          people={props.people}\n          title={props.title}\n          titleId={titleId}\n          hint={props.hint}\n          choose={(person) => {\n            if (open()) popover.hidePopover();\n            person.onSelect?.();\n          }}\n        />\n      </div>\n    </span>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/AvatarStack.tsx"],"sourcesContent":["import { createMemo, createSignal, createUniqueId, For, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { dropdownPosition } from \"../actions/Dropdown\";\nimport { prefersMenuSheet } from \"../actions/menu-sheet\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider, useLocale } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport { Avatar, type AvatarShape, type AvatarTone } from \"./Avatar\";\nimport { useAvatarMessages } from \"./avatar-messages\";\n\nexport type AvatarStackPerson = {\n  /** Stable key, such as the account id. */\n  id: string;\n  name: string;\n  src?: string | null;\n  /** Shown instead of initials when there is no picture. */\n  icon?: string;\n  /** `square` for agents and service accounts. */\n  shape?: AvatarShape;\n  /** A short tag after the name, such as \"Agent\". */\n  badge?: JSX.Element;\n  /** One line below the name; it ends with an ellipsis instead of wrapping. */\n  detail?: JSX.Element;\n  /** Icon class before `detail`. */\n  detailIcon?: string;\n  /** Short text at the end of the row, such as \"2 tabs\". */\n  trailing?: JSX.Element;\n  /** The person viewing: listed last, below a gap, and never in the stack. */\n  self?: boolean;\n  /** Makes the row a button. The list closes first. */\n  onSelect?: () => void;\n};\n\nexport type AvatarStackProps = {\n  people: readonly AvatarStackPerson[];\n  /** Title of the list that the stack opens, such as \"Here now\". */\n  title: string;\n  /** Accessible name of the stack button, such as \"Here now: Jana Berger and 2 more\". */\n  label: string;\n  /** One quiet line below the list. */\n  hint?: JSX.Element;\n  /** Faces before \"+n\". Defaults to 3. */\n  max?: number;\n  /** What the button shows instead of the faces, such as a \"+n\" chip and the viewer's own chip. */\n  trigger?: JSX.Element;\n  class?: string;\n};\n\nconst PersonRows = (props: { people: readonly AvatarStackPerson[]; choose: (person: AvatarStackPerson) => void }): JSX.Element => {\n  let list!: HTMLUListElement;\n  /**\n   * A focused row that stops being a button (the person can no longer be chosen) or leaves hands focus to the nearest\n   * row that still is one, else to the list, so focus never drops out of the open list.\n   */\n  const keepFocus = (button: HTMLButtonElement) => {\n    if (!button.contains(document.activeElement)) return;\n    const buttons = Array.from(list.querySelectorAll<HTMLButtonElement>(\"button.k2b-avatar-stack__row\"));\n    const index = buttons.indexOf(button);\n    const candidates = [...buttons.slice(index + 1), ...buttons.slice(0, Math.max(0, index)).reverse()];\n    queueMicrotask(() => {\n      if (!list.isConnected) return;\n      (candidates.find((candidate) => candidate.isConnected) ?? list).focus();\n    });\n  };\n  const others = () => props.people.filter((person) => !person.self);\n  const selves = () => props.people.filter((person) => person.self);\n  // A row reads its person through an accessor, so a live update changes the row in place and a focused row keeps focus.\n  const row = (person: () => AvatarStackPerson) => {\n    const content = (\n      <>\n        <Avatar name={person().name} src={person().src} icon={person().icon} shape={person().shape} size=\"sm\" />\n        <span class=\"k2b-avatar-stack__row-copy\">\n          <span class=\"k2b-avatar-stack__row-name\">\n            <span>{person().name}</span>\n            <Show when={person().badge}>\n              <span class=\"k2b-avatar-stack__row-badge\">{person().badge}</span>\n            </Show>\n          </span>\n          <Show when={person().detail}>\n            <span class=\"k2b-avatar-stack__row-detail\">\n              <Show when={person().detailIcon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n              <span>{person().detail}</span>\n            </span>\n          </Show>\n        </span>\n        <Show when={person().trailing}>\n          <span class=\"k2b-avatar-stack__row-trailing\">{person().trailing}</span>\n        </Show>\n      </>\n    );\n    return (\n      <li data-self={person().self ? \"true\" : undefined}>\n        <Show when={Boolean(person().onSelect)} fallback={<div class=\"k2b-avatar-stack__row\">{content}</div>}>\n          {(() => {\n            let button!: HTMLButtonElement;\n            // Browser only: a server render never mounts the button.\n            onMount(() => onCleanup(() => keepFocus(button)));\n            return (\n              <button ref={button} type=\"button\" class=\"k2b-avatar-stack__row\" onClick={() => props.choose(person())}>\n                {content}\n              </button>\n            );\n          })()}\n        </Show>\n      </li>\n    );\n  };\n  // Rows follow each person by id: a row stays with its person when others leave or the order changes, and still\n  // shows that person's latest details.\n  const byId = createMemo(() => new Map(props.people.map((person) => [person.id, person])));\n  const keyed = (id: string) => row(() => byId().get(id) ?? { id, name: \"\" });\n  return (\n    <ul ref={list} class=\"k2b-avatar-stack__rows\" tabIndex={-1}>\n      <For each={others().map((person) => person.id)}>{keyed}</For>\n      <For each={selves().map((person) => person.id)}>{keyed}</For>\n    </ul>\n  );\n};\n\nconst PeopleList = (props: {\n  people: readonly AvatarStackPerson[];\n  title: string;\n  titleId: string;\n  hint?: JSX.Element;\n  choose: (person: AvatarStackPerson) => void;\n}): JSX.Element => (\n  <>\n    <header class=\"k2b-avatar-stack__header\">\n      <h3 id={props.titleId}>{props.title}</h3>\n      <span class=\"k2b-count-chip\">{props.people.length}</span>\n    </header>\n    <PersonRows people={props.people} choose={props.choose} />\n    <Show when={props.hint}>\n      <p class=\"k2b-avatar-stack__hint\">{props.hint}</p>\n    </Show>\n  </>\n);\n\nexport type AvatarFacesPerson = Pick<AvatarStackPerson, \"name\" | \"src\" | \"icon\" | \"shape\"> & { tone?: AvatarTone };\n\nexport type AvatarFacesProps = {\n  people: readonly AvatarFacesPerson[];\n  /** Faces before \"+n\". Defaults to 3. */\n  max?: number;\n  /** Everyone the faces stand for when `people` lists only some of them; \"+n\" counts the rest. */\n  total?: number;\n  /** `sm` (default) matches the stack button; `md` suits a row or table cell whose text the faces stand beside. */\n  size?: \"sm\" | \"md\";\n};\n\n/**\n * The stack's faces and \"+n\" without its button or list, for a row or link that is already interactive. The faces\n * are decorative: name the people in the surrounding label or a tooltip.\n */\nexport function AvatarFaces(props: AvatarFacesProps): JSX.Element {\n  const messages = useAvatarMessages();\n  const max = () => Math.max(1, props.max ?? 3);\n  const shown = () => props.people.slice(0, max());\n  const more = () => Math.max(0, Math.max(props.total ?? 0, props.people.length) - shown().length);\n  return (\n    <>\n      <span class=\"k2b-avatar-stack__faces\" data-faces-size={props.size === \"md\" ? \"md\" : undefined} aria-hidden=\"true\">\n        <For each={shown()}>\n          {(person) => (\n            <Avatar name={person.name} src={person.src} icon={person.icon} shape={person.shape} tone={person.tone} size=\"xs\" alt=\"\" />\n          )}\n        </For>\n      </span>\n      <Show when={more() > 0}>\n        <span class=\"k2b-avatar-stack__more\" aria-hidden=\"true\" title={messages().moreCount({ count: more() })}>\n          +{more()}\n        </span>\n      </Show>\n    </>\n  );\n}\n\n/**\n * A few overlapping faces, then \"+n\", as one button. It opens the full list of people beside it, or as a bottom sheet\n * on phones. People with `self` are listed last and never shown in the stack.\n */\nexport function AvatarStack(props: AvatarStackProps): JSX.Element {\n  const locale = useLocale();\n  const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const popoverId = `k2b-avatar-stack-${id}`;\n  const titleId = `${popoverId}-title`;\n  const [open, setOpen] = createSignal(false);\n  let trigger!: HTMLButtonElement;\n  let popover!: HTMLDivElement;\n  let sheetOpen = false;\n  const disposed = new AbortController();\n  onCleanup(() => disposed.abort());\n\n  const faces = () => props.people.filter((person) => !person.self);\n\n  const place = () => {\n    const rect = dropdownPosition(trigger.getBoundingClientRect(), popover.getBoundingClientRect(), \"bottom-left\", {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    popover.style.left = `${rect.left}px`;\n    popover.style.top = `${rect.top}px`;\n  };\n  // Like a dropdown menu, the open list follows its trigger when the window resizes or scrolls, and its own size.\n  let resizeObserver: ResizeObserver | undefined;\n  const follow = (on: boolean) => {\n    const method = on ? \"addEventListener\" : \"removeEventListener\";\n    window[method](\"resize\", place);\n    window[method](\"scroll\", place, true);\n    if (on && typeof ResizeObserver !== \"undefined\") {\n      resizeObserver ??= new ResizeObserver(place);\n      resizeObserver.observe(popover);\n    } else resizeObserver?.disconnect();\n  };\n  // Only the browser ever follows; a server render has no window to let go of.\n  onMount(() => onCleanup(() => follow(false)));\n\n  const openSheet = () => {\n    if (sheetOpen) return;\n    sheetOpen = true;\n    setOpen(true);\n    let chosen: AvatarStackPerson | undefined;\n    const current = locale();\n    void dialogCore\n      .open<void>(\n        (close, context) => (\n          <LocaleProvider locale={current}>\n            <BottomSheet onDismiss={context.requestDismiss}>\n              <BottomSheet.Body>\n                <div class=\"k2b-avatar-stack__sheet\" role=\"group\" aria-labelledby={`${titleId}-sheet`}>\n                  <PeopleList\n                    people={props.people}\n                    title={props.title}\n                    titleId={`${titleId}-sheet`}\n                    hint={props.hint}\n                    choose={(person) => {\n                      chosen = person;\n                      close();\n                    }}\n                  />\n                </div>\n              </BottomSheet.Body>\n            </BottomSheet>\n          </LocaleProvider>\n        ),\n        { ...bottomSheetOptions, ariaLabel: props.title, history: true, signal: disposed.signal },\n      )\n      .then(() => chosen?.onSelect?.())\n      .finally(() => {\n        sheetOpen = false;\n        setOpen(false);\n      });\n  };\n\n  const toggle = () => {\n    if (prefersMenuSheet()) {\n      openSheet();\n      return;\n    }\n    if (popover.matches(\":popover-open\")) {\n      popover.hidePopover();\n      return;\n    }\n    popover.showPopover();\n    place();\n  };\n\n  return (\n    <span class={`k2b-avatar-stack ${props.class ?? \"\"}`}>\n      <button\n        ref={trigger}\n        type=\"button\"\n        class=\"k2b-avatar-stack__trigger\"\n        aria-label={props.label}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open()}\n        aria-controls={popoverId}\n        onClick={toggle}\n      >\n        <Show\n          when={props.trigger === undefined}\n          fallback={\n            <span class=\"k2b-avatar-stack__custom\" aria-hidden=\"true\">\n              {props.trigger}\n            </span>\n          }\n        >\n          <AvatarFaces people={faces()} max={props.max} />\n        </Show>\n      </button>\n      <div\n        ref={popover}\n        id={popoverId}\n        popover=\"auto\"\n        role=\"dialog\"\n        aria-labelledby={titleId}\n        class=\"k2b-avatar-stack__popover\"\n        onToggle={(event) => {\n          const next = (event as ToggleEvent).newState === \"open\";\n          setOpen(next);\n          follow(next);\n          if (!next && document.activeElement && popover.contains(document.activeElement)) trigger.focus();\n        }}\n      >\n        <PeopleList\n          people={props.people}\n          title={props.title}\n          titleId={titleId}\n          hint={props.hint}\n          choose={(person) => {\n            if (open()) popover.hidePopover();\n            person.onSelect?.();\n          }}\n        />\n      </div>\n    </span>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/surfaces/ChangeList.js

@@ -0,0 +1,37 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<ul class=\"", "\"", ">", "</ul>"],
+  _tmpl$2 = ["<span class=\"k2b-change-list__detail\">", "</span>"],
+  _tmpl$3 = ["<li class=\"k2b-change-list__item\"", "><i class=\"", "\" aria-hidden=\"true\"></i><span class=\"k2b-change-list__text\"><span>", "</span>", "</span></li>"];
+import { For, Show } from "solid-js";
+
+/** `add` gains something, `change` alters it, `remove` takes it away, `neutral` names a setting. */
+
+const DEFAULT_ICONS = {
+  add: "ti ti-plus",
+  change: "ti ti-arrows-exchange",
+  remove: "ti ti-minus",
+  neutral: "ti ti-point",
+  warning: "ti ti-alert-triangle"
+};
+
+/** Pending changes before they are saved, one line each, so a person can check them in one look. */
+export function ChangeList(props) {
+  return _$ssr(_tmpl$, `k2b-change-list ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return props.items;
+    },
+    children: item => _$ssr(_tmpl$3, _$ssrAttribute("data-tone", _$escape(item.tone, true), false), `${_$escape(item.icon ?? DEFAULT_ICONS[item.tone], true)} k2b-change-list__icon`, _$escape(item.content), _$escape(_$createComponent(Show, {
+      get when() {
+        return item.detail;
+      },
+      get children() {
+        return _$ssr(_tmpl$2, _$escape(item.detail));
+      }
+    })))
+  })));
+}
+export default ChangeList;
+//# sourceMappingURL=ChangeList.js.map

package/dist/ssr/surfaces/ChangeList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["surfaces/ChangeList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\n\n/** `add` gains something, `change` alters it, `remove` takes it away, `neutral` names a setting. */\nexport type ChangeTone = \"add\" | \"change\" | \"remove\" | \"neutral\" | \"warning\";\n\nexport type ChangeListItem = {\n  tone: ChangeTone;\n  /** A Tabler icon class; defaults to plus, arrows or minus by tone. */\n  icon?: string;\n  content: JSX.Element;\n  /** One quiet line under the content, such as what the change means for others. */\n  detail?: JSX.Element;\n};\n\nexport type ChangeListProps = {\n  items: readonly ChangeListItem[];\n  /** Names the list for assistive technology, such as \"What changes\". */\n  label: string;\n  class?: string;\n};\n\nconst DEFAULT_ICONS: Record<ChangeTone, string> = {\n  add: \"ti ti-plus\",\n  change: \"ti ti-arrows-exchange\",\n  remove: \"ti ti-minus\",\n  neutral: \"ti ti-point\",\n  warning: \"ti ti-alert-triangle\",\n};\n\n/** Pending changes before they are saved, one line each, so a person can check them in one look. */\nexport function ChangeList(props: ChangeListProps): JSX.Element {\n  return (\n    <ul class={`k2b-change-list ${props.class ?? \"\"}`} aria-label={props.label}>\n      <For each={props.items}>\n        {(item) => (\n          <li class=\"k2b-change-list__item\" data-tone={item.tone}>\n            <i class={`${item.icon ?? DEFAULT_ICONS[item.tone]} k2b-change-list__icon`} aria-hidden=\"true\" />\n            <span class=\"k2b-change-list__text\">\n              <span>{item.content}</span>\n              <Show when={item.detail}>\n                <span class=\"k2b-change-list__detail\">{item.detail}</span>\n              </Show>\n            </span>\n          </li>\n        )}\n      </For>\n    </ul>\n  );\n}\n\nexport default ChangeList;\n"],"mappings":";;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;;AAE9C;;AAmBA,MAAM,aAAyC,GAAG;EAChD,GAAG,EAAE,YAAY;EACjB,MAAM,EAAE,uBAAuB;EAC/B,MAAM,EAAE,aAAa;EACrB,OAAO,EAAE,aAAa;EACtB,OAAO,EAAE;AACX,CAAC;;AAED;AACA,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D,qBACa,4BAAmB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,wCAAc,KAAK,CAAC,KAAK,4CACvE,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,UAClB,IAAI,wDACyC,IAAI,CAAC,IAAI,iBAC1C,YAAG,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,+BAAwB,WAEjE,IAAI,CAAC,OAAO,8BAClB,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,IAAI,CAAC,MAAM;MAAA;MAAA;QAAA,+BACkB,IAAI,CAAC,MAAM;MAAA;IAAA;EAIzD;AAIT;AAEA,eAAe,UAAU","ignoreList":[]}

package/dist/ssr/surfaces/index.js

@@ -1,5 +1,6 @@
 export { Avatar } from "./Avatar";
-export { AvatarStack } from "./AvatarStack";
+export { AvatarFaces, AvatarStack } from "./AvatarStack";
+export { ChangeList } from "./ChangeList";
 export { DescriptionList } from "./DescriptionList";
 export { DotStrip } from "./DotStrip";
 export { LinkCard } from "./LinkCard";

package/dist/ssr/surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarStack } from \"./AvatarStack\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { DotStripProps, DotStripTone } from \"./DotStrip\";\nexport { DotStrip } from \"./DotStrip\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport { PERSON_COLORS, personColor } from \"./person-color\";\nexport type { ResourceCardColor, ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport { Skeleton, type SkeletonProps } from \"./Skeleton\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB;AAE3D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,QAAQ,QAA4B,YAAY;AAEzD,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarTone } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarFacesPerson, AvatarFacesProps, AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarFaces, AvatarStack } from \"./AvatarStack\";\nexport type { ChangeListItem, ChangeListProps, ChangeTone } from \"./ChangeList\";\nexport { ChangeList } from \"./ChangeList\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { DotStripProps, DotStripTone } from \"./DotStrip\";\nexport { DotStrip } from \"./DotStrip\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport { PERSON_COLORS, personColor } from \"./person-color\";\nexport type { ResourceCardColor, ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport { Skeleton, type SkeletonProps } from \"./Skeleton\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,EAAE,WAAW,QAAQ,eAAe;AAExD,SAAS,UAAU,QAAQ,cAAc;AAEzC,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB;AAE3D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,QAAQ,QAA4B,YAAY;AAEzD,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}