@unbrained/pm-web 1.0.0

package/public/src/views/groups.js

@@ -0,0 +1,186 @@
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { showModal, hideModal, createModal, confirmDialog } from '../components/modals.js';
+import { toast } from '../components/toast.js';
+export async function renderGroupsView() {
+    const el = document.getElementById('content-groups');
+    if (!el)
+        return;
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Groups</div><div class="page-subtitle">Manage your teams</div></div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderGroupsView()">↺ Refresh</button>
+        <button class="btn btn-primary" onclick="window.__app.openCreateGroupModal()">+ New Group</button>
+      </div>
+    </div>
+    <div id="groups-list"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+    await loadGroups();
+}
+async function loadGroups() {
+    const el = document.getElementById('groups-list');
+    if (!el)
+        return;
+    try {
+        const data = await api('GET', '/groups');
+        const groups = data.groups || [];
+        if (groups.length === 0) {
+            el.innerHTML = `
+        <div class="empty-state">
+          <div class="empty-state-icon">◉</div>
+          <div class="empty-state-text">No groups yet</div>
+          <div class="empty-state-sub">Create a group to share projects with multiple teammates at once</div>
+        </div>`;
+            return;
+        }
+        el.innerHTML = `<div style="display:flex;flex-direction:column;gap:8px">
+      ${groups.map((g) => `
+        <div class="group-row" onclick="window.__app.openGroupDetail('${escHtml(g.id)}','${escHtml(g.name)}')">
+          <div style="width:36px;height:36px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--accent);flex-shrink:0">
+            ${escHtml((g.name || '?').slice(0, 2).toUpperCase())}
+          </div>
+          <div style="flex:1">
+            <div class="group-name">${escHtml(g.name)}</div>
+            ${g.description ? `<div class="group-desc">${escHtml(g.description)}</div>` : ''}
+          </div>
+          <span class="sidebar-badge">${g.memberCount || g.members?.length || 0} members</span>
+          <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();window.__app.deleteGroup('${escHtml(g.id)}','${escHtml(g.name)}')">Delete</button>
+        </div>`).join('')}
+    </div>`;
+    }
+    catch (err) {
+        if (el)
+            el.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+export function openCreateGroupModal() {
+    createModal('create-group-modal', 'New Group', `
+    <div class="form-group">
+      <label class="form-label">Group Name *</label>
+      <input class="form-input" id="cg-name" type="text" placeholder="Engineering Team" required>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <input class="form-input" id="cg-desc" type="text" placeholder="What is this group for?">
+    </div>
+    <div class="form-error" id="cg-error" style="display:none"></div>`, `<button class="btn btn-ghost" onclick="window.__app.hideModal('create-group-modal')">Cancel</button>
+     <button class="btn btn-primary" onclick="window.__app.submitCreateGroup()"><span>Create Group</span></button>`);
+    showModal('create-group-modal');
+}
+export async function submitCreateGroup() {
+    const name = document.getElementById('cg-name')?.value?.trim() || '';
+    const description = document.getElementById('cg-desc')?.value?.trim() || '';
+    const errEl = document.getElementById('cg-error');
+    if (errEl)
+        errEl.style.display = 'none';
+    if (!name) {
+        if (errEl) {
+            errEl.textContent = 'Group name is required';
+            errEl.style.display = 'block';
+        }
+        return;
+    }
+    try {
+        await api('POST', '/groups', { name, description });
+        toast('Group created', 'success');
+        hideModal('create-group-modal');
+        await loadGroups();
+    }
+    catch (err) {
+        if (errEl) {
+            errEl.textContent = err instanceof Error ? err.message : String(err);
+            errEl.style.display = 'block';
+        }
+    }
+}
+export function deleteGroup(groupId, name) {
+    confirmDialog('Delete Group?', `Delete group "${name}"? This cannot be undone.`, async () => {
+        try {
+            await api('DELETE', `/groups/${groupId}`);
+            toast('Group deleted', 'success');
+            await loadGroups();
+        }
+        catch (err) {
+            toast(err instanceof Error ? err.message : String(err), 'error');
+        }
+    }, true);
+}
+export async function openGroupDetail(groupId, _groupName) {
+    createModal('group-detail-modal', _groupName, `<div class="loading-state"><div class="loading-spinner"></div></div>`, '', true);
+    showModal('group-detail-modal');
+    try {
+        const data = await api('GET', `/groups/${groupId}`);
+        const group = data.group || { id: groupId, name: _groupName, members: [] };
+        const members = group.members || [];
+        const groupName = group.name || _groupName || 'Group';
+        const membersHtml = members.length === 0
+            ? `<div style="color:var(--text-muted);font-size:13px">No members yet</div>`
+            : members.map((m) => `
+          <div class="member-row">
+            <div class="member-avatar">${escHtml((m.display_name || m.displayName || m.email || '?').slice(0, 2).toUpperCase())}</div>
+            <div style="flex:1">
+              <div style="font-size:13px;font-weight:500">${escHtml(m.display_name || m.displayName || m.email || m.user_id || m.userId || 'Unknown')}</div>
+              ${m.email && (m.display_name || m.displayName) ? `<div class="group-desc">${escHtml(m.email)}</div>` : ''}
+            </div>
+            <span class="share-perm">${escHtml(m.role || 'member')}</span>
+            <button class="btn btn-danger btn-sm" onclick="window.__app.removeMember('${escHtml(groupId)}','${escHtml(m.user_id || m.userId || '')}')">Remove</button>
+          </div>`).join('');
+        const bodyEl = document.getElementById('group-detail-modal')?.querySelector('.modal-body');
+        const titleEl = document.getElementById('group-detail-modal')?.querySelector('.modal-title');
+        if (titleEl)
+            titleEl.textContent = groupName;
+        if (bodyEl) {
+            bodyEl.innerHTML = `
+        <div style="margin-bottom:20px">
+          <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px">
+            Members (${members.length})
+          </div>
+          ${membersHtml}
+        </div>
+        <hr class="section-divider">
+        <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">
+          Invite Member
+        </div>
+        <div class="row">
+          <input class="form-input flex-1" id="invite-email-${escHtml(groupId)}" type="email" placeholder="colleague@example.com">
+          <button class="btn btn-primary btn-sm" onclick="window.__app.inviteMember('${escHtml(groupId)}')">Invite</button>
+        </div>`;
+        }
+    }
+    catch (err) {
+        const bodyEl = document.getElementById('group-detail-modal')?.querySelector('.modal-body');
+        if (bodyEl)
+            bodyEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+export async function inviteMember(groupId) {
+    const emailEl = document.getElementById(`invite-email-${groupId}`);
+    const email = emailEl?.value?.trim() || '';
+    if (!email) {
+        toast('Email is required', 'error');
+        return;
+    }
+    try {
+        await api('POST', `/groups/${groupId}/members`, { email });
+        toast('Member invited', 'success');
+        if (emailEl)
+            emailEl.value = '';
+        await openGroupDetail(groupId, '');
+    }
+    catch (err) {
+        toast(err instanceof Error ? err.message : String(err), 'error');
+    }
+}
+export function removeMember(groupId, userId) {
+    confirmDialog('Remove Member?', 'Remove this member from the group?', async () => {
+        try {
+            await api('DELETE', `/groups/${groupId}/members/${userId}`);
+            toast('Member removed', 'success');
+            await openGroupDetail(groupId, '');
+        }
+        catch (err) {
+            toast(err instanceof Error ? err.message : String(err), 'error');
+        }
+    });
+}
+//# sourceMappingURL=groups.js.map

package/public/src/views/groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.js","sourceRoot":"","sources":["groups.ts"],"names":[],"mappings":"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"}

package/public/src/views/groups.ts

@@ -0,0 +1,172 @@
+// ═══════════════════════════════════════════════════════════════
+// GROUPS VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { showModal, hideModal, createModal, confirmDialog } from '../components/modals.js';
+import { toast } from '../components/toast.js';
+
+export async function renderGroupsView(): Promise<void> {
+  const el = document.getElementById('content-groups');
+  if (!el) return;
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Groups</div><div class="page-subtitle">Manage your teams</div></div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderGroupsView()">↺ Refresh</button>
+        <button class="btn btn-primary" onclick="window.__app.openCreateGroupModal()">+ New Group</button>
+      </div>
+    </div>
+    <div id="groups-list"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+  await loadGroups();
+}
+
+async function loadGroups(): Promise<void> {
+  const el = document.getElementById('groups-list');
+  if (!el) return;
+  try {
+    const data = await api('GET','/groups');
+    const groups = (data as any).groups || [];
+    if (groups.length === 0) {
+      el.innerHTML = `
+        <div class="empty-state">
+          <div class="empty-state-icon">◉</div>
+          <div class="empty-state-text">No groups yet</div>
+          <div class="empty-state-sub">Create a group to share projects with multiple teammates at once</div>
+        </div>`;
+      return;
+    }
+    el.innerHTML = `<div style="display:flex;flex-direction:column;gap:8px">
+      ${groups.map((g: any)=>`
+        <div class="group-row" onclick="window.__app.openGroupDetail('${escHtml(g.id)}','${escHtml(g.name)}')">
+          <div style="width:36px;height:36px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--accent);flex-shrink:0">
+            ${escHtml((g.name||'?').slice(0,2).toUpperCase())}
+          </div>
+          <div style="flex:1">
+            <div class="group-name">${escHtml(g.name)}</div>
+            ${g.description ? `<div class="group-desc">${escHtml(g.description)}</div>` : ''}
+          </div>
+          <span class="sidebar-badge">${g.memberCount||g.members?.length||0} members</span>
+          <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();window.__app.deleteGroup('${escHtml(g.id)}','${escHtml(g.name)}')">Delete</button>
+        </div>`).join('')}
+    </div>`;
+  } catch(err: unknown) {
+    if (el) el.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}
+
+export function openCreateGroupModal(): void {
+  createModal('create-group-modal','New Group',`
+    <div class="form-group">
+      <label class="form-label">Group Name *</label>
+      <input class="form-input" id="cg-name" type="text" placeholder="Engineering Team" required>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <input class="form-input" id="cg-desc" type="text" placeholder="What is this group for?">
+    </div>
+    <div class="form-error" id="cg-error" style="display:none"></div>`,
+    `<button class="btn btn-ghost" onclick="window.__app.hideModal('create-group-modal')">Cancel</button>
+     <button class="btn btn-primary" onclick="window.__app.submitCreateGroup()"><span>Create Group</span></button>`
+  );
+  showModal('create-group-modal');
+}
+
+export async function submitCreateGroup(): Promise<void> {
+  const name = (document.getElementById('cg-name') as HTMLInputElement | null)?.value?.trim() || '';
+  const description = (document.getElementById('cg-desc') as HTMLInputElement | null)?.value?.trim() || '';
+  const errEl = document.getElementById('cg-error') as HTMLElement | null;
+  if (errEl) errEl.style.display = 'none';
+  if (!name) { if (errEl) { errEl.textContent = 'Group name is required'; errEl.style.display = 'block'; } return; }
+  try {
+    await api('POST','/groups',{name,description});
+    toast('Group created','success');
+    hideModal('create-group-modal');
+    await loadGroups();
+  } catch(err: unknown) {
+    if (errEl) { errEl.textContent = err instanceof Error ? err.message : String(err); errEl.style.display = 'block'; }
+  }
+}
+
+export function deleteGroup(groupId: string, name: string): void {
+  confirmDialog('Delete Group?', `Delete group "${name}"? This cannot be undone.`, async () => {
+    try {
+      await api('DELETE',`/groups/${groupId}`);
+      toast('Group deleted','success');
+      await loadGroups();
+    } catch(err: unknown) { toast(err instanceof Error ? err.message : String(err),'error'); }
+  }, true);
+}
+
+export async function openGroupDetail(groupId: string, _groupName: string): Promise<void> {
+  createModal('group-detail-modal', _groupName,
+    `<div class="loading-state"><div class="loading-spinner"></div></div>`, '', true);
+  showModal('group-detail-modal');
+
+  try {
+    const data = await api('GET',`/groups/${groupId}`);
+    const group = (data as any).group || {id:groupId,name:_groupName,members:[]};
+    const members = group.members || [];
+    const groupName = group.name || _groupName || 'Group';
+
+    const membersHtml = members.length === 0
+      ? `<div style="color:var(--text-muted);font-size:13px">No members yet</div>`
+      : members.map((m: any)=>`
+          <div class="member-row">
+            <div class="member-avatar">${escHtml((m.display_name||m.displayName||m.email||'?').slice(0,2).toUpperCase())}</div>
+            <div style="flex:1">
+              <div style="font-size:13px;font-weight:500">${escHtml(m.display_name||m.displayName||m.email||m.user_id||m.userId||'Unknown')}</div>
+              ${m.email&&(m.display_name||m.displayName)?`<div class="group-desc">${escHtml(m.email)}</div>`:''}
+            </div>
+            <span class="share-perm">${escHtml(m.role||'member')}</span>
+            <button class="btn btn-danger btn-sm" onclick="window.__app.removeMember('${escHtml(groupId)}','${escHtml(m.user_id||m.userId||'')}')">Remove</button>
+          </div>`).join('');
+
+    const bodyEl = document.getElementById('group-detail-modal')?.querySelector('.modal-body');
+    const titleEl = document.getElementById('group-detail-modal')?.querySelector('.modal-title');
+    if (titleEl) titleEl.textContent = groupName;
+    if (bodyEl) {
+      bodyEl.innerHTML = `
+        <div style="margin-bottom:20px">
+          <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px">
+            Members (${members.length})
+          </div>
+          ${membersHtml}
+        </div>
+        <hr class="section-divider">
+        <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">
+          Invite Member
+        </div>
+        <div class="row">
+          <input class="form-input flex-1" id="invite-email-${escHtml(groupId)}" type="email" placeholder="colleague@example.com">
+          <button class="btn btn-primary btn-sm" onclick="window.__app.inviteMember('${escHtml(groupId)}')">Invite</button>
+        </div>`;
+    }
+  } catch(err: unknown) {
+    const bodyEl = document.getElementById('group-detail-modal')?.querySelector('.modal-body');
+    if (bodyEl) bodyEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}
+
+export async function inviteMember(groupId: string): Promise<void> {
+  const emailEl = document.getElementById(`invite-email-${groupId}`) as HTMLInputElement | null;
+  const email = emailEl?.value?.trim() || '';
+  if (!email) { toast('Email is required','error'); return; }
+  try {
+    await api('POST',`/groups/${groupId}/members`,{email});
+    toast('Member invited','success');
+    if (emailEl) emailEl.value = '';
+    await openGroupDetail(groupId, '');
+  } catch(err: unknown) { toast(err instanceof Error ? err.message : String(err),'error'); }
+}
+
+export function removeMember(groupId: string, userId: string): void {
+  confirmDialog('Remove Member?', 'Remove this member from the group?', async () => {
+    try {
+      await api('DELETE',`/groups/${groupId}/members/${userId}`);
+      toast('Member removed','success');
+      await openGroupDetail(groupId, '');
+    } catch(err: unknown) { toast(err instanceof Error ? err.message : String(err),'error'); }
+  });
+}

package/public/src/views/guide.js

@@ -0,0 +1,151 @@
+// ═══════════════════════════════════════════════════════════════
+// GUIDE VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { getGuide, getGuideTopic } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+const TOPIC_ICONS = {
+    quickstart: '🚀',
+    commands: '⌨️',
+    workflows: '🔄',
+    sdk: '🛠️',
+    extensions: '🧩',
+    skills: '🤖',
+    harnesses: '⚙️',
+    release: '📦',
+};
+function topicIcon(id) {
+    return TOPIC_ICONS[id] ?? '📖';
+}
+function renderTopicCards(topics) {
+    if (topics.length === 0) {
+        return '<div class="empty-state"><div class="empty-state-text">No guide topics found.</div></div>';
+    }
+    return `<div class="guide-topic-grid">${topics.map(t => `
+    <div class="card guide-topic-card" style="cursor:pointer;margin-bottom:0" onclick="window.__app.renderGuideView('${escHtml(t.id)}')">
+      <div class="guide-topic-icon">${topicIcon(t.id)}</div>
+      <div class="guide-topic-body">
+        <div class="guide-topic-title">${escHtml(t.title)}</div>
+        <div class="guide-topic-summary">${escHtml(t.summary || t.intent || '')}</div>
+      </div>
+    </div>`).join('')}</div>`;
+}
+function renderTopicDetail(topic) {
+    const commands = topic.commands ?? topic.quick_commands ?? [];
+    const related = topic.related ?? [];
+    return `
+    <div style="margin-bottom:16px">
+      <a href="#" class="guide-back-link" onclick="event.preventDefault();window.__app.renderGuideView()"
+        style="font-size:13px;color:var(--accent);text-decoration:none">← Back to topics</a>
+    </div>
+    <div class="page-header">
+      <div>
+        <div class="page-title">${topicIcon(topic.id)} ${escHtml(topic.title)}</div>
+        ${topic.intent ? `<div class="page-subtitle">${escHtml(topic.intent)}</div>` : ''}
+      </div>
+    </div>
+    ${topic.summary ? `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-body">
+          <div class="item-detail-desc">${escHtml(topic.summary)}</div>
+        </div>
+      </div>` : ''}
+    ${commands.length > 0 ? `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-header"><div class="card-title">Quick Commands</div></div>
+        <div class="card-body">
+          ${commands.map(cmd => `
+            <div class="guide-cmd-row">
+              <code class="guide-cmd-code">${escHtml(cmd)}</code>
+              <button class="btn btn-ghost btn-sm guide-copy-btn"
+                onclick="navigator.clipboard.writeText('${escHtml(cmd.replace(/'/g, "\\'"))}').then(()=>window.__app.toast('Copied!','success')).catch(()=>{})"
+                title="Copy to clipboard">⎘</button>
+            </div>`).join('')}
+        </div>
+      </div>` : ''}
+    ${topic.workflows && topic.workflows.length > 0 ? `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-header"><div class="card-title">Workflows</div></div>
+        <div class="card-body">
+          ${topic.workflows.map(wf => `
+            <div style="margin-bottom:16px">
+              <div style="font-weight:600;font-size:14px;margin-bottom:4px">${escHtml(wf.name)}</div>
+              ${wf.goal ? `<div style="font-size:13px;color:var(--text-muted);margin-bottom:8px">${escHtml(wf.goal)}</div>` : ''}
+              ${wf.commands && wf.commands.length > 0 ? wf.commands.map(cmd => `
+                <div class="guide-cmd-row">
+                  <code class="guide-cmd-code">${escHtml(cmd)}</code>
+                  <button class="btn btn-ghost btn-sm guide-copy-btn"
+                    onclick="navigator.clipboard.writeText('${escHtml(cmd.replace(/'/g, "\\'"))}').then(()=>window.__app.toast('Copied!','success')).catch(()=>{})"
+                    title="Copy to clipboard">⎘</button>
+                </div>`).join('') : ''}
+            </div>`).join('')}
+        </div>
+      </div>` : ''}
+    ${related.length > 0 ? `
+      <div class="card">
+        <div class="card-header"><div class="card-title">Related Topics</div></div>
+        <div class="card-body" style="display:flex;flex-wrap:wrap;gap:8px">
+          ${related.map(r => `
+            <a href="#" class="badge badge-secondary"
+              onclick="event.preventDefault();window.__app.renderGuideView('${escHtml(r)}')"
+              style="cursor:pointer;text-decoration:none">${escHtml(r)}</a>`).join('')}
+        </div>
+      </div>` : ''}`;
+}
+export async function renderGuideView(topicId) {
+    const el = document.getElementById('content-guide');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    if (topicId) {
+        // Show single topic detail
+        el.innerHTML = `
+      <div style="margin-bottom:16px">
+        <a href="#" onclick="event.preventDefault();window.__app.renderGuideView()"
+          style="font-size:13px;color:var(--accent);text-decoration:none">← Back to topics</a>
+      </div>
+      <div id="guide-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+        try {
+            const data = await getGuideTopic(state.currentProject.id, topicId);
+            const topic = data.topic || data;
+            const contentEl = document.getElementById('guide-content');
+            if (contentEl)
+                contentEl.innerHTML = renderTopicDetail(topic);
+        }
+        catch (err) {
+            const contentEl = document.getElementById('guide-content');
+            if (contentEl) {
+                contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+            }
+            toast(err instanceof Error ? err.message : 'Failed to load topic', 'error');
+        }
+    }
+    else {
+        // Show topic list
+        el.innerHTML = `
+      <div class="page-header">
+        <div><div class="page-title">Guide</div><div class="page-subtitle">${escHtml(state.currentProject.name)}</div></div>
+        <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderGuideView()">↺ Refresh</button></div>
+      </div>
+      <div id="guide-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+        try {
+            const data = await getGuide(state.currentProject.id);
+            const topics = data.topics || [];
+            const contentEl = document.getElementById('guide-content');
+            if (contentEl)
+                contentEl.innerHTML = renderTopicCards(topics);
+        }
+        catch (err) {
+            const contentEl = document.getElementById('guide-content');
+            if (contentEl) {
+                contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+            }
+            toast(err instanceof Error ? err.message : 'Failed to load guide', 'error');
+        }
+    }
+}
+//# sourceMappingURL=guide.js.map

package/public/src/views/guide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"guide.js","sourceRoot":"","sources":["guide.ts"],"names":[],"mappings":"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"}