@braincrew-lab/langchain-canvas 0.1.13 → 0.2.0

package/dist/styles.css

@@ -212,6 +212,16 @@
 .cv-body--flush { padding: 0; overflow: hidden; }
 .cv-fallback { color: var(--cv-muted); font-size: 14px; }
 
+/* Browsing an old version: a preview, not an editing surface. Interaction is
+   blocked wholesale — renderers patch by artifact id, so edits made "in the
+   past" would silently overwrite the live version. */
+.cv-body--history > :not(.cv-history-note) { pointer-events: none; user-select: none; }
+.cv-history-note {
+  position: sticky; top: 0; z-index: 5; margin-bottom: 12px;
+  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
+  color: var(--cv-muted); background: var(--cv-surface); border: 1px solid var(--cv-border);
+}
+
 /* --- inline editing (document / table / slides) ------------------------------- */
 
 .cv-edit-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@@ -404,6 +414,23 @@
 .cv-sheet-tools__filter { min-width: 96px; max-width: 160px; }
 .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); }
+
+/* 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,
+.cv-sheet-tools button:disabled { opacity: 0.4; cursor: default; }
+.cv-sheet-tools button:disabled:hover { border-color: var(--cv-border); color: var(--cv-text); }
+.cv-sheet-tools__bold, .cv-sheet-tools__align { width: 28px; padding: 4px 0 !important; text-align: center; }
+.cv-sheet-tools__bold--on,
+.cv-sheet-tools__freeze--on {
+  background: var(--cv-accent-weak) !important; border-color: var(--cv-accent) !important;
+  color: var(--cv-accent) !important;
+}
+.cv-sheet-tools__color {
+  width: 28px; height: 26px; padding: 2px; border: 1px solid var(--cv-border);
+  border-radius: 6px; background: var(--cv-bg); cursor: pointer;
+}
+.cv-sheet-tools__color:disabled { opacity: 0.4; cursor: default; }
 .cv-sheet { position: relative; width: 100%; flex: 1; height: auto; min-height: 0; }
 .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; }
@@ -613,6 +640,31 @@
 .cv-free__fmt input[type="number"] { width: 46px; height: 24px; border: 1px solid var(--cv-border); border-radius: 5px; background: var(--cv-bg); color: var(--cv-text); font-size: 12px; padding: 0 4px; }
 .cv-free__fmt input[type="color"] { width: 26px; height: 24px; padding: 0; border: 1px solid var(--cv-border); border-radius: 5px; background: none; cursor: pointer; }
 
+/* multi-select: marquee, selection state, floating action bar */
+.cv-free { outline: none; } /* the canvas is focusable for keyboard nudge/shortcuts */
+.cv-free:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; border-radius: 4px; }
+.cv-free__marquee {
+  position: absolute; z-index: 7; pointer-events: none;
+  border: 1px solid var(--cv-accent);
+  background: color-mix(in srgb, var(--cv-accent) 10%, transparent);
+  border-radius: 2px;
+}
+.cv-free__el--selected { outline: 1.5px solid var(--cv-accent); outline-offset: 1px; }
+.cv-free__multibar {
+  position: absolute; z-index: 8; transform: translate(-50%, calc(-100% - 8px));
+  display: flex; align-items: center; gap: 2px;
+  padding: 3px; background: var(--cv-bg); border: 1px solid var(--cv-border);
+  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); cursor: default;
+}
+.cv-free__multibar--below { transform: translate(-50%, 8px); }
+.cv-free__multibar button {
+  min-width: 24px; height: 24px; padding: 0 6px; border: none; border-radius: 5px;
+  background: transparent; color: var(--cv-text); cursor: pointer; font-size: 12px; white-space: nowrap;
+}
+.cv-free__multibar button:hover { background: var(--cv-surface); }
+.cv-free__multibar button:disabled { opacity: 0.4; cursor: default; background: transparent; }
+.cv-free__multibar-del:hover { background: #fee2e2 !important; color: #dc2626; }
+
 /* toolbar: background swatch + present button */
 .cv-deck__bg input[type="color"] {
   width: 30px; height: 30px; padding: 0;
@@ -656,6 +708,22 @@
   background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px; padding: 12px 16px; cursor: default; white-space: pre-wrap;
 }
+/* Deck progress: a hairline track pinned to the bottom edge, plus a counter chip. */
+.cv-present__progress {
+  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
+  background: rgba(255, 255, 255, 0.08);
+}
+.cv-present__progress-fill {
+  height: 100%; background: var(--cv-accent);
+  transition: width 0.28s ease;
+}
+@media (prefers-reduced-motion: reduce) { .cv-present__progress-fill { transition: none; } }
+.cv-present__count {
+  position: absolute; top: 16px; right: 20px;
+  color: #9aa4b2; font-size: 13px; font-variant-numeric: tabular-nums;
+  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px; padding: 3px 10px; cursor: default;
+}
 
 /* in-place editing cues */
 .cv-word .cv-doc { cursor: text; }
@@ -840,6 +908,49 @@
 .cv-html-act:hover { background: var(--cv-surface); }
 .cv-html-act--del:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
 .cv-html-bar__spacer { flex: 1; }
+
+/* ── Unified, polished toolbar controls ─────────────────────────────────────────
+   One button language across every renderer: a consistent 8px radius, a hairline
+   of depth, a soft hover lift, a tactile press, and a real focus ring. */
+.cv-html-add, .cv-html-tpl, .cv-html-act, .cv-deck__toolbar button, .cv-edit-btn,
+.cv-sheet-tools button, .cv-doc-bar button {
+  border-radius: 8px;
+  font-weight: 500;
+  box-shadow: 0 1px 0 rgba(17, 17, 26, 0.02);
+  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, transform 0.06s ease;
+}
+.cv-html-add:hover, .cv-html-tpl:hover, .cv-html-act:hover,
+.cv-deck__toolbar button:hover:not(:disabled), .cv-edit-btn:hover,
+.cv-sheet-tools button:hover, .cv-doc-bar button:hover {
+  background: var(--cv-surface);
+  border-color: color-mix(in srgb, var(--cv-text) 22%, var(--cv-border));
+  color: var(--cv-text);
+  box-shadow: 0 1px 3px rgba(17, 17, 26, 0.07);
+}
+.cv-html-add:active, .cv-html-tpl:active, .cv-html-act:active,
+.cv-deck__toolbar button:active, .cv-edit-btn:active,
+.cv-sheet-tools button:active, .cv-doc-bar button:active { transform: translateY(0.5px); }
+.cv-html-add:focus-visible, .cv-html-tpl:focus-visible, .cv-html-act:focus-visible,
+.cv-deck__toolbar button:focus-visible, .cv-edit-btn:focus-visible,
+.cv-sheet-tools button:focus-visible, .cv-doc-bar button:focus-visible,
+.cv-html-seg button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--cv-accent) 48%, transparent);
+  outline-offset: 1px;
+}
+/* Segmented controls (Design/Code · device preview) */
+.cv-html-seg { border-radius: 8px; box-shadow: 0 1px 0 rgba(17, 17, 26, 0.02); }
+.cv-html-seg button { font-weight: 500; transition: background 0.14s ease, color 0.14s ease; }
+.cv-html-seg button:hover:not(.is-on) { background: var(--cv-surface); }
+.cv-html-seg button.is-on { box-shadow: inset 0 -1.5px 0 color-mix(in srgb, #000 16%, var(--cv-accent)); }
+/* Primary actions (Present · chart done) get a little lift and gloss */
+.cv-edit-btn.is-primary, .cv-deck__present {
+  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+}
+.cv-edit-btn.is-primary:hover, .cv-deck__present:hover {
+  background: color-mix(in srgb, #000 8%, var(--cv-accent)) !important;
+  border-color: transparent;
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+}
 .cv-html-stage {
   flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center;
   padding: 10px; background: var(--cv-surface); border-radius: 10px;
@@ -1043,6 +1154,36 @@
   color: var(--cv-muted);
 }
 
+/* --- PDF viewer ---------------------------------------------------------------- */
+
+/* Fills the flush body outright — `flex: 1` alone collapsed the iframe to its
+   content height (a thin strip of page) because `.cv-body` is a block, not a
+   flex container. */
+.cv-pdf-panel { display: flex; flex-direction: column; height: 100%; min-height: 480px; }
+.cv-pdf-tools {
+  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
+  border-bottom: 1px solid var(--cv-border); background: var(--cv-bg); flex: 0 0 auto;
+}
+.cv-pdf-tools button {
+  font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--cv-border);
+  border-radius: 6px; background: var(--cv-bg); color: var(--cv-text); cursor: pointer;
+}
+.cv-pdf-tools button:hover { border-color: var(--cv-accent); color: var(--cv-accent); }
+.cv-pdf-tools__name {
+  font-size: 12px; font-weight: 600; color: var(--cv-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
+}
+.cv-pdf-tools__spacer { flex: 1; }
+.cv-pdf-tools__sep { width: 1px; height: 18px; background: var(--cv-border); margin: 0 2px; }
+.cv-pdf-tools__zoom { display: inline-flex; align-items: center; gap: 3px; }
+.cv-pdf-tools__zoom button { min-width: 26px; }
+.cv-pdf-tools__zoom-label {
+  min-width: 52px; font-variant-numeric: tabular-nums; color: var(--cv-muted);
+}
+.cv-pdf { position: relative; flex: 1; min-height: 0; background: var(--cv-surface); }
+.cv-pdf__frame { display: block; width: 100%; height: 100%; border: 0; }
+.cv-pdf--empty { display: grid; place-items: center; min-height: 200px; color: var(--cv-muted); }
+
 /* --- inline artifact card (for the transcript) -------------------------------- */
 
 .cv-card {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",