@braincrew-lab/langchain-canvas 0.2.0 → 0.3.0

package/dist/styles.css

@@ -143,8 +143,74 @@
 .cv-undo button:hover:not(:disabled) { background: var(--cv-surface); }
 .cv-undo button:disabled { opacity: 0.35; cursor: default; }
 
-.cv-versions { display: flex; align-items: center; gap: 6px; }
-.cv-versions__label { font-size: 12px; color: var(--cv-muted); font-variant-numeric: tabular-nums; }
+.cv-versions { position: relative; display: flex; align-items: center; gap: 6px; }
+.cv-versions__label {
+  font-size: 12px;
+  color: var(--cv-muted);
+  font-variant-numeric: tabular-nums;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 6px;
+}
+.cv-versions__label:hover { background: var(--cv-surface); color: var(--cv-text); }
+.cv-versions__list {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 220px;
+  max-height: 260px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  border: 1px solid var(--cv-border);
+  border-radius: 10px;
+  background: var(--cv-surface);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.cv-versions__list button {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--cv-text);
+  text-align: left;
+  font-size: 12px;
+  cursor: pointer;
+}
+.cv-versions__list button:hover { background: var(--cv-bg); }
+.cv-versions__list button.is-current { background: var(--cv-bg); font-weight: 600; }
+.cv-versions__v { color: var(--cv-muted); font-variant-numeric: tabular-nums; flex: none; }
+.cv-versions__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Historical snapshot view: content is visible and scrollable but not editable
+   (children lose hit-testing; the scroll container itself still gets the wheel). */
+.cv-history-banner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 14px;
+  font-size: 12px;
+  color: var(--cv-muted);
+  background: var(--cv-surface);
+  border-bottom: 1px solid var(--cv-border);
+}
+.cv-history-banner button {
+  border: none;
+  background: none;
+  color: var(--cv-accent, #4f46e5);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+}
+.cv-body--history > * { pointer-events: none; }
 .cv-versions__nav {
   width: 24px;
   height: 24px;
@@ -415,6 +481,132 @@
 .cv-sheet-tools__sort:focus, .cv-sheet-tools__filter:focus { outline: none; border-color: var(--cv-accent); }
 .cv-sheet-tools__hint { margin-left: auto; font-size: 11px; color: var(--cv-muted); }
 
+/* --- Excel-style ribbon toolbar ----------------------------------------------- */
+/* The Excel model in the canvas's language: each group is a soft "keycap" tray
+   of ghost controls with the group's name set small underneath — organized at a
+   glance, quiet until hovered. */
+
+.cv-ribbon {
+  align-items: flex-start;
+  gap: 8px;
+  padding: 7px 12px 5px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.cv-ribbon__group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+}
+.cv-ribbon__items {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 2px;
+  background: var(--cv-surface);
+  border: 1px solid var(--cv-border);
+  border-radius: 9px;
+}
+.cv-ribbon__label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--cv-muted);
+  white-space: nowrap;
+  user-select: none;
+}
+.cv-ribbon__gap { width: 5px; }
+
+/* ghost controls — the tray is the chrome */
+.cv-ribbon .cv-ribbon__btn {
+  height: 26px;
+  min-width: 26px;
+  padding: 0 9px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--cv-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  transition: background 0.12s, box-shadow 0.12s;
+}
+.cv-ribbon .cv-ribbon__btn:hover:not(:disabled) {
+  background: var(--cv-bg);
+  border: none;
+  color: var(--cv-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.cv-ribbon .cv-ribbon__btn:active:not(:disabled) { box-shadow: none; }
+.cv-ribbon .cv-ribbon__btn:disabled { opacity: 0.35; cursor: default; }
+.cv-ribbon .cv-ribbon__btn.is-on {
+  background: var(--cv-accent-weak);
+  color: var(--cv-accent);
+  box-shadow: inset 0 0 0 1px var(--cv-accent);
+}
+.cv-ribbon .cv-ribbon__btn--icon { padding: 0 6px; }
+.cv-ribbon .cv-ribbon__btn--glyph { font-weight: 800; font-size: 13px; width: 26px; padding: 0; }
+
+/* Excel-style color swatches: glyph over a live color bar, picker underneath */
+.cv-ribbon__swatch {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background 0.12s, box-shadow 0.12s;
+}
+.cv-ribbon__swatch:hover:not(.is-disabled) { background: var(--cv-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
+.cv-ribbon__swatch.is-disabled { opacity: 0.35; cursor: default; }
+.cv-ribbon__swatch-glyph { font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; }
+.cv-ribbon__swatch-bar { width: 15px; height: 3.5px; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
+.cv-ribbon__swatch input[type="color"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+.cv-ribbon__swatch.is-disabled input { pointer-events: none; }
+
+/* selects/inputs live in the tray as quiet controls */
+.cv-ribbon .cv-ribbon__select,
+.cv-ribbon .cv-ribbon__input {
+  height: 26px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0 7px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--cv-text);
+  max-width: 130px;
+  transition: background 0.12s;
+}
+.cv-ribbon .cv-ribbon__select:hover:not(:disabled),
+.cv-ribbon .cv-ribbon__input:hover { background: var(--cv-bg); border: none; }
+.cv-ribbon .cv-ribbon__select:focus,
+.cv-ribbon .cv-ribbon__input:focus { outline: none; background: var(--cv-bg); box-shadow: inset 0 0 0 1px var(--cv-accent); }
+.cv-ribbon .cv-ribbon__select:disabled { opacity: 0.35; }
+.cv-ribbon .cv-ribbon__input { width: 88px; font-weight: 500; }
+.cv-ribbon .cv-ribbon__input::placeholder { color: var(--cv-muted); }
+
 /* selection formatting cluster — reads as one tight group between separators */
 .cv-sheet-tools__fmt { display: inline-flex; align-items: center; gap: 3px; }
 .cv-sheet-tools__fmt button:disabled,
@@ -431,7 +623,165 @@
   border-radius: 6px; background: var(--cv-bg); cursor: pointer;
 }
 .cv-sheet-tools__color:disabled { opacity: 0.4; cursor: default; }
+.cv-sheet-tools__numfmt, .cv-sheet-tools__fx {
+  font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 6px;
+  border: 1px solid var(--cv-border); background: var(--cv-bg); color: var(--cv-text);
+}
+.cv-sheet-tools__numfmt:disabled, .cv-sheet-tools__fx:disabled { opacity: 0.4; }
+.cv-sheet-tools__numfmt:focus, .cv-sheet-tools__fx:focus { outline: none; border-color: var(--cv-accent); }
+
+/* formula bar — a hairline row between the toolbar and the grid */
+.cv-sheet-fxbar {
+  display: flex; align-items: center; gap: 8px; padding: 4px 10px;
+  border-bottom: 1px solid var(--cv-border); background: var(--cv-bg); flex: 0 0 auto;
+}
+.cv-sheet-fxbar__cell {
+  min-width: 44px; text-align: center; font-size: 12px; font-weight: 600;
+  color: var(--cv-muted); font-variant-numeric: tabular-nums;
+  border-right: 1px solid var(--cv-border); padding-right: 8px;
+}
+.cv-sheet-fxbar__input {
+  flex: 1; font-family: var(--cv-mono); font-size: 12.5px; padding: 3px 8px;
+  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--cv-text);
+}
+.cv-sheet-fxbar__input:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }
+.cv-sheet-fxbar__input:disabled { opacity: 0.5; }
 .cv-sheet { position: relative; width: 100%; flex: 1; height: auto; min-height: 0; }
+
+/* --- Fortune-sheet internals, retuned to the canvas design language ----------- */
+/* Fortune ships its own visual defaults (raw blues, hard corners, UA-grey
+   dialogs). Everything user-visible is re-tokenized here so the spreadsheet
+   reads as part of the canvas, not an embedded third-party widget. */
+
+/* toolbar */
+.cv-sheet .fortune-toolbar {
+  background: var(--cv-bg);
+  border-bottom: 1px solid var(--cv-border);
+  padding: 4px 8px;
+}
+.cv-sheet .fortune-toolbar-button,
+.cv-sheet .fortune-toolbar-item {
+  border-radius: 6px;
+  transition: background 0.12s;
+}
+.cv-sheet .fortune-toolbar-button:hover,
+.cv-sheet .fortune-toolbar-item:hover,
+.cv-sheet .fortune-toolbar-combo-button:hover {
+  background: var(--cv-surface);
+}
+.cv-sheet .fortune-toolbar-divider { border-color: var(--cv-border); }
+.cv-sheet .fortune-toolbar-combo { border-radius: 6px; }
+
+/* Fortune's own formula row duplicates the canvas formula bar above it — hide it
+   (the name box A1 + fx input live in .cv-sheet-fxbar). */
+.cv-sheet .fortune-fx-editor { display: none !important; }
+
+/* dialogs (conditional format, insert link, …) */
+.luckysheet-modal-dialog {
+  border: 1px solid var(--cv-border) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22) !important;
+  background: var(--cv-bg) !important;
+  color: var(--cv-text) !important;
+  font-family: var(--cv-font) !important;
+  padding: 18px 20px !important;
+}
+.luckysheet-modal-dialog-border { border: none !important; }
+.luckysheet-modal-dialog input[type="text"],
+.luckysheet-modal-dialog input[type="number"],
+.luckysheet-modal-dialog select,
+.luckysheet-modal-dialog textarea {
+  font: inherit;
+  padding: 6px 10px;
+  border: 1px solid var(--cv-border);
+  border-radius: 8px;
+  background: var(--cv-bg);
+  color: var(--cv-text);
+}
+.luckysheet-modal-dialog input:focus,
+.luckysheet-modal-dialog select:focus,
+.luckysheet-modal-dialog textarea:focus { outline: none; border-color: var(--cv-accent); }
+.luckysheet-modal-dialog button {
+  font: 600 13px/1.2 var(--cv-font);
+  padding: 7px 16px;
+  border: 1px solid var(--cv-border);
+  border-radius: 8px;
+  background: var(--cv-bg);
+  color: var(--cv-text);
+  cursor: pointer;
+}
+.luckysheet-modal-dialog button:hover { background: var(--cv-surface); }
+/* Fortune marks its confirm buttons with a solid blue — remap to the accent. */
+.luckysheet-modal-dialog button[style*="rgb(26, 115, 232)"],
+.luckysheet-modal-dialog .fortune-message-box-button-primary,
+.luckysheet-modal-dialog button.primary {
+  background: var(--cv-accent) !important;
+  border-color: var(--cv-accent) !important;
+  color: #fff !important;
+}
+
+/* context menus (right-click, header menus) */
+.fortune-context-menu,
+.luckysheet-cols-menu {
+  border: 1px solid var(--cv-border) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16) !important;
+  background: var(--cv-bg) !important;
+  color: var(--cv-text) !important;
+  font-family: var(--cv-font) !important;
+  padding: 6px !important;
+  overflow: hidden;
+}
+.fortune-context-menu > div,
+.luckysheet-cols-menuitem {
+  border-radius: 7px;
+  font-size: 13px;
+}
+.fortune-context-menu > div:hover,
+.luckysheet-cols-menuitem:hover { background: var(--cv-surface) !important; }
+.fortune-context-menu-divider { border-color: var(--cv-border) !important; }
+
+/* sheet tabs + status bar */
+.cv-sheet .fortune-sheettab-container {
+  background: var(--cv-bg);
+  border-top: 1px solid var(--cv-border);
+  font-family: var(--cv-font);
+}
+.cv-sheet .luckysheet-sheets-item {
+  border-radius: 7px 7px 0 0;
+  color: var(--cv-muted);
+}
+.cv-sheet .luckysheet-sheets-item-active {
+  color: var(--cv-accent);
+  background: var(--cv-accent-weak);
+  font-weight: 600;
+}
+.cv-sheet .fortune-sheettab-button { border-radius: 6px; }
+.cv-sheet .fortune-sheettab-button:hover { background: var(--cv-surface); }
+.cv-sheet .fortune-stat-area,
+.cv-sheet .fortune-zoom-container { font-family: var(--cv-font); color: var(--cv-muted); }
+.cv-sheet .fortune-zoom-button { border-radius: 6px; }
+.cv-sheet .fortune-zoom-button:hover { background: var(--cv-surface); }
+
+/* tooltips + scrollbars */
+.fortune-tooltip {
+  border-radius: 7px !important;
+  font-family: var(--cv-font) !important;
+  font-size: 12px !important;
+}
+.cv-sheet .luckysheet-scrollbar-x::-webkit-scrollbar,
+.cv-sheet .luckysheet-scrollbar-y::-webkit-scrollbar { width: 8px; height: 8px; }
+.cv-sheet .luckysheet-scrollbar-x::-webkit-scrollbar-thumb,
+.cv-sheet .luckysheet-scrollbar-y::-webkit-scrollbar-thumb {
+  background: var(--cv-border);
+  border-radius: 999px;
+}
+.cv-sheet .luckysheet-scrollbar-x::-webkit-scrollbar-thumb:hover,
+.cv-sheet .luckysheet-scrollbar-y::-webkit-scrollbar-thumb:hover { background: var(--cv-muted); }
+
+/* in-cell editor */
+.cv-sheet .luckysheet-cell-input,
+.cv-sheet .luckysheet-input-box-inner { font-family: var(--cv-font); }
 .cv-sheet .fortune-container { height: 100% !important; width: 100% !important; }
 .cv-sheet--empty { display: grid; place-items: center; height: 200px; color: var(--cv-muted); font-size: 14px; }
 
@@ -472,6 +822,7 @@
   border: 1px solid var(--cv-border);
   border-radius: 5px;
   overflow: hidden;
+  container-type: inline-size;
 }
 .cv-deck__thumb.is-active .cv-deck__thumb-slide { border-color: var(--cv-accent); box-shadow: 0 0 0 1px var(--cv-accent); }
 .cv-deck__thumb-slide b { display: block; margin-bottom: 3px; font-size: 9px; line-height: 1.2; }
@@ -599,14 +950,19 @@
 
 /* blank / free-canvas layout */
 .cv-slide { position: relative; }
-.cv-slide--blank { display: block; padding: 0; }
+.cv-slide--blank { display: block; padding: 0; container-type: inline-size; }
+/* Text on a free slide is sized in cqw (1cqw = 1% of the slide's width), so type
+   scales with the slide exactly like the percent geometry does — the editor,
+   thumbnails, and present mode all show the same proportions at any width. */
 .cv-free { position: absolute; inset: 0; }
 .cv-free__el { position: absolute; box-sizing: border-box; cursor: move; }
 .cv-free__guide { position: absolute; z-index: 6; background: #f43f5e; pointer-events: none; }
 .cv-free__guide--v { top: 0; bottom: 0; width: 1px; }
 .cv-free__guide--h { left: 0; right: 0; height: 1px; }
 .cv-free__el.is-selected { outline: 1.5px solid var(--cv-accent); outline-offset: 1px; }
-.cv-free__text { width: 100%; height: 100%; outline: none; overflow: hidden; line-height: 1.3; }
+/* PowerPoint semantics: a text box is a layout hint, not a clip — text that
+   runs long paints past the box instead of vanishing mid-word. */
+.cv-free__text { width: 100%; min-height: 100%; outline: none; overflow: visible; line-height: 1.2; }
 .cv-free__img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
 .cv-free__resize {
   position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
@@ -665,6 +1021,17 @@
 .cv-free__multibar button:disabled { opacity: 0.4; cursor: default; background: transparent; }
 .cv-free__multibar-del:hover { background: #fee2e2 !important; color: #dc2626; }
 
+/* per-element control-bar inputs: rotation + corner radius */
+.cv-free__ctl-rot, .cv-free__ctl-radius {
+  width: 44px; height: 22px; font: inherit; font-size: 11.5px; padding: 0 4px;
+  border: 1px solid var(--cv-border); border-radius: 5px; background: var(--cv-bg); color: var(--cv-text);
+}
+.cv-free__ctl-rot:focus, .cv-free__ctl-radius:focus { outline: none; border-color: var(--cv-accent); }
+
+/* slide reorder: insertion indicator while dragging a thumbnail */
+.cv-deck__thumb-wrap--drop-before { box-shadow: 0 -2px 0 0 var(--cv-accent); }
+.cv-deck__thumb-wrap--drop-after { box-shadow: 0 2px 0 0 var(--cv-accent); }
+
 /* toolbar: background swatch + present button */
 .cv-deck__bg input[type="color"] {
   width: 30px; height: 30px; padding: 0;
@@ -985,6 +1352,14 @@
   transition: width 0.2s ease;
 }
 
+/* document-mode chip on the html toolbar (imported .hwp/.hwpx etc.) */
+.cv-html-doc-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 11.5px; font-weight: 700; color: var(--cv-accent);
+  background: var(--cv-accent-weak); border: 1px solid var(--cv-border);
+  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
+}
+
 /* --- selection quick-edit bar ------------------------------------------------- */
 
 .cv-selection {

package/package.json

@@ -1,14 +1,35 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
+  "author": "Brain Crew (https://github.com/braincrew-lab)",
+  "homepage": "https://github.com/braincrew-lab/langchain-canvas#readme",
   "type": "module",
+  "keywords": [
+    "langchain",
+    "langgraph",
+    "ai",
+    "agent",
+    "canvas",
+    "artifacts",
+    "generative-ui",
+    "streaming",
+    "llm",
+    "react",
+    "document",
+    "chart",
+    "spreadsheet",
+    "slides"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/braincrew-lab/langchain-canvas.git",
     "directory": "packages/canvas-react"
   },
+  "bugs": {
+    "url": "https://github.com/braincrew-lab/langchain-canvas/issues"
+  },
   "sideEffects": [
     "*.css",
     "./dist/index.js"
@@ -58,6 +79,9 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "release:patch": "npm version patch -m \"release: %s\"",
+    "release:minor": "npm version minor -m \"release: %s\"",
+    "release:major": "npm version major -m \"release: %s\""
   }
 }