@linxin666/dsh-usage 0.4.10 → 0.4.11

package/src/client/usage.module.css

@@ -3,17 +3,29 @@
    section reads on light and dark themes alike. */
 
 .section {
+  container-name: usage-section;
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
   gap: 16px;
+  min-width: 0;
   color: inherit;
 }
 
 .header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 8px 16px;
+}
+
+.headerActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
 }
 
 .currentProvider {
@@ -50,39 +62,40 @@
   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
 }
 
-.tabs {
-  display: flex;
-  gap: 4px;
-  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+/* The page card (PluginSettingsCard) sits in a bare list, as on the sibling
+   Web Extensions pages. */
+.sectionList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.tab {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 13px;
-  padding: 6px 14px;
-  cursor: pointer;
-  opacity: 0.65;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
+/* The statistics tabs ride the family's segmented track
+   (settings-card.module.css), spread across the card. */
+.tabs {
+  display: flex;
+  align-self: stretch;
 }
 
-.tab:hover {
-  opacity: 0.9;
+.tabs > .tab {
+  flex: 1 1 0;
+  min-width: max-content;
+  text-align: center;
 }
 
-.tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
+/* The display rows close the card body under a quiet heading, above the
+   hairline the rows draw between themselves. */
+.settingsGroup {
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
 }
 
-.tabActive {
-  opacity: 1;
+.groupTitle {
+  margin: 0 0 2px;
+  font-size: 12px;
   font-weight: 600;
-  border-bottom-color: currentColor;
+  opacity: 0.6;
 }
 
 .card {
@@ -135,27 +148,30 @@
    control's background, so an unset option background falls back to the
    browser's own (light) list surface while the option text still inherits the
    section's light text color — light text on a light list, unreadable on a
-   dark skin. Both the day picker and the settings-row select therefore give
-   their option list one explicit surface/label pair, read from the tokens the
+   dark skin. The day picker therefore gives its option list one explicit
+   surface/label pair, read from the tokens the
    platform and the skins ship (a skin that omits the surface token falls back
    to the platform's, a host with no theme layer to Canvas). Text and
    background always travel together, per theme half. */
-.daySelect option,
-.settingItem select option {
+.daySelect option {
   background-color: var(--dsw-alias-bg-multi-select, Canvas);
   color: var(--dsw-alias-label-primary, CanvasText);
 }
 
 .statRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
 }
 
 .stat {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
+  min-width: 0;
+  padding: 9px 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 4%, transparent);
 }
 
 .statValue {
@@ -218,9 +234,31 @@
 /* 近 30 天提供方/模型条形图：provider 行主导（条宽按窗口内最大 provider
    归一），模型子行缩进细条（行内归一）。 */
 .chart {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px 20px;
+}
+
+.usageSummaryGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.trendAxis {
+  grid-column: 1 / -1;
+}
+
+@container usage-section (max-width: 680px) {
+  .usageSummaryGrid,
+  .chart {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .statRow {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .chartProvider {
@@ -384,52 +422,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.settingsGrid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
-
-.settingItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.settingItem input[type='checkbox'] {
-  accent-color: currentColor;
-}
-
-.settingItem input[type='number'] {
-  width: 90px;
-  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
-  border-radius: 6px;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 13px;
-  padding: 3px 8px;
-}
-
-.settingItem select {
-  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
-  border-radius: 6px;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 13px;
-  padding: 3px 8px;
-}
-
-.settingItem input:focus-visible,
-.settingItem select:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
-}
-
-
 /* ---------------------------------------------------------------------------
    Sidebar foot card: the compact usage glance the mount seats as the shell
    foot area's last child, directly below the Settings row. The chrome is an

package/src/client/web-extension-page.ts

@@ -0,0 +1,151 @@
+// Generated by scripts/sync-shared.mjs from shared/client/settings/web-extension-page.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * One settings page's seat in either the Web Extensions parent or the legacy
+ * first-level settings navigation.
+ *
+ * The parent supplies the page contract; a child does not know which slot the
+ * parent uses internally. While `webUiExtensions` is live the page is handed
+ * to its service, which owns keyed mounting and disposal. Without the parent,
+ * the same component registers as its original first-level settings section,
+ * so a standalone install keeps a working entry.
+ */
+
+/** The parent service face this helper consumes. */
+export interface WebExtensionPageService {
+  readonly sectionId: string
+  registerPage(page: WebExtensionPageSeat): () => void
+}
+
+/** Seat-independent page contribution. */
+export interface WebExtensionPageSeat {
+  key: string
+  order: number
+  locale: string
+  label(): string
+  inject(): object
+  component: unknown
+  children?: Record<string, { kind: 'keyed' | 'list'; scope: 'root' }>
+}
+
+/** The slot-registry slice used for the standalone fallback. */
+export interface WebExtensionPageSlots {
+  register(options: never, component: never): unknown
+  spec?(key: string): unknown
+  entries?(key: string): readonly { component?: unknown; options: Record<string, unknown> }[]
+}
+
+/** The context slice needed by the migration. */
+export interface WebExtensionPageContext {
+  slots: WebExtensionPageSlots
+  get?(name: string): unknown
+  on?(event: string, listener: () => void): unknown
+}
+
+const SETTINGS_SECTION = 'settings.section'
+const WEB_EXTENSION_SLOT = 'web-ui.extension'
+
+function serviceOf(ctx: WebExtensionPageContext): WebExtensionPageService | undefined {
+  if (typeof ctx.get !== 'function') return undefined
+  try {
+    const candidate = ctx.get('webUiExtensions') as Partial<WebExtensionPageService> | undefined
+    return candidate !== null
+      && typeof candidate === 'object'
+      && typeof candidate.sectionId === 'string'
+      && typeof candidate.registerPage === 'function'
+      ? candidate as WebExtensionPageService
+      : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function warn(seat: string, error: unknown): void {
+  try {
+    console.warn(`[dsh-web-settings] page "${seat}" could not be mounted`, error)
+  } catch {
+    // A restricted console must not drop the remaining entry.
+  }
+}
+
+/**
+ * Keep exactly one reachable page contribution while the parent loads or
+ * unloads. The parent service owns integrated mounting; only the fallback uses
+ * this plugin's own slot registry. Slot disposal is synchronous, so the latch
+ * prevents a move from recursively registering a duplicate.
+ */
+export function installWebExtensionPage(
+  ctx: WebExtensionPageContext,
+  page: WebExtensionPageSeat,
+): () => void {
+  let dispose: (() => void) | undefined
+  let current: 'integrated' | 'legacy' | undefined
+  let reconciling = false
+  let disposed = false
+
+  const present = (seat: 'integrated' | 'legacy'): boolean => {
+    if (typeof ctx.slots.entries !== 'function') return current === seat
+    const slot = seat === 'integrated' ? WEB_EXTENSION_SLOT : SETTINGS_SECTION
+    return ctx.slots.entries(slot).some(entry =>
+      entry.component === page.component
+      && (seat === 'integrated' ? entry.options.key : entry.options.id) === page.key)
+  }
+
+  const registerSeat = (seat: 'integrated' | 'legacy'): (() => void) => {
+    if (seat === 'integrated') {
+      const service = serviceOf(ctx)
+      if (service === undefined) throw new Error('webUiExtensions service is unavailable')
+      return service.registerPage(page)
+    }
+    return ctx.slots.register({
+      name: SETTINGS_SECTION,
+      id: page.key,
+      order: page.order,
+      label: page.label,
+      locale: page.locale,
+      inject: page.inject as never,
+      ...(page.children === undefined ? {} : { children: page.children }),
+    } as never, page.component as never) as () => void
+  }
+
+  const reconcile = (): void => {
+    if (disposed || reconciling) return
+    const target: 'integrated' | 'legacy' = serviceOf(ctx) === undefined ? 'legacy' : 'integrated'
+    if (current === target && present(target)) return
+    const slot = target === 'integrated' ? WEB_EXTENSION_SLOT : SETTINGS_SECTION
+    if (typeof ctx.slots.spec === 'function' && ctx.slots.spec(slot) === undefined) return
+    reconciling = true
+    const previous = current
+    const disposePrevious = dispose
+    current = undefined
+    dispose = undefined
+    disposePrevious?.()
+    try {
+      dispose = registerSeat(target)
+      current = target
+    } catch (error) {
+      warn(target, error)
+      if (previous !== undefined && previous !== target) {
+        try {
+          dispose = registerSeat(previous)
+          current = previous
+        } catch (restoreError) {
+          warn(previous, restoreError)
+        }
+      }
+    } finally {
+      reconciling = false
+    }
+  }
+
+  if (typeof ctx.on === 'function') {
+    try { ctx.on('slots/changed', reconcile) } catch { /* the initial entry remains usable */ }
+  }
+  reconcile()
+  return () => {
+    if (disposed) return
+    disposed = true
+    dispose?.()
+    dispose = undefined
+    current = undefined
+  }
+}