@ds-mo/ui 16.1.0 → 16.1.2

package/dist/mcp-data/registry/table.json

@@ -943,9 +943,21 @@
         }
       ],
       "slots": [
+        {
+          "name": "alternate-view"
+        },
         {
           "name": "error-actions",
           "description": "Application-owned recovery controls below the initial error message."
+        },
+        {
+          "name": "footer"
+        },
+        {
+          "name": "footer-leading"
+        },
+        {
+          "name": "footer-trailing"
         }
       ]
     },
@@ -1652,9 +1664,21 @@
       }
     ],
     "slots": [
+      {
+        "name": "alternate-view"
+      },
       {
         "name": "error-actions",
         "description": "Application-owned recovery controls below the initial error message."
+      },
+      {
+        "name": "footer"
+      },
+      {
+        "name": "footer-leading"
+      },
+      {
+        "name": "footer-trailing"
       }
     ],
     "exports": {
@@ -1775,7 +1799,7 @@
     },
     {
       "path": "src/wc/components/Table/table-group-load-controller.ts",
-      "content": "import type {\n  DataGroup,\n  TableGroupLoadMoreDetail,\n  TableLoadMoreMode,\n  TableLoadMoreReason,\n} from './table-types';\n\nexport interface TableGroupLoadControllerState {\n  enabled: boolean;\n  loadMoreMode: TableLoadMoreMode;\n  loadMoreThreshold: number;\n  containedScroll: boolean;\n  groups: DataGroup[];\n  viewport: HTMLElement | null;\n  sentinels: ReadonlyMap<string, HTMLElement>;\n  loadingMoreLabel: string;\n  endOfResultsLabel: string;\n  rowsLoadedLabel: string;\n}\n\nexport interface TableGroupLoadControllerOptions {\n  state: () => TableGroupLoadControllerState;\n  announce: (message: string) => void;\n  request: (detail: TableGroupLoadMoreDetail) => void;\n}\n\ninterface GroupSnapshot {\n  count: number;\n  hasMore: boolean;\n  loading: boolean;\n  error: string;\n  identity: string | number;\n}\n\nfunction groupIdentity(group: DataGroup): string | number {\n  return group.loadIdentity ?? group.id;\n}\n\nfunction formatGroupLabel(template: string, group: DataGroup, count?: number): string {\n  return template\n    .split('{group}')\n    .join(group.label)\n    .split('{count}')\n    .join(String(count ?? group.rows.length))\n    .split('{loaded}')\n    .join(String(group.rows.length))\n    .split('{total}')\n    .join(String(group.totalCount ?? group.rows.length));\n}\n\n/** Owns request guards, announcements, and observation for independently loaded groups. */\nexport class TableGroupLoadController {\n  readonly intersectionSupported = typeof IntersectionObserver !== 'undefined';\n\n  private connected = false;\n  private intersectionObserver: IntersectionObserver | null = null;\n  private snapshots = new Map<string, GroupSnapshot>();\n  private pending = new Map<string, { identity: string | number; count: number }>();\n\n  constructor(private readonly options: TableGroupLoadControllerOptions) {}\n\n  initialize(): void {\n    this.snapshots = this.createSnapshots();\n  }\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    this.disconnectObserver();\n  }\n\n  refresh(): void {\n    if (!this.connected) return;\n    const state = this.options.state();\n    if (\n      !state.enabled ||\n      state.loadMoreMode !== 'auto' ||\n      !this.intersectionSupported ||\n      !state.viewport\n    ) {\n      this.disconnectObserver();\n      return;\n    }\n\n    this.disconnectObserver();\n    const threshold = Number.isFinite(state.loadMoreThreshold)\n      ? Math.max(0, state.loadMoreThreshold)\n      : 0;\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting) continue;\n          const groupId = (entry.target as HTMLElement).dataset.groupId;\n          if (groupId) this.request(groupId, 'auto');\n        }\n      },\n      {\n        root: state.containedScroll ? state.viewport : null,\n        rootMargin: `0px 0px ${threshold}px 0px`,\n      }\n    );\n\n    for (const [groupId, sentinel] of state.sentinels) {\n      const group = state.groups.find(item => item.id === groupId);\n      if (!group?.hasMore || group.loadingMore || group.loadMoreError?.trim()) continue;\n      this.intersectionObserver.observe(sentinel);\n    }\n  }\n\n  structureChanged(): void {\n    this.pending.clear();\n    this.snapshots = this.createSnapshots();\n    this.disconnectObserver();\n  }\n\n  dataChanged(): void {\n    const state = this.options.state();\n    const nextSnapshots = new Map<string, GroupSnapshot>();\n\n    for (const group of state.groups) {\n      const next = this.snapshot(group);\n      const previous = this.snapshots.get(group.id);\n      const pending = this.pending.get(group.id);\n\n      if (!previous || previous.identity !== next.identity) {\n        this.pending.delete(group.id);\n      } else {\n        if (next.count > previous.count) {\n          this.options.announce(\n            formatGroupLabel(state.rowsLoadedLabel, group, next.count - previous.count)\n          );\n        }\n        if (!previous.error && next.error) {\n          this.pending.delete(group.id);\n          this.options.announce(next.error);\n        }\n        if (previous.hasMore && !next.hasMore) {\n          this.pending.delete(group.id);\n          this.options.announce(formatGroupLabel(state.endOfResultsLabel, group));\n        }\n        if (pending && next.count > pending.count) this.pending.delete(group.id);\n        if (pending && previous.loading && !next.loading && next.count === pending.count) {\n          this.pending.delete(group.id);\n        }\n      }\n\n      nextSnapshots.set(group.id, next);\n    }\n\n    this.snapshots = nextSnapshots;\n    for (const groupId of this.pending.keys()) {\n      if (!nextSnapshots.has(groupId)) this.pending.delete(groupId);\n    }\n    this.disconnectObserver();\n  }\n\n  configurationChanged(): void {\n    this.disconnectObserver();\n  }\n\n  request(groupId: string, reason: TableLoadMoreReason): void {\n    const state = this.options.state();\n    const group = state.groups.find(item => item.id === groupId);\n    if (\n      !state.enabled ||\n      !group?.hasMore ||\n      group.loadingMore ||\n      (reason !== 'retry' && !!group.loadMoreError?.trim()) ||\n      this.pending.has(groupId)\n    )\n      return;\n\n    const identity = groupIdentity(group);\n    this.pending.set(groupId, { identity, count: group.rows.length });\n    this.options.announce(formatGroupLabel(state.loadingMoreLabel, group));\n    this.options.request({\n      groupId,\n      reason,\n      loadIdentity: identity,\n      loadedRowCount: group.rows.length,\n    });\n  }\n\n  private createSnapshots(): Map<string, GroupSnapshot> {\n    return new Map(this.options.state().groups.map(group => [group.id, this.snapshot(group)]));\n  }\n\n  private snapshot(group: DataGroup): GroupSnapshot {\n    return {\n      count: group.rows.length,\n      hasMore: !!group.hasMore,\n      loading: !!group.loadingMore,\n      error: group.loadMoreError?.trim() ?? '',\n      identity: groupIdentity(group),\n    };\n  }\n\n  private disconnectObserver(): void {\n    this.intersectionObserver?.disconnect();\n    this.intersectionObserver = null;\n  }\n}\n",
+      "content": "import type {\n  DataGroup,\n  TableGroupLoadMoreDetail,\n  TableLoadMoreMode,\n  TableLoadMoreReason,\n} from './table-types';\nimport { TableLoadObserver } from './table-load-observer';\n\nexport interface TableGroupLoadControllerState {\n  enabled: boolean;\n  loadMoreMode: TableLoadMoreMode;\n  loadMoreThreshold: number;\n  containedScroll: boolean;\n  groups: DataGroup[];\n  viewport: HTMLElement | null;\n  sentinels: ReadonlyMap<string, HTMLElement>;\n  loadingMoreLabel: string;\n  endOfResultsLabel: string;\n  rowsLoadedLabel: string;\n}\n\nexport interface TableGroupLoadControllerOptions {\n  state: () => TableGroupLoadControllerState;\n  announce: (message: string) => void;\n  request: (detail: TableGroupLoadMoreDetail) => void;\n}\n\ninterface GroupSnapshot {\n  count: number;\n  hasMore: boolean;\n  loading: boolean;\n  error: string;\n  identity: string | number;\n}\n\nfunction groupIdentity(group: DataGroup): string | number {\n  return group.loadIdentity ?? group.id;\n}\n\nfunction formatGroupLabel(template: string, group: DataGroup, count?: number): string {\n  return template\n    .split('{group}')\n    .join(group.label)\n    .split('{count}')\n    .join(String(count ?? group.rows.length))\n    .split('{loaded}')\n    .join(String(group.rows.length))\n    .split('{total}')\n    .join(String(group.totalCount ?? group.rows.length));\n}\n\n/** Owns request guards, announcements, and observation for independently loaded groups. */\nexport class TableGroupLoadController {\n  readonly intersectionSupported = typeof IntersectionObserver !== 'undefined';\n\n  private connected = false;\n  private readonly observer = new TableLoadObserver(groupId => this.request(groupId, 'auto'));\n  private snapshots = new Map<string, GroupSnapshot>();\n  private pending = new Map<string, { identity: string | number; count: number }>();\n\n  constructor(private readonly options: TableGroupLoadControllerOptions) {}\n\n  initialize(): void {\n    this.snapshots = this.createSnapshots();\n  }\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    this.disconnectObserver();\n  }\n\n  refresh(): void {\n    if (!this.connected) return;\n    const state = this.options.state();\n    if (\n      !state.enabled ||\n      state.loadMoreMode !== 'auto' ||\n      !this.intersectionSupported ||\n      !state.viewport\n    ) {\n      this.disconnectObserver();\n      return;\n    }\n\n    const groups = new Map(state.groups.map(group => [group.id, group]));\n    const targets = new Map<HTMLElement, string>();\n    for (const [groupId, sentinel] of state.sentinels) {\n      const group = groups.get(groupId);\n      if (!group?.hasMore || group.loadingMore || group.loadMoreError?.trim()) continue;\n      targets.set(sentinel, groupId);\n    }\n    this.observer.refresh(\n      targets,\n      state.containedScroll ? state.viewport : null,\n      state.loadMoreThreshold\n    );\n  }\n\n  structureChanged(): void {\n    this.pending.clear();\n    this.snapshots = this.createSnapshots();\n    this.disconnectObserver();\n  }\n\n  dataChanged(): void {\n    const state = this.options.state();\n    const nextSnapshots = new Map<string, GroupSnapshot>();\n\n    for (const group of state.groups) {\n      const next = this.snapshot(group);\n      const previous = this.snapshots.get(group.id);\n      const pending = this.pending.get(group.id);\n\n      if (!previous || previous.identity !== next.identity) {\n        this.pending.delete(group.id);\n      } else {\n        if (next.count > previous.count) {\n          this.options.announce(\n            formatGroupLabel(state.rowsLoadedLabel, group, next.count - previous.count)\n          );\n        }\n        if (!previous.error && next.error) {\n          this.pending.delete(group.id);\n          this.options.announce(next.error);\n        }\n        if (previous.hasMore && !next.hasMore) {\n          this.pending.delete(group.id);\n          this.options.announce(formatGroupLabel(state.endOfResultsLabel, group));\n        }\n        if (pending && next.count > pending.count) this.pending.delete(group.id);\n        if (\n          state.loadMoreMode === 'manual' &&\n          pending &&\n          previous.loading &&\n          !next.loading &&\n          next.count === pending.count\n        ) {\n          // Empty automatic responses must not cause an endless request loop.\n          this.pending.delete(group.id);\n        }\n      }\n\n      nextSnapshots.set(group.id, next);\n    }\n\n    this.snapshots = nextSnapshots;\n    for (const groupId of this.pending.keys()) {\n      if (!nextSnapshots.has(groupId)) this.pending.delete(groupId);\n    }\n    this.disconnectObserver();\n  }\n\n  configurationChanged(): void {\n    this.disconnectObserver();\n  }\n\n  request(groupId: string, reason: TableLoadMoreReason): void {\n    const state = this.options.state();\n    const group = state.groups.find(item => item.id === groupId);\n    if (\n      !state.enabled ||\n      (reason === 'auto' && (!this.connected || state.loadMoreMode !== 'auto')) ||\n      !group?.hasMore ||\n      group.loadingMore ||\n      (reason !== 'retry' && !!group.loadMoreError?.trim()) ||\n      this.pending.has(groupId)\n    )\n      return;\n\n    const identity = groupIdentity(group);\n    this.pending.set(groupId, { identity, count: group.rows.length });\n    this.options.announce(formatGroupLabel(state.loadingMoreLabel, group));\n    this.options.request({\n      groupId,\n      reason,\n      loadIdentity: identity,\n      loadedRowCount: group.rows.length,\n    });\n  }\n\n  private createSnapshots(): Map<string, GroupSnapshot> {\n    return new Map(this.options.state().groups.map(group => [group.id, this.snapshot(group)]));\n  }\n\n  private snapshot(group: DataGroup): GroupSnapshot {\n    return {\n      count: group.rows.length,\n      hasMore: !!group.hasMore,\n      loading: !!group.loadingMore,\n      error: group.loadMoreError?.trim() ?? '',\n      identity: groupIdentity(group),\n    };\n  }\n\n  private disconnectObserver(): void {\n    this.observer.disconnect();\n  }\n}\n",
       "type": "registry:ui"
     },
     {
@@ -1790,7 +1814,12 @@
     },
     {
       "path": "src/wc/components/Table/table-load-controller.ts",
-      "content": "import type { TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason } from './table-types';\n\nexport interface TableLoadControllerState {\n  lazyLoading: boolean;\n  loadMoreMode: TableLoadMoreMode;\n  hasMore: boolean;\n  loadingMore: boolean;\n  loadMoreError: string | undefined;\n  loadIdentity: string | number;\n  loadMoreThreshold: number;\n  containedScroll: boolean;\n  loadingMoreLabel: string;\n  endOfResultsLabel: string;\n  rowsLoadedLabel: string;\n  loadedRowCount: number;\n  viewport: HTMLElement | null;\n  sentinel: HTMLElement | null;\n}\n\nexport interface TableLoadControllerOptions {\n  state: () => TableLoadControllerState;\n  announce: (message: string) => void;\n  request: (detail: TableLoadMoreDetail) => void;\n}\n\n/** Owns incremental-loading request guards, announcements, and observation. */\nexport class TableLoadController {\n  readonly intersectionSupported = typeof IntersectionObserver !== 'undefined';\n\n  private connected = false;\n  private intersectionObserver: IntersectionObserver | null = null;\n  private observedSentinel: HTMLElement | null = null;\n  private requestPending = false;\n  private requestedRowCount = 0;\n  private previousLoadedRowCount = 0;\n\n  constructor(private readonly options: TableLoadControllerOptions) {}\n\n  initialize(): void {\n    this.previousLoadedRowCount = this.options.state().loadedRowCount;\n  }\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    this.disconnectObserver();\n  }\n\n  refresh(): void {\n    if (!this.connected) return;\n    const state = this.options.state();\n    if (\n      !state.lazyLoading ||\n      state.loadMoreMode !== 'auto' ||\n      !state.hasMore ||\n      !!state.loadMoreError?.trim() ||\n      !this.intersectionSupported ||\n      !state.viewport ||\n      !state.sentinel\n    ) {\n      this.disconnectObserver();\n      return;\n    }\n\n    if (this.intersectionObserver && this.observedSentinel === state.sentinel) return;\n    this.disconnectObserver();\n    const threshold = Number.isFinite(state.loadMoreThreshold)\n      ? Math.max(0, state.loadMoreThreshold)\n      : 0;\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries.some(entry => entry.isIntersecting)) this.request('auto');\n      },\n      {\n        root: state.containedScroll ? state.viewport : null,\n        rootMargin: `0px 0px ${threshold}px 0px`,\n      }\n    );\n    this.observedSentinel = state.sentinel;\n    this.intersectionObserver.observe(state.sentinel);\n  }\n\n  structureChanged(): void {\n    this.resetRequest();\n  }\n\n  dataChanged(): void {\n    const state = this.options.state();\n    const nextCount = state.loadedRowCount;\n    if (!state.lazyLoading) {\n      this.previousLoadedRowCount = nextCount;\n      this.resetRequest();\n      return;\n    }\n    if (nextCount > this.previousLoadedRowCount) {\n      const added = nextCount - this.previousLoadedRowCount;\n      this.options.announce(\n        state.rowsLoadedLabel\n          .replace('{count}', String(added))\n          .replace('{total}', String(nextCount))\n      );\n    }\n    if (nextCount > this.requestedRowCount) this.requestPending = false;\n    this.previousLoadedRowCount = nextCount;\n    this.disconnectObserver();\n  }\n\n  identityChanged(): void {\n    this.previousLoadedRowCount = this.options.state().loadedRowCount;\n    this.resetRequest();\n  }\n\n  configurationChanged(): void {\n    this.disconnectObserver();\n  }\n\n  loadingChanged(loading: boolean): void {\n    const state = this.options.state();\n    if (!state.lazyLoading) {\n      this.resetRequest();\n      return;\n    }\n    if (loading) {\n      this.requestPending = true;\n      this.options.announce(state.loadingMoreLabel);\n    } else if (state.loadMoreMode === 'manual') {\n      // A completed manual request may append no rows; permit another explicit activation.\n      this.requestPending = false;\n    }\n    this.disconnectObserver();\n  }\n\n  errorChanged(error: string | undefined): void {\n    if (!this.options.state().lazyLoading) {\n      this.resetRequest();\n      return;\n    }\n    if (error?.trim()) {\n      this.requestPending = false;\n      this.options.announce(error);\n    }\n    this.disconnectObserver();\n  }\n\n  hasMoreChanged(hasMore: boolean, hadMore: boolean): void {\n    if (!this.options.state().lazyLoading) {\n      this.resetRequest();\n      return;\n    }\n    if (!hasMore) {\n      this.requestPending = false;\n      if (hadMore) this.options.announce(this.options.state().endOfResultsLabel);\n    }\n    this.disconnectObserver();\n  }\n\n  request(reason: TableLoadMoreReason): void {\n    const state = this.options.state();\n    if (\n      !state.lazyLoading ||\n      !state.hasMore ||\n      state.loadingMore ||\n      (reason !== 'retry' && !!state.loadMoreError?.trim()) ||\n      this.requestPending\n    )\n      return;\n\n    this.requestPending = true;\n    this.requestedRowCount = state.loadedRowCount;\n    this.options.announce(state.loadingMoreLabel);\n    this.options.request({\n      reason,\n      loadIdentity: state.loadIdentity,\n      loadedRowCount: this.requestedRowCount,\n    });\n  }\n\n  private resetRequest(): void {\n    this.requestPending = false;\n    this.requestedRowCount = this.options.state().loadedRowCount;\n    this.disconnectObserver();\n  }\n\n  private disconnectObserver(): void {\n    this.intersectionObserver?.disconnect();\n    this.intersectionObserver = null;\n    this.observedSentinel = null;\n  }\n}\n",
+      "content": "import type { TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason } from './table-types';\nimport { TableLoadObserver } from './table-load-observer';\n\nexport interface TableLoadControllerState {\n  lazyLoading: boolean;\n  loadMoreMode: TableLoadMoreMode;\n  hasMore: boolean;\n  loadingMore: boolean;\n  loadMoreError: string | undefined;\n  loadIdentity: string | number;\n  loadMoreThreshold: number;\n  containedScroll: boolean;\n  loadingMoreLabel: string;\n  endOfResultsLabel: string;\n  rowsLoadedLabel: string;\n  loadedRowCount: number;\n  viewport: HTMLElement | null;\n  sentinel: HTMLElement | null;\n}\n\nexport interface TableLoadControllerOptions {\n  state: () => TableLoadControllerState;\n  announce: (message: string) => void;\n  request: (detail: TableLoadMoreDetail) => void;\n}\n\n/** Owns incremental-loading request guards, announcements, and observation. */\nexport class TableLoadController {\n  readonly intersectionSupported = typeof IntersectionObserver !== 'undefined';\n\n  private connected = false;\n  private readonly observer = new TableLoadObserver(() => this.request('auto'));\n  private requestPending = false;\n  private requestedRowCount = 0;\n  private previousLoadedRowCount = 0;\n\n  constructor(private readonly options: TableLoadControllerOptions) {}\n\n  initialize(): void {\n    this.previousLoadedRowCount = this.options.state().loadedRowCount;\n  }\n\n  connect(): void {\n    this.connected = true;\n    this.refresh();\n  }\n\n  disconnect(): void {\n    this.connected = false;\n    this.disconnectObserver();\n  }\n\n  refresh(): void {\n    if (!this.connected) return;\n    const state = this.options.state();\n    if (\n      !state.lazyLoading ||\n      state.loadMoreMode !== 'auto' ||\n      !state.hasMore ||\n      !!state.loadMoreError?.trim() ||\n      !this.intersectionSupported ||\n      !state.viewport ||\n      !state.sentinel\n    ) {\n      this.disconnectObserver();\n      return;\n    }\n\n    this.observer.refresh(\n      new Map([[state.sentinel, 'rows']]),\n      state.containedScroll ? state.viewport : null,\n      state.loadMoreThreshold\n    );\n  }\n\n  structureChanged(): void {\n    this.resetRequest();\n  }\n\n  dataChanged(): void {\n    const state = this.options.state();\n    const nextCount = state.loadedRowCount;\n    if (!state.lazyLoading) {\n      this.previousLoadedRowCount = nextCount;\n      this.resetRequest();\n      return;\n    }\n    if (nextCount > this.previousLoadedRowCount) {\n      const added = nextCount - this.previousLoadedRowCount;\n      this.options.announce(\n        state.rowsLoadedLabel\n          .replace('{count}', String(added))\n          .replace('{total}', String(nextCount))\n      );\n    }\n    if (nextCount > this.requestedRowCount) this.requestPending = false;\n    this.previousLoadedRowCount = nextCount;\n    this.disconnectObserver();\n  }\n\n  identityChanged(): void {\n    this.previousLoadedRowCount = this.options.state().loadedRowCount;\n    this.resetRequest();\n  }\n\n  configurationChanged(): void {\n    this.disconnectObserver();\n  }\n\n  loadingChanged(loading: boolean): void {\n    const state = this.options.state();\n    if (!state.lazyLoading) {\n      this.resetRequest();\n      return;\n    }\n    if (loading) {\n      this.requestPending = true;\n      this.options.announce(state.loadingMoreLabel);\n    } else if (state.loadMoreMode === 'manual') {\n      // A completed manual request may append no rows; permit another explicit activation.\n      this.requestPending = false;\n    }\n    this.disconnectObserver();\n  }\n\n  errorChanged(error: string | undefined): void {\n    if (!this.options.state().lazyLoading) {\n      this.resetRequest();\n      return;\n    }\n    if (error?.trim()) {\n      this.requestPending = false;\n      this.options.announce(error);\n    }\n    this.disconnectObserver();\n  }\n\n  hasMoreChanged(hasMore: boolean, hadMore: boolean): void {\n    if (!this.options.state().lazyLoading) {\n      this.resetRequest();\n      return;\n    }\n    if (!hasMore) {\n      this.requestPending = false;\n      if (hadMore) this.options.announce(this.options.state().endOfResultsLabel);\n    }\n    this.disconnectObserver();\n  }\n\n  request(reason: TableLoadMoreReason): void {\n    const state = this.options.state();\n    if (\n      !state.lazyLoading ||\n      (reason === 'auto' && (!this.connected || state.loadMoreMode !== 'auto')) ||\n      !state.hasMore ||\n      state.loadingMore ||\n      (reason !== 'retry' && !!state.loadMoreError?.trim()) ||\n      this.requestPending\n    )\n      return;\n\n    this.requestPending = true;\n    this.requestedRowCount = state.loadedRowCount;\n    this.options.announce(state.loadingMoreLabel);\n    this.options.request({\n      reason,\n      loadIdentity: state.loadIdentity,\n      loadedRowCount: this.requestedRowCount,\n    });\n  }\n\n  private resetRequest(): void {\n    this.requestPending = false;\n    this.requestedRowCount = this.options.state().loadedRowCount;\n    this.disconnectObserver();\n  }\n\n  private disconnectObserver(): void {\n    this.observer.disconnect();\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Table/table-load-observer.ts",
+      "content": "/** Reconciles loading sentinels without rebuilding an observer on every render. */\nexport class TableLoadObserver {\n  private observer: IntersectionObserver | null = null;\n  private targets = new Map<HTMLElement, string>();\n  private root: HTMLElement | null = null;\n  private margin = '';\n  private revision = 0;\n\n  constructor(private readonly intersect: (id: string, target: HTMLElement) => void) {}\n\n  refresh(\n    targets: ReadonlyMap<HTMLElement, string>,\n    root: HTMLElement | null,\n    threshold: number\n  ): void {\n    if (!targets.size) {\n      this.disconnect();\n      return;\n    }\n    const margin = `0px 0px ${Number.isFinite(threshold) ? Math.max(0, threshold) : 0}px 0px`;\n    const reassigned = [...targets].some(\n      ([target, id]) => this.targets.has(target) && this.targets.get(target) !== id\n    );\n    if (this.root !== root || this.margin !== margin || reassigned) this.disconnect();\n    if (!this.observer) {\n      const observer = new IntersectionObserver(\n        entries => {\n          const revision = this.revision;\n          for (const entry of entries) {\n            // Disconnect does not revoke a callback already queued by the browser.\n            // Application callbacks can also invalidate the rest of this delivery.\n            if (this.observer !== observer || revision !== this.revision) return;\n            const target = entry.target as HTMLElement;\n            const id = this.targets.get(target);\n            if (entry.isIntersecting && id !== undefined) this.intersect(id, target);\n          }\n        },\n        { root, rootMargin: margin }\n      );\n      this.observer = observer;\n      this.root = root;\n      this.margin = margin;\n    }\n    const previous = this.targets;\n    let changed = previous.size !== targets.size;\n    for (const [target, id] of previous) {\n      if (targets.get(target) !== id) changed = true;\n      if (!targets.has(target)) this.observer.unobserve(target);\n    }\n    if (changed) this.revision++;\n    this.targets = new Map(targets);\n    for (const target of targets.keys()) {\n      if (!previous.has(target)) this.observer.observe(target);\n    }\n  }\n\n  disconnect(): void {\n    const observer = this.observer;\n    this.observer = null;\n    this.targets.clear();\n    this.root = null;\n    this.margin = '';\n    this.revision++;\n    observer?.disconnect();\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/text.json

@@ -221,7 +221,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        }
+      ]
     },
     "props": {
       "align": {
@@ -332,7 +337,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      }
+    ],
     "exports": {
       "customElement": "ds-text",
       "react": "DsText",

package/dist/mcp-data/registry/tooltip.json

@@ -240,7 +240,12 @@
           "description": "Present against an external anchor the host already measured.\nDoes not bind hover or focus on that anchor — the owner drives show/hide."
         }
       ],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        }
+      ]
     },
     "props": {
       "align": {
@@ -358,7 +363,12 @@
         "description": "Present against an external anchor the host already measured.\nDoes not bind hover or focus on that anchor — the owner drives show/hide."
       }
     ],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      }
+    ],
     "exports": {
       "customElement": "ds-tooltip",
       "react": "DsTooltip",

package/dist/react/react-runtime.js

@@ -6,8 +6,51 @@ import { createComponent as createLitComponent } from '@lit/react';
 export function createComponent({ defineCustomElement, tagName, transformTag, ...options }) {
     defineCustomElement?.();
     const resolvedTagName = transformTag ? transformTag(tagName) : tagName;
-    return createLitComponent({
+    const events = Object.entries(options.events ?? {});
+    const Bridge = createLitComponent({
         ...options,
+        // Own subscriptions so unmount releases application callbacks. Lit retains
+        // ownership of custom-element properties and native React props.
+        events: {},
         tagName: resolvedTagName,
     });
+    if (events.length === 0)
+        return Bridge;
+    const React = options.react;
+    const useBrowserLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+    const Component = React.forwardRef((props, ref) => {
+        const element = React.useRef(null);
+        const elementProps = { ...props };
+        for (const [prop] of events)
+            delete elementProps[prop];
+        useBrowserLayoutEffect(() => {
+            const node = element.current;
+            if (!node)
+                return;
+            const subscriptions = [];
+            for (const [prop, name] of events) {
+                const handler = props[prop];
+                if (typeof handler !== 'function')
+                    continue;
+                const listener = event => handler(event);
+                node.addEventListener(name, listener);
+                subscriptions.push([name, listener]);
+            }
+            return () => {
+                for (const [name, listener] of subscriptions)
+                    node.removeEventListener(name, listener);
+            };
+        });
+        const setRef = React.useCallback((node) => {
+            element.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, [ref]);
+        const bridgeProps = { ...elementProps, ref: setRef };
+        return React.createElement(Bridge, bridgeProps);
+    });
+    Component.displayName = options.displayName ?? resolvedTagName;
+    return Component;
 }

package/dist/types/components/ChartLegend/ChartLegend.d.ts

@@ -22,8 +22,8 @@ export declare class ChartLegend {
     highlightOnHover: boolean;
     /**
      * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
-     * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other
-     * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,
+     * chart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other
+     * rows' swatches while keeping their text fully readable. It never shows the hover-fill,
      * since that's reserved for a real pointer/keyboard interaction on this row.
      */
     activeLabel: string | null;

package/dist/types/components/Table/table-group-load-controller.d.ts

@@ -21,7 +21,7 @@ export declare class TableGroupLoadController {
     private readonly options;
     readonly intersectionSupported: boolean;
     private connected;
-    private intersectionObserver;
+    private readonly observer;
     private snapshots;
     private pending;
     constructor(options: TableGroupLoadControllerOptions);

package/dist/types/components/Table/table-load-controller.d.ts

@@ -25,8 +25,7 @@ export declare class TableLoadController {
     private readonly options;
     readonly intersectionSupported: boolean;
     private connected;
-    private intersectionObserver;
-    private observedSentinel;
+    private readonly observer;
     private requestPending;
     private requestedRowCount;
     private previousLoadedRowCount;

package/dist/types/components/Table/table-load-observer.d.ts

@@ -0,0 +1,13 @@
+/** Reconciles loading sentinels without rebuilding an observer on every render. */
+export declare class TableLoadObserver {
+    private readonly intersect;
+    private observer;
+    private targets;
+    private root;
+    private margin;
+    private revision;
+    constructor(intersect: (id: string, target: HTMLElement) => void);
+    refresh(targets: ReadonlyMap<HTMLElement, string>, root: HTMLElement | null, threshold: number): void;
+    disconnect(): void;
+}
+//# sourceMappingURL=table-load-observer.d.ts.map

package/dist/types/components.d.ts

@@ -1327,7 +1327,7 @@ export namespace Components {
      */
     interface DsChartLegend {
         /**
-          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill, since that's reserved for a real pointer/keyboard interaction on this row.
+          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling chart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other rows' swatches while keeping their text fully readable. It never shows the hover-fill, since that's reserved for a real pointer/keyboard interaction on this row.
           * @default null
          */
         "activeLabel": string | null;
@@ -7245,7 +7245,7 @@ declare global {
     }
 }
 declare namespace LocalJSX {
-    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K]?: never };
 
     interface DsAgentActivity {
         /**
@@ -8483,7 +8483,7 @@ declare namespace LocalJSX {
      */
     interface DsChartLegend {
         /**
-          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill, since that's reserved for a real pointer/keyboard interaction on this row.
+          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling chart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other rows' swatches while keeping their text fully readable. It never shows the hover-fill, since that's reserved for a real pointer/keyboard interaction on this row.
           * @default null
          */
         "activeLabel"?: string | null;