makersclaw 0.3.2 → 0.4.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 (81) hide show
  1. package/README.md +3 -1
  2. package/package.json +1 -1
  3. package/r/annotate.json +3 -3
  4. package/r/approval-request.json +2 -2
  5. package/r/audio-player.json +2 -2
  6. package/r/auth-form.json +2 -2
  7. package/r/board.json +2 -2
  8. package/r/calendar-view.json +3 -3
  9. package/r/cart.json +2 -2
  10. package/r/chart.json +2 -2
  11. package/r/chat.json +2 -2
  12. package/r/code-editor.json +2 -2
  13. package/r/comment-box.json +3 -3
  14. package/r/contact-section.json +2 -2
  15. package/r/core.json +12 -6
  16. package/r/csv-import.json +3 -3
  17. package/r/data-table.json +2 -2
  18. package/r/diagram.json +2 -2
  19. package/r/doc-editor.json +2 -2
  20. package/r/doc-page.json +3 -3
  21. package/r/email-render.json +2 -2
  22. package/r/faq.json +2 -2
  23. package/r/file-upload.json +2 -2
  24. package/r/flow-canvas.json +2 -2
  25. package/r/footer.json +2 -2
  26. package/r/gantt.json +3 -3
  27. package/r/job-panel.json +8 -5
  28. package/r/json-editor.json +3 -3
  29. package/r/map.json +2 -2
  30. package/r/menubar.json +2 -2
  31. package/r/mind-map.json +3 -3
  32. package/r/navigation-menu.json +2 -2
  33. package/r/order-detail.json +2 -2
  34. package/r/org-chart.json +3 -3
  35. package/r/page-builder.json +2 -2
  36. package/r/payment-methods.json +2 -2
  37. package/r/pdf-document.json +2 -2
  38. package/r/pdf-viewer.json +2 -2
  39. package/r/product-detail.json +2 -2
  40. package/r/product-grid.json +3 -3
  41. package/r/record-form.json +2 -2
  42. package/r/record-notes.json +4 -4
  43. package/r/registry.json +131 -123
  44. package/r/search-dialog.json +2 -2
  45. package/r/settings-list.json +2 -2
  46. package/r/setup-checklist.json +2 -2
  47. package/r/share-dialog.json +2 -2
  48. package/r/sidebar.json +2 -2
  49. package/r/signature-pad.json +2 -2
  50. package/r/sketch-canvas.json +2 -2
  51. package/r/spreadsheet.json +2 -2
  52. package/r/stat-cards.json +3 -3
  53. package/r/task-list.json +3 -3
  54. package/r/task-model.json +2 -2
  55. package/r/testimonials.json +2 -2
  56. package/r/transaction-list.json +2 -2
  57. package/r/whiteboard.json +3 -3
  58. package/registry/blocks/job-panel/README.md +40 -3
  59. package/registry/blocks/job-panel/block.json +2 -2
  60. package/registry/blocks/job-panel/demo.jsx +75 -6
  61. package/registry/blocks/job-panel/job-panel.jsx +60 -11
  62. package/src/shadcn.mjs +1 -1
  63. package/templates/next/files/README.md +339 -73
  64. package/templates/next/files/app/auto-refresh.jsx +72 -10
  65. package/templates/next/files/app/claw-alive/route.js +17 -0
  66. package/templates/next/files/app/error-relay.jsx +9 -4
  67. package/templates/next/files/app/escape-relay.jsx +27 -0
  68. package/templates/next/files/app/frame.js +218 -0
  69. package/templates/next/files/app/layout.jsx +18 -3
  70. package/templates/next/files/check/run.mjs +25 -8
  71. package/templates/next/files/components/parts/fixture.jsx +29 -4
  72. package/templates/next/files/components/parts/index.js +2 -1
  73. package/templates/next/files/components/parts/live-work.jsx +235 -0
  74. package/templates/next/files/components/ui/button.jsx +6 -1
  75. package/templates/next/files/components/ui/date-picker.jsx +15 -2
  76. package/templates/next/files/components/ui/icon.jsx +37 -2
  77. package/templates/next/files/lib/claw.js +127 -28
  78. package/templates/next/files/lib/hooks.js +454 -33
  79. package/templates/next/files/lib/platform.js +113 -15
  80. package/templates/next/files/surfaces/README.md +3 -0
  81. package/templates/next/template.json +17 -6
@@ -5,7 +5,7 @@
5
5
  "title": "SearchDialog",
6
6
  "description": "One ⌘K search over every kind of record — chats, documents, images, projects, people. Before typing it shows your sections (Last opened, Recent); while typing, ranked matches with the typed text marked, a date, image thumbnails, and kind chips (All, Chats, Images…) to narrow them. Searches your list in the browser, or your server through an async onSearch. Built on the kit's Command; SearchPanel is the same box inline.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -44,7 +44,7 @@
44
44
  "docs": "Installed to components/makersclaw/blocks/search-dialog. Import: import { SearchDialog, SearchPanel } from \"@/components/makersclaw/blocks/search-dialog\". Props and an example: components/makersclaw/blocks/search-dialog/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
45
45
  "meta": {
46
46
  "makersclaw": {
47
- "version": "0.3.2",
47
+ "version": "0.4.0",
48
48
  "useWhen": "An app has more than one kind of record and wants one global search box or ⌘K palette to find any of them, or a search page with type filters."
49
49
  }
50
50
  }
@@ -5,7 +5,7 @@
5
5
  "title": "SettingsList",
6
6
  "description": "A card of settings, one row each — icon, label, description, meta lines, a badge, and its control: a Switch, a Select, a Button, a remove button or a menu of actions, with optional details that open under the row. Every change saves on its own through an async callback; the row shows the new value at once, a spinner while it saves, and on failure the old value back with the reason and Try again. variant=\"matrix\" is the notification grid: events by group down the side, channels (email, push, SMS) across, a switch per cell, stacked on a phone.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -59,7 +59,7 @@
59
59
  "docs": "Installed to components/makersclaw/blocks/settings-list. Import: import { SettingsList } from \"@/components/makersclaw/blocks/settings-list\". Props and an example: components/makersclaw/blocks/settings-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
60
60
  "meta": {
61
61
  "makersclaw": {
62
- "version": "0.3.2",
62
+ "version": "0.4.0",
63
63
  "useWhen": "An account or workspace settings screen where each setting applies the moment it is changed: preferences, two-step sign-in methods, signed-in devices, connected integrations, billing profiles, notification preferences per channel. Not for a form of fields saved together with one button (record-form)."
64
64
  }
65
65
  }
@@ -5,7 +5,7 @@
5
5
  "title": "SetupChecklist",
6
6
  "description": "The steps to get set up: which are done, how far along the whole is (a ring, a bar, or \"Step 2 of 4\"), and the button for the next one, sent out through an async onAction that can fail on the step. Four shapes: folding rows in a card with a dismiss menu, numbered step cards, a plain step list with a help panel, and bordered accordion rows that can be locked until the step before is done.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -44,7 +44,7 @@
44
44
  "docs": "Installed to components/makersclaw/blocks/setup-checklist. Import: import { SetupChecklist } from \"@/components/makersclaw/blocks/setup-checklist\". Props and an example: components/makersclaw/blocks/setup-checklist/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
45
45
  "meta": {
46
46
  "makersclaw": {
47
- "version": "0.3.2",
47
+ "version": "0.4.0",
48
48
  "useWhen": "A new account, workspace or shop has a few things to do before it is useful (complete the profile, invite the team, connect a tool, launch) and the founder should see what is left. Not for a running job's stages (kit Steps or job-panel), and not for a multi-page form wizard."
49
49
  }
50
50
  }
@@ -5,7 +5,7 @@
5
5
  "title": "ShareDialog",
6
6
  "description": "Who can see a record and how to let more people in: invite by email (comma separated, with an access level), each person with their access in a menu (can view, can edit, remove), sharing switches, and a link with a copy button that turns to a check. A dialog, or the same body inline (SharePanel). Every change is an async callback; a failure shows and the old value comes back.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -45,7 +45,7 @@
45
45
  "docs": "Installed to components/makersclaw/blocks/share-dialog. Import: import { ShareDialog, SharePanel } from \"@/components/makersclaw/blocks/share-dialog\". Props and an example: components/makersclaw/blocks/share-dialog/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
46
46
  "meta": {
47
47
  "makersclaw": {
48
- "version": "0.3.2",
48
+ "version": "0.4.0",
49
49
  "useWhen": "A record, project, document or workspace can be shared: an \"Invite\" or \"Share\" button, a members list with roles, a public link to copy."
50
50
  }
51
51
  }
package/r/sidebar.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "title": "Sidebar",
6
6
  "description": "An app's navigation down the left edge: app name or workspace switcher, groups of items with icons, counts and nested items, the signed-in person with their menu; collapses to icons (remembered) and becomes a Sheet behind a trigger on a phone. Optional: inset or floating look, a ⌘K search over every item, folding groups with colour dots, a second column (a mail list, or a parent's children to drill into), a \"New\" button and a \"…\" menu per item (a chat history).",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -62,7 +62,7 @@
62
62
  "docs": "Installed to components/makersclaw/blocks/sidebar. Import: import { Sidebar, SidebarLayout, SidebarTrigger, useSidebar } from \"@/components/makersclaw/blocks/sidebar\". Props and an example: components/makersclaw/blocks/sidebar/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
63
63
  "meta": {
64
64
  "makersclaw": {
65
- "version": "0.3.2",
65
+ "version": "0.4.0",
66
66
  "useWhen": "An app with more than a handful of places to go (inbox, deals, contacts, reports, settings, projects) that wants a real app shell: compose it in app/shell.jsx around the surfaces. Not for in-page tabs (Tabs) or a short strip of links."
67
67
  }
68
68
  }
@@ -5,7 +5,7 @@
5
5
  "title": "SignaturePad",
6
6
  "description": "A signature field (signature_pad) in the workspace theme: a full-name field, then draw on a paper box (smooth pen strokes, undo the last stroke, clear with Undo) or type the name set as a signature. Sign returns a record: a cropped transparent PNG in dark ink, the typed name, the mode and the time; the signed view shows it with Sign again. Works as a form field too, through a handle (toPNG, getSignature).",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [
11
11
  "signature_pad@5.1.4"
@@ -65,7 +65,7 @@
65
65
  "docs": "Installed to components/makersclaw/blocks/signature-pad. Import: import { SignaturePad, useSignaturePad, signatureRecord, formatSignedAt } from \"@/components/makersclaw/blocks/signature-pad\". Props and an example: components/makersclaw/blocks/signature-pad/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
66
66
  "meta": {
67
67
  "makersclaw": {
68
- "version": "0.3.2",
68
+ "version": "0.4.0",
69
69
  "useWhen": "A screen needs someone to sign: accepting a proposal or a quote, a delivery or work-done sign-off, a waiver, a consent form, an approval on a record. The proposal-accept block is built on it. It records an acceptance with a picture of the signature — it is not a certified legal e-signature (no identity check, no audit trail beyond what you store)."
70
70
  }
71
71
  }
@@ -5,7 +5,7 @@
5
5
  "title": "SketchCanvas",
6
6
  "description": "A freeform drawing canvas (Excalidraw) in the workspace theme: a Miro-style tool rail (select, pan, draw, shapes, arrows, text, image, eraser, frames), a floating toolbar over the selection with colours from the theme's tokens, zoom and undo controls, a friendly empty state, and stamp tools that place ready-made drawings (UI wireframe pieces built in). Optional locked background image for annotating a screenshot. The sketch is plain JSON; helpers read its words for an agent, and the handle exports a PNG.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [
11
11
  "@excalidraw/excalidraw@0.18.1"
@@ -92,7 +92,7 @@
92
92
  "docs": "Installed to components/makersclaw/blocks/sketch-canvas. Import: import { SketchCanvas, useSketchCanvas, SKETCH_TOOLS, WIREFRAME_STAMPS, STROKES, FILLS, emptySketch, isSketchEmpty, sketchToText, sketchItems, toSketch } from \"@/components/makersclaw/blocks/sketch-canvas\". Props and an example: components/makersclaw/blocks/sketch-canvas/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
93
93
  "meta": {
94
94
  "makersclaw": {
95
- "version": "0.3.2",
95
+ "version": "0.4.0",
96
96
  "useWhen": "A screen needs freehand drawing: a whiteboard, marking up a screenshot, sketching a UI wireframe, a diagram drawn by hand. The whiteboard, annotate and sketch-to-app blocks are built on it. Not for structured boards of cards and connectors (flow-canvas), charts (chart) or a kanban (board)."
97
97
  }
98
98
  }
@@ -5,7 +5,7 @@
5
5
  "title": "Spreadsheet",
6
6
  "description": "A table you edit like Google Sheets or Airtable, virtualised for 10,000+ rows: typed columns (text, number, currency, date, single and multiple select, person, checkbox, link, rating) each with its own in-cell editor, a cell cursor and range selection with the mouse and arrow keys, typing to edit, copy and paste ranges as TSV (to and from Sheets and Excel), drag-to-fill and ⌘D fill down, undo/redo, column resize, drag to reorder, hide, freeze, rename, change type and add fields, row insert and delete with Undo, sort and filter panels, search, a sum/average of the selection, validation marks, and a phone layout. Edits go out as async callbacks answering { ok }, applied at once and rolled back on failure. A column-type registry and an imperative handle for blocks built on it.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [
11
11
  "@tanstack/react-virtual@3.14.13"
@@ -83,7 +83,7 @@
83
83
  "docs": "Installed to components/makersclaw/blocks/spreadsheet. Import: import { Spreadsheet, CellValue, CellPanel, OptionBadge, editorFor, TYPE_ORDER, sortWords, COLUMN_TYPES, typeOf, parseCell, convertValue, guessType, parseNumberText, parseDateText, optionValue, isBlank, emptyView, normalizeView, orderedColumns, visibleColumns, processRows, passesFilters, parseTSV, toTSV, pasteChanges, fillChanges, clearChanges, applyChanges, invertChanges } from \"@/components/makersclaw/blocks/spreadsheet\". Props and an example: components/makersclaw/blocks/spreadsheet/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
84
84
  "meta": {
85
85
  "makersclaw": {
86
- "version": "0.3.2",
86
+ "version": "0.4.0",
87
87
  "useWhen": "People need to enter or clean up many records in a grid, fast, with the keyboard: a lead list, an inventory, a budget, a content calendar, a table view over any collection, the grid under an Airtable-like base. Not for a read-mostly list to scan and act on row by row (data-table), records moving through stages (board), or a single record (record-form)."
88
88
  }
89
89
  }
package/r/stat-cards.json CHANGED
@@ -5,8 +5,8 @@
5
5
  "title": "Stat cards",
6
6
  "description": "A row of key numbers, each with its name and its change: one bordered strip, or a card each with a change in the corner or after the value, a \"from\" value, a status dot and a goal meter, a sparkline, a \"View more\" footer; or a usage tile per amount against its limit (a bar or a ring, a split by kind with what is free, a warning line near the cap, an action and a limit the founder can change); or a plain list of values with their change. Loading, empty and error states.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json",
9
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/chart.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json",
9
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/chart.json"
10
10
  ],
11
11
  "dependencies": [],
12
12
  "files": [
@@ -59,7 +59,7 @@
59
59
  "docs": "Installed to components/makersclaw/blocks/stat-cards. Import: import { StatCards } from \"@/components/makersclaw/blocks/stat-cards\". Props and an example: components/makersclaw/blocks/stat-cards/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
60
60
  "meta": {
61
61
  "makersclaw": {
62
- "version": "0.3.2",
62
+ "version": "0.4.0",
63
63
  "useWhen": "The few numbers at the top of a dashboard or a report: revenue, users, conversion, spend against budget, seats and storage against a plan. Not for a trend worth reading on its own (a chart), many rows of records (a table), or one subject scored against thresholds (a scorecard)."
64
64
  }
65
65
  }
package/r/task-list.json CHANGED
@@ -5,8 +5,8 @@
5
5
  "title": "Task list",
6
6
  "description": "The List view of work, like ClickUp's or Linear's: tasks under headings that fold (group by status, assignee, priority, project, due date or any field), a round check to complete each, the title edited in place, subtasks indented under their parent with their own fold, the fields you choose (assignees, due date, priority, tags, project, estimate) as inline pickers, a quick-add row at the end of every group, drag to reorder and to move between groups (saving the new status, assignee or due date), multi-select with a bulk bar (status, assign, due, priority, delete with undo), a toolbar with search, filter chips, group by, sort and fields, and friendly empty states with starter templates. One async onChange saves every change; failures roll back with a notice.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json",
9
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/task-model.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json",
9
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/task-model.json"
10
10
  ],
11
11
  "dependencies": [],
12
12
  "files": [
@@ -56,7 +56,7 @@
56
56
  "docs": "Installed to components/makersclaw/blocks/task-list. Import: import { TaskList } from \"@/components/makersclaw/blocks/task-list\". Props and an example: components/makersclaw/blocks/task-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
57
57
  "meta": {
58
58
  "makersclaw": {
59
- "version": "0.3.2",
59
+ "version": "0.4.0",
60
60
  "useWhen": "A screen that lists work to get done and moves it along: a team's tasks, a launch checklist, a sprint, a personal to-do list, onboarding steps, content to publish. Not for records that are not work (data-table), for stage columns side by side (board), or for dates on a grid (calendar)."
61
61
  }
62
62
  }
package/r/task-model.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "title": "Task model",
6
6
  "description": "The shared work-item model every task view reads: one task shape (status, assignees, start/due, estimate, progress, priority, parent, dependencies, location, tags, project, extra fields) with statuses, people and projects; pure helpers to search, filter, group by any field, sort, nest subtasks, do date math (week and month grids, working days, overlaps, time scales), sum capacity per person, follow dependencies and the critical path, and apply, undo and persist changes; the shared parts (StatusPill, AssigneeStack, DueLabel, PriorityFlag, TaskChip, CompleteToggle), the ViewToolbar (search, filter chips, group by, sort, show fields), drag primitives on @dnd-kit, a hook for optimistic saves with rollback and undo, and adapters that drive the Board and DataTable blocks from tasks.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [
11
11
  "@dnd-kit/core@6.3.1",
@@ -91,7 +91,7 @@
91
91
  "docs": "Installed to components/makersclaw/blocks/task-model. Import: import { NONE, PRIORITIES, DEFAULT_STATUSES, TASK_FIELDS, DEFAULT_VIEW, normalizeTask, normalizeTasks, createTaskContext, fieldOf, isDone, doneStatusId, openStatusId, toggleDoneChange, newTaskId, draftTask, valuesOf, optionsOf, labelOf, searchText, searchTasks, filterTasks, orderOf, sortTasks, sortOptions, groupTasks, groupOptions, movePatch, applyView, activeFilterCount, rankBetween, placeChange, childrenMap, buildTree, flattenTree, descendantIds, ancestorIds, subtaskCounts, rollup, progressOf, dependencyEdges, blockersOf, wouldCycle, dateConflicts, criticalPath, hoursPerDay, workload, sumOf, applyChange, invertChange, changeWrites, changedIds, deleteChange, toBoard, toTableRows, taskFacets, StatusPill, CompleteToggle, AssigneeStack, PersonLabel, DueLabel, PriorityFlag, TagList, SubtaskCount, ProgressLine, TaskChip, GroupLabel, taskColumns, TONE_TEXT, HUE_EDGE, HUE_BG, TaskDragProvider, SortableGroup, useSortableTask, useDraggableTask, useDropTarget, DragHandle, DropLine, LIFTED, useReducedMotion, arrayMove, isDay, dayNumber, fromDayNumber, dayOf, minutesOf, withTime, todayDay, addDays, diffDays, weekdayOf, startOfWeek, endOfWeek, weekDays, startOfMonth, endOfMonth, addMonths, daysBetween, monthGrid, WEEKEND, isWeekend, isWorkingDay, workingDaysBetween, addWorkingDays, spanOf, spansOverlap, tasksInRange, tasksOnDay, shiftDates, spanPatch, dueBucket, DUE_BUCKETS, dayForBucket, formatDay, formatTime, formatDate, timeScale, rangeOfTasks, isNewId } from \"@/components/makersclaw/blocks/task-model\". Props and an example: components/makersclaw/blocks/task-model/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
92
92
  "meta": {
93
93
  "makersclaw": {
94
- "version": "0.3.2",
94
+ "version": "0.4.0",
95
95
  "useWhen": "You are building a view of work items — a list, calendar, gantt, workload, roadmap or a switcher between them — or driving Board / DataTable from tasks. Views import it; a surface rarely renders it alone. Not for records that are not work (use data-table or board directly)."
96
96
  }
97
97
  }
@@ -5,7 +5,7 @@
5
5
  "title": "Testimonials",
6
6
  "description": "A marketing section of customer quotes: name, role, company, face or logo, the quote, an optional star rating, a verified mark and a \"view on X\" source, and optional headline numbers (stats). Layouts: a grid of cards (plain, card or raised; hover can light one and dim the rest; a \"write a review\" tile), one large quote, a switcher of faces, and a carousel, optionally over a picture.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -45,7 +45,7 @@
45
45
  "docs": "Installed to components/makersclaw/blocks/testimonials. Import: import { Testimonials } from \"@/components/makersclaw/blocks/testimonials\". Props and an example: components/makersclaw/blocks/testimonials/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
46
46
  "meta": {
47
47
  "makersclaw": {
48
- "version": "0.3.2",
48
+ "version": "0.4.0",
49
49
  "useWhen": "Social proof on a public page: a landing page, a pricing page, a product page, a case-study teaser. Not for reviews a signed-in user writes and manages (a record list or form), or an app's own activity feed."
50
50
  }
51
51
  }
@@ -5,7 +5,7 @@
5
5
  "title": "TransactionList",
6
6
  "description": "Money records as a plain list, in two variants: history (payments in and out, grouped by month, a received / paid / pending / failed mark and a signed amount) and invoices (number, date, a Paid / Due in N days / N days overdue badge, amount, download). Optional date-range filter, Export and per-row download. Empty, loading and error states built in.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
9
9
  ],
10
10
  "dependencies": [],
11
11
  "files": [
@@ -46,7 +46,7 @@
46
46
  "docs": "Installed to components/makersclaw/blocks/transaction-list. Import: import { TransactionList } from \"@/components/makersclaw/blocks/transaction-list\". Props and an example: components/makersclaw/blocks/transaction-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
47
47
  "meta": {
48
48
  "makersclaw": {
49
- "version": "0.3.2",
49
+ "version": "0.4.0",
50
50
  "useWhen": "A billing page's invoices, an account's payment history, a wallet's recent activity: records read top to bottom, newest first. Not for records the founder sorts, filters by column or totals (data-table), or for one order (order-detail)."
51
51
  }
52
52
  }
package/r/whiteboard.json CHANGED
@@ -5,8 +5,8 @@
5
5
  "title": "Whiteboard",
6
6
  "description": "A full-page freeform whiteboard on sketch-canvas: a top bar with the board's title (click to rename), the save state (Saving…, Saved, or the error with Retry), a Board / Text view switch, Export PNG and an optional Share button; under it the Miro-style canvas (tool rail, floating toolbar, zoom, undo). An empty board offers starter templates — blank, a grid of titled areas, a 2×2 matrix — and the Text view lists every word on the board for a screen reader or an agent. With onCreateTask, a selected note or text becomes a task from the top bar (\"Create task\", editable title; several notes make one task each), and a small badge marks it on the board from then on. The sketch is plain JSON; saves are async callbacks answering { ok }.",
7
7
  "registryDependencies": [
8
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json",
9
- "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/sketch-canvas.json"
8
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json",
9
+ "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/sketch-canvas.json"
10
10
  ],
11
11
  "dependencies": [],
12
12
  "files": [
@@ -59,7 +59,7 @@
59
59
  "docs": "Installed to components/makersclaw/blocks/whiteboard. Import: import { Whiteboard, WHITEBOARD_TEMPLATES, gridSketch, matrixSketch } from \"@/components/makersclaw/blocks/whiteboard\". Props and an example: components/makersclaw/blocks/whiteboard/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
60
60
  "meta": {
61
61
  "makersclaw": {
62
- "version": "0.3.2",
62
+ "version": "0.4.0",
63
63
  "useWhen": "A screen is one board to think on: a team whiteboard, a planning or prioritisation board, a place to sketch an idea and keep it with a record. Not for marking up a screenshot (annotate), sketching a UI to build (sketch-to-app), a structured board of cards and connectors (flow-canvas), or a kanban (board)."
64
64
  }
65
65
  }
@@ -6,6 +6,13 @@ then "done" (closing itself a few seconds later) or the reason it
6
6
  stopped. When no job runs it renders nothing — a panel that is always
7
7
  there is a monitoring console, and apps do not have one.
8
8
 
9
+ The conversation is not here. Since 0.4.0 a job is a request, and its
10
+ conversation lives in the desk's agent column: the agent's questions,
11
+ the founder's answers and the yes before it acts are all there. The
12
+ panel says where the work is and points there — "Needs your answer"
13
+ with an Answer button when the agent waits on the founder, "Queued ·
14
+ after …" when it waits its turn.
15
+
9
16
  ```jsx
10
17
  import { JobPanel } from "../components/blocks/job-panel"; // a Makersclaw app ("./blocks/job-panel" from components/)
11
18
  import { JobPanel } from "@/components/makersclaw/blocks/job-panel"; // a shadcn project
@@ -26,11 +33,16 @@ pass those rows back in as `results`.
26
33
  - `job` — what `useJob()` returns. Required. Outside Makersclaw, any
27
34
  object of the same shape: `running`, `steps` (`[{ name, label, status:
28
35
  "running" | "done" | "failed" }]`), `text`, `error`, `finishedAt`, and
29
- `cancel()` / `reset()`.
36
+ `cancel()` / `reset()`. Optional, read when present (useJob sets them
37
+ since 0.4.0): `needsYou`, `queued`, `queuedAfter` (`{ after_title }`)
38
+ and `open()` — see "Needs you and queued" below. An object without
39
+ them (the 0.3.x shape) draws exactly as before.
30
40
  - `title` — while it runs, what the agent is doing, in the founder's
31
41
  words: `"Drafting the launch plan"`. Default `"Working on it"`.
32
42
  - `doneTitle` — after a clean finish: `"Launch plan drafted"`.
33
43
  - `failedTitle` — when it stopped with an error; the error follows it.
44
+ - `needsTitle` — while the agent waits on the founder's answer. Default
45
+ `"Needs your answer"`.
34
46
  - `onRetry` — shows "Try again" beside Close when the job failed: start
35
47
  the same job again.
36
48
  - `autoClose` — milliseconds after a clean finish before the panel
@@ -40,12 +52,15 @@ pass those rows back in as `results`.
40
52
  "N earlier steps" line.
41
53
  - `showText` — the agent's own account under the steps, default true. It
42
54
  is what the agent says it did, never the result: the result is rows.
55
+ It hides itself when `job.text` is empty, as it is on a request: the
56
+ account is in the desk's agent column.
43
57
  - `className` — layout around it. Never colour.
44
58
 
45
59
  ### The generator (`variant="generator"`)
46
60
 
47
- Everything above (`job`, `title`, `doneTitle`, `failedTitle`, `onRetry`,
48
- `autoClose`, `maxSteps`, `showText`) goes to the panel inside it. Then:
61
+ Everything above (`job`, `title`, `doneTitle`, `failedTitle`,
62
+ `needsTitle`, `onRetry`, `autoClose`, `maxSteps`, `showText`) goes to the
63
+ panel inside it. Then:
49
64
 
50
65
  - `onGenerate(prompt)` — start the job. Build the ask from the prompt and
51
66
  your options and call `job.start(ask)`; return what it returns, or
@@ -72,6 +87,28 @@ Everything above (`job`, `title`, `doneTitle`, `failedTitle`, `onRetry`,
72
87
  - `layout` — `"stacked"` (default: the form, then the shelf) or
73
88
  `"split"` (side by side from lg up; stacked on a phone).
74
89
 
90
+ ## Needs you and queued
91
+
92
+ A request can be live and still not moving. The panel draws two such
93
+ states from the job, and both count as running: no Close, Generate
94
+ stays off, and the panel stays until the job moves on.
95
+
96
+ - **Needs you** (`job.needsYou`) — the agent stopped to ask the founder
97
+ something, or for a yes before it acts. The heading is `needsTitle`
98
+ ("Needs your answer"), the panel takes the warning tone, a line says
99
+ the question is in the agent column, and **Answer** takes Stop's
100
+ place: it calls `job.open()`, which opens the request's conversation
101
+ in the desk's agent column. The founder answers there (or stops it
102
+ there), never in the app; the job then runs on and the panel follows
103
+ it. A job with no `open()` has nowhere to point, so Stop stays.
104
+ - **Queued** (`job.queued`) — one job per list runs at a time, so this
105
+ one waits behind another. The heading names the job it waits for:
106
+ "Queued · after Find 20 leads" (`job.queuedAfter.after_title`, else
107
+ "the job before it"). Stop stays: it takes the job out of the queue.
108
+
109
+ When it runs again the heading is back to `title`, and the one step
110
+ under it is the request's line ("Drafting · 12 of 50").
111
+
75
112
  ## Example
76
113
 
77
114
  ```jsx
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "job-panel",
3
3
  "title": "JobPanel",
4
- "description": "The panel that follows work the founder asked the app's agent for (useJob): each step's label as it runs, Stop, then done or the reason it stopped — and nothing on screen when no job runs. variant=\"generator\" wraps it in a prompt, the surface's options, Generate and a results shelf, with no model, provider or API key of its own.",
4
+ "description": "The panel that follows work the founder asked the app's agent for (useJob): each step's label as it runs, Stop, \"Needs your answer\" with Answer while the agent waits on the founder, \"Queued · after …\" while it waits its turn, then done or the reason it stopped — and nothing on screen when no job runs. variant=\"generator\" wraps it in a prompt, the surface's options, Generate and a results shelf, with no model, provider or API key of its own.",
5
5
  "useWhen": "A surface has a verb that asks the agent to make or find something (\"Generate a launch plan\", \"Find 20 leads\", \"Plan next sprint\") and the founder should watch it happen where the result will land. variant=\"generator\" when the screen IS the place to ask: a prompt and a few options, the results under them (product photos, ad copy, names).",
6
- "tags": ["job", "agent", "generate", "progress", "steps", "running", "working", "commission", "ai", "stop", "status", "generator", "prompt", "results", "image", "studio"],
6
+ "tags": ["job", "agent", "generate", "progress", "steps", "running", "working", "commission", "ai", "stop", "status", "queued", "needs-you", "answer", "generator", "prompt", "results", "image", "studio"],
7
7
  "exports": ["JobPanel"],
8
8
  "files": ["index.js", "job-panel.jsx"],
9
9
  "requires": []
@@ -2,7 +2,10 @@
2
2
 
3
3
  // JobPanel driven by a pretend job — the gallery's and the smoke test's
4
4
  // surface. Not installed into apps. Three variants behind the switcher:
5
- // Panel the panel under a verb; one run succeeds, one fails
5
+ // Panel the panel under a verb; one run succeeds, one fails (both
6
+ // the 0.3.x shape), one waits its turn (queued), one stops
7
+ // to ask the founder (needsYou) — the last two a request's
8
+ // shape, the way useJob follows one since 0.4.0
6
9
  // Photos variant="generator", stacked: a prompt, size and style, a
7
10
  // grid of results
8
11
  // Copy variant="generator", split: ad headlines as text results,
@@ -14,6 +17,24 @@ import { JobPanel } from "../components/blocks/job-panel";
14
17
  const STEPS = ["Reading the product list", "Searching the web", "Drafting the plan", "Saving 6 tasks"];
15
18
  const IDLE = { running: false, steps: [], text: "", error: null, finishedAt: null, progress: 0 };
16
19
 
20
+ const CLOSED = new Set(["done", "stopped", "didnt_finish"]);
21
+
22
+ // A request as useJob draws it since 0.4.0: one step, the request's line,
23
+ // and no text — the agent's account is in the desk's agent column.
24
+ function request(status, line, more = {}) {
25
+ return {
26
+ running: !CLOSED.has(status),
27
+ status,
28
+ queued: status === "queued",
29
+ queuedAfter: null,
30
+ needsYou: status === "needs_you",
31
+ liveLine: line,
32
+ steps: [{ name: "request", label: line, status: CLOSED.has(status) ? "done" : "running" }],
33
+ text: "",
34
+ ...more,
35
+ };
36
+ }
37
+
17
38
  function usePretendJob() {
18
39
  const [state, setState] = useState(IDLE);
19
40
  const timers = useRef([]);
@@ -23,8 +44,34 @@ function usePretendJob() {
23
44
  };
24
45
  useEffect(() => clear, []);
25
46
  const later = (ms, fn) => timers.current.push(setTimeout(fn, ms));
26
- function start(fail) {
47
+ const moved = (next) => setState((s) => ({ ...s, ...next, progress: s.progress + 1 }));
48
+
49
+ // The work after the wait: counted progress, then a result.
50
+ function draft(from) {
51
+ for (let n = 0; n <= 6; n += 1) later(from + 450 * n, () => moved(request("working", `Drafting the plan · ${n} of 6`, { count: n, target: 6 })));
52
+ later(from + 450 * 6 + 500, () => moved({ ...request("done", "6 tasks saved to Launches"), finishedAt: new Date().toISOString() }));
53
+ }
54
+
55
+ // kind: "ok" | "fails" (the 0.3.x shape: steps and text) · "queued" |
56
+ // "asks" (a request's shape).
57
+ function start(kind = "ok") {
27
58
  clear();
59
+ if (kind === "queued") {
60
+ setState({
61
+ ...IDLE,
62
+ ...request("queued", "Queued · after Find 20 leads", {
63
+ queuedAfter: { reason: "job", after_id: "req_leads", after_title: "Find 20 leads" },
64
+ }),
65
+ });
66
+ draft(2800);
67
+ return;
68
+ }
69
+ if (kind === "asks") {
70
+ setState({ ...IDLE, ...request("working", "Reading the product list") });
71
+ later(1200, () => moved(request("needs_you", "Needs you · Which launch should the plan cover?")));
72
+ return;
73
+ }
74
+ const fail = kind === "fails";
28
75
  setState({ ...IDLE, running: true });
29
76
  STEPS.forEach((label, i) =>
30
77
  later(700 * i + 200, () =>
@@ -53,12 +100,28 @@ function usePretendJob() {
53
100
  start,
54
101
  cancel: () => {
55
102
  clear();
56
- setState((s) => ({ ...s, running: false, finishedAt: new Date().toISOString() }));
103
+ setState((s) => ({
104
+ ...s,
105
+ running: false,
106
+ queued: false,
107
+ needsYou: false,
108
+ status: s.status ? "stopped" : s.status,
109
+ finishedAt: new Date().toISOString(),
110
+ }));
57
111
  },
58
112
  reset: () => {
59
113
  clear();
60
114
  setState(IDLE);
61
115
  },
116
+ // In an app this opens the question in the desk's agent column. The
117
+ // gallery has no desk, so the answer is pretended and the work goes on.
118
+ open: () => {
119
+ if (!state.needsYou) return false;
120
+ clear();
121
+ moved(request("working", "Drafting the plan"));
122
+ draft(900);
123
+ return true;
124
+ },
62
125
  };
63
126
  }
64
127
 
@@ -67,14 +130,20 @@ function PanelDemo() {
67
130
  return (
68
131
  <div className="grid max-w-xl gap-4">
69
132
  <div className="flex flex-wrap gap-2">
70
- <Button variant="secondary" onClick={() => job.start(false)} disabled={job.running}>
133
+ <Button variant="secondary" onClick={() => job.start("ok")} disabled={job.running}>
71
134
  Generate a launch plan
72
135
  </Button>
73
- <Button variant="quiet" onClick={() => job.start(true)} disabled={job.running}>
136
+ <Button variant="quiet" onClick={() => job.start("fails")} disabled={job.running}>
74
137
  Run one that fails
75
138
  </Button>
139
+ <Button variant="quiet" onClick={() => job.start("queued")} disabled={job.running}>
140
+ Queue one behind another
141
+ </Button>
142
+ <Button variant="quiet" onClick={() => job.start("asks")} disabled={job.running}>
143
+ Run one that asks
144
+ </Button>
76
145
  </div>
77
- <JobPanel job={job} title="Drafting the launch plan" doneTitle="Launch plan drafted" onRetry={() => job.start(false)} />
146
+ <JobPanel job={job} title="Drafting the launch plan" doneTitle="Launch plan drafted" onRetry={() => job.start("ok")} />
78
147
  </div>
79
148
  );
80
149
  }