dsh-quick-actions 0.1.0-rc.3

package/lib/types/styles/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The Composer Quick Action surfaces' stylesheet (spec 8.2, 8.4).
+ *
+ * It is shipped as one string installed into a `<style data-plugin-css>` tag,
+ * the same shape and idempotence the first-party DSH client bundles use, rather
+ * than as CSS Modules: the Client build adapter produces one browser CJS file
+ * with no CSS pipeline (spec 11.2), and adding one would change a contract the
+ * bundle's own tests pin. Class names carry the `dsh-cqa-` prefix instead of a
+ * generated hash, which gives the same collision safety by convention.
+ *
+ * Colours are DSH alias theme tokens only — nothing here defines a palette, and
+ * nothing overrides a global theme (spec 8.4).
+ *
+ * ## The width rule (spec 8.2)
+ *
+ * The two layouts sit in different boxes, so they reach the same outer edges by
+ * different arithmetic:
+ *
+ * - `.dsh-cqa-ribbon` renders in the composer stack, outside the InputBar, which
+ *   is the element that owns `--dsh-composer-side-clearance` as padding. It
+ *   therefore subtracts that clearance from both sides itself.
+ * - `.dsh-cqa-bar` renders as the InputBar's last child, inside that padding, so
+ *   it is simply `100%` wide.
+ *
+ * Both are then capped at `--dsh-composer-card-max-width` — the same cap the
+ * composer card uses — and centred, so their left and right edges coincide with
+ * the input box exactly rather than approximately.
+ */
+export declare const QUICK_ACTIONS_CSS = "\n.dsh-cqa-ribbon,\n.dsh-cqa-launcher {\n  box-sizing: border-box;\n  width: calc(100% - var(--dsh-composer-side-clearance) - var(--dsh-composer-side-clearance));\n  max-width: var(--dsh-composer-card-max-width);\n  margin: 0 auto;\n}\n.dsh-cqa-bar {\n  box-sizing: border-box;\n  width: 100%;\n  max-width: var(--dsh-composer-card-max-width);\n  margin: 0 auto;\n}\n\n.dsh-cqa-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  padding: 2px 0;\n}\n.dsh-cqa-row[data-density='narrow'] {\n  gap: 6px;\n}\n\n.dsh-cqa-title {\n  flex: none;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n/* The ribbon overflows horizontally; the management entry never scrolls away. */\n.dsh-cqa-scroll {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n.dsh-cqa-fit {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n}\n.dsh-cqa-trailing {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: none;\n  margin-left: auto;\n}\n\n/*\n * The capsule itself \u2014 height, radius, padding, colours, hover and \":disabled\"\n * \u2014 belongs to the official \"Button\". What is left here is what a shared\n * control cannot know (how it behaves inside these rows) plus what the\n * primitive does not supply. Nothing below may restate a Button property,\n * because the plugin class is applied after the primitive's and would win on\n * equal specificity.\n *\n * The focus ring is one of the things it does not supply: \"Button.module.css\"\n * and \"Pill.module.css\" carry no \":focus\" rule at all \u2014 the library leaves the\n * ring to each component that wants one (\"Input.module.css\" has\n * \":focus-within\", \"HoverCard\" and \"JsonTree\" their own). Spec 8.4 makes a\n * clear focus ring a hard gate, so it stays here for every control this plugin\n * renders.\n */\n.dsh-cqa-action,\n.dsh-cqa-entry {\n  /* No global border-box reset exists in this stylesheet, and Button pads\n     itself, so the cap has to count that padding to mean 240px on screen. */\n  box-sizing: border-box;\n  flex: none;\n  /* Long labels truncate rather than pushing the row's other controls out. */\n  max-width: 240px;\n}\n.dsh-cqa-action:focus-visible,\n.dsh-cqa-entry:focus-visible {\n  outline: 2px solid var(--dsw-alias-state-business-primary);\n  outline-offset: 1px;\n}\n/* \"aria-disabled\" is not \":disabled\": a control kept focusable while a write is\n   in flight still has to read as inert, and no primitive expresses that. */\n.dsh-cqa-entry[aria-disabled='true'] {\n  opacity: 0.5;\n  cursor: default;\n}\n/* The searchable panel's rows stay native \u2014 a full-width, left-aligned list row\n   is not a capsule \u2014 so they still need a focus ring of their own. */\n.dsh-cqa-panel-item:focus-visible,\n.dsh-cqa-link:focus-visible {\n  outline: 2px solid var(--dsw-alias-state-business-primary);\n  outline-offset: 1px;\n}\n.dsh-cqa-label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dsh-cqa-icon {\n  flex: none;\n}\n/* The chip look is \"Pill\"'s; only its behaviour in a flex row is ours. */\n.dsh-cqa-badge,\n.dsh-cqa-tag {\n  flex: none;\n}\n\n.dsh-cqa-note {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 4px 0 0;\n  padding: 4px 8px;\n  border-radius: 8px;\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  line-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.dsh-cqa-note-text {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.dsh-cqa-link {\n  flex: none;\n  border: 0;\n  background: none;\n  padding: 0;\n  color: var(--dsw-alias-state-business-primary);\n  font: inherit;\n  font-size: 12px;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n/* Anchored surfaces: the popover list and the confirmation panel. */\n.dsh-cqa-anchor {\n  position: relative;\n}\n.dsh-cqa-backdrop {\n  position: fixed;\n  z-index: 19;\n  inset: 0;\n}\n.dsh-cqa-panel {\n  position: absolute;\n  z-index: 20;\n  bottom: calc(100% + 6px);\n  left: 0;\n  box-sizing: border-box;\n  max-width: min(100%, 360px);\n  min-width: 220px;\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n  border: 0.5px solid var(--dsw-alias-border-l1);\n  border-radius: 12px;\n  background: var(--dsw-specific-tip);\n  box-shadow: var(--dsw-elevation-soft);\n}\n.dsh-cqa-panel-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.dsh-cqa-panel-head .dsh-cqa-panel-title {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.dsh-cqa-panel-title {\n  padding: 4px 8px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n  line-height: 18px;\n}\n.dsh-cqa-panel-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 8px;\n  border: 0;\n  border-radius: 8px;\n  background: none;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 13px;\n  line-height: 20px;\n  text-align: left;\n  cursor: pointer;\n}\n.dsh-cqa-panel-item:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n.dsh-cqa-panel-item:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.dsh-cqa-confirm-text {\n  margin: 6px 0;\n  padding: 8px;\n  border-radius: 8px;\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n  font-family: var(--ds-font-family-code);\n  font-size: 12px;\n  line-height: 18px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  max-height: 160px;\n  overflow-y: auto;\n}\n.dsh-cqa-confirm-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\n/* ------------------------------------------------------------------------- */\n/* Fields, shared by the search box and the Custom Quick Action form         */\n/* ------------------------------------------------------------------------- */\n\n.dsh-cqa-field {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n.dsh-cqa-field-label {\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  line-height: 18px;\n}\n.dsh-cqa-field-hint {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 16px;\n}\n.dsh-cqa-field-error {\n  color: var(--dsw-alias-state-danger-primary, var(--dsw-alias-label-primary));\n  font-size: 11px;\n  line-height: 16px;\n  font-weight: 500;\n}\n\n.dsh-cqa-input,\n.dsh-cqa-textarea {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 4px 8px;\n  border: 0.5px solid var(--dsw-alias-border-l1);\n  border-radius: 8px;\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 13px;\n  line-height: 20px;\n}\n.dsh-cqa-textarea {\n  resize: vertical;\n  min-height: 72px;\n  font-family: var(--ds-font-family-code);\n  white-space: pre-wrap;\n}\n.dsh-cqa-input:focus-visible,\n.dsh-cqa-textarea:focus-visible {\n  outline: 2px solid var(--dsw-alias-state-business-primary);\n  outline-offset: 1px;\n}\n.dsh-cqa-input:disabled,\n.dsh-cqa-textarea:disabled {\n  opacity: 0.5;\n}\n\n.dsh-cqa-switch {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 0;\n  cursor: pointer;\n}\n\n/* ------------------------------------------------------------------------- */\n/* The centralized management overlay                                        */\n/* ------------------------------------------------------------------------- */\n\n/*\n * The overlay and its click-catching backdrop. Neither paints: only DSH alias\n * theme tokens may be used here, and this release has no token to spend on a\n * modal scrim (spec 8.4).\n *\n * These two numbers rank the overlay against its own backdrop, and nothing\n * else. Since ticket 26 the overlay is portaled to the document body, so it and\n * the anchored popovers (19 and 20, still rendered in the input dock) sit in\n * different stacking contexts: which of them paints on top follows from where\n * the dock's own ancestors land in the root context, not from comparing 31\n * against 20. Raising these would not change that.\n */\n.dsh-cqa-manager-backdrop {\n  z-index: 30;\n}\n.dsh-cqa-manager {\n  position: fixed;\n  z-index: 31;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: min(560px, calc(100vw - 24px));\n  max-height: min(80vh, 680px);\n  overflow-y: auto;\n  padding: 12px;\n  border: 0.5px solid var(--dsw-alias-border-l1);\n  border-radius: 12px;\n  background: var(--dsw-specific-tip);\n  color: var(--dsw-alias-label-primary);\n  box-shadow: var(--dsw-elevation-soft);\n}\n\n.dsh-cqa-manager-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.dsh-cqa-manager-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  margin: 0;\n  color: var(--dsw-alias-label-primary);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.dsh-cqa-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 6px 0;\n  border-top: 0.5px solid var(--dsw-alias-border-l1);\n}\n.dsh-cqa-section-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.dsh-cqa-section-head .dsh-cqa-section-title {\n  flex: 1 1 auto;\n}\n.dsh-cqa-section-title {\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n}\n.dsh-cqa-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.dsh-cqa-entry[aria-pressed='true'] {\n  background: var(--dsw-alias-state-business-tertiary);\n  color: var(--dsw-alias-label-primary-bluish);\n  opacity: 1;\n}\n\n.dsh-cqa-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.dsh-cqa-list-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 6px 8px;\n  border-radius: 8px;\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n/* A hidden or disabled action stays legible: it is managed here, not removed. */\n.dsh-cqa-list-item[data-quick-action-hidden] .dsh-cqa-list-head,\n.dsh-cqa-list-item[data-quick-action-hidden] .dsh-cqa-list-text {\n  opacity: 0.6;\n}\n.dsh-cqa-list-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  min-width: 0;\n  font-size: 13px;\n  line-height: 20px;\n}\n.dsh-cqa-list-text {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--dsw-alias-label-tertiary);\n  font-family: var(--ds-font-family-code);\n  font-size: 11px;\n  line-height: 16px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.dsh-cqa-list-controls {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.dsh-cqa-form {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 6px 0 0;\n  border-top: 0.5px solid var(--dsw-alias-border-l1);\n}\n.dsh-cqa-form-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-top: 6px;\n}\n";
+/**
+ * Install the stylesheet once per document and return its disposer, so the
+ * Client fiber owns it like every other registration (spec 7.3).
+ *
+ * The holder count lives on the tag rather than in this module, because a hot
+ * reload runs two bundle instances at once: the new fiber installs before the
+ * old one unloads, and each has its own module scope. Counting in the DOM is
+ * what keeps the surviving instance's styles from being removed underneath it.
+ */
+export declare function installQuickActionStyles(): () => void;

package/lib/types/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public type entry: the shared Quick Action data contract — action and Settings
+ * V1 shapes, Preset Catalog and projection shapes, validation issue vocabulary
+ * and the Settings mutation plan shapes.
+ *
+ * Types only. The runtime rules that go with them (validation, catalog assembly,
+ * decoding, normalization, projection, mutation planning) stay internal to the
+ * package: Host and Client import them from `src/model/`, and whether any of them
+ * becomes a published runtime export is part of the release-surface decision.
+ */
+export type * from './model/index.js';

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "dsh-quick-actions",
+  "version": "0.1.0-rc.3",
+  "description": "Persistent Quick Actions for the DSH message composer",
+  "license": "MIT",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./types": {
+      "types": "./lib/types/types.d.ts",
+      "default": "./lib/types.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "cordis.patch.yml",
+    "lib/index.js",
+    "lib/types.js",
+    "lib/client.js",
+    "lib/client.js.map",
+    "lib/types/**/*.d.ts",
+    "README.md",
+    "README.en.md"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ],
+      "external": [
+        "react",
+        "react/jsx-runtime",
+        "react-dom",
+        "@deepseek-ai/dsh-client-ui-primitives"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-client-connection": ">=0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-locale": ">=0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": ">=0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": ">=0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": ">=0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-settings": ">=0.1.5-rc.1",
+    "@deepseek-ai/dsh-settings": ">=0.1.5-rc.1",
+    "@deepseek-ai/schemastery": "^3.18.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.2-rc.1",
+    "@deepseek-ai/dsh-settings": "^0.1.5-rc.1",
+    "@deepseek-ai/schemastery": "^3.18.2",
+    "@types/react": "~18.3.31",
+    "@types/react-dom": "~18.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@dsh-plugins/dsh-client-bundle": "0.0.0"
+  },
+  "scripts": {
+    "build": "node --eval \"require('node:fs').rmSync('lib',{recursive:true,force:true})\" && tsc -b && tsdown",
+    "watch:client": "tsdown --watch"
+  }
+}