mirror of
https://github.com/hanzoai/examples.git
synced 2026-11-02 23:29:56 +00:00
`ex-admin`, `ex-kanban`, `ex-shop`. That is not a name, it is a filing code, and it told every visitor that what they were looking at was a sample of something rather than a thing. Nobody bookmarks Example #47. So each one is now a product: a name, a mark, a hue that drives the kit's --acc so the whole page inherits it, and a tagline in its own voice. ex-kanban is Lanes — "a board with WIP limits that mean something, because they stop you". The identity lives in ONE place (products.json) and the shell is the only way a product is built, so an unbranded page cannot be published. AND A BUILDER. Ten named agents (agents.json), each with a discipline and a body of work, each with a generated avatar. The byline reads "<Product> — published by Hanzo AI, built by <Agent>, an AI agent working on <X>". That is honest attribution, not decoration: the agent really did write the app. They are described as what they are and never dressed as people — no biography, no employer, no photograph, no testimonial. HIP-903. An agent that genuinely built the thing needs none of that, and inventing it would turn a true story into a false one. LINEAGE IS RECORDED, NOT ASSERTED. Every product's project is created by POST /v1/projects/fork from a gallery template, so projects.forked_from is a fact the platform wrote at fork time. 74/74, across 28 parent templates. AND FOR SIX OF THEM, THE BYTES ARE THE TEMPLATE'S. derive.py checks out the parent, applies the agent's edit to its SOURCE, runs the template's own build, and ships that. The diff is the point — proof the product is a derivative and proof a template is agent-editable, in one artifact. It also found what the pre-built demos were hiding: four templates did not compile at all, and several 404'd on an /api/placeholder route that cannot exist on a static host. Fixed upstream and in the edit respectively. The other 68 carry a real fork edge but ship the kit build. Said plainly in the README rather than papered over. One slug now names the source file, the project and the host. Co-authored-by: Hanzo Dev <[email protected]>
97 lines
5.4 KiB
HTML
97 lines
5.4 KiB
HTML
<!--hz {"title":"Regex","archetype":"devtool","creator":"data","desc":"Regular expression workbench: live highlighting of every match, named and numbered capture groups, flags, replace preview, a cheatsheet and a library of ready patterns.","nav":[["#/","Tester"]]} -->
|
|
<div class="row" style="margin-bottom:12px">
|
|
<h1 style="margin:0">Regex</h1><span class="tag" id="stat">—</span>
|
|
<span class="spacer"></span><span id="flags" class="row" style="gap:4px"></span>
|
|
</div>
|
|
<div class="split r">
|
|
<div class="col">
|
|
<div class="pane"><header>Pattern</header><div class="body">
|
|
<div class="inline"><span class="mono muted">/</span>
|
|
<input id="re" spellcheck="false" style="font-family:var(--mono)" value="(?<key>[a-z_]+)\s*=\s*(?<val>"[^"]*"|\d+)">
|
|
<span class="mono muted" id="fl">/gm</span></div>
|
|
<div class="field" style="margin-top:10px"><label>Replacement (use $1, $<name>)</label>
|
|
<input id="rep" spellcheck="false" style="font-family:var(--mono)" value="$<key>: $<val>"></div>
|
|
</div></div>
|
|
<div class="pane"><header>Subject</header><div class="body">
|
|
<textarea id="sub" spellcheck="false" style="min-height:150px;font-family:var(--mono);font-size:12.5px"></textarea>
|
|
</div></div>
|
|
<div class="pane"><header>Highlighted matches</header><div class="body"><pre id="hi" style="white-space:pre-wrap"></pre></div></div>
|
|
<div class="pane"><header>Replace preview</header><div class="body"><pre id="out" style="white-space:pre-wrap"></pre></div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="pane"><header>Matches</header><div id="list" style="max-height:300px;overflow:auto"></div></div>
|
|
<div class="pane"><header>Pattern library</header><ul class="list" id="lib"></ul></div>
|
|
<div class="pane"><header>Cheatsheet</header><ul class="list" id="cheat"></ul></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const {h,fill,$,store,esc,toast,submit} = hz;
|
|
const SUBJECT = `# deploy.conf
|
|
slug = "my-app"
|
|
region = "sfo3"
|
|
files = 412
|
|
retain = 30
|
|
domain = "my-app.hanzo.app"
|
|
# contacts
|
|
[email protected], [email protected]
|
|
2026-07-14T09:30:00Z GET /v1/sites 200 12ms
|
|
2026-07-14T09:30:04Z POST /v1/sites/deploy 200 240ms
|
|
2026-07-14T09:31:11Z GET /missing 404 3ms`;
|
|
const LIB = [
|
|
['Key = value pairs','(?<key>[a-z_]+)\\s*=\\s*(?<val>"[^"]*"|\\d+)','gm'],
|
|
['Email addresses','[\\w.+-]+@[\\w-]+\\.[\\w.]+','g'],
|
|
['ISO-8601 timestamps','\\d{4}-\\d{2}-\\d{2}T[\\d:]+Z','g'],
|
|
['HTTP log lines','(?<method>GET|POST|PUT|DELETE)\\s(?<path>\\S+)\\s(?<status>\\d{3})','g'],
|
|
['Non-2xx statuses','\\s(?<status>[45]\\d{2})\\s','g'],
|
|
['Quoted strings','"([^"\\\\]|\\\\.)*"','g'],
|
|
['Duplicate words','\\b(\\w+)\\s+\\1\\b','gi'],
|
|
];
|
|
const CHEAT = [['\\d','digit'],['\\w','word character'],['\\s','whitespace'],['[^x]','anything but x'],
|
|
['a|b','a or b'],['x*','zero or more'],['x+','one or more'],['x?','optional'],['x{2,4}','2 to 4'],
|
|
['(?<n>…)','named group'],['(?:…)','non-capturing'],['(?=…)','lookahead'],['^ $','line anchors (with m)']];
|
|
const flags = store('regex.flags', {g:true,m:true,i:false,s:false,u:false});
|
|
$('#sub').value = SUBJECT;
|
|
|
|
function flagStr(){ return Object.entries(flags.get()).filter(([,v])=>v).map(([k])=>k).join(''); }
|
|
function drawFlags(){
|
|
fill($('#flags'), Object.keys(flags.get()).map(k=>h('button.sm'+(flags.get()[k]?' p':''),
|
|
{onclick:()=>{flags.set(v=>({...v,[k]:!v[k]}));drawFlags();run();}}, k)));
|
|
$('#fl').textContent = '/'+flagStr();
|
|
}
|
|
function run(){
|
|
const src = $('#re').value, sub = $('#sub').value;
|
|
let re;
|
|
try { re = new RegExp(src, flagStr()); }
|
|
catch(e){ $('#stat').textContent='invalid'; $('#stat').className='tag bad';
|
|
fill($('#list'), h('div.empty', e.message)); $('#hi').textContent = sub; return; }
|
|
const ms = [...sub.matchAll(flags.get().g ? re : new RegExp(src, flagStr()+'g'))];
|
|
$('#stat').textContent = ms.length+' match'+(ms.length===1?'':'es');
|
|
$('#stat').className = 'tag '+(ms.length?'ok':'warn');
|
|
// highlight
|
|
let out='', at=0;
|
|
ms.forEach((m,i)=>{ out += esc(sub.slice(at,m.index));
|
|
out += '<mark style="background:'+(i%2?'#8b5cf655':'#5b8cff55')+';color:inherit;border-radius:3px">'+esc(m[0])+'</mark>';
|
|
at = m.index + m[0].length; });
|
|
out += esc(sub.slice(at));
|
|
$('#hi').innerHTML = out || '<span class="muted">no subject</span>';
|
|
fill($('#list'), ms.length ? h('table',
|
|
h('thead',h('tr',h('th','#'),h('th','At'),h('th','Match'),h('th','Groups'))),
|
|
h('tbody', ms.slice(0,60).map((m,i)=>h('tr',
|
|
h('td.num',i+1), h('td.num.small.muted',m.index),
|
|
h('td.mono.small',m[0].slice(0,40)),
|
|
h('td.small', m.groups ? Object.entries(m.groups).map(([k,v])=>h('span.tag.acc',k+'='+String(v).slice(0,14)))
|
|
: m.slice(1).map((g,j)=>h('span.tag','$'+(j+1)+'='+String(g).slice(0,14))))))))
|
|
: h('div.empty','No matches'));
|
|
try { $('#out').textContent = sub.replace(re, $('#rep').value); }
|
|
catch(e){ $('#out').textContent = '(replacement error)'; }
|
|
}
|
|
['#re','#sub','#rep'].forEach(s=>$(s).addEventListener('input', run));
|
|
fill($('#lib'), LIB.map(([n,p,f])=>h('li',{style:{cursor:'pointer'},
|
|
onclick:()=>{ $('#re').value=p;
|
|
flags.set(v=>Object.fromEntries(Object.keys(v).map(k=>[k,f.includes(k)])));
|
|
drawFlags(); run(); submit('regex.pattern',{name:n}).catch(()=>{}); toast('Pattern loaded'); }},
|
|
h('div',{style:{minWidth:0}},h('div.small.b',n),h('div.mono.small.muted.trunc',p)))));
|
|
fill($('#cheat'), CHEAT.map(([a,b])=>h('li',h('span.mono.small.b',{style:{width:'74px'}},a),h('span.small.muted',b))));
|
|
drawFlags(); run();
|
|
</script>
|