@pilotiq/pilotiq 0.1.0

package/src/RightPanel.test.ts

@@ -0,0 +1,202 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { Pilotiq } from './Pilotiq.js'
+import { panelInfo } from './pageData.js'
+import {
+  RIGHT_PANEL_DEFAULT_WIDTH,
+  RIGHT_PANEL_MAX_WIDTH,
+  RIGHT_PANEL_MIN_WIDTH,
+  type RightPanelContribution,
+} from './RightPanel.js'
+
+// Renderer references aren't shipped over the wire — so any callable
+// stand-in works for tests that only inspect meta.
+const noopBody = (() => null) as unknown as RightPanelContribution['render']
+
+describe('Pilotiq.rightPanel — registration + validation', () => {
+  it('registers a single contribution and exposes it via getRightPanels', () => {
+    const panel = Pilotiq.make('T').rightPanel({ id: 'a', render: noopBody })
+    assert.equal(panel.getRightPanels().length, 1)
+    assert.equal(panel.getRightPanels()[0]?.id, 'a')
+  })
+
+  it('rightPanels([…]) registers each in array order', () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'one', render: noopBody },
+      { id: 'two', render: noopBody },
+      { id: 'three', render: noopBody },
+    ])
+    assert.deepEqual(panel.getRightPanels().map((c) => c.id), ['one', 'two', 'three'])
+  })
+
+  it('rejects duplicate ids at boot', () => {
+    const panel = Pilotiq.make('T').rightPanel({ id: 'dup', render: noopBody })
+    assert.throws(
+      () => panel.rightPanel({ id: 'dup', render: noopBody }),
+      /already registered/,
+    )
+  })
+
+  it('rejects empty / non-string / pattern-violating ids', () => {
+    assert.throws(
+      () => Pilotiq.make('T').rightPanel({ id: '', render: noopBody }),
+      /missing an id/,
+    )
+    assert.throws(
+      () => Pilotiq.make('T').rightPanel({ id: 'has spaces', render: noopBody }),
+      /contains characters outside/,
+    )
+    assert.throws(
+      () => Pilotiq.make('T').rightPanel({ id: 'tab/strip', render: noopBody }),
+      /contains characters outside/,
+    )
+  })
+
+  it('rejects defaultWidth outside the [min, max] range', () => {
+    assert.throws(
+      () => Pilotiq.make('T').rightPanel({ id: 'a', render: noopBody, defaultWidth: 100 }),
+      /defaultWidth=100 outside/,
+    )
+    assert.throws(
+      () => Pilotiq.make('T').rightPanel({ id: 'a', render: noopBody, defaultWidth: 1200 }),
+      /defaultWidth=1200 outside/,
+    )
+  })
+
+  it('accepts the boundary widths', () => {
+    assert.doesNotThrow(() => Pilotiq.make('T').rightPanel({
+      id: 'min', render: noopBody, defaultWidth: RIGHT_PANEL_MIN_WIDTH,
+    }))
+    assert.doesNotThrow(() => Pilotiq.make('T').rightPanel({
+      id: 'max', render: noopBody, defaultWidth: RIGHT_PANEL_MAX_WIDTH,
+    }))
+  })
+
+  it('rejects a missing render component', () => {
+    assert.throws(
+      () => Pilotiq.make('T').rightPanel({ id: 'a' } as unknown as RightPanelContribution),
+      /missing a `render`/,
+    )
+  })
+})
+
+describe('panelInfo() — RightSidebar meta (sparse + sorted + gated)', () => {
+  it('omits rightSidebar when no contributions are registered', async () => {
+    const info = await panelInfo(Pilotiq.make('T'))
+    assert.equal((info as { rightSidebar?: unknown }).rightSidebar, undefined)
+  })
+
+  it('ships sparse panel-level baseline width when contributions are present', async () => {
+    const panel = Pilotiq.make('T').rightPanel({ id: 'a', label: 'Pane A', render: noopBody })
+    const info = await panelInfo(panel)
+    const rs = (info as { rightSidebar?: { panels: unknown[]; defaultWidth: number; minWidth: number; maxWidth: number } }).rightSidebar
+    assert.ok(rs)
+    assert.equal(rs.panels.length, 1)
+    assert.equal(rs.minWidth, RIGHT_PANEL_MIN_WIDTH)
+    assert.equal(rs.maxWidth, RIGHT_PANEL_MAX_WIDTH)
+    assert.equal(rs.defaultWidth, RIGHT_PANEL_DEFAULT_WIDTH)
+  })
+
+  it('per-contribution defaultWidth rolls into RightPanelMeta.defaultWidth', async () => {
+    const panel = Pilotiq.make('T').rightPanel({
+      id: 'narrow', render: noopBody, defaultWidth: 280,
+    })
+    const info = await panelInfo(panel)
+    const rs = (info as { rightSidebar?: { panels: { defaultWidth: number }[]; defaultWidth: number } }).rightSidebar!
+    assert.equal(rs.panels[0]?.defaultWidth, 280)
+    // sidebar-level default rolls up from the first contribution's value
+    assert.equal(rs.defaultWidth, 280)
+  })
+
+  it('label defaults to id when absent', async () => {
+    const panel = Pilotiq.make('T').rightPanel({ id: 'unnamed', render: noopBody })
+    const info = await panelInfo(panel)
+    const rs = (info as { rightSidebar?: { panels: { id: string; label: string }[] } }).rightSidebar!
+    assert.equal(rs.panels[0]?.label, 'unnamed')
+  })
+
+  it('sorts contributions by `sort` ascending; registration order ties', async () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'd', render: noopBody, sort: 50 },   // earliest sort → first
+      { id: 'a', render: noopBody },              // default 100, registered 2nd
+      { id: 'b', render: noopBody },              // default 100, registered 3rd
+      { id: 'c', render: noopBody, sort: 25 },   // earliest sort → first overall
+    ])
+    const info = await panelInfo(panel)
+    const ids = (info as { rightSidebar: { panels: { id: string }[] } }).rightSidebar.panels.map((p) => p.id)
+    assert.deepEqual(ids, ['c', 'd', 'a', 'b'])
+  })
+
+  it('canAccess gate drops contributions when the predicate returns false', async () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'public',   render: noopBody },
+      { id: 'admin',    render: noopBody, canAccess: () => false },
+    ])
+    const info = await panelInfo(panel)
+    const rs = (info as { rightSidebar: { panels: { id: string }[] } }).rightSidebar
+    assert.deepEqual(rs.panels.map((p) => p.id), ['public'])
+  })
+
+  it('canAccess can be async and is awaited', async () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'maybe', render: noopBody, canAccess: async () => true },
+      { id: 'no',    render: noopBody, canAccess: async () => false },
+    ])
+    const info = await panelInfo(panel)
+    const ids = (info as { rightSidebar: { panels: { id: string }[] } }).rightSidebar.panels.map((p) => p.id)
+    assert.deepEqual(ids, ['maybe'])
+  })
+
+  it('throwing canAccess fails closed without taking down siblings', async () => {
+    const orig = console.warn
+    const swallowed: unknown[] = []
+    console.warn = (...args: unknown[]) => { swallowed.push(args) }
+    try {
+      const panel = Pilotiq.make('T').rightPanels([
+        { id: 'flaky',  render: noopBody, canAccess: () => { throw new Error('boom') } },
+        { id: 'survivor', render: noopBody },
+      ])
+      const info = await panelInfo(panel)
+      const ids = (info as { rightSidebar: { panels: { id: string }[] } }).rightSidebar.panels.map((p) => p.id)
+      assert.deepEqual(ids, ['survivor'])
+      assert.ok(swallowed.length === 1, 'one warn emitted')
+    } finally {
+      console.warn = orig
+    }
+  })
+
+  it('returns null rightSidebar when every contribution is gated out', async () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'a', render: noopBody, canAccess: () => false },
+      { id: 'b', render: noopBody, canAccess: () => false },
+    ])
+    const info = await panelInfo(panel)
+    assert.equal((info as { rightSidebar?: unknown }).rightSidebar, undefined)
+  })
+
+  it('returns null rightSidebar when every contribution is hidden', async () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'a', render: noopBody, hidden: true },
+      { id: 'b', render: noopBody, hidden: true },
+    ])
+    const info = await panelInfo(panel)
+    assert.equal((info as { rightSidebar?: unknown }).rightSidebar, undefined)
+  })
+
+  it('hidden contributions are dropped from the tab strip but visible neighbours stay', async () => {
+    const panel = Pilotiq.make('T').rightPanels([
+      { id: 'visible', render: noopBody },
+      { id: 'silent',  render: noopBody, hidden: true },
+    ])
+    const info = await panelInfo(panel)
+    const ids = (info as { rightSidebar: { panels: { id: string }[] } }).rightSidebar.panels.map((p) => p.id)
+    assert.deepEqual(ids, ['visible'])
+  })
+
+  it('serializes a string-typed icon verbatim onto RightPanelMeta', async () => {
+    const panel = Pilotiq.make('T').rightPanel({ id: 'a', icon: 'sparkles', render: noopBody })
+    const info = await panelInfo(panel)
+    const meta = (info as { rightSidebar: { panels: { icon?: unknown }[] } }).rightSidebar.panels[0]!
+    assert.equal(meta.icon, 'sparkles')
+  })
+})

package/src/RightPanel.ts

@@ -0,0 +1,132 @@
+/**
+ * Right-sidebar plugin contributions.
+ *
+ * The right sidebar is a panel-level surface (mirroring `userMenuItems`
+ * / `databaseNotifications` in shape) that plugins register panes on.
+ * Pilotiq core ships the chrome — collapse toggle, drag-to-resize, tab
+ * strip when 2+ contributions, mobile sheet fallback, keyboard shortcut.
+ * Each contribution provides only its body.
+ *
+ * Wire shape (`RightPanelMeta` / `RightSidebarMeta`) lives in
+ * `pageData.ts` next to `DatabaseNotificationsMeta`. The React component
+ * reference (`render`) does not serialize over the wire — it rides
+ * through the Vite plugin's `_components.ts` manifest keyed by `id`,
+ * same posture as component-typed Resource icons.
+ *
+ * @see docs/plans/right-sidebar.md
+ */
+
+import type { ComponentType } from 'react'
+import type { IconValue } from './icons/types.js'
+
+/**
+ * Body component contract. The component receives runtime context the
+ * surrounding chrome already knows about — base path, current pathname,
+ * the active contribution id — so plugin authors don't have to plumb it
+ * separately.
+ *
+ * Plugins that need richer state (chat session, presence cache) wrap
+ * their own provider around the body internally; pilotiq doesn't
+ * prescribe one.
+ */
+export interface RightPanelProps {
+  /** Path-prefix the panel is mounted under (matches `AppShell.basePath`). */
+  basePath: string
+  /** Live pathname — re-renders on SPA navigation so panes can react to
+   *  which page the user is on (record id, resource slug, etc). */
+  currentPath?: string
+  /** Active contribution id (this contribution's `id` when mounted).
+   *  Useful for consumers that share a single context across multiple
+   *  registered panes. */
+  activeId: string
+}
+
+export interface RightPanelContribution {
+  /** Stable id (e.g. `'ai.chat'`). Doubles as the localStorage key
+   *  segment for `activeId` and the tab strip's discriminator. Must
+   *  match `^[A-Za-z0-9_.-]+$`; uniqueness enforced at boot. */
+  id: string
+  /** Tab strip label. Defaults to `id` when absent. */
+  label?: string
+  /** Tab strip icon (registry name OR component). */
+  icon?: IconValue
+  /** Body component. Pilotiq's Vite plugin keys it under `id` in the
+   *  emitted `_components.ts` manifest so the client looks it up at
+   *  mount time without shipping the component reference over the wire. */
+  render: ComponentType<RightPanelProps>
+  /** Default open width in px. Clamped to [240, 800]; defaults to 360. */
+  defaultWidth?: number
+  /**
+   * Optional auth gate — runs through `panelInfo()` per request. Mirrors
+   * `Resource.canAccess` shape: opaque user, sync or async, throwing →
+   * fail-closed (contribution dropped silently).
+   */
+  canAccess?: (user: unknown) => boolean | Promise<boolean>
+  /**
+   * Hide from the tab strip without unregistering. Useful for "trigger
+   * only" panes opened programmatically by another plugin's affordance.
+   * Default `false`.
+   */
+  hidden?: boolean
+  /** Tab strip ordering hint — lower first. Defaults to 100; ties break
+   *  by registration order. */
+  sort?: number
+}
+
+/** Minimum/maximum width (px) the chrome will allow on resize. */
+export const RIGHT_PANEL_MIN_WIDTH = 240
+export const RIGHT_PANEL_MAX_WIDTH = 800
+export const RIGHT_PANEL_DEFAULT_WIDTH = 360
+
+const ID_PATTERN = /^[A-Za-z0-9_.-]+$/
+
+/**
+ * Validate one contribution at registration time. Catches the obvious
+ * boot-time foot-guns (bad id, missing render) so a misconfigured panel
+ * fails on `Pilotiq.make(...)` rather than on first request.
+ *
+ * @internal
+ */
+export function validateRightPanel(contribution: RightPanelContribution): void {
+  if (typeof contribution.id !== 'string' || contribution.id.length === 0) {
+    throw new Error(
+      `[Pilotiq] rightPanel: contribution is missing an id. ` +
+      `Pass \`{ id: 'my-pane', render: Component }\`.`,
+    )
+  }
+  if (!ID_PATTERN.test(contribution.id)) {
+    throw new Error(
+      `[Pilotiq] rightPanel: id "${contribution.id}" contains characters outside ` +
+      `[A-Za-z0-9_.-]. The id rides in localStorage keys and the meta wire shape.`,
+    )
+  }
+  if (typeof contribution.render !== 'function' && typeof contribution.render !== 'object') {
+    throw new Error(
+      `[Pilotiq] rightPanel: contribution "${contribution.id}" is missing a \`render\` ` +
+      `component. Pass a React component (function or forwardRef object).`,
+    )
+  }
+  if (contribution.defaultWidth !== undefined) {
+    const w = contribution.defaultWidth
+    if (typeof w !== 'number' || !Number.isFinite(w) || w < RIGHT_PANEL_MIN_WIDTH || w > RIGHT_PANEL_MAX_WIDTH) {
+      throw new Error(
+        `[Pilotiq] rightPanel: contribution "${contribution.id}" has defaultWidth=${w} ` +
+        `outside the [${RIGHT_PANEL_MIN_WIDTH}, ${RIGHT_PANEL_MAX_WIDTH}] range.`,
+      )
+    }
+  }
+}
+
+/**
+ * Detect duplicate ids across an arrival contribution and the
+ * already-registered set. Caller throws — keeps the error message
+ * formatting in one place.
+ *
+ * @internal
+ */
+export function findDuplicateRightPanelId(
+  registered: readonly RightPanelContribution[],
+  arriving: RightPanelContribution,
+): RightPanelContribution | undefined {
+  return registered.find((c) => c.id === arriving.id)
+}

package/src/Tab.test.ts

@@ -0,0 +1,91 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { ListTab } from './Tab.js'
+
+describe('ListTab', () => {
+  it('toMeta emits type=listTab with name/label/active=false/url defaults', () => {
+    const meta = ListTab.make('drafts').label('Drafts').toMeta()
+    assert.equal(meta.type,   'listTab')
+    assert.equal(meta.name,   'drafts')
+    assert.equal(meta.label,  'Drafts')
+    assert.equal(meta.active, false)
+    assert.equal(meta.url,    '?tab=drafts')
+  })
+
+  it('label defaults to capitalized name when not set', () => {
+    const meta = ListTab.make('archived').toMeta()
+    assert.equal(meta.label, 'Archived')
+  })
+
+  it('icon round-trips on the meta', () => {
+    const meta = ListTab.make('published').icon('check-circle').toMeta()
+    assert.equal(meta.icon, 'check-circle')
+  })
+
+  it('static badge round-trips on the meta', () => {
+    const meta = ListTab.make('drafts').badge('5').toMeta()
+    assert.equal(meta.badge, '5')
+  })
+
+  it('badge handler is exposed for parallel resolution; static badge becomes resolved', async () => {
+    const tab = ListTab.make('drafts').badge(async () => 7)
+    assert.equal(typeof tab.getBadgeHandler(), 'function')
+    assert.equal(tab.getStaticBadge(), undefined)
+    const v = await tab.getBadgeHandler()!()
+    assert.equal(v, 7)
+  })
+
+  it('badgeColor round-trips on the meta', () => {
+    const meta = ListTab.make('drafts').badge('5').badgeColor('warning').toMeta()
+    assert.equal(meta.badgeColor, 'warning')
+  })
+
+  it('isDefault flips when default() is called', () => {
+    const tab = ListTab.make('all')
+    assert.equal(tab.isDefault(), false)
+    tab.default()
+    assert.equal(tab.isDefault(), true)
+  })
+
+  it('modifyQuery / modifyContext round-trip via getQuery / getContextFn', () => {
+    const qFn   = ((q: unknown) => q) as never
+    const ctxFn = ((c: unknown) => c) as never
+    const tab = ListTab.make('drafts').modifyQuery(qFn).modifyContext(ctxFn)
+    assert.equal(tab.getQuery(), qFn)
+    assert.equal(tab.getContextFn(), ctxFn)
+  })
+
+  it('withActive / withResolvedBadge / withUrl populate render-time state', () => {
+    const tab = ListTab.make('drafts')
+      .withActive()
+      .withResolvedBadge('12')
+      .withUrl('/admin/articles?tab=drafts')
+    const meta = tab.toMeta()
+    assert.equal(meta.active, true)
+    assert.equal(meta.badge,  '12')
+    assert.equal(meta.url,    '/admin/articles?tab=drafts')
+  })
+
+  it('withResolvedBadge(undefined) clears a previously-stamped badge', () => {
+    const tab = ListTab.make('drafts').badge('static').withResolvedBadge('12')
+    assert.equal(tab.toMeta().badge, '12')
+    tab.withResolvedBadge(undefined)
+    // Falls back to the static badge.
+    assert.equal(tab.toMeta().badge, 'static')
+  })
+
+  it('isActive reflects withActive state', () => {
+    const tab = ListTab.make('drafts')
+    assert.equal(tab.isActive(), false)
+    tab.withActive()
+    assert.equal(tab.isActive(), true)
+    tab.withActive(false)
+    assert.equal(tab.isActive(), false)
+  })
+
+  it('encodes special chars in the default url', () => {
+    const meta = ListTab.make('with space').toMeta()
+    assert.equal(meta.url, '?tab=with%20space')
+  })
+})

package/src/Tab.ts

@@ -0,0 +1,156 @@
+import { Element, type ElementMeta } from './schema/Element.js'
+import type { ModelQuery } from './orm/modelDefaults.js'
+import type { TableContext } from './elements/Table.js'
+
+/** Color preset for the tab's count badge. Maps to the same palette as
+ * `BadgeColumn` so a "Drafts (5)" badge can be tinted warning/destructive
+ * etc. without inventing a new color system. */
+export type TabBadgeColor =
+  | 'default'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'destructive'
+  | 'info'
+
+/** Server-side counter callback. Resolved in parallel during the page-data
+ * pass (see `pageData.resourceIndexData`). Returns `undefined` to omit the
+ * badge for this render — handy for "show count only when non-zero". */
+export type TabBadgeHandler = () =>
+  | string
+  | number
+  | undefined
+  | Promise<string | number | undefined>
+
+/** ORM query customizer. Same shape as `Filter.query()` so tab predicates
+ * compose into the same `ModelQuery` chain inside `modelTableRecords`. */
+export type TabQueryHandler = (query: ModelQuery) => ModelQuery
+
+/** TableContext customizer for resources that don't use the model adapter.
+ * Applied to the context before user-supplied `Table.records(fn)` runs. */
+export type TabContextHandler = (ctx: TableContext) => TableContext
+
+/** Serialized shape — what the renderer reads. */
+export interface ListTabMeta extends ElementMeta {
+  type:        'listTab'
+  name:        string
+  label:       string
+  icon?:       string
+  badge?:      string
+  badgeColor?: TabBadgeColor
+  /** True when this tab matches the URL's `?tab=` query (or is the default
+   * when the param is absent). The renderer uses this to mark the trigger
+   * with `data-active`. */
+  active:      boolean
+  /** Pre-built URL for this tab — already includes `?tab=name` plus any
+   * other carry-forward query params (search/sort/filters). The renderer
+   * uses this directly so the tab strip is just `<a href>` triggers. */
+  url:         string
+}
+
+/**
+ * Single list-page tab — a query-shortcut + count-badge primitive that
+ * sits in a `ListTabs` strip above the table on a resource list page.
+ * Distinct from the form-side `Tab` (under `Tabs.make().tabs([…])`) which
+ * holds form-children rather than narrowing a query.
+ *
+ * @example
+ * ListTab.make('drafts')
+ *   .label('Drafts')
+ *   .badge(() => prisma.article.count({ where: { status: 'draft' } }))
+ *   .badgeColor('warning')
+ *   .modifyQuery(q => q.where('status', 'draft'))
+ */
+export class ListTab extends Element {
+  readonly name: string
+  protected _label?:        string
+  protected _icon?:         string
+  protected _badge?:        string | TabBadgeHandler
+  protected _badgeColor?:   TabBadgeColor
+  protected _default        = false
+  protected _queryFn?:      TabQueryHandler
+  protected _contextFn?:    TabContextHandler
+
+  // Render-time state — populated by the framework before serialization.
+  protected _active         = false
+  protected _resolvedBadge?: string
+  protected _url?:           string
+
+  protected constructor(name: string) {
+    super()
+    this.name = name
+  }
+
+  static make(name: string): ListTab {
+    return new ListTab(name)
+  }
+
+  // ─── Builder ──────────────────────────────────────────
+
+  label(l: string): this { this._label = l; return this }
+  icon(i: string): this { this._icon = i; return this }
+
+  /** Static string OR server-side callback (`() => Promise<string|number>`).
+   * Callbacks resolve in parallel with the table's `records()` handler. */
+  badge(b: string | TabBadgeHandler): this { this._badge = b; return this }
+
+  badgeColor(c: TabBadgeColor): this { this._badgeColor = c; return this }
+
+  /** Mark this tab as the default (when `?tab=` is absent). Without this
+   * flag, the first tab in `getTabs()` is the default. */
+  default(): this { this._default = true; return this }
+
+  /** ORM query customizer — chained into `modelTableRecords` next to
+   * `Filter.query()`. Receives the running `ModelQuery` and returns the
+   * modified query (e.g. `q => q.where('status', 'draft')`). */
+  modifyQuery(fn: TabQueryHandler): this { this._queryFn = fn; return this }
+
+  /** TableContext customizer — escape hatch for resources whose
+   * `Table.records(fn)` reads a custom field off `ctx`. Most users want
+   * `modifyQuery`. */
+  modifyContext(fn: TabContextHandler): this { this._contextFn = fn; return this }
+
+  // ─── Render-time setters ─────────────────────────────
+
+  withActive(v = true): this { this._active = v; return this }
+  withResolvedBadge(s: string | undefined): this {
+    if (s === undefined) delete this._resolvedBadge
+    else                 this._resolvedBadge = s
+    return this
+  }
+  withUrl(s: string): this { this._url = s; return this }
+
+  // ─── Getters ─────────────────────────────────────────
+
+  getLabel(): string {
+    return this._label ?? this.name.charAt(0).toUpperCase() + this.name.slice(1)
+  }
+  isDefault(): boolean { return this._default }
+  isActive(): boolean { return this._active }
+  getBadgeHandler(): TabBadgeHandler | undefined {
+    return typeof this._badge === 'function' ? this._badge : undefined
+  }
+  getStaticBadge(): string | undefined {
+    return typeof this._badge === 'string' ? this._badge : undefined
+  }
+  getQuery(): TabQueryHandler | undefined { return this._queryFn }
+  getContextFn(): TabContextHandler | undefined { return this._contextFn }
+
+  // ─── Element contract ────────────────────────────────
+
+  override getType(): string { return 'listTab' }
+
+  override toMeta(): ListTabMeta {
+    const badge = this._resolvedBadge ?? this.getStaticBadge()
+    return {
+      type:   'listTab',
+      name:   this.name,
+      label:  this.getLabel(),
+      active: this._active,
+      url:    this._url ?? `?tab=${encodeURIComponent(this.name)}`,
+      ...(this._icon       !== undefined ? { icon:       this._icon       } : {}),
+      ...(badge            !== undefined ? { badge                        } : {}),
+      ...(this._badgeColor !== undefined ? { badgeColor: this._badgeColor } : {}),
+    }
+  }
+}