@fabrika/canvas-kernel 0.1.44 → 0.2.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 (66) hide show
  1. package/README.md +33 -67
  2. package/index.ts +19 -83
  3. package/package.json +68 -72
  4. package/src/client/AnnotationProvider.tsx +227 -268
  5. package/src/client/AnnotationSidebar.tsx +392 -338
  6. package/src/client/FileIcon.tsx +106 -65
  7. package/src/client/PlanRenderer.tsx +607 -551
  8. package/src/client/RenderErrorContext.ts +7 -7
  9. package/src/client/ResponsePreview.tsx +192 -173
  10. package/src/client/annotationDom.ts +43 -97
  11. package/src/client/annotationDraft.ts +98 -92
  12. package/src/client/appContext.tsx +40 -40
  13. package/src/client/components/Callout.tsx +20 -20
  14. package/src/client/components/Checklist.tsx +28 -28
  15. package/src/client/components/Choice.tsx +178 -159
  16. package/src/client/components/CodeBlock.tsx +26 -26
  17. package/src/client/components/Diff.tsx +17 -17
  18. package/src/client/components/FilePreview.tsx +99 -74
  19. package/src/client/components/Image.tsx +41 -39
  20. package/src/client/components/Markdown.tsx +33 -32
  21. package/src/client/components/Mermaid.tsx +592 -542
  22. package/src/client/components/Note.tsx +8 -8
  23. package/src/client/components/Priority.tsx +11 -11
  24. package/src/client/components/ResponseNote.tsx +17 -15
  25. package/src/client/components/Section.tsx +28 -26
  26. package/src/client/components/Table.tsx +34 -29
  27. package/src/client/components/Task.tsx +58 -60
  28. package/src/client/components/UserInput.tsx +169 -152
  29. package/src/client/components/index.ts +16 -16
  30. package/src/client/components/renderMarkdownChildren.tsx +86 -68
  31. package/src/client/diffLines.ts +51 -39
  32. package/src/client/generateMarkdown.ts +197 -191
  33. package/src/client/hostContext.tsx +34 -34
  34. package/src/client/index.ts +43 -125
  35. package/src/client/preact-all.ts +4 -4
  36. package/src/client/runtime.ts +58 -111
  37. package/src/client/styles.css +1 -74
  38. package/src/engine/compiler.ts +316 -313
  39. package/src/engine/paths.ts +44 -44
  40. package/src/engine/session.ts +623 -618
  41. package/src/engine/watcher.ts +63 -60
  42. package/src/engine/websocket.ts +123 -121
  43. package/annotate.ts +0 -94
  44. package/daemon.ts +0 -46
  45. package/src/client/AnnotationDraftFooter.tsx +0 -76
  46. package/src/client/AnnotationEditor.tsx +0 -320
  47. package/src/client/AnnotationList.tsx +0 -190
  48. package/src/client/Popover.tsx +0 -361
  49. package/src/client/SessionContext.tsx +0 -3
  50. package/src/client/annotationContext.ts +0 -130
  51. package/src/client/annotationMarkdown.ts +0 -102
  52. package/src/client/annotationTarget.ts +0 -73
  53. package/src/client/blockTarget.ts +0 -127
  54. package/src/client/highlightRange.ts +0 -262
  55. package/src/client/popoverPosition.ts +0 -46
  56. package/src/client/regionTarget.ts +0 -180
  57. package/src/client/testing/dom.ts +0 -58
  58. package/src/client/textTarget.ts +0 -31
  59. package/src/client/useRegionAnnotation.tsx +0 -188
  60. package/src/client/useTextAnnotation.tsx +0 -194
  61. package/src/client/utils.ts +0 -33
  62. package/src/engine/channel.ts +0 -278
  63. package/src/engine/http-utils.ts +0 -14
  64. package/src/engine/lifecycle.ts +0 -302
  65. package/src/engine/router.ts +0 -16
  66. package/src/engine/waiter.ts +0 -188
package/src/client/FileIcon.tsx CHANGED
@@ -1,76 +1,117 @@
1
- import React from "react";
1
+ import React from 'react'
2
2
 
3
3
  interface FileIconProps {
4
- name: string;
5
- type: "file" | "dir";
6
- expanded?: boolean;
7
- className?: string;
4
+ name: string
5
+ type: 'file' | 'dir'
6
+ expanded?: boolean
7
+ className?: string
8
8
  }
9
9
 
10
10
  const extColors: Record<string, string> = {
11
- // TypeScript / JavaScript
12
- ts: "#3178c6", tsx: "#3178c6", js: "#e8a32e", jsx: "#4ba0c8",
13
- // Web
14
- html: "#e34c26", css: "#264de4", scss: "#c69",
15
- // Data
16
- json: "#7a7568", yaml: "#cb171e", yml: "#cb171e", toml: "#9c4221",
17
- // Systems
18
- rs: "#dea584", go: "#00add8", c: "#6a6a6a", cpp: "#f34b7d", h: "#6a6a6a",
19
- // Scripting
20
- py: "#3572a5", rb: "#cc342d", sh: "#5a8c3c", bash: "#5a8c3c",
21
- // Markup / docs
22
- md: "#3573b5", txt: "#6b6560",
23
- // Config
24
- lock: "#6b6560", gitignore: "#6b6560",
25
- // Images
26
- svg: "#d9952e", png: "#6a9c2e", jpg: "#6a9c2e", gif: "#6a9c2e",
27
- };
11
+ // TypeScript / JavaScript
12
+ ts: '#3178c6',
13
+ tsx: '#3178c6',
14
+ js: '#e8a32e',
15
+ jsx: '#4ba0c8',
16
+ // Web
17
+ html: '#e34c26',
18
+ css: '#264de4',
19
+ scss: '#c69',
20
+ // Data
21
+ json: '#7a7568',
22
+ yaml: '#cb171e',
23
+ yml: '#cb171e',
24
+ toml: '#9c4221',
25
+ // Systems
26
+ rs: '#dea584',
27
+ go: '#00add8',
28
+ c: '#6a6a6a',
29
+ cpp: '#f34b7d',
30
+ h: '#6a6a6a',
31
+ // Scripting
32
+ py: '#3572a5',
33
+ rb: '#cc342d',
34
+ sh: '#5a8c3c',
35
+ bash: '#5a8c3c',
36
+ // Markup / docs
37
+ md: '#3573b5',
38
+ txt: '#6b6560',
39
+ // Config
40
+ lock: '#6b6560',
41
+ gitignore: '#6b6560',
42
+ // Images
43
+ svg: '#d9952e',
44
+ png: '#6a9c2e',
45
+ jpg: '#6a9c2e',
46
+ gif: '#6a9c2e',
47
+ }
28
48
 
29
49
  const extLabels: Record<string, string> = {
30
- ts: "TS", tsx: "TX", js: "JS", jsx: "JX",
31
- py: "PY", rs: "RS", go: "GO", rb: "RB",
32
- json: "{}", yaml: "YM", yml: "YM", toml: "TM",
33
- html: "<>", css: "#", scss: "#",
34
- md: "M↓", sh: "$", bash: "$",
35
- c: "C", cpp: "C+", h: "H",
36
- svg: "◇", png: "▣", jpg: "▣",
37
- };
50
+ ts: 'TS',
51
+ tsx: 'TX',
52
+ js: 'JS',
53
+ jsx: 'JX',
54
+ py: 'PY',
55
+ rs: 'RS',
56
+ go: 'GO',
57
+ rb: 'RB',
58
+ json: '{}',
59
+ yaml: 'YM',
60
+ yml: 'YM',
61
+ toml: 'TM',
62
+ html: '<>',
63
+ css: '#',
64
+ scss: '#',
65
+ md: 'M↓',
66
+ sh: '$',
67
+ bash: '$',
68
+ c: 'C',
69
+ cpp: 'C+',
70
+ h: 'H',
71
+ svg: '◇',
72
+ png: '▣',
73
+ jpg: '▣',
74
+ }
38
75
 
39
- export function FileIcon({ name, type, expanded, className = "" }: FileIconProps) {
40
- if (type === "dir") {
41
- return (
42
- <svg width="14" height="14" viewBox="0 0 16 16" fill="none" className={`flex-shrink-0 ${className}`}>
43
- {expanded ? (
44
- <path d="M1.5 3.5h5l1.5 1.5h6.5v8h-13z" style={{ fill: "var(--color-folder-fill-active)", stroke: "var(--color-folder-stroke-active)" }} strokeWidth="1" />
45
- ) : (
46
- <path d="M1.5 3.5h5l1.5 1.5h6.5v8h-13z" style={{ fill: "var(--color-folder-fill)", stroke: "var(--color-folder-stroke)" }} strokeWidth="1" />
47
- )}
48
- </svg>
49
- );
50
- }
76
+ export function FileIcon({ name, type, expanded, className = '' }: FileIconProps) {
77
+ if (type === 'dir') {
78
+ return (
79
+ <svg width="14" height="14" viewBox="0 0 16 16" fill="none" className={`flex-shrink-0 ${className}`}>
80
+ {expanded
81
+ ? (
82
+ <path
83
+ d="M1.5 3.5h5l1.5 1.5h6.5v8h-13z"
84
+ style={{ fill: 'var(--color-folder-fill-active)', stroke: 'var(--color-folder-stroke-active)' }}
85
+ strokeWidth="1"
86
+ />
87
+ )
88
+ : <path d="M1.5 3.5h5l1.5 1.5h6.5v8h-13z" style={{ fill: 'var(--color-folder-fill)', stroke: 'var(--color-folder-stroke)' }} strokeWidth="1" />}
89
+ </svg>
90
+ )
91
+ }
51
92
 
52
- const ext = name.includes(".") ? name.split(".").pop()!.toLowerCase() : "";
53
- const color = extColors[ext] || "#6b6560";
54
- const label = extLabels[ext];
93
+ const ext = name.includes('.') ? name.split('.').pop()!.toLowerCase() : ''
94
+ const color = extColors[ext] || '#6b6560'
95
+ const label = extLabels[ext]
55
96
 
56
- return (
57
- <svg width="14" height="14" viewBox="0 0 16 16" className={`flex-shrink-0 ${className}`}>
58
- {/* File shape with folded corner */}
59
- <path d="M2 1.5h8l3.5 3.5v9.5a1 1 0 01-1 1H3a1 1 0 01-1-1v-12a1 1 0 011-1z" fill={color} opacity="0.85" />
60
- <path d="M10 1.5v2.5a1 1 0 001 1h2.5" fill="none" stroke="white" strokeWidth="0.5" opacity="0.5" />
61
- {label && (
62
- <text
63
- x="8"
64
- y="11.5"
65
- textAnchor="middle"
66
- fill="white"
67
- fontSize="5.5"
68
- fontFamily="monospace"
69
- fontWeight="600"
70
- >
71
- {label}
72
- </text>
73
- )}
74
- </svg>
75
- );
97
+ return (
98
+ <svg width="14" height="14" viewBox="0 0 16 16" className={`flex-shrink-0 ${className}`}>
99
+ {/* File shape with folded corner */}
100
+ <path d="M2 1.5h8l3.5 3.5v9.5a1 1 0 01-1 1H3a1 1 0 01-1-1v-12a1 1 0 011-1z" fill={color} opacity="0.85" />
101
+ <path d="M10 1.5v2.5a1 1 0 001 1h2.5" fill="none" stroke="white" strokeWidth="0.5" opacity="0.5" />
102
+ {label && (
103
+ <text
104
+ x="8"
105
+ y="11.5"
106
+ textAnchor="middle"
107
+ fill="white"
108
+ fontSize="5.5"
109
+ fontFamily="monospace"
110
+ fontWeight="600"
111
+ >
112
+ {label}
113
+ </text>
114
+ )}
115
+ </svg>
116
+ )
76
117
  }