koboyo 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koboyo",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Render Koboyo diagram code to SVG and PNG on your own machine. No account needed.",
   "keywords": [
     "koboyo",
@@ -51,11 +51,11 @@
     "zod": "^4.4.3",
     "@koboyo/agent-tools": "0.0.0",
     "@koboyo/compiler": "0.0.0",
-    "@koboyo/headless": "0.0.0",
-    "@koboyo/model": "0.0.0",
-    "@koboyo/local-editor": "0.0.0",
     "@koboyo/language": "0.0.0",
-    "@koboyo/renderer": "0.0.0"
+    "@koboyo/model": "0.0.0",
+    "@koboyo/headless": "0.0.0",
+    "@koboyo/renderer": "0.0.0",
+    "@koboyo/local-editor": "0.0.0"
   },
   "scripts": {
     "build": "node --import tsx scripts/build.mjs",

package/skills/koboyo/SKILL.md

@@ -3,7 +3,7 @@ name: koboyo
 description: "Draw diagrams as code and render them to SVG, PNG or HTML on this machine with the koboyo CLI: architecture and dependency maps, flowcharts, sequence diagrams, ERDs and class diagrams, state machines, mind maps, gantt charts, timelines and more. Use when the user asks to draw, diagram, visualize, map or explain a system, a codebase, a request flow, a data model or a process, or wants a picture for docs or a README; and to let the user edit a diagram by hand in a local editor and read their edits back."
 ---
 
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Koboyo diagrams
 
@@ -48,6 +48,9 @@ without drawing. Add `--json` to any command for one JSON result on stdout.
 - A PNG: `-o docs/checkout.png` (`--width` sets its width in pixels).
 - Existing Mermaid: `koboyo render flow.mmd` draws it directly, and
   `koboyo convert flow.mmd` writes flow.kbd to keep working in Koboyo code.
+- Keeping committed pictures current: `koboyo render docs/*.kbd --check` writes nothing
+  and exits 1 when an SVG no longer matches its code. Use it in CI, with the same options
+  as the render.
 
 ## Visualize a codebase
 
@@ -100,6 +103,12 @@ To bring the code in line with their edits, apply `changes` to the `.kbd`. Rewri
 `.kbd` while the editor is open redraws the board, unless it has hand edits; then the
 editor asks the person which to keep. Never write the `.kby` yourself.
 
+When the person would rather sketch than describe, hand them a blank board: open a
+`.kby` that does not exist yet (`koboyo open docs/sketch.kby --wait --json`, or
+`open_editor({ path: "docs/sketch.kby" })`) and it is created empty. A `.kbd` is never
+created empty; write its code first. What they draw comes back the same way, in `changes`
+and the PNG, and stays in the `.kby`.
+
 The person can pin comments on the drawing for you ("make this Postgres"). Treat each as a
 request: do it in the `.kbd`, then answer it so they see it was handled, in the editor if
 it is still open:
@@ -120,6 +129,27 @@ call it again with the same sessionId;
 `read_drawing({ path })` reads the board as it is now, without waiting. Both list the open
 comments; `reply_to_comment({ path, commentId, text, resolve })` answers one.
 
+The server also draws on boards directly, with the hosted server's board tools taking a
+`path` to a `.kby`: `create_diagram`, `read_canvas`, `draw_shapes`, `update_shapes`,
+`connect_shapes`, `add_flow` and the rest. While the board is open in the editor, the
+person watches each change land.
+
+To get the person's feedback on something visual you built — a page, a screen, a chart:
+
+1. Take a screenshot with your browser tool and save it in the project.
+2. `add_image({ path: "review.kby", image: "shots/login.png" })` puts it on a board.
+3. Optionally `annotate_image` the spots you want an opinion on, at pixel positions you
+   MEASURED (the element's bounding box times the device pixel ratio, or OCR boxes). Never
+   guess a position from looking at the picture.
+4. `open_editor({ path: "review.kby", message: "Does the form read clearly?" })`, then
+   `wait_for_edits`.
+5. Each comment pinned on the screenshot comes back with `image` { file, x, y }, and each
+   box, arrow or scribble they drew over it is in `imageMarks` with its `box` — all in the
+   screenshot's own pixels, so you can find the exact element they mean.
+
+Drew two or three variants as frames? `offer_choices({ sessionId, question, options })`
+asks the person to pick one; `wait_for_edits` returns it as `chosen`.
+
 ## MCP tools
 
 If a `koboyo` MCP server is connected (`koboyo setup` adds it), its tools do the same work
@@ -139,6 +169,8 @@ koboyo save docs/architecture.kbd # upload it as a board and print its link
 
 Saving the same file again updates the same board. `koboyo whoami` shows who is signed
 in and `koboyo logout` signs out. The editor's **Save to cloud** button does the same.
+Where no browser can open (an SSH session), `koboyo login` prints a code instead: tell
+the user to enter it at the address it prints, on any device, and wait for it to finish.
 Saving needs Koboyo Pro; without it the command says how to start a trial. Do not bring
 it up unless the user asks to share.
 

package/skills/koboyo/references/architecture.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Architecture diagrams
 
@@ -14,7 +14,7 @@ _Icons, colours, and layout are the compiler's job; you write the structure._
 ```koboyo
 title: Image upload service
 
-Client [browser]
+Client [monitor]
 API [aws/api-gateway]
 Resize [aws/lambda, green]
 Bucket [aws/simple-storage-service, orange]
@@ -138,7 +138,7 @@ Oracle, Twitter, RSS -> Ingest -> Warehouse
 Nodes may declare their attributes the first time they appear inside an edge:
 
 ```koboyo
-Backend [server, blue] -> Client [browser]
+Backend [server, blue] -> Client [monitor]
 Backend --> Cache [cylinder, red]: warm
 ```
 
@@ -167,7 +167,7 @@ title: Three-tier web app
 direction: right
 
 group Edge [gray] {
-  Browser [browser]
+  Browser [app-window]
   CDN [cloud, blue]
 }
 group Application [violet] {

package/skills/koboyo/references/bpmn.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # BPMN and swimlanes
 

package/skills/koboyo/references/chart.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Charts
 

package/skills/koboyo/references/cycle.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/erd.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Entity-relationship diagrams
 

package/skills/koboyo/references/flowchart.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Flowcharts
 

package/skills/koboyo/references/funnel.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/gantt.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Gantt charts as code
 

package/skills/koboyo/references/gitgraph.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Git graphs as code
 

package/skills/koboyo/references/journey.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/matrix.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/mindmap.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Mind maps
 
@@ -91,7 +91,7 @@ central: Machine learning
 - Reinforcement [orange, icon: target]
   - Policy
   - Reward
-- Tooling [violet, icon: tool]
+- Tooling [violet, icon: toolbox]
   - Python
   - Notebooks
 ```

package/skills/koboyo/references/orgchart.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Org charts
 

package/skills/koboyo/references/pyramid.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/sankey.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Sankey diagrams as code
 

package/skills/koboyo/references/sequence.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Sequence diagrams
 

package/skills/koboyo/references/statemachine.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # State machines
 

package/skills/koboyo/references/timeline.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/venn.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/wireframe.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.1.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Wireframes
 

package/assets/editor/assets/IconArrowBackUp-Brd2WpCh.js

@@ -1 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t}from"./jsx-runtime-2Zwg-L3c.js";import{_ as n}from"./selection-overlay-primitives-hWJ1xjF7.js";import{t as r}from"./editable-target-BTLnvKNi.js";import{t as i}from"./createReactComponent-9UsI5fmM.js";var a=e(t(),1),o=`button, a[href], summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"], [role="checkbox"], [role="switch"], [role="radio"]`;function s(e){return e instanceof Element&&e.closest(o)!==null}function c(e,t={}){let{preventDefault:i=!1}=t,[o,c]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{function t(t){t.code===e&&(r(t.target)||s(t.target)||(i&&t.preventDefault(),c(!0)))}function a(t){t.code!==e&&t.key!==`Meta`||c(!1)}window.addEventListener(`keydown`,t),window.addEventListener(`keyup`,a);let o=n(()=>c(!1));return()=>{window.removeEventListener(`keydown`,t),window.removeEventListener(`keyup`,a),o()}},[e,i]),o}var l=i(`outline`,`arrow-back-up`,`ArrowBackUp`,[[`path`,{d:`M9 14l-4 -4l4 -4`,key:`svg-0`}],[`path`,{d:`M5 10h11a4 4 0 1 1 0 8h-1`,key:`svg-1`}]]);export{s as n,c as r,l as t};

package/assets/editor/assets/IconNote-C0uYQWp-.js

@@ -1 +0,0 @@
-import{t as e}from"./createReactComponent-9UsI5fmM.js";var t=e(`outline`,`note`,`Note`,[[`path`,{d:`M13 20l7 -7`,key:`svg-0`}],[`path`,{d:`M13 20v-6a1 1 0 0 1 1 -1h6v-7a2 2 0 0 0 -2 -2h-12a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7`,key:`svg-1`}]]);export{t};

package/assets/editor/assets/build-pips-CIaHaEPB.js

@@ -1 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t,t as n}from"./jsx-runtime-2Zwg-L3c.js";import{a as r,o as i}from"./editor-B0tARd79.js";import{Zt as a,cn as o,i as s}from"./slides-D9bnXqtf.js";import{t as c}from"./createReactComponent-9UsI5fmM.js";import{_ as l,f as u,h as d,m as f,n as p,o as m,r as h,v as g}from"./plan-jQm1jDpt.js";import{n as _,r as v}from"./edit-BJ_kibk8.js";var y=c(`outline`,`corner-down-right`,`CornerDownRight`,[[`path`,{d:`M6 6v6a3 3 0 0 0 3 3h10l-4 -4m0 8l4 -4`,key:`svg-0`}]]),b=e(t(),1),x=n(),S=21,C=3;function w(e){let{zoom:t}=e,n=i(e=>e.animateSlideId),c=i(e=>e.shapes),w=i(e=>e.hoveredId),{store:T,history:E,measurement:D}=r(),O=(0,b.useMemo)(()=>{if(n)return s(c).find(e=>e.id===n)},[n,c]),k=(0,b.useMemo)(()=>{if(!O)return[];let e=l(c,O),t=u(c,O),n=h(t),r=t.flatMap((t,r)=>p([t],e).map(e=>({unit:{shapes:e.items.map(e=>e.shape),groupId:e.groupId},rowId:m(e),step:n[r],follows:e.withPrevious}))),i=f(c,O,e).map(e=>({unit:e,rowId:null,step:null,follows:!1})),a=[...r,...i],o=new Map;return a.map(e=>{let t=e.unit.groupId??e.unit.shapes[0].id,n=o.get(t)??0;return o.set(t,n+1),{...e,lane:n}})},[c,O]);if(!O||k.length===0)return null;function A(e,t){let r=T.getState().shapes,i=s(r).find(e=>e.id===n);if(!i)return;let a=l(r,i),o=u(r,i),c=t?v(p(o,a),t):_(o,[e],d(e.shapes[0]));c.length!==0&&(E.beginTransaction(),T.getState().replaceMany(c),E.endTransaction())}function j(e){return{onPointerEnter:()=>T.getState().setHoveredId(e),onPointerLeave:()=>T.getState().setHoveredId(null)}}return(0,x.jsx)(`div`,{"data-testid":`build-pips`,className:`pointer-events-none absolute left-0 top-0`,children:k.map(({unit:e,rowId:n,step:r,follows:i,lane:s})=>{let c=a(e.shapes,D)??o(e.shapes[0],D),l=r!==null,u=e.shapes.some(e=>e.id===w);return(0,x.jsx)(`div`,{className:`absolute`,style:{left:c.x-(C+s*S)/t,top:c.y-C/t},children:(0,x.jsx)(`button`,{type:`button`,"data-testid":l?`build-pip`:`build-pip-add`,"data-follows":l&&i?`true`:void 0,title:l?i?`Plays with click ${r}. Press to remove.`:`Click ${r}. Press to remove.`:`Click to animate this`,style:{transform:`scale(${1/t})`,transformOrigin:`100% 100%`},onPointerDown:e=>e.stopPropagation(),onClick:t=>{t.stopPropagation(),A(e,n)},...j(e.shapes[0].id),className:`pointer-events-auto absolute bottom-0 right-0 flex items-center justify-center rounded-md text-[11px] leading-none tabular-nums ring-1 transition-[opacity,background-color,color] ${l?`h-[18px] min-w-[18px] bg-[var(--chrome-accent)] px-1 text-white ring-[var(--chrome-accent)]`:`h-[15px] w-[15px] bg-[var(--chrome-popup)] text-[var(--chrome-fg-500)] ring-[var(--chrome-ring)] hover:text-[var(--chrome-fg-900)] ${u?`opacity-100`:`opacity-45 hover:opacity-100`}`}`,children:l?i?(0,x.jsx)(y,{size:11,stroke:2.25}):r:`+`})},n??g(e))})})}export{w as BuildPips};