@1agh/maude 0.30.0 → 0.32.0

package/apps/studio/client/panels/CollabModelInfographic.jsx

@@ -0,0 +1,71 @@
+// Phase 29 (epic E4) Task 6 — the two-layer collab model, in one picture.
+//
+// Carries the whole mental model the collab tour teaches (see the teaching-model
+// DDR): a LIVE layer (cursors · who's here · comments — automatic, no buttons)
+// floating ABOVE the work cycle (Save changes locally → Publish for everyone →
+// Pull changes — visible, has buttons). The two layers are NEVER mixed into one
+// diagram — that split is the whole point. Rendered as the centered tour step's
+// graphic (overlay.jsx `render` field) and embeddable elsewhere (e.g. the wizard
+// success state). Pure presentational; cm-* classes live in 3-shell-maude.css.
+
+function Glyph({ name, size = 16 }) {
+  const p = {
+    cursor: <path d="M3 2.5l9 4.2-3.8 1.2-1.2 3.8z" />,
+    people: (<><circle cx="6" cy="6" r="2.2" /><path d="M2.4 13a3.6 3.6 0 0 1 7.2 0" /><path d="M11 4.2a2.2 2.2 0 0 1 0 4.1M11.5 13a3.6 3.6 0 0 0-2-3.2" /></>),
+    comment: (<><path d="M2.5 3.5h11v7h-6l-3 2.2V10.5h-2z" /></>),
+    save: (<><path d="M3 2.5h7.5L13.5 5.5V13.5H3z" /><path d="M5 2.5V6h5V2.5" /><rect x="5.5" y="9" width="5" height="3" /></>),
+    publish: (<><line x1="8" y1="13.4" x2="8" y2="6" /><polyline points="5 9 8 6 11 9" /><polyline points="3 4 3 2.6 13 2.6 13 4" /></>),
+    download: (<><line x1="8" y1="2.5" x2="8" y2="10" /><polyline points="4.5 7 8 10.5 11.5 7" /><polyline points="3 12.8 3 13.6 13 13.6 13 12.8" /></>),
+    'arrow-right': (<><line x1="2.5" y1="8" x2="13" y2="8" /><polyline points="9 4 13 8 9 12" /></>),
+  }[name];
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill={name === 'cursor' ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      {p}
+    </svg>
+  );
+}
+
+function CycleStep({ icon, label, sub }) {
+  return (
+    <span className="cm-step">
+      <span className="cm-step-icon"><Glyph name={icon} size={16} /></span>
+      <span className="cm-step-label">{label}</span>
+      <span className="cm-step-sub">{sub}</span>
+    </span>
+  );
+}
+
+export default function CollabModelInfographic() {
+  return (
+    <div className="cm-info">
+      {/* LIVE layer — floats above the work; presented as automatic. */}
+      <div className="cm-live">
+        <div className="cm-live-hd">
+          <span className="cm-live-dot" aria-hidden="true" />
+          <span><b>Together</b> · automatic — no buttons</span>
+        </div>
+        <div className="cm-live-items">
+          <span className="cm-live-item"><Glyph name="cursor" size={13} /> cursors</span>
+          <span className="cm-live-item"><Glyph name="people" size={13} /> who's here</span>
+          <span className="cm-live-item"><Glyph name="comment" size={13} /> comments</span>
+        </div>
+        <div className="cm-live-note">When you're both here, you see each other instantly.</div>
+      </div>
+
+      <div className="cm-bridge" aria-hidden="true">
+        <span className="cm-bridge-line" />
+        <span className="cm-bridge-label">the work itself</span>
+        <span className="cm-bridge-line" />
+      </div>
+
+      {/* THE WORK — the visible three-verb cycle. */}
+      <div className="cm-cycle">
+        <CycleStep icon="save" label="Save changes locally" sub="keep a version on your machine" />
+        <span className="cm-cyc-arrow" aria-hidden="true"><Glyph name="arrow-right" size={15} /></span>
+        <CycleStep icon="publish" label="Publish for everyone" sub="share it with the team" />
+        <span className="cm-cyc-arrow" aria-hidden="true"><Glyph name="arrow-right" size={15} /></span>
+        <CycleStep icon="download" label="Pull changes" sub="get everyone else's work" />
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/panels/CreateProject.jsx

@@ -0,0 +1,334 @@
+// Phase 28 (epic E3) Task 6 — start / pull / share a project.
+//
+// Opened from the IdentityBar account menu. Three views, all in the shell maude DS
+// dialog treatment (solid var(--bg-1) surface + .st-dialog scrim — NOT the canvas
+// `.panel`; inputs use the DS .input/.textarea recipe defined in 3-shell-maude.css):
+//   • new   — name + Private(default)/Public + description → POST create-repo.
+//   • get   — "Pull a local copy": pick one of your GitHub projects, choose WHERE on
+//             disk to save it, clone it, and open it. Distinct from File ▸ Open
+//             Project (a folder you already have). A pulled repo with no Maude
+//             design system yet shows a clear "set it up" message (never a crash).
+//   • share — invite a teammate by GitHub username → POST invite.
+
+import { useEffect, useState } from 'react';
+
+import { cloneRepo, createProject, initDesign, invite, listRepos, openLocalProject, pickDirectory } from '../github.js';
+
+function Icon({ name, size = 16 }) {
+  const p = {
+    lock: (
+      <>
+        <rect x="3.5" y="7" width="9" height="6.5" rx="1.2" />
+        <path d="M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7" />
+      </>
+    ),
+    globe: (
+      <>
+        <circle cx="8" cy="8" r="5.5" />
+        <path d="M2.5 8h11M8 2.5c1.7 1.5 2.6 3.5 2.6 5.5S9.7 12.5 8 13.5C6.3 12 5.4 10 5.4 8S6.3 3.5 8 2.5z" />
+      </>
+    ),
+    x: (
+      <>
+        <line x1="3.5" y1="3.5" x2="12.5" y2="12.5" />
+        <line x1="12.5" y1="3.5" x2="3.5" y2="12.5" />
+      </>
+    ),
+    check: <polyline points="3 8.2 6.4 11.5 13 4.2" />,
+    plus: (
+      <>
+        <line x1="8" y1="3" x2="8" y2="13" />
+        <line x1="3" y1="8" x2="13" y2="8" />
+      </>
+    ),
+    invite: (
+      <>
+        <circle cx="6" cy="5.5" r="2.5" />
+        <path d="M2 13.5a4 4 0 0 1 8 0" />
+        <line x1="13" y1="5" x2="13" y2="9" />
+        <line x1="11" y1="7" x2="15" y2="7" />
+      </>
+    ),
+    download: (
+      <>
+        <line x1="8" y1="2.5" x2="8" y2="10" />
+        <polyline points="4.5 7 8 10.5 11.5 7" />
+        <polyline points="3 12.8 3 13.6 13 13.6 13 12.8" />
+      </>
+    ),
+    spinner: <path d="M8 2.2a5.8 5.8 0 1 0 5.8 5.8" />,
+  }[name];
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className={name === 'spinner' ? 'cp-spin' : undefined}>
+      {p}
+    </svg>
+  );
+}
+
+const TITLES = {
+  new: ['Create a new project', 'A private project on GitHub, set up for you.'],
+  get: ['Pull a local copy', 'Pick a project, choose where to save it, and open it here.'],
+  share: ['Share this project', 'Invite a teammate by their GitHub username.'],
+};
+
+export default function CreateProject({ view, identity, onClose }) {
+  const [title, sub] = TITLES[view] || TITLES.new;
+  return (
+    <div className="cp-modal" role="dialog" aria-modal="true" aria-label={title} onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}>
+      <div className="cp-scrim" aria-hidden="true" onClick={onClose} />
+      <div className="cp-dialog">
+        <div className="cp-dialog-hd">
+          <span className="cp-dialog-titles">
+            <h2>{title}</h2>
+            <p>{sub}</p>
+          </span>
+          <button type="button" className="btn btn--icon" aria-label="Close" onClick={onClose}>
+            <Icon name="x" size={15} />
+          </button>
+        </div>
+        {view === 'new' && <NewView identity={identity} onClose={onClose} />}
+        {view === 'get' && <GetView />}
+        {view === 'share' && <ShareView onClose={onClose} />}
+      </div>
+    </div>
+  );
+}
+
+function NewView({ identity, onClose }) {
+  const [name, setName] = useState('');
+  const [isPrivate, setIsPrivate] = useState(true);
+  const [desc, setDesc] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [step, setStep] = useState('');
+  const [err, setErr] = useState('');
+
+  const slug = name.trim().toLowerCase().replace(/[^a-z0-9._-]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+  const owner = identity?.login || 'you';
+
+  // New project = create the GitHub repo AND a ready-to-design local project, then
+  // open it. You pick where to save it (like a real "new project"), then design
+  // and Publish when ready.
+  async function submit() {
+    setErr('');
+    setBusy(true);
+    try {
+      setStep('Choose where to save it…');
+      const parentDir = await pickDirectory();
+      if (!parentDir) { setBusy(false); setStep(''); return; } // cancelled
+      setStep('Creating your project on GitHub…');
+      const r = await createProject({ name, private: isPrivate, description: desc, parentDir });
+      if (!(r.ok && r.json?.ok)) {
+        setErr(r.json?.error || 'Couldn’t create the project. Try again.');
+        setBusy(false);
+        setStep('');
+        return;
+      }
+      setStep('Opening it in Maude…');
+      await openLocalProject(r.json.path); // switches the app to the new project
+    } catch (e) {
+      setErr(String(e?.message || e || 'Something went wrong creating the project.'));
+      setBusy(false);
+      setStep('');
+    }
+  }
+
+  return (
+    <>
+      <div className="cp-body">
+        <label className="cp-field">
+          <span className="cp-field-label">Project name</span>
+          <input className="input cp-input" type="text" value={name} placeholder="Acme Rebrand" aria-label="Project name" onChange={(e) => setName(e.target.value)} />
+          {slug && <span className="cp-field-help">Creates <b>github.com/{owner}/{slug}</b></span>}
+        </label>
+        <div className="cp-field">
+          <span className="cp-field-label">Who can see it</span>
+          <div className="seg cp-seg" role="group" aria-label="Project visibility">
+            <button type="button" aria-pressed={isPrivate} onClick={() => setIsPrivate(true)}><Icon name="lock" size={14} /> Private</button>
+            <button type="button" aria-pressed={!isPrivate} onClick={() => setIsPrivate(false)}><Icon name="globe" size={14} /> Public</button>
+          </div>
+          <span className="cp-field-help">{isPrivate ? 'Only you and people you invite. The safe default.' : 'Anyone on the internet can see this project.'}</span>
+        </div>
+        <label className="cp-field">
+          <span className="cp-field-label">Description <span className="cp-optional">optional</span></span>
+          <textarea className="textarea cp-textarea" rows={2} value={desc} placeholder="What is this project for?" aria-label="Project description" onChange={(e) => setDesc(e.target.value)} />
+        </label>
+        {err && <div className="callout callout--error"><span className="cp-cl-glyph" style={{ color: 'var(--status-error)' }}><Icon name="x" /></span><span>{err}</span></div>}
+      </div>
+      <div className="cp-ft">
+        <span className="cp-spacer" />
+        <button type="button" className="btn btn--ghost" onClick={onClose}>Cancel</button>
+        <button type="button" className="btn btn--primary" onClick={submit} disabled={busy || !slug}>
+          <Icon name="plus" size={15} /> {busy ? step || 'Creating…' : 'Create project'}
+        </button>
+      </div>
+    </>
+  );
+}
+
+// "Pull a local copy" — pick a repo, choose a disk folder, clone, open.
+function GetView() {
+  const [repos, setRepos] = useState(null);
+  const [err, setErr] = useState('');
+  const [pulling, setPulling] = useState(null); // full_name being pulled
+  const [step, setStep] = useState(''); // human progress line
+  const [needsSetup, setNeedsSetup] = useState(null); // { name, path } when the pulled repo has no .design
+  const [settingUp, setSettingUp] = useState(false);
+
+  // The pulled repo has no Maude design system yet — scaffold a bootable one into
+  // the clone, then open it (the user can create a real DS with /design:setup-ds).
+  async function setupHere() {
+    if (!needsSetup) return;
+    setErr('');
+    setSettingUp(true);
+    try {
+      const r = await initDesign(needsSetup.path);
+      if (!(r.ok && r.json?.ok)) {
+        setErr(r.json?.error || 'Couldn’t set it up. Try again.');
+        setSettingUp(false);
+        return;
+      }
+      await openLocalProject(needsSetup.path); // switches the app to the new project
+    } catch (e) {
+      setErr(String(e?.message || e || 'Couldn’t set it up.'));
+      setSettingUp(false);
+    }
+  }
+
+  useEffect(() => {
+    (async () => {
+      const r = await listRepos();
+      if (r.ok && r.json?.ok) setRepos(r.json.repos || []);
+      else { setErr(r.json?.error || 'Couldn’t load your projects.'); setRepos([]); }
+    })();
+  }, []);
+
+  async function pull(repo) {
+    setErr('');
+    setNeedsSetup(null);
+    setPulling(repo.full_name);
+    try {
+      setStep('Choose a folder to save it in…');
+      const parentDir = await pickDirectory();
+      if (!parentDir) { setPulling(null); setStep(''); return; } // cancelled
+      setStep('Downloading your project…');
+      const r = await cloneRepo({ cloneUrl: repo.clone_url, parentDir, name: repo.name });
+      if (!(r.ok && r.json?.ok)) {
+        setErr(r.json?.error || 'Couldn’t download the project. Try again.');
+        setPulling(null);
+        setStep('');
+        return;
+      }
+      if (r.json.hasDesign === false) {
+        // Empty / non-Maude repo — DON'T switch (the dev-server can't serve a project
+        // with no .design). Tell the user how to set it up instead of crashing.
+        setNeedsSetup({ name: repo.name, path: r.json.path });
+        setPulling(null);
+        setStep('');
+        return;
+      }
+      setStep('Opening it in Maude…');
+      await openLocalProject(r.json.path); // switches the app to the clone
+    } catch (e) {
+      setErr(String(e?.message || e || 'Something went wrong pulling the project.'));
+      setPulling(null);
+      setStep('');
+    }
+  }
+
+  if (needsSetup) {
+    return (
+      <>
+        <div className="cp-body">
+          <div className="callout callout--info">
+            <span className="cp-cl-glyph" style={{ color: 'var(--status-info)' }}><Icon name="download" /></span>
+            <span>
+              <b style={{ color: 'var(--fg-0)' }}>Got “{needsSetup.name}” — it’s not a Maude project yet.</b> Saved to{' '}
+              <b>{needsSetup.path}</b>. Set up Maude in it to start designing (you can build a design system after).
+            </span>
+          </div>
+          {err && <div className="callout callout--error"><span className="cp-cl-glyph" style={{ color: 'var(--status-error)' }}><Icon name="x" /></span><span>{err}</span></div>}
+        </div>
+        <div className="cp-ft">
+          <span className="cp-spacer" />
+          <button type="button" className="btn btn--ghost" onClick={() => setNeedsSetup(null)} disabled={settingUp}>Not now</button>
+          <button type="button" className="btn btn--primary" onClick={setupHere} disabled={settingUp}>
+            <Icon name="download" size={15} /> {settingUp ? 'Setting up…' : 'Set up Maude here'}
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="cp-body cp-body--list">
+      {err && <div className="callout callout--error"><span className="cp-cl-glyph" style={{ color: 'var(--status-error)' }}><Icon name="x" /></span><span>{err}</span></div>}
+      {repos === null && <div className="cp-field-help">Loading your projects…</div>}
+      {repos && repos.length === 0 && !err && <div className="cp-field-help">No projects yet — create one to get started.</div>}
+      {repos && repos.length > 0 && (
+        <div className="cp-repolist" role="group" aria-label="Your projects">
+          {repos.map((r) => {
+            const isPulling = pulling === r.full_name;
+            return (
+              <button
+                key={r.full_name}
+                type="button"
+                className={'cp-repo' + (isPulling ? ' is-busy' : '')}
+                disabled={!!pulling}
+                onClick={() => pull(r)}
+              >
+                <Icon name={r.private ? 'lock' : 'globe'} size={14} />
+                <span className="cp-repo-tx">
+                  <span className="cp-repo-name">{r.name}</span>
+                  <span className="cp-repo-meta">{isPulling ? step || 'Working…' : `${r.owner} · updated ${new Date(r.updated_at).toLocaleDateString()}`}</span>
+                </span>
+                <span className="cp-repo-go">{isPulling ? <Icon name="spinner" size={15} /> : <Icon name="download" size={15} />}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+      <div className="cp-field-help">Pulls a fresh copy from GitHub to a folder you choose, then opens it. To open a folder you already have, use <b>File ▸ Open Project</b>.</div>
+    </div>
+  );
+}
+
+function ShareView({ onClose }) {
+  const [username, setUsername] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+  const [invited, setInvited] = useState(null);
+
+  async function submit() {
+    setErr('');
+    setBusy(true);
+    const r = await invite(username);
+    setBusy(false);
+    if (r.ok && r.json?.ok) setInvited(r.json.username);
+    else setErr(r.json?.error || 'Couldn’t send the invite. Try again.');
+  }
+
+  return (
+    <>
+      <div className="cp-body">
+        <div className="cp-invite">
+          <span className="cp-invite-at" aria-hidden="true">@</span>
+          <input className="input cp-invite-input" type="text" value={username} placeholder="github-username" aria-label="GitHub username to invite" onChange={(e) => setUsername(e.target.value)} />
+          <button type="button" className="btn btn--primary cp-invite-btn" onClick={submit} disabled={busy || !username.trim()}>
+            <Icon name="invite" size={15} /> {busy ? 'Inviting…' : 'Invite'}
+          </button>
+        </div>
+        {invited && (
+          <div className="callout callout--success">
+            <span className="cp-cl-glyph" style={{ color: 'var(--status-success)' }}><Icon name="check" /></span>
+            <span><b style={{ color: 'var(--fg-0)' }}>Invited @{invited}.</b> They’ll get a GitHub email and can open this project once they accept.</span>
+          </div>
+        )}
+        {err && <div className="callout callout--error"><span className="cp-cl-glyph" style={{ color: 'var(--status-error)' }}><Icon name="x" /></span><span>{err}</span></div>}
+      </div>
+      <div className="cp-ft">
+        <span className="cp-spacer" />
+        <button type="button" className="btn btn--primary" onClick={onClose}>Done</button>
+      </div>
+    </>
+  );
+}