@cherishxn/agent-scaffold 0.0.0-stage → 1.1.0

package/templates/react-nest-shadcn/web/src/App.tsx

@@ -0,0 +1,30 @@
+"use client";
+import {useEffect,useState,useSyncExternalStore} from 'react';
+import project from '../../project.json';
+import * as defaultWidgets from './ui';
+import type {WidgetSet} from './widget-types';
+import {Structure} from './structure-view';
+import {createWorkspaceModel,type WorkspaceModel,type WorkspaceState} from './workspace-model';
+import './tailwind.css';
+import './styles.css';
+export function WorkspaceView({state,model,widgets=defaultWidgets}:{state:WorkspaceState;model:WorkspaceModel;widgets?:WidgetSet}) {
+ const {Alert,Badge,Button,Field,Input,TextArea,Theme}=widgets;
+ const {user,checking,email,password,list,page,selected,title,content,editing,busy,loading,error,notice}=state;
+ const login=<Structure widgets={widgets} name="login" slots={{
+  loginIntro:<><p className="eyebrow">YOUR WORKSPACE</p><h1>让每一条记录<br/>都有自己的位置。</h1><p className="intro">{project.description}</p></>,
+  loginCard:<><h2>登录 {project.nameZh}</h2><p className="muted">使用本地初始化创建的账号。</p>{error&&<Alert>{error}</Alert>}<form onSubmit={event=>{event.preventDefault();void model.login();}}><Field label="邮箱" htmlFor="email"><Input id="email" name="email" type="email" autoComplete="username" value={email} onChange={event=>model.setField('email',event.target.value)} required/></Field><Field label="密码" htmlFor="password"><Input id="password" name="password" type="password" autoComplete="current-password" value={password} onChange={event=>model.setField('password',event.target.value)} required/></Field><Button type="submit" loading={busy}>{busy?'正在登录…':'登录'}</Button></form></>
+ }}/>;
+ const workspace=<Structure widgets={widgets} name="workspace" slots={{
+  heading:<><div><p className="eyebrow">PERSONAL RECORDS</p><h1>我的记录</h1><p className="muted">仅你自己可见，共 {list.total} 条。</p></div><Button onClick={model.create} disabled={busy}>新建记录</Button></>,
+  feedback:<>{error&&<Alert>{error}</Alert>}{notice&&<Alert variant="success">{notice}</Alert>}</>,
+  records:<><h2>记录列表</h2>{loading?<p role="status">正在加载…</p>:list.items.length===0?<div className="empty"><h3>还没有记录</h3><p>从新建第一条记录开始。</p></div>:<ul>{list.items.map(item=><li key={item.id}><button className={`record-link ${selected===item.id?'active':''}`} onClick={()=>void model.open(item.id)} disabled={busy}><strong>{item.title}</strong><span>{new Date(item.updated_at).toLocaleDateString()}</span></button></li>)}</ul>}<nav className="pagination" aria-label="分页"><Button variant="secondary" disabled={page===1||loading||busy} onClick={()=>void model.changePage(page-1)}>上一页</Button><span>第 {page} 页</span><Button variant="secondary" disabled={page*10>=list.total||loading||busy} onClick={()=>void model.changePage(page+1)}>下一页</Button></nav></>,
+  editor:editing?<><div className="editor-heading"><h2>{selected?'记录详情 / 编辑':'新建记录'}</h2>{selected&&<Button variant="danger" disabled={busy} onClick={()=>void model.remove(window.confirm('确认删除这条记录？此操作无法撤销。'))}>删除记录</Button>}</div><form onSubmit={event=>{event.preventDefault();void model.save();}}><Field label="标题" htmlFor="title"><Input id="title" value={title} onChange={event=>model.setField('title',event.target.value)} required/></Field><Field label="正文" htmlFor="content"><TextArea id="content" rows={12} value={content} onChange={event=>model.setField('content',event.target.value)}/></Field><div className="editor-footer"><span className="muted">{Array.from(content).length} / 10,000</span><Button type="submit" loading={busy}>{busy?'正在处理…':'保存记录'}</Button></div></form></>:<div className="empty"><h2>留下一点值得记住的事</h2><p>选择一条记录查看详情，或创建新记录。</p></div>
+ }}/>;
+ return <Theme><Structure widgets={widgets} name="root" slots={{brand:project.nameZh,badge:<Badge>个人工作空间</Badge>,account:user?<><span>{user.email}</span><Button variant="secondary" disabled={busy} onClick={()=>void model.logout()}>退出登录</Button></>:null,page:checking?<Structure widgets={widgets} name="checking" slots={{checking:<p role="status">正在检查登录状态…</p>}}/>:user?workspace:login,footer:'私有记录 · 安心整理'}}/></Theme>;
+}
+export default function App(){
+ const [model]=useState(()=>createWorkspaceModel());
+ const state=useSyncExternalStore(model.subscribe,model.getSnapshot,model.getSnapshot);
+ useEffect(()=>{void model.start();return model.stop;},[model]);
+ return <WorkspaceView state={state} model={model}/>;
+}

package/templates/react-nest-shadcn/web/src/design-layout.css

@@ -0,0 +1,7 @@
+/* Generated by design:sync. Edit design/layout.css. */
+*{box-sizing:border-box}body{color-scheme:dark;margin:0;background:var(--design-colors-background);color:var(--design-colors-text);font-family:var(--design-typography-body-font-family);font-size:var(--design-typography-body-font-size);line-height:var(--design-typography-body-line-height)}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:var(--design-spacing-s3) solid var(--design-colors-focus);outline-offset:var(--design-spacing-s3)}.app-shell{max-width:var(--design-spacing-shell-max);margin:auto;padding:0 var(--design-spacing-s32)}.topbar{display:flex;align-items:center;gap:var(--design-spacing-s20);min-height:var(--design-spacing-s88);border-bottom:var(--design-spacing-s1) solid var(--design-colors-border)}.brand{font-weight:var(--design-typography-eyebrow-font-weight);color:var(--design-colors-brand);text-decoration:none;font-size:var(--design-typography-h2-font-size)}.account{margin-left:auto;display:flex;gap:var(--design-spacing-s20);align-items:center;font-size:var(--design-typography-label-font-size)}main{padding:var(--design-spacing-s44) 0;min-height:calc(100vh - var(--design-spacing-footer-reserve))}h1,h2,h3,p{margin-top:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}h1{font-weight:var(--design-typography-h1-font-weight);font-size:var(--design-typography-h1-font-size);line-height:var(--design-typography-h1-line-height);letter-spacing:var(--design-typography-h1-letter-spacing);margin-bottom:var(--design-spacing-s12)}h2{font-weight:var(--design-typography-h2-font-weight);letter-spacing:var(--design-typography-h2-letter-spacing);font-size:var(--design-typography-h2-font-size);line-height:var(--design-typography-h2-line-height)}h3{font-weight:var(--design-typography-h3-font-weight);line-height:var(--design-typography-h3-line-height);font-size:var(--design-typography-h3-font-size)}.eyebrow{font-size:var(--design-typography-eyebrow-font-size);font-weight:var(--design-typography-eyebrow-font-weight);letter-spacing:var(--design-typography-eyebrow-letter-spacing);color:var(--design-colors-eyebrow);margin-bottom:var(--design-spacing-s14)}.muted{color:var(--design-colors-muted);font-size:var(--design-typography-label-font-size)}.intro{color:var(--design-colors-intro);font-size:var(--design-typography-intro-font-size);line-height:var(--design-typography-intro-line-height);max-width:var(--design-spacing-intro-max)}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--design-spacing-s20);margin-bottom:var(--design-spacing-s28)}.workspace{display:grid;grid-template-columns:minmax(var(--design-spacing-list-min),.8fr) minmax(0,1.6fr);gap:var(--design-spacing-s24)}.panel{background:var(--design-components-panel-background-color);border:var(--design-spacing-s1) solid var(--design-colors-panel-border);border-radius:var(--design-components-panel-rounded);padding:var(--design-components-panel-padding);box-shadow:var(--design-effects-panel-shadow)}.login-layout{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:var(--design-spacing-s80);max-width:var(--design-spacing-login-max);margin:auto}.login-layout h1{font-size:var(--design-typography-login-heading-font-size);font-weight:var(--design-typography-login-heading-font-weight);line-height:var(--design-typography-login-heading-line-height);letter-spacing:var(--design-typography-login-heading-letter-spacing)}.login-card{max-width:var(--design-spacing-login-card-max);width:100%;justify-self:end}.field{display:flex;flex-direction:column;gap:var(--design-spacing-s8);margin:var(--design-spacing-s22) 0}.field label{font-weight:var(--design-typography-label-font-weight);font-size:var(--design-typography-label-font-size)}.record-list ul{padding:0;margin:0;list-style:none}.record-list li+li{border-top:var(--design-spacing-s1) solid var(--design-colors-divider)}.record-link{display:flex;flex-direction:column;gap:var(--design-spacing-s4);width:100%;padding:var(--design-spacing-s15) var(--design-spacing-s12);text-align:left;cursor:pointer;background:transparent;border:0;border-radius:var(--design-rounded-md);color:var(--design-colors-record-text)}.record-link strong{overflow-wrap:anywhere}.record-link span{color:var(--design-colors-record-meta);font-size:var(--design-typography-caption-font-size)}.record-link:hover,.record-link.active{background:var(--design-colors-record-hover)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--design-spacing-s8);border-top:var(--design-spacing-s1) solid var(--design-colors-pagination-border);margin-top:var(--design-spacing-s20);padding-top:var(--design-spacing-s20);font-size:var(--design-typography-caption-font-size)}.editor-heading,.editor-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--design-spacing-s14)}.editor-heading h2{margin:0}.empty{padding:var(--design-spacing-s60) var(--design-spacing-s14);text-align:center;color:var(--design-colors-empty)}.empty h2,.empty h3{color:var(--design-colors-empty-heading)}.notice{padding:var(--design-spacing-s12) var(--design-spacing-s16);background:var(--design-colors-success-background);border:var(--design-spacing-s1) solid var(--design-colors-success-border);border-radius:var(--design-rounded-md);color:var(--design-colors-success-text)}.alert{margin:var(--design-spacing-s16) 0;padding:var(--design-spacing-s12) var(--design-spacing-s16);background:var(--design-colors-error-background);border:var(--design-spacing-s1) solid var(--design-colors-error-border);border-radius:var(--design-rounded-md);color:var(--design-colors-error-text)}footer{padding:var(--design-spacing-s20) 0;border-top:var(--design-spacing-s1) solid var(--design-colors-footer-border);color:var(--design-colors-footer-text);font-size:var(--design-typography-caption-font-size)}.badge{display:inline-flex;border:var(--design-spacing-s1) solid var(--design-colors-badge-border);padding:var(--design-spacing-s3) var(--design-spacing-s10);border-radius:var(--design-rounded-full);color:var(--design-colors-badge-text);font-size:var(--design-typography-eyebrow-font-size);white-space:nowrap}textarea{resize:vertical}@media(max-width:760px){.app-shell{padding:0 var(--design-spacing-s18)}.topbar{flex-wrap:wrap;gap:var(--design-spacing-s10);padding:var(--design-spacing-s18) 0}.account{width:100%;justify-content:space-between}.workspace,.login-layout{grid-template-columns:1fr;gap:var(--design-spacing-s24)}.login-layout h1{font-size:var(--design-typography-mobile-heading-font-size);line-height:var(--design-typography-mobile-heading-line-height)}.login-card{max-width:none}.page-heading h1{font-size:var(--design-typography-mobile-page-heading-font-size);line-height:var(--design-typography-mobile-page-heading-line-height)}.panel{padding:var(--design-spacing-s20)}main{padding:var(--design-spacing-s28) 0}.pagination button{padding:var(--design-spacing-s6)}.badge{margin-left:auto}}
+
+.account{min-width:0}.account span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand{overflow-wrap:anywhere}.workspace>*{min-width:0}
+
+.record-link.active{box-shadow:inset 2px 0 var(--design-colors-primary)}
+@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}

package/templates/react-nest-shadcn/web/src/design-runtime.json

@@ -0,0 +1,511 @@
+{
+  "tokens": {
+    "version": "alpha",
+    "name": "Scientific Workspace",
+    "description": "从 CleerScience 提炼的通用深色科技视觉，适配可读、安静的工具型界面。",
+    "colors": {
+      "primary": "#8fc3ff",
+      "primary-hover": "#b5d8ff",
+      "primary-active": "#69a9f3",
+      "primary-text": "#02040a",
+      "background": "#02040a",
+      "text": "#f4f8ff",
+      "surface": "#0b111d",
+      "focus": "#8fc3ff",
+      "border": "#283547",
+      "brand": "#f4f8ff",
+      "eyebrow": "#9baecb",
+      "muted": "#a1afc3",
+      "intro": "#b5c3d7",
+      "panel-border": "#283547",
+      "divider": "#202c3e",
+      "record-text": "#f4f8ff",
+      "record-meta": "#a1afc3",
+      "record-hover": "#142237",
+      "pagination-border": "#283547",
+      "empty": "#a1afc3",
+      "empty-heading": "#e2eeff",
+      "success-background": "#102b25",
+      "success-border": "#387c69",
+      "success-text": "#a2e6cc",
+      "error-background": "#311b24",
+      "error-border": "#8f4c61",
+      "error-text": "#ffbdcd",
+      "footer-border": "#283547",
+      "footer-text": "#a1afc3",
+      "badge-border": "#435773",
+      "badge-text": "#b5c3d7",
+      "control-focus": "#8fc3ff",
+      "control-border": "#657891",
+      "control-background": "#080e18",
+      "secondary-border": "#657891",
+      "secondary-text": "#e2eeff",
+      "secondary-hover": "#19283d",
+      "danger-border": "#ad6578",
+      "danger-background": "#311b24",
+      "danger-text": "#ffbdcd",
+      "danger-hover": "#472636"
+    },
+    "typography": {
+      "body": {
+        "fontFamily": "Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",sans-serif",
+        "fontSize": "16px",
+        "lineHeight": 1.65
+      },
+      "h1": {
+        "fontSize": "36px",
+        "lineHeight": 1.2,
+        "letterSpacing": "-0.03em",
+        "fontWeight": 560
+      },
+      "login-heading": {
+        "fontSize": "48px",
+        "lineHeight": 1.15,
+        "fontWeight": 560,
+        "letterSpacing": "-0.03em"
+      },
+      "h2": {
+        "fontSize": "20px",
+        "lineHeight": 1.4,
+        "fontWeight": 580,
+        "letterSpacing": "-0.02em"
+      },
+      "h3": {
+        "fontSize": "18px",
+        "fontWeight": 600,
+        "lineHeight": 1.5
+      },
+      "label": {
+        "fontSize": "14px",
+        "fontWeight": 600
+      },
+      "eyebrow": {
+        "fontSize": "11px",
+        "fontWeight": 700,
+        "letterSpacing": "0.22em",
+        "lineHeight": 1.5
+      },
+      "button": {
+        "fontSize": "14px",
+        "fontWeight": 600,
+        "lineHeight": "20px"
+      },
+      "caption": {
+        "fontSize": "12px"
+      },
+      "intro": {
+        "fontSize": "18px",
+        "lineHeight": 1.8
+      },
+      "mobile-heading": {
+        "fontSize": "32px",
+        "lineHeight": 1.2
+      },
+      "mobile-page-heading": {
+        "fontSize": "28px",
+        "lineHeight": 1.25
+      }
+    },
+    "rounded": {
+      "md": "0px",
+      "panel": "0px",
+      "full": "0px"
+    },
+    "spacing": {
+      "s0": "0px",
+      "s1": "1px",
+      "s2": "2px",
+      "s3": "3px",
+      "s4": "4px",
+      "s6": "6px",
+      "s8": "8px",
+      "s10": "10px",
+      "s12": "12px",
+      "s14": "14px",
+      "s15": "15px",
+      "s16": "16px",
+      "s18": "18px",
+      "s20": "20px",
+      "s22": "22px",
+      "s24": "24px",
+      "s26": "26px",
+      "s28": "28px",
+      "s30": "30px",
+      "s32": "32px",
+      "s34": "34px",
+      "s38": "38px",
+      "s44": "44px",
+      "s48": "48px",
+      "s60": "60px",
+      "s80": "80px",
+      "s88": "88px",
+      "shell-max": "1240px",
+      "login-max": "1020px",
+      "intro-max": "460px",
+      "login-card-max": "430px",
+      "list-min": "260px",
+      "footer-reserve": "155px",
+      "mobile-breakpoint": "760px",
+      "control-min": "44px"
+    },
+    "components": {
+      "button-primary": {
+        "backgroundColor": "#8fc3ff",
+        "textColor": "#02040a",
+        "rounded": "0px",
+        "height": "44px"
+      },
+      "panel": {
+        "backgroundColor": "#0b111d",
+        "padding": "26px",
+        "rounded": "0px"
+      },
+      "input": {
+        "rounded": "0px"
+      }
+    }
+  },
+  "effects": {
+    "panelShadow": "0 16px 48px rgba(0,0,0,0.18)"
+  },
+  "widgets": {
+    "schemaVersion": 1,
+    "acceptance": {
+      "positionTolerance": 0.6,
+      "exact": [
+        "color",
+        "radius",
+        "iconGeometry"
+      ],
+      "viewports": [
+        {
+          "width": 1440,
+          "height": 1000
+        },
+        {
+          "width": 375,
+          "height": 812
+        }
+      ]
+    },
+    "widgets": {
+      "button": {
+        "parts": [
+          "root",
+          "label"
+        ],
+        "variants": [
+          "primary",
+          "secondary",
+          "danger"
+        ],
+        "states": [
+          "default",
+          "hover",
+          "active",
+          "focus",
+          "disabled",
+          "loading"
+        ],
+        "styles": {
+          "height": "44px",
+          "paddingX": "16px",
+          "paddingY": "8px",
+          "borderWidth": "1px",
+          "fontSize": "14px",
+          "fontWeight": 600,
+          "lineHeight": "20px",
+          "radius": "0px"
+        },
+        "behavior": {
+          "keyboard": [
+            "Enter",
+            "Space"
+          ],
+          "loading": "disabled-with-status-label",
+          "icon": "none"
+        }
+      },
+      "input": {
+        "parts": [
+          "root"
+        ],
+        "variants": [
+          "text",
+          "email",
+          "password"
+        ],
+        "states": [
+          "default",
+          "hover",
+          "focus",
+          "disabled",
+          "invalid",
+          "readonly"
+        ],
+        "styles": {
+          "height": "44px",
+          "paddingX": "12px",
+          "paddingY": "8px",
+          "borderWidth": "1px",
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "radius": "0px"
+        },
+        "behavior": {
+          "keyboard": "native-text-editing",
+          "passwordVisibility": "always-masked",
+          "autocomplete": "caller-provided",
+          "validation": "business-owned"
+        }
+      },
+      "textarea": {
+        "parts": [
+          "root"
+        ],
+        "variants": [
+          "default"
+        ],
+        "states": [
+          "default",
+          "hover",
+          "focus",
+          "disabled",
+          "invalid",
+          "readonly"
+        ],
+        "styles": {
+          "paddingX": "12px",
+          "paddingY": "8px",
+          "borderWidth": "1px",
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "radius": "0px"
+        },
+        "behavior": {
+          "keyboard": "native-multiline-editing",
+          "resize": "vertical"
+        }
+      },
+      "alert": {
+        "parts": [
+          "root",
+          "icon",
+          "message"
+        ],
+        "variants": [
+          "error",
+          "success"
+        ],
+        "states": [
+          "default"
+        ],
+        "styles": {
+          "paddingX": "16px",
+          "paddingY": "12px",
+          "gap": "8px",
+          "iconSize": "16px",
+          "fontSize": "14px",
+          "lineHeight": "22px",
+          "borderWidth": "1px",
+          "radius": "0px"
+        },
+        "behavior": {
+          "errorRole": "alert",
+          "successRole": "status",
+          "dismiss": "none"
+        }
+      },
+      "badge": {
+        "parts": [
+          "root",
+          "label"
+        ],
+        "variants": [
+          "default"
+        ],
+        "states": [
+          "default"
+        ],
+        "styles": {
+          "paddingX": "10px",
+          "paddingY": "3px",
+          "fontSize": "12px",
+          "lineHeight": "18px",
+          "borderWidth": "1px",
+          "radius": "0px"
+        },
+        "behavior": {
+          "interactive": false
+        }
+      },
+      "panel": {
+        "parts": [
+          "root"
+        ],
+        "variants": [
+          "default"
+        ],
+        "states": [
+          "default"
+        ],
+        "styles": {
+          "padding": "26px",
+          "borderWidth": "1px",
+          "radius": "0px"
+        },
+        "behavior": {
+          "interactive": false
+        }
+      },
+      "field": {
+        "parts": [
+          "root",
+          "label",
+          "control"
+        ],
+        "variants": [
+          "default"
+        ],
+        "states": [
+          "default"
+        ],
+        "styles": {
+          "gap": "8px",
+          "marginY": "22px",
+          "fontSize": "14px",
+          "fontWeight": 600,
+          "lineHeight": "22px"
+        },
+        "behavior": {
+          "label": "explicit-for-control"
+        }
+      }
+    },
+    "icons": {
+      "error": {
+        "viewBox": "0 0 24 24",
+        "strokeWidth": 2,
+        "paths": [
+          "M12 3 2 21h20L12 3Z",
+          "M12 9v5",
+          "M12 17h.01"
+        ]
+      },
+      "success": {
+        "viewBox": "0 0 24 24",
+        "strokeWidth": 2,
+        "paths": [
+          "M20 6 9 17l-5-5"
+        ]
+      }
+    }
+  },
+  "structure": {
+    "schemaVersion": 1,
+    "root": {
+      "region": "app-shell",
+      "element": "div",
+      "children": [
+        {
+          "region": "topbar",
+          "element": "header",
+          "children": [
+            {
+              "region": "brand",
+              "element": "a",
+              "slot": "brand"
+            },
+            {
+              "region": "badge",
+              "element": "slot",
+              "slot": "badge"
+            },
+            {
+              "region": "account",
+              "element": "div",
+              "slot": "account"
+            }
+          ]
+        },
+        {
+          "region": "page",
+          "element": "slot",
+          "slot": "page"
+        },
+        {
+          "region": "footer",
+          "element": "footer",
+          "slot": "footer"
+        }
+      ]
+    },
+    "pages": {
+      "checking": {
+        "region": "checking",
+        "element": "main",
+        "slot": "checking"
+      },
+      "login": {
+        "region": "login-layout",
+        "element": "main",
+        "children": [
+          {
+            "region": "login-intro",
+            "element": "section",
+            "slot": "loginIntro"
+          },
+          {
+            "region": "login-card",
+            "element": "panel",
+            "slot": "loginCard"
+          }
+        ]
+      },
+      "workspace": {
+        "region": "workspace-main",
+        "element": "main",
+        "children": [
+          {
+            "region": "page-heading",
+            "element": "div",
+            "slot": "heading"
+          },
+          {
+            "region": "feedback",
+            "element": "div",
+            "slot": "feedback"
+          },
+          {
+            "region": "workspace",
+            "element": "div",
+            "children": [
+              {
+                "region": "record-list",
+                "element": "panel",
+                "slot": "records"
+              },
+              {
+                "region": "editor",
+                "element": "panel",
+                "slot": "editor"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "scenarios": [
+      "checking",
+      "login",
+      "login-error",
+      "login-busy",
+      "workspace-empty",
+      "workspace-loading",
+      "workspace-records",
+      "editor-new",
+      "editor-existing",
+      "editor-error"
+    ]
+  }
+}