groove-dev 0.27.92 → 0.27.94

package/node_modules/@groove-dev/gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.92",
+  "version": "0.27.94",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/node_modules/@groove-dev/gui/src/components/agents/agent-panel.jsx

@@ -80,11 +80,13 @@ function InlineName({ agent }) {
 export function AgentPanel() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const agents = useGrooveStore((s) => s.agents);
+  const activeTeamId = useGrooveStore((s) => s.activeTeamId);
   const [activeTab, setActiveTab] = useState('command');
 
   if (detailPanel?.type !== 'agent') return null;
   const agent = agents.find((a) => a.id === detailPanel.agentId);
   if (!agent) return null;
+  if (activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
 
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   const ctxPct = Math.round((agent.contextUsage || 0) * 100);

package/node_modules/@groove-dev/gui/src/components/editor/code-editor.jsx

@@ -3,10 +3,10 @@ import { useRef, useEffect } from 'react';
 import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
+import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 import { autocompletion } from '@codemirror/autocomplete';
-import { oneDark } from '@codemirror/theme-one-dark';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { javascript } from '@codemirror/lang-javascript';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
@@ -98,7 +98,7 @@ export function CodeEditor({ content, language, onChange, onSave, onCursorChange
         autocompletion(),
         keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
         saveKeymap,
-        oneDark,
+        syntaxHighlighting(oneDarkHighlightStyle),
         grooveTheme,
         langCompartment.current.of(langExt()),
         EditorView.updateListener.of((update) => {

package/node_modules/@groove-dev/gui/src/stores/groove.js

@@ -70,7 +70,6 @@ export const useGrooveStore = create((set, get) => ({
   teamBuilderRoles: [],
   teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
   teamBuilderTask: '',
-  teamBuilderLaunchMode: 'plan',
   teamTemplates: { builtIn: [], custom: [] },
 
   // ── Navigation ────────────────────────────────────────────
@@ -1201,6 +1200,8 @@ export const useGrooveStore = create((set, get) => ({
   },
   selectAgent(id) {
     const tid = get().activeTeamId;
+    const match = get().agents.find((a) => a.id === id);
+    if (tid && match && match.teamId && match.teamId !== tid) return;
     const panel = { type: 'agent', agentId: id };
     set((s) => ({ detailPanel: panel, teamDetailPanels: { ...s.teamDetailPanels, [tid]: panel } }));
   },
@@ -1619,7 +1620,6 @@ export const useGrooveStore = create((set, get) => ({
       teamBuilderRoles: [],
       teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
       teamBuilderTask: '',
-      teamBuilderLaunchMode: 'plan',
     });
   },
   addTeamBuilderRole(role) {
@@ -1651,12 +1651,18 @@ export const useGrooveStore = create((set, get) => ({
     set((s) => ({ teamBuilderSettings: { ...s.teamBuilderSettings, ...settings } }));
   },
   setTeamBuilderTask(task) { set({ teamBuilderTask: task }); },
-  setTeamBuilderLaunchMode(mode) { set({ teamBuilderLaunchMode: mode }); },
 
   async fetchTeamTemplates() {
     try {
       const data = await api.get('/team-templates');
-      set({ teamTemplates: data });
+      const builtIn = [];
+      const custom = [];
+      for (const [key, tmpl] of Object.entries(data || {})) {
+        const entry = { ...tmpl, name: key };
+        if (tmpl.builtIn) builtIn.push(entry);
+        else custom.push(entry);
+      }
+      set({ teamTemplates: { builtIn, custom } });
     } catch { /* endpoint may not exist yet */ }
   },
 
@@ -1686,21 +1692,19 @@ export const useGrooveStore = create((set, get) => ({
   },
 
   async launchTeamBuilder() {
-    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, teamBuilderLaunchMode, activeTeamId } = get();
+    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, activeTeamId } = get();
     if (teamBuilderRoles.length === 0) return;
+    get().closeTeamBuilder();
     try {
-      get().addToast('info', 'Launching team...');
       const body = {
         task: teamBuilderTask,
         roles: teamBuilderRoles,
         settings: teamBuilderSettings,
-        launchMode: teamBuilderLaunchMode,
+        launchMode: 'plan-first',
         teamId: activeTeamId,
       };
       const result = await api.post('/team-builder/launch', body);
-      const count = result.launched || result.agents?.length || 0;
-      get().addToast('success', `Launched ${count} agent${count !== 1 ? 's' : ''}`);
-      get().closeTeamBuilder();
+      get().addToast('success', 'Planner spawned — team will build automatically');
       return result;
     } catch (err) {
       get().addToast('error', 'Team launch failed', err.message);
@@ -2497,13 +2501,16 @@ export const useGrooveStore = create((set, get) => ({
   setWorkspaceMode(on) {
     set({ workspaceMode: on });
     localStorage.setItem('groove:workspaceMode', String(on));
-    if (on && !get().workspaceAgentId) {
-      const teamAgents = get().agents.filter((a) => a.teamId === get().activeTeamId);
-      const selected = get().detailPanel?.type === 'agent' ? get().detailPanel.agentId : null;
-      const running = teamAgents.find((a) => a.status === 'running');
-      set({ workspaceAgentId: selected || running?.id || teamAgents[0]?.id || null });
-    }
     if (on) {
+      const teamAgents = get().agents.filter((a) => a.teamId === get().activeTeamId);
+      const current = get().workspaceAgentId;
+      const belongsToTeam = current && teamAgents.some((a) => a.id === current);
+      if (!belongsToTeam) {
+        const selected = get().detailPanel?.type === 'agent' ? get().detailPanel.agentId : null;
+        const selectedInTeam = selected && teamAgents.some((a) => a.id === selected);
+        const running = teamAgents.find((a) => a.status === 'running');
+        set({ workspaceAgentId: (selectedInTeam ? selected : null) || running?.id || teamAgents[0]?.id || null });
+      }
       const agentId = get().workspaceAgentId;
       if (agentId) get().selectAgent(agentId);
     }

package/node_modules/@groove-dev/gui/src/views/agents.jsx

@@ -10,7 +10,7 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Radio, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Play, Clock, ListChecks, Layers } from 'lucide-react';
+import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers } from 'lucide-react';
 import { PreviewWorkspace } from '../components/preview/preview-workspace';
 import { WorkspaceMode } from '../components/agents/workspace-mode';
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
@@ -750,7 +750,6 @@ function TeamBuilder() {
   const roles = useGrooveStore((s) => s.teamBuilderRoles);
   const settings = useGrooveStore((s) => s.teamBuilderSettings);
   const task = useGrooveStore((s) => s.teamBuilderTask);
-  const launchMode = useGrooveStore((s) => s.teamBuilderLaunchMode);
   const templates = useGrooveStore((s) => s.teamTemplates);
   const closeTeamBuilder = useGrooveStore((s) => s.closeTeamBuilder);
   const addRole = useGrooveStore((s) => s.addTeamBuilderRole);
@@ -759,7 +758,6 @@ function TeamBuilder() {
   const applyTemplate = useGrooveStore((s) => s.applyTemplate);
   const setSettings = useGrooveStore((s) => s.setTeamBuilderSettings);
   const setTask = useGrooveStore((s) => s.setTeamBuilderTask);
-  const setLaunchMode = useGrooveStore((s) => s.setTeamBuilderLaunchMode);
   const launchTeamBuilder = useGrooveStore((s) => s.launchTeamBuilder);
   const saveTeamTemplate = useGrooveStore((s) => s.saveTeamTemplate);
   const fetchTeamTemplates = useGrooveStore((s) => s.fetchTeamTemplates);
@@ -789,8 +787,6 @@ function TeamBuilder() {
 
   const selectedProvider = providers.find((p) => p.id === settings.provider);
   const settingsModels = (selectedProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
-  const showTemp = PROVIDER_TEMP_SUPPORT.has(settings.provider);
-
   function handleSettingsProviderChange(id) {
     setSettings({ provider: id });
     const p = providers.find((x) => x.id === id);
@@ -829,8 +825,8 @@ function TeamBuilder() {
         {/* Top Bar */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border-subtle">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-purple/15 flex items-center justify-center">
-              <Users size={16} className="text-purple" />
+            <div className="w-8 h-8 rounded-lg bg-info/15 flex items-center justify-center">
+              <Users size={16} className="text-info" />
             </div>
             <h2 className="text-lg font-bold text-text-0 font-sans">Team Builder</h2>
           </div>
@@ -974,15 +970,15 @@ function TeamBuilder() {
                           <div className="flex gap-2">
                             <div className="flex-1 space-y-1">
                               <label className="text-2xs text-text-3 font-sans">Provider</label>
-                              <Select value={r.provider || ''} onValueChange={(v) => {
-                                updateRole(i, { provider: v || null });
-                                const p = providers.find((x) => x.id === v);
+                              <Select value={r.provider || '__default__'} onValueChange={(v) => {
+                                const pv = v === '__default__' ? null : v;
+                                const p = providers.find((x) => x.id === pv);
                                 const pModels = (p?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
-                                updateRole(i, { provider: v || null, model: pModels[0]?.id || null });
+                                updateRole(i, { provider: pv, model: pModels[0]?.id || null });
                               }}>
                                 <SelectTrigger placeholder="Team Default" className="bg-surface-3 h-7 text-xs" />
                                 <SelectContent>
-                                  <SelectItem value="">Team Default</SelectItem>
+                                  <SelectItem value="__default__">Team Default</SelectItem>
                                   {providers.map((p) => (
                                     <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
                                   ))}
@@ -991,10 +987,10 @@ function TeamBuilder() {
                             </div>
                             <div className="flex-1 space-y-1">
                               <label className="text-2xs text-text-3 font-sans">Model</label>
-                              <Select value={r.model || ''} onValueChange={(v) => updateRole(i, { model: v || null })}>
+                              <Select value={r.model || '__default__'} onValueChange={(v) => updateRole(i, { model: v === '__default__' ? null : v })}>
                                 <SelectTrigger placeholder="Default" className="bg-surface-3 h-7 text-xs" />
                                 <SelectContent>
-                                  <SelectItem value="">Default</SelectItem>
+                                  <SelectItem value="__default__">Default</SelectItem>
                                   {roleModels.map((m) => (
                                     <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
                                   ))}
@@ -1017,16 +1013,6 @@ function TeamBuilder() {
                               formatValue={(v) => v.toFixed(2)}
                             />
                           )}
-                          <div className="space-y-1">
-                            <label className="text-2xs text-text-3 font-sans">Custom Prompt</label>
-                            <textarea
-                              value={r.prompt || ''}
-                              onChange={(e) => updateRole(i, { prompt: e.target.value })}
-                              placeholder="Optional instructions for this agent..."
-                              rows={2}
-                              className="w-full px-2.5 py-1.5 text-xs bg-surface-3 border border-border-subtle rounded-md text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
-                            />
-                          </div>
                         </div>
                       )}
                     </div>
@@ -1040,38 +1026,9 @@ function TeamBuilder() {
         {/* Bottom Bar */}
         <div className="border-t border-border-subtle px-6 py-4">
           <div className="flex gap-4">
-            {/* Task + Launch Mode */}
-            <div className="flex-1 space-y-3">
-              <textarea
-                value={task}
-                onChange={(e) => setTask(e.target.value)}
-                placeholder="Describe what this team should work on..."
-                rows={2}
-                className="w-full px-3 py-2 text-sm bg-surface-3 border border-border-subtle rounded-lg text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
-              />
-              <div className="flex items-center gap-2">
-                <span className="text-2xs text-text-3 font-sans mr-1">Launch Mode:</span>
-                {[
-                  { id: 'direct', label: 'Direct', icon: Play, tip: 'Agents start working immediately' },
-                  { id: 'plan', label: 'Plan First', icon: ListChecks, tip: 'Planner designs prompts, then team launches' },
-                  { id: 'await', label: 'Await', icon: Clock, tip: 'Agents spawn idle, await instructions' },
-                ].map((m) => (
-                  <Tooltip key={m.id} content={m.tip}>
-                    <button
-                      onClick={() => setLaunchMode(m.id)}
-                      className={cn(
-                        'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-                        launchMode === m.id
-                          ? 'bg-accent/15 text-accent border border-accent/30'
-                          : 'bg-surface-3 text-text-3 border border-border-subtle hover:text-text-1 hover:border-border',
-                      )}
-                    >
-                      <m.icon size={11} />
-                      {m.label}
-                    </button>
-                  </Tooltip>
-                ))}
-              </div>
+            {/* Task */}
+            <div className="flex-1 space-y-2">
+              <p className="text-xs text-text-3 font-sans italic">Planner will design agent prompts automatically</p>
             </div>
 
             {/* Team Settings + Launch */}
@@ -1079,10 +1036,10 @@ function TeamBuilder() {
               <div className="flex gap-2">
                 <div className="flex-1 space-y-0.5">
                   <label className="text-2xs text-text-3 font-sans">Provider</label>
-                  <Select value={settings.provider || ''} onValueChange={handleSettingsProviderChange}>
+                  <Select value={settings.provider || '__default__'} onValueChange={(v) => handleSettingsProviderChange(v === '__default__' ? '' : v)}>
                     <SelectTrigger placeholder="Default" className="bg-surface-3 h-7 text-xs" />
                     <SelectContent>
-                      <SelectItem value="">Default</SelectItem>
+                      <SelectItem value="__default__">Default</SelectItem>
                       {providers.map((p) => (
                         <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
                       ))}
@@ -1091,10 +1048,10 @@ function TeamBuilder() {
                 </div>
                 <div className="flex-1 space-y-0.5">
                   <label className="text-2xs text-text-3 font-sans">Model</label>
-                  <Select value={settings.model || ''} onValueChange={(v) => setSettings({ model: v })}>
+                  <Select value={settings.model || '__default__'} onValueChange={(v) => setSettings({ model: v === '__default__' ? '' : v })}>
                     <SelectTrigger placeholder="Auto" className="bg-surface-3 h-7 text-xs" />
                     <SelectContent>
-                      <SelectItem value="">Auto</SelectItem>
+                      <SelectItem value="__default__">Auto</SelectItem>
                       {settingsModels.map((m) => (
                         <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
                       ))}
@@ -1102,21 +1059,6 @@ function TeamBuilder() {
                   </Select>
                 </div>
               </div>
-              <TuningSlider
-                label="Reasoning"
-                value={settings.reasoningEffort}
-                onChange={(v) => setSettings({ reasoningEffort: v })}
-                min={0} max={100} step={1}
-              />
-              {showTemp && (
-                <TuningSlider
-                  label="Temperature"
-                  value={settings.temperature}
-                  onChange={(v) => setSettings({ temperature: v })}
-                  min={0} max={1} step={0.01}
-                  formatValue={(v) => v.toFixed(2)}
-                />
-              )}
               <Button
                 variant="primary"
                 size="md"
@@ -1194,44 +1136,33 @@ function EmptyState({ onPlanner, onSpawn, onTeamBuilder }) {
             </div>
           </button>
 
-          <button
-            onClick={onTeamBuilder}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-purple/25 bg-gradient-to-r from-purple/6 to-purple/2 hover:from-purple/12 hover:to-purple/5 hover:border-purple/35 transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-purple/15 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <UserPlus size={20} className="text-purple" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Build a Team</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">Pick your roles, configure settings, and launch</div>
-            </div>
-          </button>
-
-          <button
-            onClick={onSpawn}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <Plus size={20} className="text-text-1" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Spawn Agent</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">Choose a role and configure</div>
-            </div>
-          </button>
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              onClick={onTeamBuilder}
+              className="flex items-center gap-3 p-4 rounded-lg border border-info/25 bg-gradient-to-r from-info/6 to-info/2 hover:from-info/12 hover:to-info/5 hover:border-info/35 transition-all cursor-pointer group text-left"
+            >
+              <div className="w-10 h-10 rounded-lg bg-info/15 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <UserPlus size={20} className="text-info" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-text-0 font-sans">Build a Team</div>
+                <div className="text-xs text-text-3 font-sans mt-0.5">Pick roles and configure</div>
+              </div>
+            </button>
 
-          <button
-            onClick={() => useGrooveStore.getState().toggleQuickConnect()}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <Radio size={20} className="text-text-1" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Connect to Remote Server</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">SSH tunnel to a remote machine</div>
-            </div>
-          </button>
+            <button
+              onClick={onSpawn}
+              className="flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
+            >
+              <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <Plus size={20} className="text-text-1" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-text-0 font-sans">Spawn Agent</div>
+                <div className="text-xs text-text-3 font-sans mt-0.5">Choose a role and configure</div>
+              </div>
+            </button>
+          </div>
         </div>
 
         {window.groove?.openFolder && (
@@ -1569,7 +1500,7 @@ export default function AgentsView() {
           className={cn(
             'absolute bottom-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md text-xs font-semibold font-sans transition-colors cursor-pointer select-none shadow-lg shadow-black/10',
             previewState.url && previewState.teamId === activeTeamId ? 'right-32' : 'right-4',
-            'bg-purple/15 text-purple hover:bg-purple/25',
+            'bg-accent/15 text-accent hover:bg-accent/25',
           )}
         >
           <Code2 size={14} /> Workspace

package/node_modules/base64-js/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Jameson Little
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/node_modules/base64-js/README.md

@@ -0,0 +1,34 @@
+base64-js
+=========
+
+`base64-js` does basic base64 encoding/decoding in pure JS.
+
+[![build status](https://secure.travis-ci.org/beatgammit/base64-js.png)](http://travis-ci.org/beatgammit/base64-js)
+
+Many browsers already have base64 encoding/decoding functionality, but it is for text data, not all-purpose binary data.
+
+Sometimes encoding/decoding binary data in the browser is useful, and that is what this module does.
+
+## install
+
+With [npm](https://npmjs.org) do:
+
+`npm install base64-js` and `var base64js = require('base64-js')`
+
+For use in web browsers do:
+
+`<script src="base64js.min.js"></script>`
+
+[Get supported base64-js with the Tidelift Subscription](https://tidelift.com/subscription/pkg/npm-base64-js?utm_source=npm-base64-js&utm_medium=referral&utm_campaign=readme)
+
+## methods
+
+`base64js` has three exposed functions, `byteLength`, `toByteArray` and `fromByteArray`, which both take a single argument.
+
+* `byteLength` - Takes a base64 string and returns length of byte array
+* `toByteArray` - Takes a base64 string and returns a byte array
+* `fromByteArray` - Takes a byte array and returns a base64 string
+
+## license
+
+MIT

package/node_modules/base64-js/base64js.min.js

@@ -0,0 +1 @@
+(function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"==typeof window?"undefined"==typeof global?"undefined"==typeof self?this:self:global:window,b.base64js=a()}})(function(){return function(){function b(d,e,g){function a(j,i){if(!e[j]){if(!d[j]){var f="function"==typeof require&&require;if(!i&&f)return f(j,!0);if(h)return h(j,!0);var c=new Error("Cannot find module '"+j+"'");throw c.code="MODULE_NOT_FOUND",c}var k=e[j]={exports:{}};d[j][0].call(k.exports,function(b){var c=d[j][1][b];return a(c||b)},k,k.exports,b,d,e,g)}return e[j].exports}for(var h="function"==typeof require&&require,c=0;c<g.length;c++)a(g[c]);return a}return b}()({"/":[function(a,b,c){'use strict';function d(a){var b=a.length;if(0<b%4)throw new Error("Invalid string. Length must be a multiple of 4");var c=a.indexOf("=");-1===c&&(c=b);var d=c===b?0:4-c%4;return[c,d]}function e(a,b,c){return 3*(b+c)/4-c}function f(a){var b,c,f=d(a),g=f[0],h=f[1],j=new m(e(a,g,h)),k=0,n=0<h?g-4:g;for(c=0;c<n;c+=4)b=l[a.charCodeAt(c)]<<18|l[a.charCodeAt(c+1)]<<12|l[a.charCodeAt(c+2)]<<6|l[a.charCodeAt(c+3)],j[k++]=255&b>>16,j[k++]=255&b>>8,j[k++]=255&b;return 2===h&&(b=l[a.charCodeAt(c)]<<2|l[a.charCodeAt(c+1)]>>4,j[k++]=255&b),1===h&&(b=l[a.charCodeAt(c)]<<10|l[a.charCodeAt(c+1)]<<4|l[a.charCodeAt(c+2)]>>2,j[k++]=255&b>>8,j[k++]=255&b),j}function g(a){return k[63&a>>18]+k[63&a>>12]+k[63&a>>6]+k[63&a]}function h(a,b,c){for(var d,e=[],f=b;f<c;f+=3)d=(16711680&a[f]<<16)+(65280&a[f+1]<<8)+(255&a[f+2]),e.push(g(d));return e.join("")}function j(a){for(var b,c=a.length,d=c%3,e=[],f=16383,g=0,j=c-d;g<j;g+=f)e.push(h(a,g,g+f>j?j:g+f));return 1===d?(b=a[c-1],e.push(k[b>>2]+k[63&b<<4]+"==")):2===d&&(b=(a[c-2]<<8)+a[c-1],e.push(k[b>>10]+k[63&b>>4]+k[63&b<<2]+"=")),e.join("")}c.byteLength=function(a){var b=d(a),c=b[0],e=b[1];return 3*(c+e)/4-e},c.toByteArray=f,c.fromByteArray=j;for(var k=[],l=[],m="undefined"==typeof Uint8Array?Array:Uint8Array,n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",o=0,p=n.length;o<p;++o)k[o]=n[o],l[n.charCodeAt(o)]=o;l[45]=62,l[95]=63},{}]},{},[])("/")});

package/node_modules/base64-js/index.d.ts

@@ -0,0 +1,3 @@
+export function byteLength(b64: string): number;
+export function toByteArray(b64: string): Uint8Array;
+export function fromByteArray(uint8: Uint8Array): string;

package/node_modules/base64-js/index.js

@@ -0,0 +1,150 @@
+'use strict'
+
+exports.byteLength = byteLength
+exports.toByteArray = toByteArray
+exports.fromByteArray = fromByteArray
+
+var lookup = []
+var revLookup = []
+var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array
+
+var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+for (var i = 0, len = code.length; i < len; ++i) {
+  lookup[i] = code[i]
+  revLookup[code.charCodeAt(i)] = i
+}
+
+// Support decoding URL-safe base64 strings, as Node.js does.
+// See: https://en.wikipedia.org/wiki/Base64#URL_applications
+revLookup['-'.charCodeAt(0)] = 62
+revLookup['_'.charCodeAt(0)] = 63
+
+function getLens (b64) {
+  var len = b64.length
+
+  if (len % 4 > 0) {
+    throw new Error('Invalid string. Length must be a multiple of 4')
+  }
+
+  // Trim off extra bytes after placeholder bytes are found
+  // See: https://github.com/beatgammit/base64-js/issues/42
+  var validLen = b64.indexOf('=')
+  if (validLen === -1) validLen = len
+
+  var placeHoldersLen = validLen === len
+    ? 0
+    : 4 - (validLen % 4)
+
+  return [validLen, placeHoldersLen]
+}
+
+// base64 is 4/3 + up to two characters of the original data
+function byteLength (b64) {
+  var lens = getLens(b64)
+  var validLen = lens[0]
+  var placeHoldersLen = lens[1]
+  return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
+}
+
+function _byteLength (b64, validLen, placeHoldersLen) {
+  return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
+}
+
+function toByteArray (b64) {
+  var tmp
+  var lens = getLens(b64)
+  var validLen = lens[0]
+  var placeHoldersLen = lens[1]
+
+  var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen))
+
+  var curByte = 0
+
+  // if there are placeholders, only get up to the last complete 4 chars
+  var len = placeHoldersLen > 0
+    ? validLen - 4
+    : validLen
+
+  var i
+  for (i = 0; i < len; i += 4) {
+    tmp =
+      (revLookup[b64.charCodeAt(i)] << 18) |
+      (revLookup[b64.charCodeAt(i + 1)] << 12) |
+      (revLookup[b64.charCodeAt(i + 2)] << 6) |
+      revLookup[b64.charCodeAt(i + 3)]
+    arr[curByte++] = (tmp >> 16) & 0xFF
+    arr[curByte++] = (tmp >> 8) & 0xFF
+    arr[curByte++] = tmp & 0xFF
+  }
+
+  if (placeHoldersLen === 2) {
+    tmp =
+      (revLookup[b64.charCodeAt(i)] << 2) |
+      (revLookup[b64.charCodeAt(i + 1)] >> 4)
+    arr[curByte++] = tmp & 0xFF
+  }
+
+  if (placeHoldersLen === 1) {
+    tmp =
+      (revLookup[b64.charCodeAt(i)] << 10) |
+      (revLookup[b64.charCodeAt(i + 1)] << 4) |
+      (revLookup[b64.charCodeAt(i + 2)] >> 2)
+    arr[curByte++] = (tmp >> 8) & 0xFF
+    arr[curByte++] = tmp & 0xFF
+  }
+
+  return arr
+}
+
+function tripletToBase64 (num) {
+  return lookup[num >> 18 & 0x3F] +
+    lookup[num >> 12 & 0x3F] +
+    lookup[num >> 6 & 0x3F] +
+    lookup[num & 0x3F]
+}
+
+function encodeChunk (uint8, start, end) {
+  var tmp
+  var output = []
+  for (var i = start; i < end; i += 3) {
+    tmp =
+      ((uint8[i] << 16) & 0xFF0000) +
+      ((uint8[i + 1] << 8) & 0xFF00) +
+      (uint8[i + 2] & 0xFF)
+    output.push(tripletToBase64(tmp))
+  }
+  return output.join('')
+}
+
+function fromByteArray (uint8) {
+  var tmp
+  var len = uint8.length
+  var extraBytes = len % 3 // if we have 1 byte left, pad 2 bytes
+  var parts = []
+  var maxChunkLength = 16383 // must be multiple of 3
+
+  // go through the array every three bytes, we'll deal with trailing stuff later
+  for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {
+    parts.push(encodeChunk(uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength)))
+  }
+
+  // pad the end with zeros, but make sure to not forget the extra bytes
+  if (extraBytes === 1) {
+    tmp = uint8[len - 1]
+    parts.push(
+      lookup[tmp >> 2] +
+      lookup[(tmp << 4) & 0x3F] +
+      '=='
+    )
+  } else if (extraBytes === 2) {
+    tmp = (uint8[len - 2] << 8) + uint8[len - 1]
+    parts.push(
+      lookup[tmp >> 10] +
+      lookup[(tmp >> 4) & 0x3F] +
+      lookup[(tmp << 2) & 0x3F] +
+      '='
+    )
+  }
+
+  return parts.join('')
+}