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/css/main.css

@@ -1,6 +1,6 @@
 /* ── Schedules Surface ───────────────────── */
 
-.sched-app {
+.ext-schedules-app {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -8,7 +8,7 @@
   color: var(--text);
 }
 
-.sched-header {
+.ext-schedules-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -16,13 +16,13 @@
   border-bottom: 1px solid var(--border);
 }
 
-.sched-header h1 {
+.ext-schedules-header h1 {
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
 }
 
-.sched-body {
+.ext-schedules-body {
   flex: 1;
   overflow: auto;
   padding: 16px;
@@ -31,28 +31,28 @@
   gap: 16px;
 }
 
-.sched-count {
+.ext-schedules-count {
   font-size: 0.8rem;
   color: var(--text-3);
 }
 
 /* ── Table ────────────────────────────────── */
 
-.sched-list__loading,
-.sched-list__empty {
+.ext-schedules-list__loading,
+.ext-schedules-list__empty {
   padding: 40px 16px;
   text-align: center;
   color: var(--text-3);
   font-size: 0.85rem;
 }
 
-.sched-table {
+.ext-schedules-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.85rem;
 }
 
-.sched-table th {
+.ext-schedules-table th {
   text-align: left;
   padding: 8px 12px;
   font-weight: 600;
@@ -63,19 +63,19 @@
   border-bottom: 1px solid var(--border);
 }
 
-.sched-table td {
+.ext-schedules-table td {
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
   vertical-align: top;
 }
 
-.sched-row:hover {
+.ext-schedules-row:hover {
   background: var(--bg-hover);
 }
 
-.sched-row__name { min-width: 160px; }
+.ext-schedules-row__name { min-width: 160px; }
 
-.sched-link {
+.ext-schedules-link {
   background: none;
   border: none;
   color: var(--accent);
@@ -85,17 +85,17 @@
   padding: 0;
   text-align: left;
 }
-.sched-link:hover { text-decoration: underline; }
+.ext-schedules-link:hover { text-decoration: underline; }
 
-.sched-row__desc {
+.ext-schedules-row__desc {
   font-size: 0.75rem;
   color: var(--text-3);
   margin-top: 2px;
 }
 
-.sched-row__cron { white-space: nowrap; }
+.ext-schedules-row__cron { white-space: nowrap; }
 
-.sched-cron-badge {
+.ext-schedules-cron-badge {
   font-family: monospace;
   font-size: 0.8rem;
   background: var(--bg-raised);
@@ -104,19 +104,19 @@
   color: var(--text-2);
 }
 
-.sched-cron-human {
+.ext-schedules-cron-human {
   font-size: 0.75rem;
   color: var(--text-3);
   margin-top: 2px;
 }
 
-.sched-row__next {
+.ext-schedules-row__next {
   font-size: 0.8rem;
   color: var(--text-2);
   white-space: nowrap;
 }
 
-.sched-row__actions {
+.ext-schedules-row__actions {
   display: flex;
   gap: 4px;
   white-space: nowrap;
@@ -124,7 +124,7 @@
 
 /* ── Toggle button ────────────────────────── */
 
-.sched-toggle-btn {
+.ext-schedules-toggle-btn {
   font-size: 0.75rem;
   font-weight: 600;
   padding: 2px 10px;
@@ -134,22 +134,22 @@
   transition: background 0.15s, color 0.15s;
 }
 
-.sched-toggle-btn--on {
+.ext-schedules-toggle-btn--on {
   background: var(--success);
   color: #fff;
   border-color: var(--success);
 }
 
-.sched-toggle-btn--off {
+.ext-schedules-toggle-btn--off {
   background: var(--bg-raised);
   color: var(--text-3);
 }
 
-.sched-toggle-btn:hover { opacity: 0.85; }
+.ext-schedules-toggle-btn:hover { opacity: 0.85; }
 
 /* ── Action buttons ───────────────────────── */
 
-.sched-btn {
+.ext-schedules-btn {
   background: none;
   border: 1px solid var(--border);
   color: var(--text-2);
@@ -157,14 +157,14 @@
   cursor: pointer;
   transition: background 0.15s;
 }
-.sched-btn:hover { background: var(--bg-hover); }
+.ext-schedules-btn:hover { background: var(--bg-hover); }
 
-.sched-btn--sm {
+.ext-schedules-btn--sm {
   padding: 3px 8px;
   font-size: 0.8rem;
 }
 
-.sched-btn--danger:hover {
+.ext-schedules-btn--danger:hover {
   background: var(--danger-dim);
   color: var(--danger);
   border-color: var(--danger);
@@ -172,28 +172,28 @@
 
 /* ── Form ─────────────────────────────────── */
 
-.sched-form { display: flex; flex-direction: column; gap: 12px; }
-.sched-form__row { display: flex; align-items: center; gap: 12px; }
-.sched-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
+.ext-schedules-form { display: flex; flex-direction: column; gap: 12px; }
+.ext-schedules-form__row { display: flex; align-items: center; gap: 12px; }
+.ext-schedules-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
 
-.sched-cron-input {
+.ext-schedules-cron-input {
   font-family: monospace;
 }
 
-.sched-cron-preview {
+.ext-schedules-cron-preview {
   font-size: 0.8rem;
   color: var(--accent);
   margin-top: 4px;
   font-style: italic;
 }
 
-.sched-script {
+.ext-schedules-script {
   font-family: monospace;
   font-size: 0.85rem;
   resize: vertical;
 }
 
-.sched-toggle {
+.ext-schedules-toggle {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -203,14 +203,14 @@
 
 /* ── Logs panel ───────────────────────────── */
 
-.sched-logs {
+.ext-schedules-logs {
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   overflow: hidden;
 }
 
-.sched-logs__header {
+.ext-schedules-logs__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -220,15 +220,15 @@
   font-weight: 600;
 }
 
-.sched-logs__loading,
-.sched-logs__empty {
+.ext-schedules-logs__loading,
+.ext-schedules-logs__empty {
   padding: 20px 12px;
   text-align: center;
   color: var(--text-3);
   font-size: 0.8rem;
 }
 
-.sched-log-entry {
+.ext-schedules-log-entry {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -236,28 +236,28 @@
   border-bottom: 1px solid var(--border);
   font-size: 0.8rem;
 }
-.sched-log-entry:last-child { border-bottom: none; }
+.ext-schedules-log-entry:last-child { border-bottom: none; }
 
-.sched-log-entry__status {
+.ext-schedules-log-entry__status {
   font-weight: 700;
   width: 18px;
   text-align: center;
 }
-.sched-log-entry__status--ok   { color: var(--success); }
-.sched-log-entry__status--fail { color: var(--danger); }
+.ext-schedules-log-entry__status--ok   { color: var(--success); }
+.ext-schedules-log-entry__status--fail { color: var(--danger); }
 
-.sched-log-entry__time {
+.ext-schedules-log-entry__time {
   color: var(--text-2);
   white-space: nowrap;
 }
 
-.sched-log-entry__duration {
+.ext-schedules-log-entry__duration {
   color: var(--text-3);
   font-family: monospace;
   font-size: 0.75rem;
 }
 
-.sched-log-entry__error {
+.ext-schedules-log-entry__error {
   color: var(--danger);
   font-size: 0.75rem;
   overflow: hidden;
@@ -269,9 +269,9 @@
 /* ── Responsive ───────────────────────────── */
 
 @media (max-width: 768px) {
-  .sched-table th:nth-child(3),
-  .sched-table td:nth-child(3) {
+  .ext-schedules-table th:nth-child(3),
+  .ext-schedules-table td:nth-child(3) {
     display: none;
   }
-  .sched-body { padding: 8px; }
+  .ext-schedules-body { padding: 8px; }
 }

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}