agent-canvas 0.1.44 → 0.1.45

package/daemon/client/components/index.ts

@@ -1,17 +1,4 @@
-export { Section } from "./Section";
-export { Item, Task } from "./Task";
-export { CodeBlock } from "./CodeBlock";
-export { Callout } from "./Callout";
-export { Note } from "./Note";
-export { Table } from "./Table";
-export { Checklist } from "./Checklist";
-export { Priority } from "./Priority";
-export { FilePreview } from "./FilePreview";
-export { Mermaid } from "./Mermaid";
-export { Diff } from "./Diff";
-export { Choice, MultiChoice } from "./Choice";
-export { UserInput, RangeInput } from "./UserInput";
+// agent-canvas's canvas component set: the kernel's components plus the ones
+// only this host can back (SecretInput needs the daemon's secret endpoints).
+export * from "@fabrika/canvas-kernel/components";
 export { SecretInput } from "./SecretInput";
-export { ImageView } from "./Image";
-export { Markdown } from "./Markdown";
-export { useFeedback } from "#canvas/runtime";

package/daemon/client/styles.css

@@ -1,458 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
-
-@import "tailwindcss";
-@import "./theme.css";
+/* agent-canvas's Tailwind entry.
+   The kernel's stylesheet brings Tailwind, the theme and the kernel's own
+   @source glob; this adds the globs for the chrome that lives in this host. */
+@import "@fabrika/canvas-kernel/styles.css";
 @source "./**/*.{tsx,ts,jsx,js}";
-
-/* ── Non-theme CSS variables (not used by Tailwind utilities, just custom CSS) ── */
-:root {
-  --color-shadow: rgba(0, 0, 0, 0.25);
-  --color-scrollbar: rgba(255, 248, 240, 0.06);
-  --color-scrollbar-hover: rgba(255, 248, 240, 0.12);
-  --color-folder-fill: rgba(196, 154, 58, 0.15);
-  --color-folder-fill-active: rgba(196, 154, 58, 0.25);
-  --color-folder-stroke: rgba(196, 154, 58, 0.5);
-  --color-folder-stroke-active: #c49a3a;
-  --color-hljs-base: #c4beb7;
-  --color-hljs-keyword: #d2a6ff;
-  --color-hljs-string: #a8cc8c;
-  --color-hljs-comment: #847d75;
-  --color-hljs-number: #e8a87c;
-  --color-hljs-variable: #7ec8e3;
-  --color-hljs-function: #dbc074;
-  --color-hljs-punctuation: #a09a92;
-}
-
-[data-theme="light"] {
-  /* Override Tailwind theme vars */
-  --color-bg-base: #faf5e6;
-  --color-bg-surface: #f3edd8;
-  --color-bg-elevated: #ebe4ce;
-  --color-bg-code: #f0ebd5;
-  --color-bg-input: rgba(80, 60, 10, 0.05);
-  --color-bg-elevated-half: rgba(235, 228, 206, 0.5);
-
-  --color-text-primary: #2a2520;
-  --color-text-secondary: #5a5550;
-  --color-text-tertiary: #9a9390;
-  --color-text-code: #4a4540;
-  --color-text-disabled: #c5c0b8;
-  --color-text-inverse: #faf6ef;
-
-  --color-border-subtle: rgba(80, 60, 30, 0.08);
-  --color-border-medium: rgba(80, 60, 30, 0.10);
-  --color-border-hover: rgba(80, 60, 30, 0.15);
-  --color-border-strong: rgba(80, 60, 30, 0.20);
-
-  --color-accent-green: #3a8a5a;
-  --color-accent-green-muted: rgba(58, 138, 90, 0.10);
-  --color-accent-amber: #a07820;
-  --color-accent-amber-muted: rgba(160, 120, 32, 0.10);
-  --color-accent-red: #b84a4a;
-  --color-accent-red-muted: rgba(184, 74, 74, 0.08);
-  --color-accent-blue: #4a7eb4;
-  --color-accent-blue-muted: rgba(74, 126, 180, 0.08);
-
-  --color-highlight-bg: rgba(200, 160, 30, 0.15);
-  --color-highlight-border: rgba(200, 160, 30, 0.40);
-  --color-highlight-annotation: rgba(200, 160, 30, 0.18);
-  --color-highlight-active: rgba(200, 160, 30, 0.35);
-  --color-highlight-selected: rgba(200, 160, 30, 0.10);
-
-  --color-badge-bg: rgba(160, 120, 32, 0.15);
-  --color-btn-primary: #2a2520;
-  --color-btn-primary-text: #faf6ef;
-
-  /* Override non-theme vars */
-  --color-shadow: rgba(80, 60, 30, 0.10);
-  --color-scrollbar: rgba(80, 60, 30, 0.08);
-  --color-scrollbar-hover: rgba(80, 60, 30, 0.15);
-  --color-folder-fill: rgba(160, 120, 32, 0.12);
-  --color-folder-fill-active: rgba(160, 120, 32, 0.22);
-  --color-folder-stroke: rgba(160, 120, 32, 0.4);
-  --color-folder-stroke-active: #a07820;
-  --color-hljs-base: #4a4540;
-  --color-hljs-keyword: #7c3aed;
-  --color-hljs-string: #2e7d32;
-  --color-hljs-comment: #9a9390;
-  --color-hljs-number: #c45a20;
-  --color-hljs-variable: #1976d2;
-  --color-hljs-function: #8a6d00;
-  --color-hljs-punctuation: #6b6560;
-}
-
-/* ── Base styles ── */
-@layer base {
-  body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background-color: var(--color-bg-base);
-    color: var(--color-text-primary);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
-
-code, pre, .font-mono {
-  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-}
-
-/* Annotation inline marks */
-mark[data-annotation-id] {
-  background: var(--color-highlight-annotation);
-  border-bottom: 1.5px solid var(--color-highlight-bg);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background 150ms ease, box-shadow 150ms ease;
-  color: inherit;
-  padding: 1px 0;
-}
-
-mark[data-annotation-id].mark-active {
-  background: var(--color-highlight-active);
-  border-bottom: 2px solid var(--color-highlight-border);
-  box-shadow: 0 0 0 1px var(--color-highlight-border);
-}
-
-@keyframes ann-flash {
-  0%, 100% { background: var(--color-highlight-annotation); }
-  25%, 75% { background: var(--color-highlight-active); }
-}
-
-.ann-flash {
-  animation: ann-flash 0.6s ease 2;
-}
-
-/* Annotation highlight (legacy) */
-.annotation-highlight {
-  background: var(--color-highlight-bg);
-  border-bottom: 2px solid var(--color-highlight-border);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background 150ms ease;
-}
-
-.annotation-highlight:hover,
-.annotation-highlight.active {
-  background: var(--color-highlight-active);
-}
-
-/* Selection color */
-::selection {
-  background-color: var(--color-highlight-active);
-  color: var(--color-text-primary);
-}
-
-/* Focus ring */
-*:focus-visible {
-  outline: 2px solid var(--color-accent-blue);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-textarea:focus-visible {
-  outline: none;
-}
-
-/* Transitions */
-button, a, [role="button"] {
-  transition: all 150ms ease;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-scrollbar);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-scrollbar-hover);
-}
-
-/* Diff highlights for compare view */
-.diff-added {
-  background-color: color-mix(in srgb, var(--color-accent-green) 25%, transparent);
-  border-radius: 2px;
-  padding-inline: 1px;
-  padding-block: 1px;
-}
-.diff-removed {
-  background-color: color-mix(in srgb, var(--color-accent-red) 25%, transparent);
-  border-radius: 2px;
-  padding-inline: 1px;
-  padding-block: 1px;
-  text-decoration: line-through;
-  text-decoration-color: var(--color-accent-red);
-}
-
-/* Block-level diff highlights for unified compare view */
-.diff-block-removed {
-  background: color-mix(in srgb, var(--color-accent-red) 8%, transparent);
-  border-left: 3px solid var(--color-accent-red);
-  opacity: 0.7;
-}
-.diff-block-added {
-  background: color-mix(in srgb, var(--color-accent-green) 8%, transparent);
-  border-left: 3px solid var(--color-accent-green);
-}
-.diff-row-removed td {
-  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
-  text-decoration: line-through;
-  text-decoration-color: var(--color-accent-red);
-  opacity: 0.6;
-}
-.diff-row-added td {
-  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
-}
-.diff-item-removed {
-  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
-  text-decoration: line-through;
-  text-decoration-color: var(--color-accent-red);
-  opacity: 0.6;
-}
-.diff-item-added {
-  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
-}
-.diff-block-label {
-  position: absolute;
-  top: 4px;
-  right: 8px;
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 1px 6px;
-  border-radius: 3px;
-  pointer-events: none;
-}
-
-/* Plan update flash */
-@keyframes plan-refresh {
-  0%   { opacity: 0.6; }
-  100% { opacity: 1; }
-}
-
-.plan-updated {
-  animation: plan-refresh 300ms ease;
-}
-
-/* Range input styling */
-input[type="range"] {
-  height: 20px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-accent-amber);
-  cursor: pointer;
-  border: 2px solid var(--color-bg-base);
-  margin-top: -5px;
-}
-
-input[type="range"]::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-accent-amber);
-  cursor: pointer;
-  border: 2px solid var(--color-bg-base);
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: 2px;
-  background: transparent;
-}
-
-input[type="range"]::-moz-range-track {
-  height: 4px;
-  border-radius: 2px;
-  background: transparent;
-}
-
-/* Prose (Markdown component) */
-.prose-canvas {
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  line-height: 1.7;
-}
-
-.prose-canvas h1, .prose-canvas h2, .prose-canvas h3,
-.prose-canvas h4, .prose-canvas h5, .prose-canvas h6 {
-  color: var(--color-text-primary);
-  font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  line-height: 1.3;
-}
-
-.prose-canvas h1 { font-size: 1.5rem; }
-.prose-canvas h2 { font-size: 1.25rem; }
-.prose-canvas h3 { font-size: 1.1rem; }
-
-.prose-canvas h1:first-child, .prose-canvas h2:first-child,
-.prose-canvas h3:first-child {
-  margin-top: 0;
-}
-
-.prose-canvas p {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose-canvas p:first-child {
-  margin-top: 0;
-}
-
-.prose-canvas a {
-  color: var(--color-accent-blue);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--color-accent-blue) 40%, transparent);
-  text-underline-offset: 2px;
-}
-
-.prose-canvas a:hover {
-  text-decoration-color: var(--color-accent-blue);
-}
-
-.prose-canvas strong {
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.prose-canvas code {
-  font-size: 0.8em;
-  background: var(--color-bg-code);
-  color: var(--color-text-code);
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-
-.prose-canvas pre {
-  background: var(--color-bg-code);
-  border-radius: 8px;
-  padding: 1em;
-  overflow-x: auto;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose-canvas pre code {
-  background: transparent;
-  padding: 0;
-  font-size: 0.8rem;
-}
-
-.prose-canvas ul, .prose-canvas ol {
-  padding-left: 1.5em;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose-canvas ul { list-style-type: disc; }
-.prose-canvas ol { list-style-type: decimal; }
-.prose-canvas li { margin-top: 0.25em; }
-.prose-canvas li > ul, .prose-canvas li > ol { margin-top: 0.25em; margin-bottom: 0; }
-
-.prose-canvas blockquote {
-  border-left: 3px solid var(--color-border-strong);
-  padding-left: 1em;
-  margin-left: 0;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-  color: var(--color-text-tertiary);
-}
-
-.prose-canvas hr {
-  border: none;
-  border-top: 1px solid var(--color-border-subtle);
-  margin: 1.5em 0;
-}
-
-.prose-canvas table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-  font-size: 0.8rem;
-}
-
-.prose-canvas th, .prose-canvas td {
-  border: 1px solid var(--color-border-subtle);
-  padding: 0.5em 0.75em;
-  text-align: left;
-}
-
-.prose-canvas th {
-  background: var(--color-bg-elevated);
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.prose-canvas img {
-  max-width: 100%;
-  border-radius: 8px;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-/* highlight.js overrides */
-.hljs {
-  background: transparent !important;
-  color: var(--color-hljs-base) !important;
-}
-
-pre code.hljs {
-  padding: 0 !important;
-}
-
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
-  color: var(--color-hljs-keyword) !important;
-}
-
-.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal,
-.hljs-template-tag, .hljs-template-variable, .hljs-type {
-  color: var(--color-hljs-string) !important;
-}
-
-.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {
-  color: var(--color-hljs-comment) !important;
-}
-
-.hljs-number, .hljs-regexp, .hljs-addition {
-  color: var(--color-hljs-number) !important;
-}
-
-.hljs-variable, .hljs-attr {
-  color: var(--color-hljs-variable) !important;
-}
-
-.hljs-function .hljs-title, .hljs-title.function_ {
-  color: var(--color-hljs-function) !important;
-}
-
-.hljs-params {
-  color: var(--color-hljs-base) !important;
-}
-
-.hljs-property {
-  color: var(--color-hljs-variable) !important;
-}
-
-.hljs-punctuation {
-  color: var(--color-hljs-punctuation) !important;
-}