@juspay/shooter 1.6.2 → 1.7.0

package/src/lib/modules/client/terminal/LaunchSheet.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { CreateTerminalResponse, LaunchSheetProps, Preset } from '$lib/types';
 
-  import { Banner, Button, Choicebox, Input, Select } from '@juspay/svelte-ui-components';
+  import { Banner, Button, Choicebox, Input, Select, Sheet } from '@juspay/svelte-ui-components';
   import { onMount } from 'svelte';
 
-  const { apiKey, onClose, onLaunch, open }: LaunchSheetProps = $props();
+  // eslint-disable-next-line prefer-const -- open is mutated via bind:open from parent
+  let { apiKey, onClose, onLaunch, open = $bindable(false) }: LaunchSheetProps = $props();
 
   const presets: Preset[] = [
     { args: [], command: 'claude', label: 'Claude Code' },
@@ -107,174 +108,103 @@
     }
   }
 
-  function handleBackdropClick(event: MouseEvent): void {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  }
 
-  function handleKeydown(event: KeyboardEvent): void {
-    if (!open) {
-      return;
-    }
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-  <div class="overlay" role="presentation" onclick={handleBackdropClick}>
-    <div class="sheet" role="dialog" aria-modal="true" aria-label="New Terminal">
-      <div class="handle-bar">
-        <div class="handle"></div>
-      </div>
-
-      <h2 class="sheet-title">New Terminal</h2>
-
-      <div class="section">
-        <span class="section-label">Quick Launch</span>
-        <div class="preset-grid">
-          {#each presets as preset, i (preset.label)}
-            <Choicebox
-              mode="radio"
-              selected={selectedPreset === i}
-              onclick={(): void => {
-                selectPreset(i);
-              }}
-              classes="preset-choice"
-            >
-              {preset.label}
-            </Choicebox>
-          {/each}
-        </div>
+<Sheet
+  bind:open
+  side="bottom"
+  title="New Terminal"
+  onclose={onClose}
+  classes="launch-sheet"
+>
+  {#snippet content()}
+    <div class="section">
+      <span class="section-label">Quick Launch</span>
+      <div class="preset-grid">
+        {#each presets as preset, i (preset.label)}
+          <Choicebox
+            mode="radio"
+            selected={selectedPreset === i}
+            onclick={() => {
+              selectPreset(i);
+            }}
+            classes="preset-choice"
+          >
+            {preset.label}
+          </Choicebox>
+        {/each}
       </div>
+    </div>
 
-      <div class="section">
-        <span class="section-label">Working Directory</span>
-        <Select
-          items={projectPaths.length > 0
-            ? projectPaths.map((p) => ({ id: p, label: p }))
-            : [{ id: '', label: 'No recent projects' }]}
-          value={selectedCwd ? [selectedCwd] : projectPaths.length > 0 ? [projectPaths[0]] : ['']}
-          placeholder="Select a project"
-          onchange={(value: string[]): void => {
-            selectedCwd = value[0] || '';
-          }}
-          classes="launch-select"
+    <div class="section">
+      <span class="section-label">Working Directory</span>
+      <Select
+        items={projectPaths.length > 0
+          ? projectPaths.map((p) => ({ id: p, label: p }))
+          : [{ id: '', label: 'No recent projects' }]}
+        value={selectedCwd ? [selectedCwd] : projectPaths.length > 0 ? [projectPaths[0]] : ['']}
+        placeholder="Select a project"
+        onchange={(value) => {
+          selectedCwd = value[0] || '';
+        }}
+        classes="launch-select"
+      />
+      <div class="custom-cwd-group">
+        <Input
+          label="Or enter a custom path"
+          bind:value={customCwd}
+          dataType="text"
+          placeholder="/path/to/project"
+          classes="input-mono launch-input"
         />
-        <div class="custom-cwd-group">
-          <Input
-            label="Or enter a custom path"
-            bind:value={customCwd}
-            dataType="text"
-            placeholder="/path/to/project"
-            classes="input-mono launch-input"
-          />
-        </div>
       </div>
-
-      <Button
-        classes="btn-launch"
-        disabled={launching}
-        onclick={handleLaunch}
-        showLoader={launching}
-        text={launching ? 'Launching...' : 'Launch Terminal'}
-      />
-
-      {#if launchError}
-        <Banner text={launchError} classes="banner-error launch-error-banner" />
-      {/if}
     </div>
-  </div>
-{/if}
 
-<style>
-  .overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 200;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-  }
+    <Button
+      classes="btn-launch"
+      disabled={launching}
+      onclick={handleLaunch}
+      showLoader={launching}
+      text={launching ? 'Launching...' : 'Launch Terminal'}
+    />
 
-  .sheet {
-    background: var(--ds-gray-100);
-    border-top-left-radius: var(--radius-xl);
-    border-top-right-radius: var(--radius-xl);
-    width: 100%;
-    max-height: 90vh;
-    overflow-y: auto;
-    padding: var(--space-4) var(--space-5)
-      calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
-    animation: slideUp 0.25s ease;
-  }
+    {#if launchError}
+      <Banner text={launchError} classes="banner-error launch-error-banner" />
+    {/if}
+  {/snippet}
+</Sheet>
 
-  @keyframes slideUp {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  /* Desktop: centered modal */
-  @media (min-width: 768px) {
-    .overlay {
-      align-items: center;
-    }
-
-    .sheet {
-      max-width: 480px;
-      border-radius: var(--radius-xl);
-      animation: fadeScale 0.2s ease;
-    }
-
-    @keyframes fadeScale {
-      from {
-        opacity: 0;
-        transform: scale(0.96);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-  }
-
-  .handle-bar {
-    display: flex;
-    justify-content: center;
-    padding-bottom: var(--space-3);
-  }
-
-  .handle {
-    width: 36px;
-    height: 4px;
-    border-radius: var(--radius-full);
-    background: var(--ds-gray-500);
+<style>
+  :global(.launch-sheet) {
+    --sheet-overlay-z-index: 200;
+    --sheet-overlay-background: rgba(0, 0, 0, 0.6);
+    --sheet-background: var(--ds-gray-100);
+    --sheet-z-index: 201;
+    --sheet-max-height: 90vh;
+    --sheet-height: auto;
+    --sheet-border: none;
+    --sheet-box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
+    --sheet-header-padding: var(--space-4) var(--space-5);
+    --sheet-header-background: var(--ds-gray-100);
+    --sheet-header-border-bottom: none;
+    --sheet-title-font-size: var(--text-xl);
+    --sheet-title-font-weight: 600;
+    --sheet-title-color: var(--text-primary);
+    --sheet-close-button-color: var(--text-secondary);
+    --sheet-close-button-hover-background: var(--component-bg-hover);
+    --sheet-content-padding: 0 var(--space-5) calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
   }
 
-  /* Hide handle bar on desktop */
+  /* Desktop: override bottom sheet to appear as centered modal */
   @media (min-width: 768px) {
-    .handle-bar {
-      display: none;
+    :global(.launch-sheet) {
+      --sheet-max-height: 80vh;
+      --sheet-width: 480px;
+      --sheet-max-width: 90vw;
     }
   }
 
-  .sheet-title {
-    font-size: var(--text-xl);
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: var(--space-5);
-    letter-spacing: var(--tracking-tight);
-  }
-
   .section {
     margin-bottom: var(--space-4);
   }

package/src/lib/modules/client/terminal/QuickKeys.svelte

@@ -44,11 +44,11 @@
   }
 
   :global(.btn-quick-key) {
-    --button-color: #1e293b;
-    --button-text-color: #94a3b8;
+    --button-color: var(--ds-gray-200);
+    --button-text-color: var(--ds-gray-700);
     --button-border: 1px solid var(--ds-gray-400);
-    --button-hover-color: #334155;
-    --button-hover-text-color: #e2e8f0;
+    --button-hover-color: var(--ds-gray-300);
+    --button-hover-text-color: var(--text-primary);
     --button-hover-border: 1px solid var(--ds-gray-400);
     --button-height: 44px;
     --button-padding: 0 var(--space-3);

package/src/lib/theme.css

@@ -421,13 +421,13 @@
 }
 
 .pill-live {
-  --pill-background: rgba(34, 197, 94, 0.15);
-  --pill-color: #22c55e;
-  --pill-border: 1px solid rgba(34, 197, 94, 0.3);
+  --pill-background: var(--ds-green-alpha-200);
+  --pill-color: var(--ds-green-700);
+  --pill-border: 1px solid var(--ds-green-alpha-400);
   --pill-font-size: 0.7rem;
   --pill-padding: 2px 10px;
-  --pill-hover-background: rgba(34, 197, 94, 0.15);
-  --pill-hover-color: #22c55e;
+  --pill-hover-background: var(--ds-green-alpha-200);
+  --pill-hover-color: var(--ds-green-700);
   --pill-cursor: default;
   font-weight: 700;
   letter-spacing: 0.05em;
@@ -506,6 +506,126 @@
   --pill-cursor: inherit;
 }
 
+/* ===== Icon Sizes ===== */
+.icon-14 {
+  --icon-width: 14px;
+  --icon-height: 14px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-16 {
+  --icon-width: 16px;
+  --icon-height: 16px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-18 {
+  --icon-width: 18px;
+  --icon-height: 18px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-24 {
+  --icon-width: 24px;
+  --icon-height: 24px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-26 {
+  --icon-width: 26px;
+  --icon-height: 26px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+/* ===== RelativeTime ===== */
+.terminal-time {
+  --relative-time-font-size: var(--text-xs);
+  --relative-time-color: var(--text-tertiary);
+  --relative-time-font-weight: 400;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ===== Status Badge Pill Variants ===== */
+
+.pill-status-online {
+  --pill-background: var(--ds-green-100);
+  --pill-color: var(--ds-green-900);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-green-100);
+  --pill-hover-color: var(--ds-green-900);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-offline {
+  --pill-background: var(--ds-red-100);
+  --pill-color: var(--ds-red-900);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-red-100);
+  --pill-hover-color: var(--ds-red-900);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-degraded {
+  --pill-background: var(--ds-amber-100);
+  --pill-color: var(--ds-amber-900);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-amber-100);
+  --pill-hover-color: var(--ds-amber-900);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-unknown {
+  --pill-background: var(--ds-gray-300);
+  --pill-color: var(--text-secondary);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-gray-300);
+  --pill-hover-color: var(--text-secondary);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-online::before,
+.pill-status-offline::before,
+.pill-status-degraded::before,
+.pill-status-unknown::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
 /* ===== Shimmer Variant Classes ===== */
 
 .shimmer-header {

package/src/lib/types/terminal-client.ts

@@ -51,7 +51,7 @@ export interface LaunchSheetProps {
   apiKey: string;
   onClose: () => void;
   onLaunch: (response: CreateTerminalResponse) => void;
-  open: boolean;
+  open?: boolean;
 }
 
 export interface LayoutData {

package/src/routes/+error.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import { Button } from '@juspay/svelte-ui-components';
 </script>
 
 <svelte:head>
@@ -27,13 +28,14 @@
       {/if}
     </p>
     <div class="error-actions">
-      <button class="error-btn" onclick={(): void => void goto('/')}>Go Home</button>
-      <button
-        class="error-btn error-btn-secondary"
+      <Button text="Go Home" classes="btn-primary" onclick={(): void => void goto('/')} />
+      <Button
+        text="Go Back"
+        classes="btn-secondary"
         onclick={(): void => {
           history.back();
-        }}>Go Back</button
-      >
+        }}
+      />
     </div>
   </div>
 </main>
@@ -55,7 +57,7 @@
   .error-code {
     font-size: 4rem;
     font-weight: 700;
-    color: var(--color-text-tertiary, #555);
+    color: var(--text-tertiary);
     line-height: 1;
     margin-bottom: var(--space-2);
   }
@@ -67,7 +69,7 @@
   }
 
   .error-message {
-    color: var(--color-text-secondary, #888);
+    color: var(--text-secondary);
     font-size: 0.875rem;
     line-height: 1.5;
     margin-bottom: var(--space-5);
@@ -78,22 +80,4 @@
     gap: var(--space-3);
     justify-content: center;
   }
-
-  .error-btn {
-    padding: 10px 20px;
-    border-radius: 8px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: none;
-    background: var(--color-accent, #0d9488);
-    color: white;
-    min-height: 44px;
-  }
-
-  .error-btn-secondary {
-    background: transparent;
-    border: 1px solid var(--border, #333);
-    color: var(--color-text-secondary, #888);
-  }
 </style>