claude-artifact-framework 0.5.2 → 0.6.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.
- package/README.md +67 -6
- package/dist/index.esm.js +200 -14
- package/dist/index.esm.js.map +2 -2
- package/dist/index.global.js +25 -9
- package/dist/index.global.js.map +3 -3
- package/package.json +1 -1
- package/src/app.js +58 -2
- package/src/blocks.js +34 -0
- package/src/chat.js +34 -3
- package/src/records.js +107 -9
package/dist/index.global.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
var ArtifactKit=(()=>{var
|
|
1
|
+
var ArtifactKit=(()=>{var H=Object.defineProperty;var Me=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var ze=Object.prototype.hasOwnProperty;var De=(e,a)=>{for(var t in a)H(e,t,{get:a[t],enumerable:!0})},Be=(e,a,t,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of Le(a))!ze.call(e,o)&&o!==t&&H(e,o,{get:()=>a[o],enumerable:!(r=Me(a,o))||r.enumerable});return e};var Ve=e=>Be(H({},"__esModule",{value:!0}),e);var xt={};De(xt,{contrast:()=>q,createApp:()=>Re,createPersistedStore:()=>oe,createSharedStore:()=>se,createStore:()=>ne,hasReact:()=>R,palette:()=>U,storage:()=>k,themeCss:()=>z,useReact:()=>ce});function O(){return typeof window<"u"&&typeof window.storage=="object"&&window.storage!==null}function ae(e){return{async get(a,t=void 0){if(!O())return t;try{let r=await window.storage.get(a,e);if(r?.value===void 0||r?.value===null)return t;try{return JSON.parse(r.value)}catch{return r.value}}catch{return t}},async set(a,t,{raw:r=!1}={}){if(!O())throw new Error("window.storage is not available (is this a Code Artifact rather than a published Chat Artifact?)");let o=r?t:JSON.stringify(t);if(typeof o!="string")throw new Error("window.storage only accepts strings \u2014 the value must be JSON-serializable");return window.storage.set(a,o,e)},async delete(a){if(O())try{await window.storage.delete(a,e)}catch{}},async list(a){if(!O())return[];try{return(await window.storage.list(a,e))?.keys||[]}catch{return[]}}}}var k={...ae(!1),shared:ae(!0),available:O};function Y(e){let a=e,t=new Set;function r(){return a}function o(c){a=typeof c=="function"?c(a):c,t.forEach(i=>i(a))}function s(c){return t.add(c),()=>t.delete(c)}return{get:r,set:o,subscribe:s}}function re(e,a){let t;return(...r)=>{clearTimeout(t),t=setTimeout(()=>e(...r),a)}}function ne(e){return Y(e)}function oe(e,a,{debounceMs:t=300}={}){let r=Y(a),o=re(c=>k.set(e,c),t),s=k.get(e,a).then(c=>r.set(c));return r.subscribe(o),{...r,ready:s}}function se(e,a,{pollMs:t=2e3,debounceMs:r=300}={}){let o=Y(a),s=re(u=>k.shared.set(e,u),r),c=!1;o.subscribe(u=>{c||s(u)});async function i(){let u=await k.shared.get(e,a);JSON.stringify(u)!==JSON.stringify(o.get())&&(c=!0,o.set(u),c=!1)}let l=i(),f=setInterval(i,t);return{...o,ready:l,stop:()=>clearInterval(f)}}var T=typeof globalThis<"u"?globalThis.React:void 0;function ce(e){return T=e,e}function R(){return!!T}function ie(){return j()}function j(){if(!T)throw new Error(`claude-artifact-framework: React not found. Hand it over once, before createApp:
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
ArtifactKit.useReact(React);
|
|
5
|
-
`);return T}var n=(...e)=>j().createElement(...e),x=(...e)=>j().useState(...e)
|
|
5
|
+
`);return T}var n=(...e)=>j().createElement(...e),x=(...e)=>j().useState(...e),$=(...e)=>j().useEffect(...e);var le=(...e)=>j().useRef(...e),Ct=T&&T.Component||class{render(){return j()}};var P="caf:data",fe="caf:view",ue={screen:null,arg:null,stack:[],step:0,selected:null};function _(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}function K(e,a){if(!_(e)||!_(a))return a===void 0?e:a;let t={...e};for(let r of Object.keys(a))t[r]=_(e[r])?K(e[r],a[r]):a[r];return t}function de(e,a){let t;return(...r)=>{clearTimeout(t),t=setTimeout(()=>e(...r),a)}}function me(e,{debounceMs:a=400,shared:t=!1,pollMs:r=2500}={}){let o=t?k.shared:k,s=J(e),c={...ue},i=!1,l=0,f=0,u=new Set,d=!1;function p(){d||(d=!0,Promise.resolve().then(()=>{d=!1;for(let m of u)m()}))}let g=de(()=>{let m=l;Promise.resolve(o.set(P,s)).then(()=>{f=Math.max(f,m)}).catch(()=>{})},a),b=de(()=>k.set(fe,c),a);t&&setInterval(async()=>{if(!(!i||l>f))try{let m=await o.get(P,void 0);m!==void 0&&JSON.stringify(m)!==JSON.stringify(s)&&(s=K(e,m),p())}catch{}},r);let w=(async()=>{let[m,y]=await Promise.all([o.get(P,void 0),k.get(fe,void 0)]);m!==void 0&&(s=K(e,m)),y!==void 0&&(c={...ue,...y}),i=!0,p()})();function C(m){let y=m(s);y!==void 0&&(s=y),s={...s},l++,g(),p()}function v(m){c={...c,...m},b(),p()}return{ready:w,isHydrated:()=>i,getData:()=>s,getView:()=>c,update:C,setView:v,go(m,y){v({stack:[...c.stack,{screen:c.screen,arg:c.arg}],screen:m,arg:y})},back(){let m=c.stack.slice(),y=m.pop()||{screen:null,arg:null};v({stack:m,screen:y.screen,arg:y.arg})},subscribe(m){return u.add(m),()=>u.delete(m)}}}function J(e){if(Array.isArray(e))return e.map(J);if(_(e)){let a={};for(let t of Object.keys(e))a[t]=J(e[t]);return a}return e}function E(e,a,t){return Math.min(t,Math.max(a,e))}function L(e){let a=String(e).replace("#","").trim();a.length===3&&(a=a.split("").map(r=>r+r).join(""));let t=parseInt(a,16);return Number.isFinite(t)?[t>>16&255,t>>8&255,t&255]:[59,110,246]}function Ie(e){return"#"+e.map(a=>E(Math.round(a),0,255).toString(16).padStart(2,"0")).join("")}function ge([e,a,t]){e/=255,a/=255,t/=255;let r=Math.max(e,a,t),o=Math.min(e,a,t),s=(r+o)/2,c=r-o,i=0,l=0;return c&&(l=s>.5?c/(2-r-o):c/(r+o),r===e?i=(a-t)/c+(a<t?6:0):r===a?i=(t-e)/c+2:i=(e-a)/c+4,i/=6),[i*360,l*100,s*100]}function Fe(e,a,t){if(e=(e%360+360)%360/360,a=E(a,0,100)/100,t=E(t,0,100)/100,!a)return[t*255,t*255,t*255];let r=t<.5?t*(1+a):t+a-t*a,o=2*t-r,s=c=>(c<0&&(c+=1),c>1&&(c-=1),c<1/6?o+(r-o)*6*c:c<1/2?r:c<2/3?o+(r-o)*(2/3-c)*6:o);return[s(e+1/3)*255,s(e)*255,s(e-1/3)*255]}function h(e,a,t){return Ie(Fe(e,a,t))}function pe(e){let a=e.map(t=>(t/=255,t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4)));return .2126*a[0]+.7152*a[1]+.0722*a[2]}function q(e,a){let t=pe(L(e)),r=pe(L(a));return(Math.max(t,r)+.05)/(Math.min(t,r)+.05)}function S(e,a,t,r,o,s){for(let c=o;c>=4&&c<=96;c+=s){let i=h(e,a,c);if(q(i,t)>=r)return i}return h(e,a,s<0?24:82)}function U(e="#3b6ef6"){let[a,t]=ge(L(e)),r=E(t,30,88),o=E(r*.1,3,9),s=h(a,o*.4,100),c=h(a,o*1.4,13);return{light:{bg:h(a,o,96.5),surface:s,sunken:h(a,o,93),border:h(a,o,86),text:h(a,o*1.6,11),muted:h(a,o*1.2,41),accent:S(a,r,"#ffffff",4.5,54,-2),accentText:"#ffffff",danger:S(2,68,"#ffffff",4.5,54,-2),ok:S(148,62,"#ffffff",4.5,44,-2),warn:S(38,88,"#ffffff",4.5,44,-2)},dark:{bg:h(a,o*1.5,9),surface:c,sunken:h(a,o*1.5,7),border:h(a,o*1.3,24),text:h(a,o*.6,95),muted:h(a,o*.8,66),accent:S(a,E(r,40,80),c,4.5,62,2),accentText:h(a,o*2,8),danger:S(2,70,c,4.5,62,2),ok:S(148,55,c,4.5,62,2),warn:S(38,80,c,4.5,62,2)}}}function M(e){return Object.entries(e).map(([a,t])=>`--caf-${a}: ${t};`).join("")}function z(e){let a=U(e);return`
|
|
6
6
|
:root { ${M(a.light)} }
|
|
7
7
|
@media (prefers-color-scheme: dark) { :root { ${M(a.dark)} } }
|
|
8
8
|
:root[data-theme="dark"] { ${M(a.dark)} }
|
|
9
9
|
:root[data-theme="light"] { ${M(a.light)} }
|
|
10
|
-
`}function ge(e,a){let[t,r]=pe(_(e||"#3b6ef6")),o=$(r,45,70);return Array.from({length:a},(c,s)=>p((t+s*137.5)%360,o,52))}var q=["text","textarea","number","money","percent","check","date","select"];function N(e,a){if(e==null||e==="")return"\u2014";let t=Number(e);switch(a){case"money":return Number.isFinite(t)?t.toLocaleString(void 0,{style:"currency",currency:"USD",maximumFractionDigits:2}):String(e);case"percent":return Number.isFinite(t)?`${t.toLocaleString(void 0,{maximumFractionDigits:2})}%`:String(e);case"number":return Number.isFinite(t)?t.toLocaleString(void 0,{maximumFractionDigits:2}):String(e);case"date":return e instanceof Date?e.toLocaleDateString():String(e);default:return String(e)}}function W(e,a){if(e.required&&(a===""||a===null||a===void 0))return"Required";if(a===""||a===null||a===void 0)return null;if(e.type==="number"||e.type==="money"||e.type==="percent"){let t=Number(a);if(!Number.isFinite(t))return"Must be a number";if(e.min!==void 0&&t<e.min)return`Must be at least ${e.min}`;if(e.max!==void 0&&t>e.max)return`Must be at most ${e.max}`}return null}function R({field:e,value:a,onChange:t}){let r=W(e,a),o=`caf-f-${e.key}`,c=e.type==="number"||e.type==="money"||e.type==="percent";if(e.type==="check")return n("label",{className:"caf-check"},n("input",{id:o,type:"checkbox",checked:!!a,onChange:l=>t(l.target.checked)}),n("span",null,e.label||e.key));let s={id:o,value:a??"","aria-invalid":r?"true":void 0,onChange:l=>t(c?De(l.target.value):l.target.value)},i;return e.type==="textarea"?i=n("textarea",{...s,rows:e.rows||3}):e.type==="select"?i=n("select",s,n("option",{value:""},e.placeholder||"Select\u2026"),(e.options||[]).map(l=>{let f=typeof l=="string"?l:l.value,u=typeof l=="string"?l:l.label;return n("option",{key:f,value:f},u)})):i=n("input",{...s,type:e.type==="date"?"date":c?"number":"text",min:e.min,max:e.max,step:e.step||(e.type==="money"||e.type==="percent"?"any":void 0),placeholder:e.placeholder}),n("div",{className:"caf-field"},n("label",{htmlFor:o},e.label||e.key),i,e.hint&&!r?n("small",{className:"caf-hint"},e.hint):null,r?n("small",{className:"caf-error"},r):null)}function De(e){if(e==="")return"";let a=Number(e);return Number.isFinite(a)?a:e}function ze({spec:e,ctx:a}){let t=e.fields||[];return n("div",{className:"caf-block caf-fields"},e.title?n("h2",{className:"caf-block-title"},e.title):null,t.map(r=>n(R,{key:r.key,field:r,value:a.data[r.key],onChange:o=>a.update(c=>{c[r.key]=o})})))}function Be({spec:e,ctx:a}){let t=typeof e.output=="function"?e.output(a.data):e.output||[];return t.length?n("div",{className:"caf-block caf-output"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("div",{className:"caf-output-grid"},t.map((r,o)=>n("div",{key:r.label||o,className:r.big?"caf-stat caf-stat-big":"caf-stat"},n("span",{className:"caf-stat-label"},r.label),n("span",{className:"caf-stat-value"},N(r.value,r.format)),r.hint?n("small",{className:"caf-hint"},r.hint):null)))):n("div",{className:"caf-block caf-empty"},e.empty||"Nothing to show yet.")}function Ve({spec:e,ctx:a}){let t=typeof e.text=="function"?e.text(a.data):e.text;return n("div",{className:"caf-block caf-text"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("p",null,t))}function Fe({spec:e,ctx:a}){let t=(typeof e.list=="function"?e.list(a.data):e.list)||[];if(!t.length)return n("div",{className:"caf-block caf-empty"},e.empty||"Nothing here yet.");let r=e.title||(o=>o.title??o.name??o.label??String(o));return n("div",{className:"caf-block caf-list"},t.map((o,c)=>n("button",{key:o.id??c,className:"caf-row",type:"button",onClick:e.onSelect?()=>e.onSelect(o,a):void 0},n("span",{className:"caf-row-title"},r(o)),e.subtitle?n("span",{className:"caf-row-sub"},e.subtitle(o)):null)))}var he=["bar","line","donut"];function Pe({spec:e,ctx:a}){let t=typeof e.chart=="function"?e.chart(a.data):e.chart,r=t&&t.items||[];if(!r.length)return n("div",{className:"caf-block caf-empty"},e.empty||"No data to chart yet.");let o=t.type||"bar";if(!he.includes(o))throw new Error(`unknown chart type "${o}". Valid types: ${he.join(", ")}.`);let c=a.colors(r.length),s=o==="bar"?Ie(r,t,c):o==="line"?Ye(r,t):He(r,t,c);return n("div",{className:"caf-block caf-chart"},e.title?n("h2",{className:"caf-block-title"},e.title):null,s)}function Ie(e,a,t){let r=Math.max(...e.map(o=>Number(o.value)||0),0)||1;return n("div",{className:"caf-bars"},e.map((o,c)=>n("div",{key:o.label??c,className:"caf-bar-row"},n("span",{className:"caf-bar-label"},o.label),n("div",{className:"caf-bar-track"},n("div",{className:"caf-bar-fill",style:{width:`${Math.max(2,(Number(o.value)||0)/r*100)}%`,background:t[c]}})),n("span",{className:"caf-bar-value"},N(o.value,a.format)))))}function Ye(e,a){let t=e.map(u=>Number(u.value)||0),r=Math.min(...t),c=Math.max(...t)-r||1,s=100,i=36,l=t.map((u,m)=>[t.length===1?s/2:m/(t.length-1)*s,i-3-(u-r)/c*(i-6)]),f=l[l.length-1];return n("div",{className:"caf-line"},n("svg",{viewBox:`0 0 ${s} ${i}`,className:"caf-line-svg",preserveAspectRatio:"none","aria-hidden":"true"},[.25,.5,.75].map(u=>n("line",{key:u,x1:0,x2:s,y1:i*u,y2:i*u,className:"caf-line-grid"})),n("polyline",{points:l.map(u=>u.join(",")).join(" "),className:"caf-line-path"}),n("circle",{cx:f[0],cy:f[1],r:1.6,className:"caf-line-dot"})),n("div",{className:"caf-line-meta"},n("span",{className:"caf-hint"},String(e[0].label??"")),n("span",{className:"caf-line-last"},N(t[t.length-1],a.format)),n("span",{className:"caf-hint"},String(e[e.length-1].label??""))))}function He(e,a,t){let r=e.reduce((i,l)=>i+(Number(l.value)||0),0)||1,o=15.9155,c=25,s=e.map((i,l)=>{let f=(Number(i.value)||0)/r*100,u=n("circle",{key:i.label??l,cx:21,cy:21,r:o,className:"caf-donut-seg",stroke:t[l],strokeDasharray:`${f} ${100-f}`,strokeDashoffset:c});return c-=f,u});return n("div",{className:"caf-donut"},n("svg",{viewBox:"0 0 42 42",className:"caf-donut-svg","aria-hidden":"true"},s),n("div",{className:"caf-donut-legend"},e.map((i,l)=>n("div",{key:i.label??l,className:"caf-legend-row"},n("span",{className:"caf-legend-swatch",style:{background:t[l]}}),n("span",{className:"caf-legend-label"},i.label),n("span",{className:"caf-legend-value"},N(i.value,a.format))))))}function Ke({spec:e,ctx:a}){let t=e.timer||{},r=Math.max(1,Math.round((t.minutes||0)*60+(t.seconds||0))||300),[o,c]=x(r),[s,i]=x(!1);E(()=>{if(!s)return;let m=setInterval(()=>c(y=>Math.max(0,y-1)),1e3);return()=>clearInterval(m)},[s]),E(()=>{o===0&&s&&(i(!1),typeof t.onDone=="function"&&a.update(m=>t.onDone(m)))},[o,s]);let l=String(Math.floor(o/60)).padStart(2,"0"),f=String(o%60).padStart(2,"0"),u=o===0;return n("div",{className:"caf-block caf-timer"},e.title?n("h2",{className:"caf-block-title"},e.title):null,t.label?n("span",{className:"caf-hint"},t.label):null,n("div",{className:u?"caf-timer-time caf-timer-done":"caf-timer-time"},u?t.doneText||"Done!":`${l}:${f}`),n("div",{className:"caf-bar-track"},n("div",{className:"caf-bar-fill caf-timer-fill",style:{width:`${o/r*100}%`}})),n("div",{className:"caf-timer-controls"},n("button",{type:"button",className:"caf-btn caf-btn-primary",disabled:u,onClick:()=>i(m=>!m)},s?"Pause":"Start"),n("button",{type:"button",className:"caf-btn",onClick:()=>{i(!1),c(r)}},"Reset")))}function Je({spec:e,ctx:a}){let t=e.custom(a);return typeof t=="string"?n("div",{className:"caf-block",dangerouslySetInnerHTML:{__html:t}}):n("div",{className:"caf-block"},t)}var Q={fields:ze,output:Be,text:Ve,list:Fe,chart:Pe,timer:Ke,custom:Je},z=Object.keys(Q);function be(e){return Object.entries(e.compute||{}).map(([a,t])=>[a,typeof t=="function"?{value:t}:t])}function X(e,a){if(!e.compute)return a;let t={...a};for(let[r,o]of be(e))try{t[r]=o.value(a)}catch{t[r]=void 0}return t}function Ue(e){let a={};for(let t of e)a[t.key]=t.value!==void 0?t.value:t.type==="check"?!1:"";return a}function qe(){return"r"+Date.now().toString(36)+Math.random().toString(36).slice(2,8)}function We(e,a){if(e.title)return e.title(a);let t=e.fields.find(o=>!o.type||o.type==="text"||o.type==="textarea"||o.type==="select"),r=t&&a[t.key];return r===""||r===void 0||r===null?"(untitled)":String(r)}function Qe({spec:e,records:a}){if(!e.summary)return null;let t=e.summary(a)||[];return t.length?n("div",{className:"caf-block caf-output"},n("div",{className:"caf-output-grid"},t.map((r,o)=>n("div",{key:r.label||o,className:r.big?"caf-stat caf-stat-big":"caf-stat"},n("span",{className:"caf-stat-label"},r.label),n("span",{className:"caf-stat-value"},N(r.value,r.format)))))):null}function Xe({spec:e,ctx:a}){let t=e.label||"item",[r,o]=x(""),c=a.data.records.map(f=>X(e,f));e.sort&&(c=c.slice().sort(e.sort));let s=c.length,i=r.trim().toLowerCase();e.search&&i&&(c=c.filter(f=>e.fields.some(u=>String(f[u.key]??"").toLowerCase().includes(i))));function l(){let f={id:qe(),...Ue(e.fields)};a.update(u=>{u.records=[...u.records,f]}),a.go("record",f.id)}return n("div",{className:"caf-block caf-list"},n("div",{className:"caf-toolbar"},n("span",{className:"caf-count"},e.search&&i?`${c.length} of ${s}`:`${s} ${t}${s===1?"":"s"}`),n("button",{type:"button",className:"caf-btn caf-btn-primary",onClick:l},`Add ${t}`)),e.search?n("input",{className:"caf-search",value:r,placeholder:`Search ${t}s\u2026`,"aria-label":"Search",onChange:f=>o(f.target.value)}):null,e.search&&i&&c.length===0&&s>0?n("div",{className:"caf-empty"},`Nothing matches "${r}".`):null,c.length===0?n("div",{className:"caf-empty"},e.empty||`No ${t}s yet. Add the first one.`):c.map(f=>n("button",{key:f.id,type:"button",className:"caf-row",onClick:()=>a.go("record",f.id)},n("span",{className:"caf-row-title"},We(e,f)),e.subtitle?n("span",{className:"caf-row-sub"},e.subtitle(f)):null)))}function Ge({spec:e,ctx:a,record:t}){let r=e.label||"item";function o(){a.update(c=>{c.records=c.records.filter(s=>s.id!==t.id)}),a.back()}return n("div",{className:"caf-block caf-fields"},n("div",{className:"caf-toolbar"},n("button",{type:"button",className:"caf-btn",onClick:a.back},"\u2039 Back"),n("button",{type:"button",className:"caf-btn caf-btn-danger",onClick:o},`Delete ${r}`)),e.fields.map(c=>n(R,{key:c.key,field:c,value:t[c.key],onChange:s=>a.update(i=>{let l=i.records.find(f=>f.id===t.id);l&&(l[c.key]=s)})})),e.compute?n("div",{className:"caf-output-grid caf-computed"},be(e).map(([c,s])=>{let i=X(e,t);return n("div",{key:c,className:"caf-stat"},n("span",{className:"caf-stat-label"},s.label||c),n("span",{className:"caf-stat-value"},N(i[c],s.format)))})):null)}function ye({spec:e,ctx:a}){let t=e.records;if(a.view.screen==="record"){let r=a.data.records.find(o=>o.id===a.view.arg);if(r)return n("div",{className:"caf-panel caf-panel-single"},n(Ge,{spec:t,ctx:a,record:r}))}return n("div",{className:"caf-panel caf-panel-single"},n(Qe,{spec:t,records:a.data.records.map(r=>X(t,r))}),n(Xe,{spec:t,ctx:a}))}function Ze(e,a){return(e.fields||[]).some(t=>W(t,a[t.key])!==null)}function et({step:e,ctx:a}){let t=e.result(a.data)||[];return n("div",{className:"caf-block caf-output"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("div",{className:"caf-output-grid"},t.map((r,o)=>n("div",{key:r.label??o,className:r.big?"caf-stat caf-stat-big":"caf-stat"},n("span",{className:"caf-stat-label"},r.label),n("span",{className:"caf-stat-value"},N(r.value,r.format)),r.hint?n("small",{className:"caf-hint"},r.hint):null))),n("div",{className:"caf-step-nav"},n("button",{type:"button",className:"caf-btn",onClick:()=>a.setStep(0)},"Start over")))}function ke({spec:e,ctx:a}){let t=e.steps,r=Math.min(Math.max(a.view.step||0,0),t.length-1),o=t[r],c=typeof o.result=="function",s=r===t.length-1;return n("div",{className:"caf-panel caf-panel-single"},n("div",{className:"caf-steps-progress"},n("span",{className:"caf-hint"},c?"Result":`Step ${r+1} of ${t.length}`),n("div",{className:"caf-bar-track"},n("div",{className:"caf-bar-fill caf-steps-fill",style:{width:`${(r+1)/t.length*100}%`}}))),c?n(et,{step:o,ctx:a}):n("div",{className:"caf-block caf-fields"},o.title?n("h2",{className:"caf-block-title"},o.title):null,o.text?n("p",{className:"caf-step-text"},typeof o.text=="function"?o.text(a.data):o.text):null,(o.fields||[]).map(i=>n(R,{key:i.key,field:i,value:a.data[i.key],onChange:l=>a.update(f=>{f[i.key]=l})})),n("div",{className:"caf-step-nav"},r>0?n("button",{type:"button",className:"caf-btn",onClick:()=>a.setStep(r-1)},"\u2039 Back"):n("span"),s?null:n("button",{type:"button",className:"caf-btn caf-btn-primary",disabled:Ze(o,a.data),onClick:()=>a.setStep(r+1)},"Next \u203A"))))}var G=["system","greeting","placeholder","tools","model","maxTokens"],tt="claude-sonnet-4-6",at=8;async function rt({model:e,maxTokens:a,system:t,messages:r,onText:o}){let c=await fetch("https://api.anthropic.com/v1/messages",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:e,max_tokens:a,system:t,messages:r,stream:!0})});if(!c.ok||!c.body){let u="";try{let m=await c.json();u=m&&m.error&&m.error.message||JSON.stringify(m)}catch{u=await c.text().catch(()=>"")}throw new Error(`HTTP ${c.status}${u?": "+u:""}`)}let s=c.body.getReader(),i=new TextDecoder,l="",f="";for(;;){let{done:u,value:m}=await s.read();if(u)break;f+=i.decode(m,{stream:!0});let y=f.split(`
|
|
11
|
-
`);f=
|
|
10
|
+
`}function he(e,a){let[t,r]=ge(L(e||"#3b6ef6")),o=E(r,45,70);return Array.from({length:a},(s,c)=>h((t+c*137.5)%360,o,52))}var W=["text","textarea","number","money","percent","check","date","select"];function N(e,a){if(e==null||e==="")return"\u2014";let t=Number(e);switch(a){case"money":return Number.isFinite(t)?t.toLocaleString(void 0,{style:"currency",currency:"USD",maximumFractionDigits:2}):String(e);case"percent":return Number.isFinite(t)?`${t.toLocaleString(void 0,{maximumFractionDigits:2})}%`:String(e);case"number":return Number.isFinite(t)?t.toLocaleString(void 0,{maximumFractionDigits:2}):String(e);case"date":return e instanceof Date?e.toLocaleDateString():String(e);default:return String(e)}}function Q(e,a){if(e.required&&(a===""||a===null||a===void 0))return"Required";if(a===""||a===null||a===void 0)return null;if(e.type==="number"||e.type==="money"||e.type==="percent"){let t=Number(a);if(!Number.isFinite(t))return"Must be a number";if(e.min!==void 0&&t<e.min)return`Must be at least ${e.min}`;if(e.max!==void 0&&t>e.max)return`Must be at most ${e.max}`}return null}function A({field:e,value:a,onChange:t}){let r=Q(e,a),o=`caf-f-${e.key}`,s=e.type==="number"||e.type==="money"||e.type==="percent";if(e.type==="check")return n("label",{className:"caf-check"},n("input",{id:o,type:"checkbox",checked:!!a,onChange:l=>t(l.target.checked)}),n("span",null,e.label||e.key));let c={id:o,value:a??"","aria-invalid":r?"true":void 0,onChange:l=>t(s?He(l.target.value):l.target.value)},i;return e.type==="textarea"?i=n("textarea",{...c,rows:e.rows||3}):e.type==="select"?i=n("select",c,n("option",{value:""},e.placeholder||"Select\u2026"),(e.options||[]).map(l=>{let f=typeof l=="string"?l:l.value,u=typeof l=="string"?l:l.label;return n("option",{key:f,value:f},u)})):i=n("input",{...c,type:e.type==="date"?"date":s?"number":"text",min:e.min,max:e.max,step:e.step||(e.type==="money"||e.type==="percent"?"any":void 0),placeholder:e.placeholder}),n("div",{className:"caf-field"},n("label",{htmlFor:o},e.label||e.key),i,e.hint&&!r?n("small",{className:"caf-hint"},e.hint):null,r?n("small",{className:"caf-error"},r):null)}function He(e){if(e==="")return"";let a=Number(e);return Number.isFinite(a)?a:e}function Ye({spec:e,ctx:a}){let t=e.fields||[];return n("div",{className:"caf-block caf-fields"},e.title?n("h2",{className:"caf-block-title"},e.title):null,t.map(r=>n(A,{key:r.key,field:r,value:a.data[r.key],onChange:o=>a.update(s=>{s[r.key]=o})})))}function Pe({spec:e,ctx:a}){let t=typeof e.output=="function"?e.output(a.data):e.output||[];return t.length?n("div",{className:"caf-block caf-output"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("div",{className:"caf-output-grid"},t.map((r,o)=>n("div",{key:r.label||o,className:r.big?"caf-stat caf-stat-big":"caf-stat"},n("span",{className:"caf-stat-label"},r.label),n("span",{className:"caf-stat-value"},N(r.value,r.format)),r.hint?n("small",{className:"caf-hint"},r.hint):null)))):n("div",{className:"caf-block caf-empty"},e.empty||"Nothing to show yet.")}function Ke({spec:e,ctx:a}){let t=typeof e.text=="function"?e.text(a.data):e.text;return n("div",{className:"caf-block caf-text"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("p",null,t))}function Je({spec:e,ctx:a}){let t=(typeof e.list=="function"?e.list(a.data):e.list)||[];if(!t.length)return n("div",{className:"caf-block caf-empty"},e.empty||"Nothing here yet.");let r=e.title||(o=>o.title??o.name??o.label??String(o));return n("div",{className:"caf-block caf-list"},t.map((o,s)=>n("button",{key:o.id??s,className:"caf-row",type:"button",onClick:e.onSelect?()=>e.onSelect(o,a):void 0},n("span",{className:"caf-row-title"},r(o)),e.subtitle?n("span",{className:"caf-row-sub"},e.subtitle(o)):null)))}var be=["bar","line","donut"];function qe({spec:e,ctx:a}){let t=typeof e.chart=="function"?e.chart(a.data):e.chart,r=t&&t.items||[];if(!r.length)return n("div",{className:"caf-block caf-empty"},e.empty||"No data to chart yet.");let o=t.type||"bar";if(!be.includes(o))throw new Error(`unknown chart type "${o}". Valid types: ${be.join(", ")}.`);let s=a.colors(r.length),c=o==="bar"?Ue(r,t,s):o==="line"?We(r,t):Qe(r,t,s);return n("div",{className:"caf-block caf-chart"},e.title?n("h2",{className:"caf-block-title"},e.title):null,c)}function Ue(e,a,t){let r=Math.max(...e.map(o=>Number(o.value)||0),0)||1;return n("div",{className:"caf-bars"},e.map((o,s)=>n("div",{key:o.label??s,className:"caf-bar-row"},n("span",{className:"caf-bar-label"},o.label),n("div",{className:"caf-bar-track"},n("div",{className:"caf-bar-fill",style:{width:`${Math.max(2,(Number(o.value)||0)/r*100)}%`,background:t[s]}})),n("span",{className:"caf-bar-value"},N(o.value,a.format)))))}function We(e,a){let t=e.map(u=>Number(u.value)||0),r=Math.min(...t),s=Math.max(...t)-r||1,c=100,i=36,l=t.map((u,d)=>[t.length===1?c/2:d/(t.length-1)*c,i-3-(u-r)/s*(i-6)]),f=l[l.length-1];return n("div",{className:"caf-line"},n("svg",{viewBox:`0 0 ${c} ${i}`,className:"caf-line-svg",preserveAspectRatio:"none","aria-hidden":"true"},[.25,.5,.75].map(u=>n("line",{key:u,x1:0,x2:c,y1:i*u,y2:i*u,className:"caf-line-grid"})),n("polyline",{points:l.map(u=>u.join(",")).join(" "),className:"caf-line-path"}),n("circle",{cx:f[0],cy:f[1],r:1.6,className:"caf-line-dot"})),n("div",{className:"caf-line-meta"},n("span",{className:"caf-hint"},String(e[0].label??"")),n("span",{className:"caf-line-last"},N(t[t.length-1],a.format)),n("span",{className:"caf-hint"},String(e[e.length-1].label??""))))}function Qe(e,a,t){let r=e.reduce((i,l)=>i+(Number(l.value)||0),0)||1,o=15.9155,s=25,c=e.map((i,l)=>{let f=(Number(i.value)||0)/r*100,u=n("circle",{key:i.label??l,cx:21,cy:21,r:o,className:"caf-donut-seg",stroke:t[l],strokeDasharray:`${f} ${100-f}`,strokeDashoffset:s});return s-=f,u});return n("div",{className:"caf-donut"},n("svg",{viewBox:"0 0 42 42",className:"caf-donut-svg","aria-hidden":"true"},c),n("div",{className:"caf-donut-legend"},e.map((i,l)=>n("div",{key:i.label??l,className:"caf-legend-row"},n("span",{className:"caf-legend-swatch",style:{background:t[l]}}),n("span",{className:"caf-legend-label"},i.label),n("span",{className:"caf-legend-value"},N(i.value,a.format))))))}function Xe({spec:e,ctx:a}){let t=e.timer||{},r=Math.max(1,Math.round((t.minutes||0)*60+(t.seconds||0))||300),[o,s]=x(r),[c,i]=x(!1);$(()=>{if(!c)return;let d=setInterval(()=>s(p=>Math.max(0,p-1)),1e3);return()=>clearInterval(d)},[c]),$(()=>{o===0&&c&&(i(!1),typeof t.onDone=="function"&&a.update(d=>t.onDone(d)))},[o,c]);let l=String(Math.floor(o/60)).padStart(2,"0"),f=String(o%60).padStart(2,"0"),u=o===0;return n("div",{className:"caf-block caf-timer"},e.title?n("h2",{className:"caf-block-title"},e.title):null,t.label?n("span",{className:"caf-hint"},t.label):null,n("div",{className:u?"caf-timer-time caf-timer-done":"caf-timer-time"},u?t.doneText||"Done!":`${l}:${f}`),n("div",{className:"caf-bar-track"},n("div",{className:"caf-bar-fill caf-timer-fill",style:{width:`${o/r*100}%`}})),n("div",{className:"caf-timer-controls"},n("button",{type:"button",className:"caf-btn caf-btn-primary",disabled:u,onClick:()=>i(d=>!d)},c?"Pause":"Start"),n("button",{type:"button",className:"caf-btn",onClick:()=>{i(!1),s(r)}},"Reset")))}function Ge({spec:e,ctx:a}){let r=(e.actions||[]).filter(o=>!o.when||o.when(a.data));return n("div",{className:"caf-block caf-actions"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("div",{className:"caf-actions-row"},r.map(o=>n("button",{key:o.label,type:"button",className:o.kind==="danger"?"caf-btn caf-btn-danger":o.kind==="primary"?"caf-btn caf-btn-primary":"caf-btn",onClick:()=>a.update(s=>o.run(s))},o.label))))}function Ze({spec:e,ctx:a}){let t=e.custom(a);return typeof t=="string"?n("div",{className:"caf-block",dangerouslySetInnerHTML:{__html:t}}):n("div",{className:"caf-block"},t)}var X={fields:Ye,output:Pe,text:Ke,list:Je,chart:qe,timer:Xe,actions:Ge,custom:Ze},D=Object.keys(X);function ye(e){return Object.entries(e.compute||{}).map(([a,t])=>[a,typeof t=="function"?{value:t}:t])}function G(e,a){if(!e.compute)return a;let t={...a};for(let[r,o]of ye(e))try{t[r]=o.value(a)}catch{t[r]=void 0}return t}function ke(e){let a={};for(let t of e)a[t.key]=t.value!==void 0?t.value:t.type==="check"?!1:"";return a}function we(){return"r"+Date.now().toString(36)+Math.random().toString(36).slice(2,8)}function et(e,a){if(e.title)return e.title(a);let t=e.fields.find(o=>!o.type||o.type==="text"||o.type==="textarea"||o.type==="select"),r=t&&a[t.key];return r===""||r===void 0||r===null?"(untitled)":String(r)}function tt({spec:e,records:a}){if(!e.summary)return null;let t=e.summary(a)||[];return t.length?n("div",{className:"caf-block caf-output"},n("div",{className:"caf-output-grid"},t.map((r,o)=>n("div",{key:r.label||o,className:r.big?"caf-stat caf-stat-big":"caf-stat"},n("span",{className:"caf-stat-label"},r.label),n("span",{className:"caf-stat-value"},N(r.value,r.format)))))):null}function at({spec:e,ctx:a}){let t=e.label||"item",[r,o]=x(""),s=a.data.records.map(f=>G(e,f));e.sort&&(s=s.slice().sort(e.sort));let c=s.length,i=r.trim().toLowerCase();e.search&&i&&(s=s.filter(f=>e.fields.some(u=>String(f[u.key]??"").toLowerCase().includes(i))));function l(){let f={id:we(),...ke(e.fields)};e.items&&(f.items=[]),a.update(u=>{u.records=[...u.records,f]}),a.go("record",f.id)}return n("div",{className:"caf-block caf-list"},n("div",{className:"caf-toolbar"},n("span",{className:"caf-count"},e.search&&i?`${s.length} of ${c}`:`${c} ${t}${c===1?"":"s"}`),n("button",{type:"button",className:"caf-btn caf-btn-primary",onClick:l},`Add ${t}`)),e.search?n("input",{className:"caf-search",value:r,placeholder:`Search ${t}s\u2026`,"aria-label":"Search",onChange:f=>o(f.target.value)}):null,e.search&&i&&s.length===0&&c>0?n("div",{className:"caf-empty"},`Nothing matches "${r}".`):null,s.length===0?n("div",{className:"caf-empty"},e.empty||`No ${t}s yet. Add the first one.`):s.map(f=>n("div",{key:f.id,className:"caf-row-wrap"},n("button",{type:"button",className:"caf-row",onClick:()=>a.go("record",f.id)},n("span",{className:"caf-row-title"},et(e,f)),e.subtitle?n("span",{className:"caf-row-sub"},e.subtitle(f)):null),e.actions?n("div",{className:"caf-row-actions"},e.actions.filter(u=>!u.when||u.when(f)).map(u=>n("button",{key:u.label,type:"button",className:u.kind==="danger"?"caf-btn caf-btn-danger caf-btn-sm":"caf-btn caf-btn-sm",onClick:()=>a.update(d=>{let p=d.records.find(g=>g.id===f.id);p&&u.run(p,d)})},u.label))):null)))}function rt({spec:e,ctx:a,record:t}){let r=e.label||"item";function o(){a.update(s=>{s.records=s.records.filter(c=>c.id!==t.id)}),a.back()}return n("div",{className:"caf-block caf-fields"},n("div",{className:"caf-toolbar"},n("button",{type:"button",className:"caf-btn",onClick:a.back},"\u2039 Back"),n("button",{type:"button",className:"caf-btn caf-btn-danger",onClick:o},`Delete ${r}`)),e.fields.map(s=>n(A,{key:s.key,field:s,value:t[s.key],onChange:c=>a.update(i=>{let l=i.records.find(f=>f.id===t.id);l&&(l[s.key]=c)})})),e.items?n(nt,{spec:e,ctx:a,record:t}):null,e.compute?n("div",{className:"caf-output-grid caf-computed"},ye(e).map(([s,c])=>{let i=G(e,t);return n("div",{key:s,className:"caf-stat"},n("span",{className:"caf-stat-label"},c.label||s),n("span",{className:"caf-stat-value"},N(i[s],c.format)))})):null)}function nt({spec:e,ctx:a,record:t}){let r=e.items,o=r.label||"item";function s(i){a.update(l=>{let f=l.records.find(u=>u.id===t.id);f&&(Array.isArray(f.items)||(f.items=[]),i(f))})}let c=Array.isArray(t.items)?t.items:[];return n("div",{className:"caf-items"},n("div",{className:"caf-toolbar"},n("span",{className:"caf-count"},`${c.length} ${o}${c.length===1?"":"s"}`),n("button",{type:"button",className:"caf-btn caf-btn-sm",onClick:()=>s(i=>i.items.push({id:we(),...ke(r.fields)}))},`Add ${o}`)),c.length===0?n("div",{className:"caf-empty caf-empty-sm"},r.empty||`No ${o}s yet.`):c.map(i=>n("div",{key:i.id,className:"caf-item-row"},r.fields.map(l=>n(A,{key:l.key,field:l,value:i[l.key],onChange:f=>s(u=>{let d=u.items.find(p=>p.id===i.id);d&&(d[l.key]=f)})})),n("button",{type:"button",className:"caf-btn caf-btn-danger caf-btn-sm caf-item-remove","aria-label":`Remove ${o}`,onClick:()=>s(l=>{l.items=l.items.filter(f=>f.id!==i.id)})},"\u2715"))))}function ve({spec:e,ctx:a}){let t=e.records;if(a.view.screen==="record"){let r=a.data.records.find(o=>o.id===a.view.arg);if(r)return n("div",{className:"caf-panel caf-panel-single"},n(rt,{spec:t,ctx:a,record:r}))}return n("div",{className:"caf-panel caf-panel-single"},n(tt,{spec:t,records:a.data.records.map(r=>G(t,r))}),n(at,{spec:t,ctx:a}))}function ot(e,a){return(e.fields||[]).some(t=>Q(t,a[t.key])!==null)}function st({step:e,ctx:a}){let t=e.result(a.data)||[];return n("div",{className:"caf-block caf-output"},e.title?n("h2",{className:"caf-block-title"},e.title):null,n("div",{className:"caf-output-grid"},t.map((r,o)=>n("div",{key:r.label??o,className:r.big?"caf-stat caf-stat-big":"caf-stat"},n("span",{className:"caf-stat-label"},r.label),n("span",{className:"caf-stat-value"},N(r.value,r.format)),r.hint?n("small",{className:"caf-hint"},r.hint):null))),n("div",{className:"caf-step-nav"},n("button",{type:"button",className:"caf-btn",onClick:()=>a.setStep(0)},"Start over")))}function xe({spec:e,ctx:a}){let t=e.steps,r=Math.min(Math.max(a.view.step||0,0),t.length-1),o=t[r],s=typeof o.result=="function",c=r===t.length-1;return n("div",{className:"caf-panel caf-panel-single"},n("div",{className:"caf-steps-progress"},n("span",{className:"caf-hint"},s?"Result":`Step ${r+1} of ${t.length}`),n("div",{className:"caf-bar-track"},n("div",{className:"caf-bar-fill caf-steps-fill",style:{width:`${(r+1)/t.length*100}%`}}))),s?n(st,{step:o,ctx:a}):n("div",{className:"caf-block caf-fields"},o.title?n("h2",{className:"caf-block-title"},o.title):null,o.text?n("p",{className:"caf-step-text"},typeof o.text=="function"?o.text(a.data):o.text):null,(o.fields||[]).map(i=>n(A,{key:i.key,field:i,value:a.data[i.key],onChange:l=>a.update(f=>{f[i.key]=l})})),n("div",{className:"caf-step-nav"},r>0?n("button",{type:"button",className:"caf-btn",onClick:()=>a.setStep(r-1)},"\u2039 Back"):n("span"),c?null:n("button",{type:"button",className:"caf-btn caf-btn-primary",disabled:ot(o,a.data),onClick:()=>a.setStep(r+1)},"Next \u203A"))))}var ee=["system","greeting","placeholder","tools","model","maxTokens"],ct="claude-sonnet-4-6",it=8;async function lt({model:e,maxTokens:a,system:t,messages:r,onText:o}){let s=await fetch("https://api.anthropic.com/v1/messages",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:e,max_tokens:a,system:t,messages:r,stream:!0})});if(!s.ok||!s.body){let u="";try{let d=await s.json();u=d&&d.error&&d.error.message||JSON.stringify(d)}catch{u=await s.text().catch(()=>"")}throw new Error(`HTTP ${s.status}${u?": "+u:""}`)}let c=s.body.getReader(),i=new TextDecoder,l="",f="";for(;;){let{done:u,value:d}=await c.read();if(u)break;f+=i.decode(d,{stream:!0});let p=f.split(`
|
|
11
|
+
`);f=p.pop();for(let g of p)if(g.startsWith("data: "))try{let b=JSON.parse(g.slice(6));b.type==="content_block_delta"&&b.delta&&b.delta.text&&(l+=b.delta.text,o&&o(l))}catch{}}return l}function ft(e){let a=e.match(/```tool_call\s*\n?([\s\S]*?)```/);if(!a)return null;try{let t=JSON.parse(a[1]);return Array.isArray(t)&&t.length?t:null}catch{return null}}function Ne(e){return e.replace(/```tool_call\s*\n?[\s\S]*?```/,"").trim()}function ut(e){return`
|
|
12
12
|
|
|
13
13
|
You have tools available:
|
|
14
14
|
${Object.entries(e).map(([t,r])=>`- ${t}: ${r.description}
|
|
@@ -21,15 +21,15 @@ This environment does not support native function calling. To use a tool, reply
|
|
|
21
21
|
[{ "name": "tool_name", "input": { "param": "value" } }]
|
|
22
22
|
\`\`\`
|
|
23
23
|
|
|
24
|
-
You may include several calls in one array. NEVER invent a tool's result \u2014 emit the pure tool_call block and wait for the real result, which arrives in the next message tagged [TOOL_RESULT]. When you have everything you need, answer in natural language with no tool_call block.`}function
|
|
25
|
-
${JSON.stringify(
|
|
24
|
+
You may include several calls in one array. NEVER invent a tool's result \u2014 emit the pure tool_call block and wait for the real result, which arrives in the next message tagged [TOOL_RESULT]. When you have everything you need, answer in natural language with no tool_call block.`}function dt(e,a,t){return e.map(r=>{let o=a[r.name];if(!o)return{name:r.name,error:`unknown tool "${r.name}". Valid tools: ${Object.keys(a).join(", ")}`};try{let s=o.run(r.input||{},t);return{name:r.name,result:s===void 0?{ok:!0}:s}}catch(s){return{name:r.name,error:String(s&&s.message||s)}}})}var Se=e=>String(e).replace(/[&<>"]/g,a=>({"&":"&","<":"<",">":">",'"':"""})[a]);function Z(e){let a=[],t=String(e).replace(/```[a-z]*\n?([\s\S]*?)```/g,(r,o)=>(a.push(o.replace(/\n$/,"")),"\0"+(a.length-1)+"\0"));return t=Se(t),t=t.replace(/`([^`]+)`/g,"<code>$1</code>"),t=t.replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>"),t=t.replace(/(^|[^*])\*([^*\n]+)\*/g,"$1<em>$2</em>"),t=t.replace(/^#{1,3} (.+)$/gm,'<strong class="caf-md-h">$1</strong>'),t=t.replace(/^[-•*] (.+)$/gm,'<span class="caf-md-li">$1</span>'),t=t.replace(/^\d+\. (.+)$/gm,'<span class="caf-md-li caf-md-num">$1</span>'),t=t.replace(/\n/g,"<br>"),t=t.replace(/\u0000(\d+)\u0000/g,(r,o)=>'<pre class="caf-code">'+Se(a[Number(o)])+"</pre>"),t}function mt({m:e}){return e.role==="tools"?n("div",{className:"caf-msg-tools"},`used: ${e.tools.join(", ")}`):e.role==="error"?n("div",{className:"caf-msg caf-msg-error"},n("strong",null,"The call failed"),n("span",null,e.content),n("span",{className:"caf-hint"},"Your message is kept \u2014 send again to retry.")):e.role==="user"?n("div",{className:"caf-msg caf-msg-user"},e.content):n("div",{className:"caf-msg caf-msg-assistant",dangerouslySetInnerHTML:{__html:Z(e.content)}})}function $e({spec:e,ctx:a}){let t=e.chat,[r,o]=x(""),[s,c]=x(!1),[i,l]=x(null),f=le(null),u=a.data.chat||{api:[],log:[]},d=u.log||[];$(()=>{f.current&&f.current.scrollIntoView({block:"end"})},[d.length,i]);async function p(){let g=r.trim();if(!g||s)return;o(""),c(!0);let b=[...u.api||[],{role:"user",content:g}],w=[...d,{role:"user",content:g}],C=()=>a.update(v=>{v.chat={api:b,log:w}});C();try{let v=(typeof t.system=="function"?t.system(a.data):t.system||"")+(t.tools?ut(t.tools):"");for(let m=0;m<it;m++){let y=await lt({model:t.model||ct,maxTokens:t.maxTokens||2e3,system:v,messages:b,onText:F=>l(Ne(F))});b=[...b,{role:"assistant",content:y}];let V=Ne(y),I=t.tools?ft(y):null;if(!I){w=[...w,{role:"assistant",content:V||y}],C();break}let _e=dt(I,t.tools,a);V&&(w=[...w,{role:"assistant",content:V}]),w=[...w,{role:"tools",tools:I.map(F=>F.name)}],b=[...b,{role:"user",content:`[TOOL_RESULT]
|
|
25
|
+
${JSON.stringify(_e)}
|
|
26
26
|
[/TOOL_RESULT]
|
|
27
27
|
|
|
28
|
-
Continue with this information. If you have everything you need, answer in natural language without further tool_call.`}],C(),l(null)}}catch(v){w=[...w,{role:"error",content:String(v&&v.message||v)}],C()}finally{l(null),
|
|
28
|
+
Continue with this information. If you have everything you need, answer in natural language without further tool_call.`}],C(),l(null)}}catch(v){w=[...w,{role:"error",content:String(v&&v.message||v)}],C()}finally{l(null),c(!1)}}return n("div",{className:"caf-panel caf-panel-single"},n("div",{className:"caf-block caf-chat-log"},t.greeting?n("div",{className:"caf-msg caf-msg-assistant",dangerouslySetInnerHTML:{__html:Z(t.greeting)}}):null,d.map((g,b)=>n(mt,{key:b,m:g})),i!==null?n("div",{className:"caf-msg caf-msg-assistant caf-msg-live",dangerouslySetInnerHTML:{__html:Z(i||"\u2026")}}):null,s&&i===null?n("div",{className:"caf-msg-tools"},"thinking\u2026"):null,n("div",{ref:f})),n("div",{className:"caf-chat-input"},n("input",{value:r,placeholder:t.placeholder||"Message\u2026",disabled:s,enterKeyHint:"send",onChange:g=>o(g.target.value),onKeyDown:g=>{g.key==="Enter"&&(g.preventDefault(),p())},"aria-label":"Message"}),n("button",{type:"button",className:"caf-btn caf-btn-primary",disabled:s||!r.trim(),onClick:p},"Send")))}var Ee=["panel","records","steps","chat"],pt=["title","empty","wide","onSelect","subtitle"],Ce=["title","subtitle","theme","layout","blocks","records","steps","chat","data","shared"];function B(e,a){for(let t of e||[]){if(!t||!t.key)throw new Error(`claude-artifact-framework: every field in ${a} needs a \`key\`.`);if(t.type!==void 0&&!W.includes(t.type))throw new Error(`claude-artifact-framework: field "${t.key}" in ${a} has unknown type "${t.type}". Valid types: ${W.join(", ")}.`)}}var Te=["label","run","when","kind"];function Ae(e,a){if(!Array.isArray(e))throw new Error(`claude-artifact-framework: ${a} must be an array of { label, run }.`);e.forEach((t,r)=>{if(!t||typeof t.label!="string"||typeof t.run!="function")throw new Error(`claude-artifact-framework: ${a}[${r}] needs a \`label\` string and a \`run\` function.`);let o=Object.keys(t).filter(s=>!Te.includes(s));if(o.length)throw new Error(`claude-artifact-framework: ${a}[${r}] has unknown keys (${o.join(", ")}). Valid keys: ${Te.join(", ")}.`)})}function je(e){if(!Array.isArray(e))throw new Error("claude-artifact-framework: `blocks` must be an array.");e.forEach((a,t)=>{if(!a||typeof a!="object")throw new Error(`claude-artifact-framework: blocks[${t}] must be an object like { fields: [...] }.`);let r=Object.keys(a).filter(s=>!pt.includes(s)),o=r.filter(s=>D.includes(s));if(o.length===0)throw new Error(`claude-artifact-framework: blocks[${t}] has no recognised block type (found: ${r.join(", ")||"nothing"}). Valid block types: ${D.join(", ")}.`);if(o.length>1)throw new Error(`claude-artifact-framework: blocks[${t}] declares more than one block type (${o.join(", ")}). Split them into separate entries of \`blocks\`.`);B(a.fields,`blocks[${t}]`),o[0]==="actions"&&Ae(a.actions,`blocks[${t}].actions`)})}function gt(e){let a=Object.keys(e).filter(r=>!Ce.includes(r));if(a.length)throw new Error(`claude-artifact-framework: unknown top-level keys (${a.join(", ")}). Valid keys: ${Ce.join(", ")}.`);let t=e.layout||"panel";if(!Ee.includes(t))throw new Error(`claude-artifact-framework: unknown layout "${t}". Valid layouts: ${Ee.join(", ")}.`);if(t==="steps"){let r=e.steps;if(!Array.isArray(r)||r.length===0)throw new Error('claude-artifact-framework: layout "steps" needs `steps: [...]` with at least one step.');let o=["title","text","fields","result"],s=new Set;return r.forEach((c,i)=>{if(!c||typeof c!="object")throw new Error(`claude-artifact-framework: steps[${i}] must be an object.`);let l=Object.keys(c).filter(f=>!o.includes(f));if(l.length)throw new Error(`claude-artifact-framework: steps[${i}] has unknown keys (${l.join(", ")}). Valid keys: ${o.join(", ")}.`);if(!c.fields&&!c.text&&!c.result)throw new Error(`claude-artifact-framework: steps[${i}] needs \`fields\`, \`text\`, or \`result\`.`);B(c.fields,`steps[${i}]`);for(let f of c.fields||[]){if(s.has(f.key))throw new Error(`claude-artifact-framework: field key "${f.key}" appears in more than one step \u2014 keys share one data pool and must be unique.`);s.add(f.key)}}),t}if(t==="chat"){let r=e.chat;if(!r||typeof r.system!="string"&&typeof r.system!="function")throw new Error('claude-artifact-framework: layout "chat" needs `chat: { system: "..." }` (a string or a function of data).');let o=Object.keys(r).filter(s=>!ee.includes(s));if(o.length)throw new Error(`claude-artifact-framework: chat has unknown keys (${o.join(", ")}). Valid keys: ${ee.join(", ")}.`);for(let[s,c]of Object.entries(r.tools||{}))if(!c||typeof c.description!="string"||typeof c.run!="function")throw new Error(`claude-artifact-framework: chat tool "${s}" needs a \`description\` string and a \`run(input, ctx)\` function.`);return t}if(t==="records"){let r=e.records;if(!r||!Array.isArray(r.fields)||r.fields.length===0)throw new Error('claude-artifact-framework: layout "records" needs `records: { fields: [...] }` \u2014 the same field declarations the fields block uses.');let o=["label","fields","title","subtitle","sort","summary","empty","search","compute","items","actions"],s=Object.keys(r).filter(i=>!o.includes(i));if(s.length)throw new Error(`claude-artifact-framework: records has unknown keys (${s.join(", ")}). Valid keys: ${o.join(", ")}.`);B(r.fields,"records");let c=new Set;for(let i of r.fields){if(i.key==="id")throw new Error('claude-artifact-framework: "id" is reserved on records \u2014 the framework assigns it.');if(c.has(i.key))throw new Error(`claude-artifact-framework: duplicate records field key "${i.key}".`);c.add(i.key)}if(e.blocks&&je(e.blocks),r.actions&&Ae(r.actions,"records.actions"),r.items){let i=["label","fields","empty"],l=Object.keys(r.items).filter(f=>!i.includes(f));if(l.length)throw new Error(`claude-artifact-framework: records.items has unknown keys (${l.join(", ")}). Valid keys: ${i.join(", ")}.`);if(!Array.isArray(r.items.fields)||r.items.fields.length===0)throw new Error("claude-artifact-framework: records.items needs `fields: [...]` \u2014 the same field declarations as everywhere else.");B(r.items.fields,"records.items");for(let f of r.items.fields)if(f.key==="id")throw new Error('claude-artifact-framework: "id" is reserved on items \u2014 the framework assigns it.');if(c.has("items")||r.fields.some(f=>f.key==="items"))throw new Error('claude-artifact-framework: a records field cannot be named "items" when `items` is declared \u2014 that key holds the child collection.')}for(let[i,l]of Object.entries(r.compute||{})){if(c.has(i)||i==="id"||r.items&&i==="items")throw new Error(`claude-artifact-framework: compute key "${i}" collides with a field key \u2014 computed values are derived, never stored.`);if(typeof l!="function"&&typeof(l&&l.value)!="function")throw new Error(`claude-artifact-framework: compute "${i}" must be a function of the record, or { label, format, value: (r) => ... }.`)}return t}return je(e.blocks||[]),t}function ht(e){let a={...e.data||{}};(e.layout||"panel")==="records"&&!Array.isArray(a.records)&&(a.records=[]),(e.layout||"panel")==="chat"&&!a.chat&&(a.chat={api:[],log:[]});for(let t of[...e.blocks||[],...e.steps||[]])for(let r of t.fields||[])r&&r.key!==void 0&&!(r.key in a)&&(a[r.key]=r.value!==void 0?r.value:r.type==="check"?!1:"");return a}var te=null;function bt(e){return te||(te=class extends e.Component{constructor(a){super(a),this.state={error:null}}static getDerivedStateFromError(a){return{error:a}}render(){return this.state.error?n("div",{className:"caf-block caf-block-error"},n("strong",null,"This section failed to render"),n("code",null,String(this.state.error.message||this.state.error))):this.props.children}}),te}function Oe({block:e,ctx:a}){let t=Object.keys(e).find(o=>D.includes(o)),r=X[t];return n(bt(a.React),null,n(r,{spec:e,ctx:a}))}function yt({spec:e,ctx:a}){return n("div",{className:"caf-panel"},(e.blocks||[]).map((t,r)=>n("section",{key:r,className:t.wide?"caf-slot caf-slot-wide":"caf-slot"},n(Oe,{block:t,ctx:a}))))}function kt({spec:e,ctx:a}){let t=a.view.screen==="record"&&(a.data.records||[]).some(r=>r.id===a.view.arg);return n("div",null,n(ve,{spec:e,ctx:a}),!t&&Array.isArray(e.blocks)&&e.blocks.length?n("div",{className:"caf-panel caf-records-blocks"},e.blocks.map((r,o)=>n("section",{key:o,className:r.wide?"caf-slot caf-slot-wide":"caf-slot"},n(Oe,{block:r,ctx:a})))):null)}var wt={panel:yt,records:kt,steps:xe,chat:$e};function Re(e={}){let a=gt(e),t=me(ht(e),{shared:!!e.shared}),r=z(e.theme&&e.theme.seed)+vt;return function(){if(!R())throw new Error(`claude-artifact-framework: React not found. Hand it over once, before rendering:
|
|
29
29
|
|
|
30
30
|
import React from "react";
|
|
31
31
|
ArtifactKit.useReact(React);
|
|
32
|
-
`);let[,
|
|
32
|
+
`);let[,s]=x(0);$(()=>{let l=t.subscribe(()=>s(f=>f+1));return t.isHydrated()&&s(f=>f+1),l},[]);let c={React:ie(),data:t.getData(),view:t.getView(),update:t.update,go:t.go,back:t.back,setStep:l=>t.setView({step:l}),colors:l=>he(e.theme&&e.theme.seed,l)},i=wt[a];return n("div",{className:"caf-root"},n("style",{dangerouslySetInnerHTML:{__html:r}}),n("header",{className:"caf-header"},e.title?n("h1",null,e.title):null,e.subtitle?n("p",null,e.subtitle):null),t.isHydrated()?n(i,{spec:e,ctx:c}):n("div",{className:"caf-block caf-loading"},"Loading\u2026"))}}var vt=`
|
|
33
33
|
.caf-root {
|
|
34
34
|
--caf-radius: 10px;
|
|
35
35
|
box-sizing: border-box;
|
|
@@ -151,9 +151,25 @@ Continue with this information. If you have everything you need, answer in natur
|
|
|
151
151
|
.caf-search:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
|
|
152
152
|
.caf-computed { border-top: 1px solid var(--caf-border); padding-top: 0.7rem; }
|
|
153
153
|
.caf-records-blocks { margin-top: 1rem; }
|
|
154
|
+
.caf-row-wrap { display: flex; align-items: center; gap: 0.4rem; }
|
|
155
|
+
.caf-row-wrap .caf-row { flex: 1; min-width: 0; }
|
|
156
|
+
.caf-row-actions { display: flex; gap: 0.35rem; flex: none; padding-right: 0.3rem; }
|
|
157
|
+
.caf-btn-sm { font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 6px; }
|
|
158
|
+
.caf-items { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--caf-border); padding-top: 0.7rem; }
|
|
159
|
+
.caf-item-row { display: flex; align-items: flex-end; gap: 0.5rem; }
|
|
160
|
+
.caf-item-row .caf-field { flex: 1; min-width: 0; }
|
|
161
|
+
.caf-item-row .caf-field label { font-size: 0.68rem; }
|
|
162
|
+
.caf-item-remove { flex: none; margin-bottom: 0.15rem; }
|
|
163
|
+
.caf-empty-sm { padding: 0.6rem; font-size: 0.82rem; }
|
|
164
|
+
.caf-actions-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
|
|
165
|
+
.caf-code { background: var(--caf-sunken); border-radius: 6px; padding: 0.55rem 0.7rem; font-size: 0.8rem; overflow-x: auto; margin: 0.3rem 0; font-family: ui-monospace, monospace; }
|
|
166
|
+
.caf-msg code { background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.85em; font-family: ui-monospace, monospace; }
|
|
167
|
+
.caf-md-h { display: block; margin-top: 0.3rem; }
|
|
168
|
+
.caf-md-li { display: block; padding-left: 1rem; position: relative; }
|
|
169
|
+
.caf-md-li::before { content: "\u2022"; position: absolute; left: 0.2rem; opacity: 0.6; }
|
|
154
170
|
.caf-empty, .caf-loading { color: var(--caf-muted); font-size: 0.9rem; text-align: center; padding: 1.6rem 1rem; }
|
|
155
171
|
.caf-block-error { border-color: var(--caf-danger); gap: 0.4rem; }
|
|
156
172
|
.caf-block-error strong { font-size: 0.9rem; color: var(--caf-danger); }
|
|
157
173
|
.caf-block-error code { font-size: 0.78rem; color: var(--caf-muted); word-break: break-word; }
|
|
158
|
-
`;return
|
|
174
|
+
`;return Ve(xt);})();
|
|
159
175
|
//# sourceMappingURL=index.global.js.map
|