@design.estate/dees-catalog 12.5.0 → 13.0.1

package/ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -19,7 +19,14 @@ import { getEchartsSeriesColors, hexToRgba, getThemeColors } from '../dees-chart
 
 import { systemFontFamily } from '../../00fonts.js';
 
-import type { IChartApi, ISeriesApi, UTCTimestamp, MouseEventParams } from 'lightweight-charts';
+import type {
+  AreaData,
+  IChartApi,
+  ISeriesApi,
+  MouseEventParams,
+  UTCTimestamp,
+  WhitespaceData,
+} from 'lightweight-charts';
 import { DeesServiceLibLoader, type ILightweightChartsBundle } from '../../../services/index.js';
 import '../../00group-layout/dees-tile/dees-tile.js';
 
@@ -27,9 +34,28 @@ export type ChartSeriesConfig = {
   name?: string;
   /** Explicit series color (hex or hsl). Falls back to the shared catalog palette by index. */
   color?: string;
-  data: Array<{ x: any; y: number }>;
+  /** A null reading keeps its timestamp and breaks the drawn area line. */
+  data: Array<{ x: any; y: number | null }>;
 }[];
 
+export interface IChartSeriesStats {
+  name: string;
+  /** Null when the newest sample is unavailable, even if older samples exist. */
+  latest: number | null;
+  min: number | null;
+  max: number | null;
+  avg: number | null;
+  color: string;
+}
+
+type TChartAreaData = AreaData<UTCTimestamp> | WhitespaceData<UTCTimestamp>;
+
+interface IChartRenderedSegment {
+  key: string;
+  logicalIndex: number;
+  data: TChartAreaData[];
+}
+
 export type TChartLegendStat = 'latest' | 'min' | 'max' | 'avg';
 export type TChartPriceLine = 'avg' | 'max';
 
@@ -55,7 +81,7 @@ export class DeesChartArea extends DeesElement {
   accessor chart: IChartApi | null = null;
 
   @state()
-  accessor seriesStats: Array<{ name: string; latest: number; min: number; max: number; avg: number; color: string }> = [];
+  accessor seriesStats: IChartSeriesStats[] = [];
 
   @state()
   accessor isFullPage: boolean = false;
@@ -117,6 +143,9 @@ export class DeesChartArea extends DeesElement {
   private autoScrollTimer: number | null = null;
   private lcBundle: ILightweightChartsBundle | null = null;
   private seriesApis: Map<string, ISeriesApi<any>> = new Map();
+  /** LC's data() omits whitespace; this mirrors the exact points sent to each series API. */
+  private renderedSeriesData: Map<string, IRealtimeChartPoint[]> = new Map();
+  private renderedSegments: IChartRenderedSegment[] = [];
   private priceLines: Map<string, any[]> = new Map();
   private tooltipEl: HTMLDivElement | null = null;
   private crosshairActive = false;
@@ -219,6 +248,8 @@ export class DeesChartArea extends DeesElement {
         console.error('Error destroying chart:', error);
       } finally {
         this.seriesApis.clear();
+        this.renderedSeriesData.clear();
+        this.renderedSegments = [];
         this.priceLines.clear();
       }
     });
@@ -316,15 +347,17 @@ export class DeesChartArea extends DeesElement {
     this.paintRangeOverlay(fromCoordinate, toCoordinate);
   }
 
-  private convertDataToLC(data: Array<{ x: any; y: number }>): Array<{ time: UTCTimestamp; value: number }> {
-    const pointsByTime = new Map<number, { time: UTCTimestamp; value: number }>();
+  private convertDataToLC(data: ChartSeriesConfig[number]['data']): TChartAreaData[] {
+    const pointsByTime = new Map<number, TChartAreaData>();
     for (const point of data) {
       const ms = typeof point.x === 'number' ? point.x : new Date(point.x).getTime();
       const time = Math.floor(ms / 1000);
-      if (!Number.isFinite(time) || !Number.isFinite(point.y)) continue;
+      if (!Number.isFinite(time) || (point.y !== null && !Number.isFinite(point.y))) continue;
       // Lightweight Charts requires unique ordered timestamps. The latest
-      // sample wins when multiple updates land in the same second.
-      pointsByTime.set(time, { time: time as UTCTimestamp, value: point.y });
+      // sample, including an unavailable one, wins within the same second.
+      pointsByTime.set(time, point.y === null
+        ? { time: time as UTCTimestamp }
+        : { time: time as UTCTimestamp, value: point.y });
     }
     return [...pointsByTime.values()]
       .sort((a, b) => (a.time as number) - (b.time as number));
@@ -338,6 +371,45 @@ export class DeesChartArea extends DeesElement {
     return `${index}:${this.getSeriesName(series, index)}`;
   }
 
+  /**
+   * Lightweight Charts joins Area points across whitespace. Render each
+   * uninterrupted numeric run as its own Area series instead. All missing
+   * timestamps stay on the first real series so the time scale keeps them;
+   * there is no synthetic numeric value or extra public legend series.
+   */
+  private getRenderedSegments(chartSeries: ChartSeriesConfig): IChartRenderedSegment[] {
+    const renderedSegments: IChartRenderedSegment[] = [];
+    chartSeries.forEach((series, logicalIndex) => {
+      const points = this.convertDataToLC(series.data);
+      const missingPoints = points.filter((point) => !('value' in point));
+      const numericRuns: TChartAreaData[][] = [];
+      let currentRun: TChartAreaData[] = [];
+      for (const point of points) {
+        if ('value' in point) {
+          currentRun.push(point);
+        } else if (currentRun.length > 0) {
+          numericRuns.push(currentRun);
+          currentRun = [];
+        }
+      }
+      if (currentRun.length > 0) numericRuns.push(currentRun);
+      if (numericRuns.length === 0) numericRuns.push([]);
+
+      const baseKey = this.getSeriesKey(series, logicalIndex);
+      numericRuns.forEach((run, segmentIndex) => {
+        const data = segmentIndex === 0
+          ? [...run, ...missingPoints].sort((left, right) => left.time - right.time)
+          : run;
+        renderedSegments.push({
+          key: segmentIndex === 0 ? baseKey : `${baseKey}#${segmentIndex}`,
+          logicalIndex,
+          data,
+        });
+      });
+    });
+    return renderedSegments;
+  }
+
   private getCanonicalChartSeries(chartSeries: ChartSeriesConfig): ChartSeriesConfig {
     const cutoffTime = Date.now() - this.rollingWindow;
     return chartSeries.map((series) => ({
@@ -348,15 +420,34 @@ export class DeesChartArea extends DeesElement {
         return ms > cutoffTime;
       })).map((point) => ({
         x: (point.time as number) * 1000,
-        y: point.value,
+        y: 'value' in point ? point.value : null,
       })),
     }));
   }
 
-  private getRenderedSeriesData(api: ISeriesApi<any>): IRealtimeChartPoint[] {
-    return api.data()
-      .filter((point): point is { time: UTCTimestamp; value: number } => 'value' in point)
-      .map((point) => ({ time: point.time as number, value: point.value }));
+  private getRenderedSeriesData(segmentKey: string): IRealtimeChartPoint[] {
+    const renderedData = this.renderedSeriesData.get(segmentKey);
+    if (!renderedData) throw new Error(`Missing rendered chart data for ${segmentKey}`);
+    return renderedData;
+  }
+
+  private rememberRenderedSeriesData(segmentKey: string, data: readonly TChartAreaData[]): void {
+    this.renderedSeriesData.set(segmentKey, data
+      .map((point) => 'value' in point
+        ? { time: point.time as number, value: point.value }
+        : { time: point.time as number }));
+  }
+
+  private rememberIncrementalUpdate(segmentKey: string, point: IRealtimeChartPoint): void {
+    const renderedData = this.getRenderedSeriesData(segmentKey);
+    const existingIndex = renderedData.findIndex((entry) => entry.time === point.time);
+    if (existingIndex >= 0) renderedData[existingIndex] = point;
+    else renderedData.push(point);
+  }
+
+  private toLcPoint(point: IRealtimeChartPoint): TChartAreaData {
+    const time = point.time as UTCTimestamp;
+    return point.value === undefined ? { time } : { time, value: point.value };
   }
 
   private colorToRgba(color: string, alpha: number): string {
@@ -423,19 +514,21 @@ export class DeesChartArea extends DeesElement {
       },
     } as any);
 
-    let idx = 0;
-    for (const [, api] of this.seriesApis) {
-      const color = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
+    for (const segment of this.renderedSegments) {
+      const api = this.seriesApis.get(segment.key);
+      if (!api) continue;
+      const color = this.resolveSeriesColor(
+        this.chartSeries[segment.logicalIndex], segment.logicalIndex, isDark,
+      );
       api.applyOptions({
         topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color, 0),
         lineColor: color,
       });
-      idx++;
     }
   }
 
-  private recreateSeries(chartSeries: ChartSeriesConfig) {
+  private recreateSeries(chartSeries: ChartSeriesConfig, renderedSegments = this.getRenderedSegments(chartSeries)) {
     if (!this.chart || !this.lcBundle) return;
     const isDark = !this.goBright;
 
@@ -443,10 +536,13 @@ export class DeesChartArea extends DeesElement {
       this.chart.removeSeries(api);
     }
     this.seriesApis.clear();
+    this.renderedSeriesData.clear();
     this.priceLines.clear();
+    this.renderedSegments = renderedSegments;
 
-    chartSeries.forEach((s, index) => {
-      const color = this.resolveSeriesColor(s, index, isDark);
+    renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const color = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       const api = this.chart!.addSeries(this.lcBundle!.AreaSeries, {
         topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color, 0),
@@ -459,10 +555,12 @@ export class DeesChartArea extends DeesElement {
         crosshairMarkerRadius: 4,
       });
 
-      api.setData(this.convertDataToLC(s.data));
-      this.updatePriceLines(this.getSeriesKey(s, index), api, s.data, color);
-
-      this.seriesApis.set(this.getSeriesKey(s, index), api);
+      api.setData(segment.data);
+      this.seriesApis.set(segment.key, api);
+      this.rememberRenderedSeriesData(segment.key, segment.data);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color);
+      }
     });
     this.applyYAxisScale(chartSeries);
     this.computeStats(chartSeries);
@@ -477,17 +575,19 @@ export class DeesChartArea extends DeesElement {
 
   private updateSeriesPresentation(chartSeries: ChartSeriesConfig) {
     const isDark = !this.goBright;
-    chartSeries.forEach((series, index) => {
-      const seriesKey = this.getSeriesKey(series, index);
-      const api = this.seriesApis.get(seriesKey);
+    this.renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const api = this.seriesApis.get(segment.key);
       if (!api) return;
-      const color = this.resolveSeriesColor(series, index, isDark);
+      const color = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       api.applyOptions({
         topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color, 0),
         lineColor: color,
       });
-      this.updatePriceLines(seriesKey, api, series.data, color);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color);
+      }
     });
     this.computeStats(chartSeries);
 
@@ -500,7 +600,7 @@ export class DeesChartArea extends DeesElement {
     if (this.yAxisScaling === 'dynamic') {
       maxValue = 1;
       for (const entry of series) for (const point of entry.data) {
-        if (!Number.isFinite(point.y)) continue;
+        if (point.y === null || !Number.isFinite(point.y)) continue;
         minValue = Math.min(minValue, Math.floor(point.y * 1.1));
         maxValue = Math.max(maxValue, Math.ceil(point.y * 1.1));
       }
@@ -533,22 +633,39 @@ export class DeesChartArea extends DeesElement {
     ) return;
 
     const canonicalSeries = this.getCanonicalChartSeries(this.internalChartData);
-    canonicalSeries.forEach((series, index) => {
-      const api = this.seriesApis.get(this.getSeriesKey(series, index));
-      if (api) api.setData(this.convertDataToLC(series.data));
+    const canonicalSegments = this.getRenderedSegments(canonicalSeries);
+    if (!haveSameSeriesLayout(
+      [...this.seriesApis.keys()], canonicalSegments.map((segment) => segment.key),
+    )) {
+      this.clearCrosshairForDataReplacement();
+      this.internalChartData = canonicalSeries;
+      this.recreateSeries(canonicalSeries, canonicalSegments);
+      return;
+    }
+    canonicalSegments.forEach((segment) => {
+      const api = this.seriesApis.get(segment.key);
+      if (api) {
+        api.setData(segment.data);
+        this.rememberRenderedSeriesData(segment.key, segment.data);
+      }
     });
+    this.internalChartData = canonicalSeries;
+    this.renderedSegments = canonicalSegments;
     this.pendingRealtimePrune = false;
+    this.updateSeriesPresentation(canonicalSeries);
   }
 
   private computeStats(chartSeries: ChartSeriesConfig) {
     const isDark = !this.goBright;
     this.seriesStats = chartSeries.map((s, index) => {
       const color = this.resolveSeriesColor(s, index, isDark);
-      const values = s.data.map(d => d.y);
+      const values = s.data
+        .map((point) => point.y)
+        .filter((value): value is number => value !== null && Number.isFinite(value));
+      const latest = s.data.length > 0 ? s.data[s.data.length - 1].y : null;
       if (values.length === 0) {
-        return { name: s.name || `series-${index}`, latest: 0, min: 0, max: 0, avg: 0, color };
+        return { name: s.name || `series-${index}`, latest: null, min: null, max: null, avg: null, color };
       }
-      const latest = values[values.length - 1];
       const min = Math.min(...values);
       const max = Math.max(...values);
       const avg = Math.round((values.reduce((sum, v) => sum + v, 0) / values.length) * 100) / 100;
@@ -556,7 +673,7 @@ export class DeesChartArea extends DeesElement {
     });
   }
 
-  private updatePriceLines(name: string, api: ISeriesApi<any>, data: Array<{ x: any; y: number }>, color: string) {
+  private updatePriceLines(name: string, api: ISeriesApi<any>, data: ChartSeriesConfig[number]['data'], color: string) {
     // Remove existing price lines for this series
     const existing = this.priceLines.get(name);
     if (existing) {
@@ -565,12 +682,14 @@ export class DeesChartArea extends DeesElement {
       }
     }
 
-    if (data.length === 0) {
+    const values = data
+      .map((point) => point.y)
+      .filter((value): value is number => value !== null && Number.isFinite(value));
+    if (values.length === 0) {
       this.priceLines.set(name, []);
       return;
     }
 
-    const values = data.map(d => d.y);
     const avg = values.reduce((sum, v) => sum + v, 0) / values.length;
     const max = Math.max(...values);
 
@@ -627,23 +746,24 @@ export class DeesChartArea extends DeesElement {
       const borderColor = isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)';
 
       let html = '';
-      let idx = 0;
       let hasData = false;
-      for (const api of this.seriesApis.values()) {
+      for (const segment of this.renderedSegments) {
+        const api = this.seriesApis.get(segment.key);
+        if (!api) continue;
         const data = param.seriesData.get(api);
-        if (data && 'value' in data && (data as any).value !== undefined) {
+        if (data && 'value' in data && typeof data.value === 'number') {
+          const marginTop = hasData ? '6px' : '0';
           hasData = true;
-          const series = this.internalChartData[idx];
-          const name = series ? this.getSeriesName(series, idx) : `series-${idx}`;
-          const color = this.resolveSeriesColor(series, idx, isDark);
-          const formatted = this.yAxisFormatter((data as any).value);
-          html += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? '6px' : '0'} 0;">
+          const series = this.internalChartData[segment.logicalIndex];
+          const name = this.getSeriesName(series, segment.logicalIndex);
+          const color = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
+          const formatted = this.yAxisFormatter(data.value);
+          html += `<div style="display:flex;align-items:center;gap:8px;margin:${marginTop} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color};border-radius:2px;"></span>
             <span style="font-weight:500;">${name}:</span>
             <span style="margin-left:auto;font-weight:600;">${formatted}</span>
           </div>`;
         }
-        idx++;
       }
 
       if (!hasData) {
@@ -786,55 +906,55 @@ export class DeesChartArea extends DeesElement {
     try {
       void animate;
       const canonicalSeries = this.getCanonicalChartSeries(newSeries);
+      const renderedSegments = this.getRenderedSegments(canonicalSeries);
       this.internalChartData = canonicalSeries;
       const renderedKeys = [...this.seriesApis.keys()];
-      const canonicalKeys = canonicalSeries.map((series, index) => this.getSeriesKey(series, index));
+      const canonicalKeys = renderedSegments.map((segment) => segment.key);
 
       if (!haveSameSeriesLayout(renderedKeys, canonicalKeys)) {
         this.clearCrosshairForDataReplacement();
-        this.recreateSeries(canonicalSeries);
+        this.recreateSeries(canonicalSeries, renderedSegments);
         this.updateSeriesPresentation(canonicalSeries);
         return;
       }
+      this.renderedSegments = renderedSegments;
 
       if (!this.realtimeMode || this.rollingWindow <= 0) {
         this.clearCrosshairForDataReplacement();
-        canonicalSeries.forEach((series, index) => {
-          this.seriesApis.get(this.getSeriesKey(series, index))!
-            .setData(this.convertDataToLC(series.data));
+        renderedSegments.forEach((segment) => {
+          this.seriesApis.get(segment.key)!.setData(segment.data);
+          this.rememberRenderedSeriesData(segment.key, segment.data);
         });
         this.pendingRealtimePrune = false;
         this.updateSeriesPresentation(canonicalSeries);
         return;
       }
 
-      const plannedUpdates = canonicalSeries.map((series, index) => {
-        const api = this.seriesApis.get(this.getSeriesKey(series, index))!;
-        const canonicalData = this.convertDataToLC(series.data)
-          .map((point) => ({ time: point.time as number, value: point.value }));
+      const plannedUpdates = renderedSegments.map((segment) => {
+        const api = this.seriesApis.get(segment.key)!;
+        const canonicalData = segment.data.map((point) => 'value' in point
+          ? { time: point.time as number, value: point.value }
+          : { time: point.time as number });
         return {
+          key: segment.key,
           api,
           canonicalData,
-          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(api), canonicalData),
+          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(segment.key), canonicalData),
         };
       });
 
       if (plannedUpdates.some(({ plan }) => plan.replacementRequired)) {
         this.clearCrosshairForDataReplacement();
-        for (const { api, canonicalData } of plannedUpdates) {
-          api.setData(canonicalData.map((point) => ({
-            time: point.time as UTCTimestamp,
-            value: point.value,
-          })));
+        for (const { key, api, canonicalData } of plannedUpdates) {
+          api.setData(canonicalData.map((point) => this.toLcPoint(point)));
+          this.renderedSeriesData.set(key, [...canonicalData]);
         }
         this.pendingRealtimePrune = false;
       } else {
-        for (const { api, plan } of plannedUpdates) {
+        for (const { key, api, plan } of plannedUpdates) {
           for (const update of plan.updates) {
-            api.update({
-              time: update.point.time as UTCTimestamp,
-              value: update.point.value,
-            }, update.historicalUpdate);
+            api.update(this.toLcPoint(update.point), update.historicalUpdate);
+            this.rememberIncrementalUpdate(key, update.point);
           }
         }
 
@@ -842,20 +962,16 @@ export class DeesChartArea extends DeesElement {
         const pruneRecommended = plannedUpdates.some(({ plan }) => plan.pruneRecommended);
         if (pruneRequired) {
           this.clearCrosshairForDataReplacement();
-          for (const { api, canonicalData } of plannedUpdates) {
-            api.setData(canonicalData.map((point) => ({
-              time: point.time as UTCTimestamp,
-              value: point.value,
-            })));
+          for (const { key, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point) => this.toLcPoint(point)));
+            this.renderedSeriesData.set(key, [...canonicalData]);
           }
         } else if (pruneRecommended && this.crosshairActive) {
           this.pendingRealtimePrune = true;
         } else if (pruneRecommended) {
-          for (const { api, canonicalData } of plannedUpdates) {
-            api.setData(canonicalData.map((point) => ({
-              time: point.time as UTCTimestamp,
-              value: point.value,
-            })));
+          for (const { key, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point) => this.toLcPoint(point)));
+            this.renderedSeriesData.set(key, [...canonicalData]);
           }
           this.pendingRealtimePrune = false;
         }
@@ -879,7 +995,7 @@ export class DeesChartArea extends DeesElement {
     } catch (e) { /* range may be invalid */ }
   }
 
-  public async appendData(newData: { name?: string; data: Array<{ x: any; y: number }> }[]) {
+  public async appendData(newData: ChartSeriesConfig) {
     if (!this.chart) return;
     const nextSeries = this.internalChartData.map((series) => ({
       ...series,

package/ts_web/elements/00group-chart/dees-chart-area/realtime-updates.ts

@@ -1,6 +1,7 @@
 export interface IRealtimeChartPoint {
   time: number;
-  value: number;
+  /** Omitted for a time point where this series has no reading. */
+  value?: number;
 }
 
 export interface IRealtimeChartUpdate {
@@ -78,7 +79,8 @@ export const planRealtimeChartUpdates = (
       continue;
     }
 
-    if (renderedPoint.value !== canonicalPoint.value) {
+    if (renderedPoint.value !== canonicalPoint.value
+      || ('value' in renderedPoint) !== ('value' in canonicalPoint)) {
       updates.push({
         point: canonicalPoint,
         historicalUpdate: canonicalPoint.time < renderedLastTime,

package/ts_web/elements/00group-chart/dees-chart-area/template.ts

@@ -14,7 +14,8 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
           <div class="chartContainer">
             <div class="rangeSelectionOverlay" aria-hidden="true"></div>
           </div>
-          ${!component.chartSeries.some(series => series.data.length) ? html`<div class="chartState" role="status">No data for this period</div>` : ''}
+          ${!component.chartSeries.some(series => series.data.some(point => point.y !== null))
+            ? html`<div class="chartState" role="status">No data for this period</div>` : ''}
           ${component.seriesStats.length > 0 && !component.hideLegend ? html`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html`
@@ -24,7 +25,7 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
                   ${component.legendStats
                     .filter(key => key === 'latest' || key === 'min' || key === 'max' || key === 'avg')
                     .map(key => html`
-                      <span class="statsItem">${key} <strong>${component.yAxisFormatter(s[key])}</strong></span>
+                      <span class="statsItem">${key} <strong>${s[key] === null ? '—' : component.yAxisFormatter(s[key])}</strong></span>
                     `)}
                 </div>
               `)}

package/ts_web/elements/00group-input/dees-input-reference/dees-input-reference.ts

@@ -35,18 +35,18 @@ export class DeesInputReference extends DeesElement {
     :host { display: block; min-width: 0; color: var(--dees-color-text-primary); font-family: var(--dees-font-family); }
     .editor { border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); }
     .editor:focus-within { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
-    .ProseMirror { padding: 12px; min-height: 84px; max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-font-body-size); line-height: 1.6; }
+    .ProseMirror { padding: 12px; min-height: var(--dees-reference-min-height, 84px); max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-reference-font-size, var(--dees-font-body-size)); line-height: 1.6; }
     .ProseMirror p { margin: 0; }
     .ProseMirror p + p { margin-top: 0; }
     .ProseMirror:has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); float: left; color: var(--dees-color-text-muted); pointer-events: none; height: 0; }
-    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-badge-default-bg); cursor: pointer; font-weight: 500; }
+    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-fill-tertiary); cursor: pointer; font-weight: 500; }
     .ProseMirror [data-reference-id]:focus-visible, .ProseMirror .ProseMirror-selectednode { outline: 2px solid var(--dees-color-focus-ring); }
     .ProseMirror[contenteditable=false] { opacity: .65; }
     .error { color: var(--dees-color-text-error); font-size: var(--dees-font-footnote-size); }
   `];
 
   public render() {
-    return html`<div class="editor"></div>${this.loadError ? html`<p class="error" role="alert">${this.loadError}</p>` : ''}`;
+    return html`<div class="editor" part="editor"></div>${this.loadError ? html`<p class="error" role="alert">${this.loadError}</p>` : ''}`;
   }
 
   public async connectedCallback(): Promise<void> {

package/ts_web/elements/00group-kanban/dees-kanban/dees-kanban.ts

@@ -63,14 +63,27 @@ export class DeesKanban extends DeesElement {
   private resolvedTickets = new Map<string, IKanbanTicket>();
 
   public static styles = [...kanbanStyles, css`
-    :host { padding: 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
-    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
-    h2 { font-size: var(--dees-font-title1-size); font-weight: 650; letter-spacing: -.02em; }
-    .filters { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
-    .filters dees-input-text { flex: 1; min-width: 200px; max-width: 360px; }
-    .filters dees-input-dropdown { min-width: 200px; max-width: 320px; flex: 1; }
-    .columns { display: flex; gap: 16px; overflow-x: auto; padding: 3px 3px 16px; align-items: stretch; }
-    @media (max-width: 600px) { :host { padding: 16px; } .filters { gap: 10px; } .columns { scroll-snap-type: x proximity; } dees-kanban-column { scroll-snap-align: start; flex-basis: 85vw; } }
+    :host { padding: 20px 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
+    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+    .identity { display: flex; gap: 12px; align-items: baseline; flex: 1; min-width: 220px; flex-wrap: wrap; }
+    h2 { font-size: var(--dees-font-title3-size); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
+    .totals { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); white-space: nowrap; }
+    .filters { display: flex; align-items: center; gap: 8px; }
+    .filters dees-input-text { width: 230px; min-width: 140px; }
+    .filters dees-input-dropdown { width: 180px; min-width: 140px; }
+    .actions { display: flex; gap: 8px; margin-left: auto; }
+    .columns { display: flex; gap: 20px; overflow-x: auto; padding: 3px 2px 16px; align-items: stretch; }
+    @media (max-width: 1100px) { .filters { order: 3; flex-basis: 100%; } .filters dees-input-text { flex: 1; max-width: 320px; } }
+    @media (max-width: 600px) {
+      :host { padding: 12px 16px; }
+      .heading { gap: 12px 8px; }
+      .identity { min-width: 100%; gap: 6px 10px; }
+      .actions { margin-left: 0; }
+      .filters { flex-wrap: wrap; }
+      .filters dees-input-text, .filters dees-input-dropdown { flex: 1; width: auto; min-width: 130px; }
+      .columns { margin: 0 -16px; padding: 3px 16px 16px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; gap: 14px; }
+      dees-kanban-column { scroll-snap-align: start; flex: 0 0 86%; min-width: 0; max-width: none; }
+    }
   `];
 
   public async connectedCallback(): Promise<void> {
@@ -86,18 +99,18 @@ export class DeesKanban extends DeesElement {
       (!query || [ticket.key, ticket.title, ticket.assignee?.name, ...ticket.labels ?? [],
         ...this.tickets.filter(child => child.parentId === ticket.id).map(child => `${child.key} ${child.title}`)].join(' ').toLocaleLowerCase().includes(query)));
     const epic = epics.find(ticket => ticket.id === this.epicId);
-    return html`<header class="heading"><h2>${this.heading}</h2><span class="caption">${tasks.length} tasks · ${epics.length} epics</span><span class="spacer"></span>
-      ${this.provider.createTicket ? html`<dees-button type="ghost" size="sm" text="New epic" .disabled=${!this.columns.length}
-        @clicked=${() => { void this.createTicket({ kind: 'epic', columnId: this.columns[0].id }); }}></dees-button>
-        <dees-button type="accent" size="sm" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
-          @clicked=${() => { void this.createTicket({ kind: 'task', columnId: this.columns[0].id, parentId: this.epicId || undefined }); }}></dees-button>` : ''}</header>
-      <div class="filters"><dees-input-text label="Search tickets" placeholder="Title, ticket number, assignee…" .value=${this.query}
+    return html`<header class="heading"><div class="identity"><h2>${this.heading}</h2><span class="totals">${tasks.length} tasks · ${epics.length} epics</span></div>
+      <div class="filters"><dees-input-text label="Search tickets" .labelPosition=${'none'} placeholder="Search tickets…" .value=${this.query}
         @input=${(event: Event) => { this.query = String((event.currentTarget as DeesInputText).value ?? ''); }}></dees-input-text>
-        <dees-input-dropdown label="Epic" .value=${{ key: this.epicId, option: epic?.title ?? 'All epics' }}
+        <dees-input-dropdown label="Epic" .labelPosition=${'none'} .value=${{ key: this.epicId, option: epic?.title ?? 'All epics' }}
           .options=${[{ key: '', option: 'All epics' }, ...epics.map(ticket => ({ key: ticket.id, option: ticket.title }))]}
           @selectedOption=${(event: CustomEvent<{ key: string }>) => { this.epicId = event.detail.key; }}></dees-input-dropdown>
-        ${epic ? html`<dees-button type="ghost" size="sm" text="Open epic" @clicked=${() => { void this.openTicket(epic.id); }}></dees-button>` : ''}
+        ${epic ? html`<dees-button type="ghost" text="Open epic" @clicked=${() => { void this.openTicket(epic.id); }}></dees-button>` : ''}
       </div>
+      ${this.provider.createTicket ? html`<div class="actions"><dees-button type="secondary" text="New epic" .disabled=${!this.columns.length}
+        @clicked=${() => { void this.createTicket({ kind: 'epic', columnId: this.columns[0].id }); }}></dees-button>
+        <dees-button type="accent" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
+          @clicked=${() => { void this.createTicket({ kind: 'task', columnId: this.columns[0].id, parentId: this.epicId || undefined }); }}></dees-button></div>` : ''}</header>
       ${this.loading || this.openingTicket ? html`<p class="caption" role="status">${this.loading ? 'Loading board…' : 'Opening ticket…'}</p>` : ''}
       ${this.error || this.operationError ? html`<p class="error" role="alert">${this.error || this.operationError}</p>` : ''}
       ${!this.columns.length ? html`<p class="empty">No columns configured.</p>` : html`<div class="columns" aria-label=${this.heading}>
@@ -131,6 +144,7 @@ export class DeesKanban extends DeesElement {
       this.selectedId = id;
       if (!this.detail) {
         this.detail = new DeesKanbanTicketDetail();
+        this.detail.showTicketKey = false;
         for (const name of interactionEvents) this.detail.addEventListener(name, this.handleInteraction);
       }
       this.detail.ticket = ticket;
@@ -138,7 +152,7 @@ export class DeesKanban extends DeesElement {
       this.syncDetail();
       if (!this.modal && !this.modalOpening) {
         this.modalOpening = DeesModal.createAndShow({ heading: ticket.key, width: 1000, maxWidth: 1040,
-          mobileFullscreen: true, content: html`${this.detail}`, menuOptions: [] });
+          mobileFullscreen: true, contentPadding: 0, content: html`${this.detail}`, menuOptions: [] });
         const modal = await this.modalOpening;
         this.modalOpening = undefined;
         if (!this.isConnected) { await modal.destroy(); return; }