npm - @design.estate/dees-catalog - Versions diffs - 3.90.1 → 3.92.0 - Mend

@design.estate/dees-catalog 3.90.1 → 3.92.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (231) hide show

package/dist_watch/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!--gitzone element-->
+<!-- made by Task Venture Capital GmbH -->
+<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<html lang="en">
+  <head>
+    <!--Lets set some basic meta tags-->
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.90.1",
+  "version": "3.92.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -39,7 +39,7 @@
     "@git.zone/tstest": "^3.6.6",
     "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^26.0.0"
+    "@types/node": "^26.1.0"
   },
   "files": [
     "ts/**/*",

package/readme.hints.md CHANGED Viewed

@@ -1107,4 +1107,10 @@ Some components appear in multiple groups via `demoGroups = ['Primary', 'Seconda
 - The old `demoGroup` property (singular, string) is fully removed
 - All 79 components with demos use `demoGroups` (plural, string[])
 - `00group-pdf` no longer exists; PDF components are in `00group-media`
-- `dees-search` and `dees-tooltip` remain standalone (no demos)
+- `dees-search` and `dees-tooltip` remain standalone (no demos)
+## Harness group decisions (2026-07)
+- Markdown in `00group-harness` uses `domtools.plugins.smartmarkdown` (GFM, sanitized remark pipeline) — zero new dependencies, same path as dees-speechbubble and dees-workspace-markdown. `HarnessMarkdown` singleton adds an LRU cache (200 entries) and rewrites links to `target="_blank" rel="noopener noreferrer"`. Fenced code gets lazy highlight.js via `DeesServiceLibLoader` after the final (non-streaming) parse only.
+- Tool cards resolve their kind through `DeesHarnessToolRegistry.default` (open set + `kind` override), so consumers register custom tools without forking components; `server__tool` names auto-classify as MCP with annotation badges.
+- The syntax palette moved to the shared `ts_web/elements/00syntax.ts` (`syntaxPaletteStyles` + `syntaxScopeStyles`); codebox and harness markdown consume it — don't re-declare `--syntax-*`/hljs scope colors per component.
+- `dees-dataview-codebox` diff mode: set `codeBefore` (against `codeToDisplay`) or a pre-computed `unifiedDiff` patch; `diffView` = `'inline' | 'split'`. Engine lives dependency-free in `codebox.diff.ts` (LCS + intraline segments + context folding + `toUnifiedDiff`). Tool cards use it for file-write bodies via the `diffBlock` render helper.

package/readme.md CHANGED Viewed

@@ -39,7 +39,7 @@ import '@design.estate/dees-catalog';
 class MyApp extends DeesElement {
   render() {
     return html`
-      <dees-button type="highlighted" @click=${() => alert('Hello!')}>
+      <dees-button type="accent" @click=${() => alert('Hello!')}>
         Click me!
       </dees-button>
     `;
@@ -64,6 +64,7 @@ For developers working on this library, please refer to the [UI Components Playb
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
 | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
 | **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
+| **Agentic Chat** | [`DeesHarnessChat`](#deesharnesschat), [`DeesHarnessMessageList`](#deesharnessmessagelist), [`DeesHarnessMessage`](#deesharnessmessage), [`DeesHarnessReasoning`](#deesharnessreasoning), [`DeesHarnessToolCard`](#deesharnesstoolcard), [`DeesHarnessContentBlocks`](#deesharnesscontentblocks), [`DeesHarnessPermissionCard`](#deesharnesspermissioncard), [`DeesHarnessComposer`](#deesharnesscomposer), [`DeesHarnessStatus`](#deesharnessstatus), [`DeesHarnessTodos`](#deesharnesstodos), [`DeesHarnessUsage`](#deesharnessusage), [`DeesHarnessSessionList`](#deesharnesssessionlist) |
 | **Theming** | [`DeesTheme`](#deestheme), [`DeesUpdater`](#deesupdater) |
 | **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
@@ -84,7 +85,9 @@ button.text = 'Click me';
 // With options
 <dees-button
-  type="highlighted"  // Options: normal, highlighted, discreet
+  type="accent"       // Options: default, accent, destructive, outline, secondary, ghost, link (legacy: normal, highlighted, discreet, big)
+  size="sm"           // Options: default, sm, lg, icon (square)
+  shape="pill"        // Options: squircle (default rounded rect), pill (capsule for standalone actions)
   status="pending"    // Options: normal, pending, success, error
   disabled={false}    // Optional: disables the button
   @click=${handleClick}
@@ -207,13 +210,10 @@ Exit/close button component with consistent styling.
 Container for grouping related buttons together.
 ```typescript
-<dees-button-group
-  .buttons=${[
-    { text: 'Save', type: 'highlighted', action: handleSave },
-    { text: 'Cancel', type: 'normal', action: handleCancel }
-  ]}
-  spacing="medium"    // Options: small, medium, large
-></dees-button-group>
+<dees-button-group label="Actions" direction="horizontal">
+  <dees-button type="accent" @clicked=${handleSave}>Save</dees-button>
+  <dees-button @clicked=${handleCancel}>Cancel</dees-button>
+</dees-button-group>
 ```
 #### `DeesHeading`
@@ -1129,6 +1129,20 @@ Code display component with syntax highlighting and line numbers.
 ></dees-dataview-codebox>
 ```
+**Diff mode** — set `codeBefore` (compared against `codeToDisplay` as the after state) or a pre-computed `unifiedDiff` patch; `diffView` selects `'inline'` or `'split'` (side-by-side) and can force diff mode on its own:
+```typescript
+<dees-dataview-codebox
+  progLang="typescript"
+  filename="config.ts"
+  diffView="split"
+  .codeBefore=${previousSource}
+  .codeToDisplay=${newSource}
+></dees-dataview-codebox>
+```
+Diff rendering includes word-level intraline change highlighting, unchanged-context folding with expandable "N unchanged lines" rows, `+added −removed` stats in the footer, and a "Copy Unified Diff" context-menu action. The copy button yields the after-state text. The dependency-free engine (`computeLineDiff`, `parseUnifiedDiff`, `foldContextRows`, `buildSplitRows`, `diffStats`, `toUnifiedDiff`) is exported for programmatic use.
 #### `DeesDataviewStatusobject`
 Status display component for complex objects with nested status indicators.
@@ -1679,6 +1693,99 @@ IDE-style bottom status bar for the workspace.
 ---
+### Agentic Chat Components 🤖
+The `00group-harness` family renders what an agent harness produces — streaming messages, reasoning, tool calls, MCP content, permission prompts — behind one normalized data contract (`IHarnessMessage`, `IHarnessToolCall`, `IHarnessPermissionRequest`, `IHarnessSessionMeta`, `IHarnessStatus`). Consumers adapt their wire format to these interfaces and feed the components; all events are `harness-*` CustomEvents (bubbles + composed).
+#### `DeesHarnessChat`
+The assembled chat: optional toolbar (heading, usage chip, history/new-session buttons), streaming message list, pinned permission queue, status line, and composer.
+```typescript
+const chat = document.querySelector('dees-harness-chat');
+chat.messages = adaptedMessages;          // IHarnessMessage[]
+chat.permissions = pendingPermissions;    // IHarnessPermissionRequest[]
+chat.status = { type: 'busy', message: 'Responding…' };
+chat.modelOptions = ['gpt-5.5', 'o4-mini'];
+chat.effortOptions = ['high', 'medium', 'low'];
+chat.addEventListener('harness-send', (event) => {
+  const { text, attachments, model, reasoningEffort } = event.detail;
+});
+chat.addEventListener('harness-permission-response', (event) => {
+  const { requestId, response, remember } = event.detail; // 'once' | 'always' | 'reject'
+});
+// streaming fast path — mutates the same message object, re-renders only that element
+chat.applyDelta({ type: 'text', messageId: 'm1', delta: 'chunk' });
+chat.applyDelta({ type: 'message-end', messageId: 'm1', usage: { totalTokens: 1200 } });
+```
+Key props: `messages`, `permissions`, `status`, `usage`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `toolRegistry`. Methods: `applyDelta()`, `focusComposer()`, `clearComposer()`, `scrollToBottom()`. Events (also from children, all composed): `harness-send`, `harness-steer`, `harness-abort`, `harness-input`, `harness-attachments-change`, `harness-attachment-error`, `harness-model-change`, `harness-permission-response`, `harness-new-session`, `harness-open-sessions`.
+#### `DeesHarnessMessageList`
+Scrollable streaming-safe log. Keyed repeat by `message.id` keeps DOM identity stable; `applyDelta()` routes updates to the affected message element only. Auto-follows the bottom while pinned; otherwise raises a "Jump to latest" chip instead of yanking the scroll. Props: `messages`, `status`, `autoFollow`, `showRoles`, `showTimestamps`, `emptyTitle`/`emptyText` (+ `slot="empty"`).
+#### `DeesHarnessMessage`
+One message: role accent, markdown (assistant default, `message.markdown` overrides), attachments grid, reasoning parts, streaming cursor, usage/error footer. Markdown renders through `domtools.plugins.smartmarkdown` (GFM, sanitized), throttled to ≥150 ms re-parses while streaming; fenced code is highlighted lazily after the final parse. Streaming methods: `appendTextDelta()`, `appendReasoningDelta()`, `endReasoning()`, `endStream(usage?, error?)`.
+#### `DeesHarnessReasoning`
+"Thinking" disclosure for one `IHarnessReasoningPart`. Auto-opens while streaming (no `endedAt`); the user's expand/collapse choice wins afterwards. Shows duration once finished.
+#### `DeesHarnessToolCard`
+Tool-call card: shared chrome (icon, label, subtitle, status pill, duration, MCP badges) with a per-kind body. Kind resolution goes through `DeesHarnessToolRegistry` (see below); bodies for the seeded kinds — terminal, file-read, file-write (renders a before/after diff via `dees-dataview-codebox` when the input carries previous content), file-delete, dir-list, browser (inline screenshots), http, json, search, subtask, todo, mcp, unknown — live in `renderers.ts`. Long outputs truncate at 6,000 chars with a "Show all" expander. Terminal and error cards open by default.
+```typescript
+import { DeesHarnessToolRegistry } from '@design.estate/dees-catalog';
+DeesHarnessToolRegistry.default.register({
+  kind: 'deploy',
+  names: ['deploy_service'],
+  label: 'Deploy',
+  icon: 'lucide:Rocket',
+  subtitle: (call) => String((call.input as any)?.service ?? ''),
+  renderBody: (call, helpers) => helpers.keyValues([['service', String((call.input as any)?.service)]]),
+});
+```
+`server__tool` names resolve automatically to the MCP kind with server + annotation badges (`readOnlyHint` → success, `destructiveHint` → error, `openWorldHint` → warning). Per-element isolation: assign a forked registry to `.toolRegistry`.
+#### `DeesHarnessContentBlocks`
+Renders MCP `CallToolResult` content structurally: text, base64 images, audio with controls, embedded text resources, downloadable blob resources, and `resource_link` cards.
+#### `DeesHarnessPermissionCard`
+Permission prompt: title, type badge (shell/delete → error tone, write/browser → warning), metadata key/values, Allow Once / Always Allow / Reject, and a "remember" checkbox (`always` implies remember). Emits `harness-permission-response`; disables itself once answered or while `busy`.
+#### `DeesHarnessComposer`
+Prompt input: autogrow textarea, attachment picker/paste/drag-drop with per-file (10 MB) and total (30 MB) limits and MIME allowlist, optional model + reasoning-effort dropdowns, Cmd/Ctrl+Enter to send. Controlled component — the host owns `value` and `attachments`.
+While `busy`, Stop renders as an additional button and Send stays available so hosts can queue messages. With an empty prompt and `queuedCount > 0`, the primary action becomes **Steer now** (`harness-steer` event) to force the agent to continue with the queued messages immediately.
+#### `DeesHarnessTodos`
+Agent task list for `IHarnessTodoItem[]` — completed items dim with a check and strikethrough, the in-progress item leads with a pulsing accent marker, and an optional heading shows `completed/total` progress. Used automatically as the todo tool-card body (`harnessParseTodos` normalizes tool input shapes) and standalone for a "current tasks" sidebar panel fed from the latest `todowrite` call.
+#### `DeesHarnessStatus`
+Idle/busy/error line with animated dots and `aria-live="polite"`. Renders nothing when idle unless `showIdle`.
+#### `DeesHarnessUsage`
+Token usage chip (`in · out · total`, `compact` shows the total only); cache read/write detail in the tooltip.
+#### `DeesHarnessSessionList`
+Searchable conversation list for sidebars or a `DeesModal` (`harness-session-select` on click, `harness-session-open` on double-click/Enter). Sorts by recency; filters over title, preview, and id.
+---
 ### Pre-built Templates
 #### `DeesSimpleAppdash`

package/readme.playbook.md CHANGED Viewed

@@ -432,6 +432,16 @@ private updateBlockContent(blockId: string, content: string) {
 }
 ```
+## Streaming Components (harness pattern)
+Components that render continuously arriving data (agent chat, logs) follow the harness pattern from `00group-harness`:
+- **Props are the source of truth; deltas are the fast path.** The host owns the array (e.g. `.messages`). Incremental updates go through `applyDelta()`, which mutates the same object instance held in the array and calls `requestUpdate()` on the one affected child element. A later wholesale re-assignment of the array is therefore idempotent — no divergence between streamed and re-set state.
+- **Keyed `repeat` for identity.** List children render via `directives.repeat` keyed by a stable id so streaming never recreates sibling DOM (which would drop scroll position, expansion state, and selection).
+- **Cheap while streaming, rich when done.** While `streaming` is set, text renders as pre-wrap with a cursor; expensive work (markdown parse) is throttled (≥150 ms, token-guarded like the codebox highlight pattern) and syntax highlighting waits for the final parse.
+- **Scroll follow with user override.** Auto-scroll only when the user is already pinned to the bottom (`scrollHeight - scrollTop - clientHeight < threshold`); otherwise show a "jump to latest" chip. Schedule follow-scrolls through a single pending `requestAnimationFrame`, cancelled in `disconnectedCallback`.
+- **Interaction state lives on the child.** Expand/collapse (reasoning, tool cards) is element-local state seeded from data (`expanded ?? isStreaming`), so parent re-renders can't reset what the user opened.
 ## Performance Optimization
 ### DO: Debounce Expensive Operations

package/ts_web/00_commitinfo_data.ts CHANGED Viewed

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.90.1',
+  version: '3.92.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-appui/dees-appui/dees-appui.ts CHANGED Viewed

@@ -193,8 +193,9 @@ export class DeesAppui extends DeesElement {
       }
       .maingrid {
         position: absolute;
-        top: 40px;
-        height: calc(100% - 40px - 24px);
+        top: var(--dees-control-height-lg);
+        /* appbar (control-height-lg) above, 24px bottombar below */
+        height: calc(100% - var(--dees-control-height-lg) - 24px);
         width: 100%;
         display: grid;
         /* grid-template-columns set dynamically in template */
@@ -204,7 +205,7 @@ export class DeesAppui extends DeesElement {
       }
       :host([bottombar-hidden]) .maingrid {
-        height: calc(100% - 40px);
+        height: calc(100% - var(--dees-control-height-lg));
       }
       /* Appbar sits above the content grid so its dropdown menus overlay the

package/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts CHANGED Viewed

@@ -289,7 +289,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
       .user-email {
         font-size: 11px;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         margin-top: 2px;
         white-space: nowrap;
         overflow: hidden;
@@ -308,8 +308,8 @@ export class DeesAppuiProfileDropdown extends DeesElement {
         padding: 8px 12px;
         cursor: default;
         transition: background var(--dees-transition-fast) var(--dees-ease-standard);
-        color: var(--dees-color-text-secondary);
-        font-size: var(--dees-font-caption1-size);
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm);
         line-height: 1;
         user-select: none;
       }
@@ -324,7 +324,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
       .menu-item dees-icon {
         font-size: 14px;
-        opacity: 0.7;
+        color: var(--dees-color-text-secondary);
       }
       .menu-item-text {
@@ -333,9 +333,8 @@ export class DeesAppuiProfileDropdown extends DeesElement {
       .menu-shortcut {
         font-size: 11px;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         margin-left: auto;
-        opacity: 0.7;
       }
       .menu-divider {

package/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts CHANGED Viewed

@@ -241,7 +241,7 @@ export class DeesAppuiTabs extends DeesElement {
       }
       .tab {
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         white-space: nowrap;
         cursor: pointer;
         transition: color 0.15s ease;
@@ -363,17 +363,15 @@ export class DeesAppuiTabs extends DeesElement {
         height: 16px;
         border-radius: 4px;
         margin-left: 8px;
-        opacity: 0.4;
-        transition: opacity 0.15s, background 0.15s;
+        transition: color 0.15s, background 0.15s;
         color: var(--dees-color-text-muted);
       }
       .tab:hover .tab-close {
-        opacity: 0.7;
+        color: var(--dees-color-text-secondary);
       }
       .tab-close:hover {
-        opacity: 1;
         background: var(--dees-color-pressed);
         color: var(--dees-color-accent-error);
       }

package/ts_web/elements/00group-button/dees-button/dees-button.demo.ts CHANGED Viewed

@@ -91,6 +91,7 @@ export const demoFunc = () => html`
       <dees-panel .title=${'1. Button Variants'} .subtitle=${'Different visual styles for various use cases'}>
         <div class="button-group">
           <dees-button type="default">Default</dees-button>
+          <dees-button type="accent">Accent</dees-button>
           <dees-button type="secondary">Secondary</dees-button>
           <dees-button type="destructive">Destructive</dees-button>
           <dees-button type="outline">Outline</dees-button>
@@ -139,6 +140,19 @@ export const demoFunc = () => html`
         });
       });
     }}>
+      <dees-panel .title=${'2b. Button Shapes'} .subtitle=${'Squircle rect (default) aligns with fields; pill is the capsule for standalone actions'}>
+        <div class="button-group">
+          <dees-button>Squircle (default)</dees-button>
+          <dees-button shape="pill">Pill</dees-button>
+          <dees-button shape="pill" type="accent">Pill Accent</dees-button>
+          <dees-button shape="pill" size="sm">Pill Small</dees-button>
+          <dees-button shape="pill" size="sm" type="ghost">
+            <dees-icon icon="lucide:Plus"></dees-icon>
+            Pill With Icon
+          </dees-button>
+        </div>
+      </dees-panel>
       <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
         <div class="icon-row">
           <dees-button>
@@ -374,7 +388,7 @@ export const demoFunc = () => html`
       <dees-panel .title=${'8. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
         <div class="button-group">
           <dees-button type="normal">Normal → Default</dees-button>
-          <dees-button type="highlighted">Highlighted → Destructive</dees-button>
+          <dees-button type="highlighted">Highlighted → Accent</dees-button>
           <dees-button type="discreet">Discreet → Outline</dees-button>
           <dees-button type="big">Big → Large Size</dees-button>
         </div>

package/ts_web/elements/00group-button/dees-button/dees-button.ts CHANGED Viewed

@@ -31,7 +31,7 @@ export class DeesButton extends DeesElement {
       return true;
     }
   })
-  accessor text!: string;
+  accessor text: string = '';
   @property()
   accessor eventDetailData!: string;
@@ -50,7 +50,7 @@ export class DeesButton extends DeesElement {
   @property({
     type: String
   })
-  accessor type: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+  accessor type: 'default' | 'accent' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
   @property({
     type: String
@@ -62,6 +62,16 @@ export class DeesButton extends DeesElement {
   })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  /**
+   * Corner treatment. 'squircle' (default) is the standard rounded rect for
+   * controls that align with fields and other rectangular siblings; 'pill'
+   * is the capsule for standalone/floating actions (chips, toolbar pills).
+   */
+  @property({
+    type: String
+  })
+  accessor shape: 'squircle' | 'pill' = 'squircle';
   @property({
     type: Boolean,
     reflect: true
@@ -95,20 +105,20 @@ export class DeesButton extends DeesElement {
         box-sizing: border-box;
         font-family: inherit;
         /* status faces: solid in bright mode, tinted in dark (gobright overrides below) */
-        --button-pending-bg: hsl(213.1 93.9% 67.8% / 0.2);
-        --button-pending-fg: hsl(213.1 93.9% 67.8%);
-        --button-success-bg: hsl(142.1 70.6% 45.3% / 0.2);
-        --button-success-fg: hsl(142.1 70.6% 45.3%);
-        --button-error-bg: hsl(0 62.8% 70.6% / 0.2);
-        --button-error-fg: hsl(0 62.8% 70.6%);
+        --button-pending-bg: color-mix(in srgb, var(--dees-color-accent-primary) 20%, transparent);
+        --button-pending-fg: var(--dees-color-accent-primary);
+        --button-success-bg: color-mix(in srgb, var(--dees-color-accent-success) 20%, transparent);
+        --button-success-fg: var(--dees-color-accent-success);
+        --button-error-bg: color-mix(in srgb, var(--dees-color-accent-error) 20%, transparent);
+        --button-error-fg: var(--dees-color-accent-error);
       }
       :host([gobright]) {
-        --button-pending-bg: hsl(222.2 47.4% 51.2%);
-        --button-pending-fg: hsl(0 0% 100%);
-        --button-success-bg: hsl(142.1 76.2% 36.3%);
-        --button-success-fg: hsl(0 0% 100%);
-        --button-error-bg: hsl(0 84.2% 60.2%);
-        --button-error-fg: hsl(0 0% 100%);
+        --button-pending-bg: var(--dees-color-accent-primary);
+        --button-pending-fg: var(--dees-color-on-accent);
+        --button-success-bg: var(--dees-color-accent-success);
+        --button-success-fg: var(--dees-color-on-accent);
+        --button-error-bg: var(--dees-color-accent-error);
+        --button-error-fg: var(--dees-color-on-accent);
       }
       :host([hidden]) {
         display: none;
@@ -151,12 +161,21 @@ export class DeesButton extends DeesElement {
         gap: var(--dees-spacing-sm);
       }
+      /* Shape variants. The default squircle rect aligns with fields and other
+         rectangular siblings; pill is the capsule for standalone/floating
+         actions. Capsules keep corner-shape round — superellipse smoothing
+         would distort the semicircular end caps. */
+      .button.shape-pill {
+        border-radius: var(--dees-radius-full);
+        corner-shape: round;
+      }
       /* Size variants.
-         The default sits at the standard control height (lg / 40px) so a button
-         lines up with text fields, dropdowns and the segmented control when
-         placed alongside them (inline controls share the same height).
-         sm (32px) is the compact toolbar/table size; lg (48px) is the prominent
-         CTA. */
+         The default sits at the standard control height (control-height-lg) so
+         a button lines up with text fields, dropdowns and the segmented control
+         when placed alongside them (inline controls share the same height).
+         sm (control-height-sm) is the compact toolbar/table size; lg
+         (control-height-xl) is the prominent CTA. */
       .button.size-default {
         height: var(--dees-control-height-lg);
         padding: 0 var(--dees-spacing-lg);
@@ -203,6 +222,21 @@ export class DeesButton extends DeesElement {
         background: color-mix(in srgb, var(--dees-color-text-primary) 9%, var(--dees-color-bg-primary));
       }
+      /* Accent variant — the filled primary action (system accent). */
+      .button.accent {
+        background: var(--dees-color-accent-primary);
+        color: var(--dees-color-on-accent);
+        border: 1px solid transparent;
+      }
+      .button.accent:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 88%, white);
+      }
+      .button.accent:active:not(.disabled) {
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 85%, black);
+      }
       /* Destructive variant */
       .button.destructive {
         background: var(--dees-color-accent-error);
@@ -430,7 +464,7 @@ export class DeesButton extends DeesElement {
     // Map old types to new types for backward compatibility
     const typeMap: {[key: string]: string} = {
       'normal': 'default',
-      'highlighted': 'destructive',
+      'highlighted': 'accent',
       'discreet': 'outline',
       'big': 'default' // Will use size instead
     };
@@ -445,12 +479,13 @@ export class DeesButton extends DeesElement {
       ? html`<dees-icon .icon=${this.icon}></dees-icon>`
       : '';
-    // For icon-only buttons, hide the textbox
-    const isIconOnly = actualSize === 'icon' && this.icon;
+    // No placeholder label: a button without text renders icon-only.
+    // size-icon additionally suppresses text to keep its square geometry.
+    const showText = Boolean(this.text) && !(actualSize === 'icon' && this.icon);
     return html`
       <div
-        class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
+        class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.disabled
           ? 'disabled'
           : ''}"
         @click="${this.dispatchClick}"
@@ -463,7 +498,7 @@ export class DeesButton extends DeesElement {
           ></dees-spinner>
         `}
         ${leftIcon}
-        ${isIconOnly ? '' : html`<div class="textbox">${this.text || 'Button'}</div>`}
+        ${showText ? html`<div class="textbox">${this.text}</div>` : ''}
         ${rightIcon}
       </div>
     `;

package/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts CHANGED Viewed

@@ -299,7 +299,7 @@ export class DeesChartLog extends DeesElement {
       .metric.rate {
         margin-left: auto;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
       .metric.rate::before {