Feat v0.6.12 css isolation (#47)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

packages/schedules/js/main.js

@@ -148,7 +148,7 @@
 
     return html`
       <${Dialog} open onClose=${onClose} title=${schedule ? 'Edit Schedule' : 'New Schedule'}>
-        <form onSubmit=${handleSubmit} class="sched-form">
+        <form onSubmit=${handleSubmit} class="ext-schedules-form">
           ${error && html`<${Banner} variant="danger" text=${error} />`}
           <${FormField} label="Name" required>
             <input type="text" value=${name} onInput=${e => setName(e.target.value)}
@@ -160,22 +160,22 @@
           <//>
           <${FormField} label="Cron Expression" required>
             <input type="text" value=${cron} onInput=${e => setCron(e.target.value)}
-                   placeholder="e.g. 0 9 * * 1-5" class="sched-cron-input" />
+                   placeholder="e.g. 0 9 * * 1-5" class="ext-schedules-cron-input" />
             ${preview && preview !== cron && html`
-              <div class="sched-cron-preview">${preview}</div>
+              <div class="ext-schedules-cron-preview">${preview}</div>
             `}
           <//>
           <${FormField} label="Script">
             <textarea rows="6" value=${script} onInput=${e => setScript(e.target.value)}
-                      placeholder="Starlark script (optional)" class="sched-script" />
+                      placeholder="Starlark script (optional)" class="ext-schedules-script" />
           <//>
-          <div class="sched-form__row">
-            <label class="sched-toggle">
+          <div class="ext-schedules-form__row">
+            <label class="ext-schedules-toggle">
               <input type="checkbox" checked=${enabled} onChange=${e => setEnabled(e.target.checked)} />
               <span>Enabled</span>
             </label>
           </div>
-          <div class="sched-form__actions">
+          <div class="ext-schedules-form__actions">
             <${Button} variant="ghost" type="button" onClick=${onClose}>Cancel<//>
             <${Button} variant="primary" type="submit" disabled=${saving}>
               ${saving ? 'Saving…' : (schedule ? 'Update' : 'Create')}
@@ -208,25 +208,25 @@
     }, [scheduleId]);
 
     return html`
-      <div class="sched-logs">
-        <div class="sched-logs__header">
+      <div class="ext-schedules-logs">
+        <div class="ext-schedules-logs__header">
           <span>Execution History</span>
-          <button class="sched-btn sched-btn--sm" onClick=${onClose}>Close</button>
+          <button class="ext-schedules-btn ext-schedules-btn--sm" onClick=${onClose}>Close</button>
         </div>
-        ${loading && html`<div class="sched-logs__loading"><${Spinner} size="sm" /></div>`}
+        ${loading && html`<div class="ext-schedules-logs__loading"><${Spinner} size="sm" /></div>`}
         ${!loading && logs.length === 0 && html`
-          <div class="sched-logs__empty">No executions yet</div>
+          <div class="ext-schedules-logs__empty">No executions yet</div>
         `}
         ${!loading && logs.map(function (log) {
           var success = log.status === 'success' || log.status === 'ok';
           return html`
-            <div class="sched-log-entry" key=${log.id || log.started_at}>
-              <span class="sched-log-entry__status sched-log-entry__status--${success ? 'ok' : 'fail'}">
+            <div class="ext-schedules-log-entry" key=${log.id || log.started_at}>
+              <span class="ext-schedules-log-entry__status ext-schedules-log-entry__status--${success ? 'ok' : 'fail'}">
                 ${success ? '✓' : '✗'}
               </span>
-              <span class="sched-log-entry__time">${_formatTime(log.started_at)}</span>
-              <span class="sched-log-entry__duration">${_formatDuration(log.duration_ms)}</span>
-              ${log.error && html`<span class="sched-log-entry__error" title=${log.error}>${log.error}</span>`}
+              <span class="ext-schedules-log-entry__time">${_formatTime(log.started_at)}</span>
+              <span class="ext-schedules-log-entry__duration">${_formatDuration(log.duration_ms)}</span>
+              ${log.error && html`<span class="ext-schedules-log-entry__error" title=${log.error}>${log.error}</span>`}
             </div>
           `;
         })}
@@ -286,13 +286,13 @@
     }
 
     return html`
-      <div class="sched-list">
-        ${loading && html`<div class="sched-list__loading"><${Spinner} size="md" /></div>`}
+      <div class="ext-schedules-list">
+        ${loading && html`<div class="ext-schedules-list__loading"><${Spinner} size="md" /></div>`}
         ${!loading && items.length === 0 && html`
-          <div class="sched-list__empty">No schedules yet. Create one to get started.</div>
+          <div class="ext-schedules-list__empty">No schedules yet. Create one to get started.</div>
         `}
         ${!loading && items.length > 0 && html`
-          <table class="sched-table">
+          <table class="ext-schedules-table">
             <thead>
               <tr>
                 <th>Name</th>
@@ -305,27 +305,27 @@
             <tbody>
               ${items.map(function (s) {
                 return html`
-                  <tr key=${s.id} class="sched-row">
-                    <td class="sched-row__name">
-                      <button class="sched-link" onClick=${() => onEdit(s)}>${s.name}</button>
-                      ${s.description && html`<div class="sched-row__desc">${s.description}</div>`}
+                  <tr key=${s.id} class="ext-schedules-row">
+                    <td class="ext-schedules-row__name">
+                      <button class="ext-schedules-link" onClick=${() => onEdit(s)}>${s.name}</button>
+                      ${s.description && html`<div class="ext-schedules-row__desc">${s.description}</div>`}
                     </td>
-                    <td class="sched-row__cron">
-                      <span class="sched-cron-badge">${s.cron_expr}</span>
-                      <div class="sched-cron-human">${describeCron(s.cron_expr)}</div>
+                    <td class="ext-schedules-row__cron">
+                      <span class="ext-schedules-cron-badge">${s.cron_expr}</span>
+                      <div class="ext-schedules-cron-human">${describeCron(s.cron_expr)}</div>
                     </td>
-                    <td class="sched-row__next">${s.next_fire_at ? _formatTime(s.next_fire_at) : '—'}</td>
+                    <td class="ext-schedules-row__next">${s.next_fire_at ? _formatTime(s.next_fire_at) : '—'}</td>
                     <td>
-                      <button class="sched-toggle-btn sched-toggle-btn--${s.enabled ? 'on' : 'off'}"
+                      <button class="ext-schedules-toggle-btn ext-schedules-toggle-btn--${s.enabled ? 'on' : 'off'}"
                               onClick=${() => handleToggle(s)}
                               title=${s.enabled ? 'Disable' : 'Enable'}>
                         ${s.enabled ? 'On' : 'Off'}
                       </button>
                     </td>
-                    <td class="sched-row__actions">
-                      <button class="sched-btn sched-btn--sm" onClick=${() => handleRun(s)} title="Run now">▶</button>
-                      <button class="sched-btn sched-btn--sm" onClick=${() => onShowLogs(s.id)} title="View logs">📋</button>
-                      <button class="sched-btn sched-btn--sm sched-btn--danger" onClick=${() => handleDelete(s)}
+                    <td class="ext-schedules-row__actions">
+                      <button class="ext-schedules-btn ext-schedules-btn--sm" onClick=${() => handleRun(s)} title="Run now">▶</button>
+                      <button class="ext-schedules-btn ext-schedules-btn--sm" onClick=${() => onShowLogs(s.id)} title="View logs">📋</button>
+                      <button class="ext-schedules-btn ext-schedules-btn--sm ext-schedules-btn--danger" onClick=${() => handleDelete(s)}
                               title="Delete">×</button>
                     </td>
                   </tr>
@@ -371,14 +371,14 @@
     }
 
     return html`
-      <div class="sched-app">
+      <div class="ext-schedules-app">
         ${Topbar ? html`
           <${Topbar} title="Schedules">
-            <span class="sched-count">${items.length} schedule${items.length !== 1 ? 's' : ''}</span>
+            <span class="ext-schedules-count">${items.length} schedule${items.length !== 1 ? 's' : ''}</span>
             <${Button} variant="primary" size="sm" onClick=${() => setEditing({})}>+ New Schedule<//>
           <//>
         ` : html`
-          <div class="sched-header">
+          <div class="ext-schedules-header">
             <h1>Schedules</h1>
             <${Button} variant="primary" size="sm" onClick=${() => setEditing({})}>+ New Schedule<//>
           </div>
@@ -386,7 +386,7 @@
 
         ${error && html`<${Banner} variant="danger" text=${error} />`}
 
-        <div class="sched-body">
+        <div class="ext-schedules-body">
           <${ScheduleList}
             items=${items}
             loading=${loading}