@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/SvSheetConditionalFormat.svelte

@@ -8,6 +8,7 @@
    * ribbon, or on a rule from Manage Rules > Edit, and hands back the rule's
    * body for the shell to place.
    */
+  import { useSheetText } from './sheet-text'
   import { SvModal } from '@svgrid/grid'
   import { CF_PRESET_STYLES, type CfPreset, type CfBody, type CfStyledRule } from './sheet/conditional-formats'
 
@@ -23,20 +24,8 @@
   }
 
   let { open = $bindable(false), preset, rule = null, address, onApply, onClose }: Props = $props()
+  const t = useSheetText()
 
-  const TITLES: Record<CfPreset, string> = {
-    greater: 'Greater Than', less: 'Less Than', between: 'Between', equal: 'Equal To',
-    text: 'Text That Contains', duplicates: 'Duplicate Values',
-    top10: 'Top 10 Items', bottom10: 'Bottom 10 Items', aboveAverage: 'Above Average', belowAverage: 'Below Average',
-  }
-  const LEADS: Record<CfPreset, string> = {
-    greater: 'Format cells that are GREATER THAN:', less: 'Format cells that are LESS THAN:',
-    between: 'Format cells that are BETWEEN:', equal: 'Format cells that are EQUAL TO:',
-    text: 'Format cells that contain the text:', duplicates: 'Format cells that contain:',
-    top10: 'Format cells that rank in the TOP:', bottom10: 'Format cells that rank in the BOTTOM:',
-    aboveAverage: 'Format cells that are ABOVE AVERAGE for the selected range:',
-    belowAverage: 'Format cells that are BELOW AVERAGE for the selected range:',
-  }
 
   let value1 = $state('')
   let value2 = $state('')
@@ -60,13 +49,14 @@
       else if (r.kind === 'text') value1 = r.value
       else if (r.kind === 'duplicates') unique = !!r.unique
       else if (r.kind === 'topBottom') { rank = String(r.rank); percent = !!r.percent }
+      else if (r.kind === 'formula') value1 = r.formula
       const match = CF_PRESET_STYLES.find((p) => JSON.stringify(p.style) === JSON.stringify(r.style))
       if (match) styleId = match.id
     }
     queueMicrotask(() => first?.focus())
   })
 
-  const needsValue = $derived(preset === 'greater' || preset === 'less' || preset === 'between' || preset === 'equal' || preset === 'text')
+  const needsValue = $derived(preset === 'greater' || preset === 'less' || preset === 'between' || preset === 'equal' || preset === 'text' || preset === 'formula')
   const valid = $derived(
     (!needsValue || value1.trim() !== '')
       && (preset !== 'between' || value2.trim() !== '')
@@ -86,6 +76,10 @@
       case 'bottom10': return { kind: 'topBottom', top: false, rank: Number(rank), percent, style }
       case 'aboveAverage': return { kind: 'average', above: true, style }
       case 'belowAverage': return { kind: 'average', above: false, style }
+      case 'formula': {
+        const text = value1.trim()
+        return { kind: 'formula', formula: text.startsWith('=') ? text : `=${text}`, style }
+      }
     }
   }
 
@@ -104,38 +98,41 @@
   const sample = $derived(CF_PRESET_STYLES.find((p) => p.id === styleId)?.style ?? {})
 </script>
 
-<SvModal bind:open onClose={onClose} title={TITLES[preset]} size="sm" width={440}>
+<SvModal bind:open onClose={onClose} title={t(`cf.title.${preset}`)} size="sm" width={440}>
   <form class="sv-sheet-dialog cf" onsubmit={(e) => { e.preventDefault(); ok() }}>
     <div class="where">{address}</div>
-    <div class="lead">{LEADS[preset]}</div>
+    <div class="lead">{t(`cf.lead.${preset}`)}</div>
     <div class="row">
       {#if preset === 'between'}
-        <input bind:this={first} type="text" bind:value={value1} aria-label="Lower value" spellcheck="false" />
-        <span>and</span>
-        <input type="text" bind:value={value2} aria-label="Upper value" spellcheck="false" />
+        <input bind:this={first} type="text" bind:value={value1} aria-label={t('cf.lowerValue')} spellcheck="false" />
+        <span>{t('cf.and')}</span>
+        <input type="text" bind:value={value2} aria-label={t('cf.upperValue')} spellcheck="false" />
       {:else if needsValue}
-        <input bind:this={first} type="text" bind:value={value1} aria-label="Value" spellcheck="false" placeholder={preset === 'text' ? 'text' : 'value or =formula'} />
+        <input bind:this={first} type="text" bind:value={value1} aria-label={t(preset === 'formula' ? 'cf.formula' : 'cf.value')} spellcheck="false" placeholder={preset === 'text' ? t('cf.textPlaceholder') : preset === 'formula' ? '=$B2>100' : t('cf.valuePlaceholder')} />
       {:else if preset === 'duplicates'}
-        <select bind:this={first} bind:value={unique} aria-label="Duplicate or unique">
-          <option value={false}>Duplicate</option>
-          <option value={true}>Unique</option>
+        <select bind:this={first} bind:value={unique} aria-label={t('cf.duplicateOrUnique')}>
+          <option value={false}>{t('cf.duplicate')}</option>
+          <option value={true}>{t('cf.unique')}</option>
         </select>
-        <span>values</span>
+        <span>{t('cf.values')}</span>
       {:else if preset === 'top10' || preset === 'bottom10'}
-        <input bind:this={first} type="number" min="1" bind:value={rank} aria-label="How many" />
-        <label class="check"><input type="checkbox" bind:checked={percent} /> % of selected range</label>
+        <input bind:this={first} type="number" min="1" bind:value={rank} aria-label={t('cf.howMany')} />
+        <label class="check"><input type="checkbox" bind:checked={percent} /> {t('cf.percentOfRange')}</label>
       {/if}
-      <span>with</span>
-      <select bind:value={styleId} aria-label="Format style">
-        {#each CF_PRESET_STYLES as p (p.id)}<option value={p.id}>{p.label}</option>{/each}
+      <span>{t('cf.with')}</span>
+      <select bind:value={styleId} aria-label={t('cf.formatStyle')}>
+        {#each CF_PRESET_STYLES as p (p.id)}<option value={p.id}>{t(`cf.style.${p.id}`)}</option>{/each}
       </select>
     </div>
+    {#if preset === 'formula'}
+      <p class="hint">{t('cf.formulaHint')}</p>
+    {/if}
     <div class="sample" style:background={sample.fill ?? 'transparent'} style:color={sample.color ?? 'inherit'}>AaBbCcYyZz</div>
   </form>
   {#snippet footer()}
     <div class="sv-sheet-dialog-buttons">
-      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>OK</button>
-      <button type="button" class="btn" onclick={close}>Cancel</button>
+      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
     </div>
   {/snippet}
 </SvModal>

package/dist/SvSheetDataValidation.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   /**
-   * Excel's Data Validation dialog, the two tabs with something behind them:
-   * Settings (Allow, Data, the bounds or the source, Ignore blank, In-cell
-   * dropdown) and Error Alert (Style, Title, Message). It opens on the rule
+   * Excel's Data Validation dialog, its three tabs: Settings (Allow, Data,
+   * the bounds or the source, Ignore blank, In-cell dropdown), Input
+   * Message (shown under the cell while it is selected) and Error Alert
+   * (Style, Title, Message). It opens on the rule
    * at the active cell and, on OK, hands back one rule for the shell to put
    * over the selection; Clear All removes the validation from the selection.
    */
+  import { useSheetText } from './sheet-text'
   import { SvModal } from '@svgrid/grid'
   import {
     OPERATOR_LABELS,
@@ -24,20 +26,21 @@
   }
 
   let { open = $bindable(false), rule, address, onApply, onClear, onClose }: Props = $props()
+  const t = useSheetText()
 
-  type Tab = 'settings' | 'alert'
+  type Tab = 'settings' | 'input' | 'alert'
   let tab = $state<Tab>('settings')
 
   const ALLOWS: ReadonlyArray<{ id: ValidationAllow; label: string }> = [
-    { id: 'any', label: 'Any value' },
-    { id: 'whole', label: 'Whole number' },
-    { id: 'decimal', label: 'Decimal' },
-    { id: 'list', label: 'List' },
-    { id: 'date', label: 'Date' },
-    { id: 'textLength', label: 'Text length' },
-    { id: 'custom', label: 'Custom' },
+    { id: 'any', label: 'validation.allow.any' },
+    { id: 'whole', label: 'validation.allow.whole' },
+    { id: 'decimal', label: 'validation.allow.decimal' },
+    { id: 'list', label: 'validation.allow.list' },
+    { id: 'date', label: 'validation.allow.date' },
+    { id: 'textLength', label: 'validation.allow.textLength' },
+    { id: 'custom', label: 'validation.allow.custom' },
   ]
-  const OPERATORS = Object.entries(OPERATOR_LABELS) as Array<[ValidationOperator, string]>
+  const OPERATORS = Object.keys(OPERATOR_LABELS) as ValidationOperator[]
 
   let allow = $state<ValidationAllow>('any')
   let operator = $state<ValidationOperator>('between')
@@ -48,6 +51,9 @@
   let style = $state<'stop' | 'warning'>('stop')
   let title = $state('')
   let message = $state('')
+  let showInput = $state(true)
+  let inputTitle = $state('')
+  let inputMessage = $state('')
   let first = $state<HTMLSelectElement | null>(null)
 
   $effect(() => {
@@ -62,18 +68,21 @@
     style = rule?.alert.style ?? 'stop'
     title = rule?.alert.title ?? ''
     message = rule?.alert.message ?? ''
+    showInput = rule ? rule.input !== undefined : true
+    inputTitle = rule?.input?.title ?? ''
+    inputMessage = rule?.input?.message ?? ''
     queueMicrotask(() => first?.focus())
   })
 
   const bounded = $derived(allow === 'whole' || allow === 'decimal' || allow === 'date' || allow === 'textLength')
   const twoBounds = $derived(operator === 'between' || operator === 'notBetween')
   const firstLabel = $derived(
-    allow === 'list' ? 'Source:'
-      : allow === 'custom' ? 'Formula:'
-      : twoBounds ? (allow === 'date' ? 'Start date:' : 'Minimum:')
-      : allow === 'date' ? 'Date:' : allow === 'textLength' ? 'Length:' : 'Value:',
+    allow === 'list' ? t('validation.source')
+      : allow === 'custom' ? t('validation.formula')
+      : twoBounds ? t(allow === 'date' ? 'validation.startDate' : 'validation.minimum')
+      : t(allow === 'date' ? 'validation.date' : allow === 'textLength' ? 'validation.length' : 'validation.value'),
   )
-  const secondLabel = $derived(allow === 'date' ? 'End date:' : 'Maximum:')
+  const secondLabel = $derived(t(allow === 'date' ? 'validation.endDate' : 'validation.maximum'))
   const valid = $derived(
     allow === 'any'
       || (allow === 'list' && value1.trim() !== '')
@@ -89,6 +98,10 @@
       inCellDropdown: allow === 'list' ? inCellDropdown : false,
       alert: { style, title: title.trim() || undefined, message: message.trim() || undefined },
     }
+    // An input message exists when the box is on and there is text to show.
+    if (showInput && (inputTitle.trim() || inputMessage.trim())) {
+      spec.input = { title: inputTitle.trim() || undefined, message: inputMessage.trim() || undefined }
+    }
     if (bounded) {
       spec.operator = operator
       spec.value1 = value1.trim()
@@ -113,35 +126,35 @@
   }
 </script>
 
-<SvModal bind:open onClose={onClose} title="Data Validation" size="sm" width={400}>
+<SvModal bind:open onClose={onClose} title={t('validation.title')} size="sm" width={400}>
   <form class="sv-sheet-dialog validation" onsubmit={(e) => { e.preventDefault(); ok() }}>
     <div class="where">{address}</div>
-    <div class="tabs" role="tablist" aria-label="Data Validation tabs">
-      {#each [['settings', 'Settings'], ['alert', 'Error Alert']] as [id, label] (id)}
-        <button type="button" role="tab" class="tab" class:on={tab === id} aria-selected={tab === id} onclick={() => (tab = id as Tab)}>{label}</button>
+    <div class="tabs" role="tablist" aria-label={t('validation.tabs')}>
+      {#each ['settings', 'input', 'alert'] as id (id)}
+        <button type="button" role="tab" class="tab" class:on={tab === id} aria-selected={tab === id} onclick={() => (tab = id as Tab)}>{t(`validation.tab.${id}`)}</button>
       {/each}
     </div>
     <div class="panel" role="tabpanel">
       {#if tab === 'settings'}
-        <div class="lead">Validation criteria</div>
+        <div class="lead">{t('validation.criteria')}</div>
         <label class="field">
-          <span>Allow:</span>
+          <span>{t('validation.allow')}</span>
           <select bind:this={first} bind:value={allow}>
-            {#each ALLOWS as a (a.id)}<option value={a.id}>{a.label}</option>{/each}
+            {#each ALLOWS as a (a.id)}<option value={a.id}>{t(a.label)}</option>{/each}
           </select>
         </label>
         {#if bounded}
           <label class="field">
-            <span>Data:</span>
+            <span>{t('validation.data')}</span>
             <select bind:value={operator}>
-              {#each OPERATORS as [id, label] (id)}<option value={id}>{label}</option>{/each}
+              {#each OPERATORS as id (id)}<option value={id}>{t(`validation.operator.${id}`)}</option>{/each}
             </select>
           </label>
         {/if}
         {#if allow !== 'any'}
           <label class="field">
             <span>{firstLabel}</span>
-            <input type="text" bind:value={value1} spellcheck="false" placeholder={allow === 'list' ? 'Red, Green, Blue or =$D$1:$D$5' : allow === 'custom' ? '=B1<>""' : ''} />
+            <input type="text" bind:value={value1} spellcheck="false" placeholder={allow === 'list' ? t('validation.listPlaceholder') : allow === 'custom' ? '=B1<>""' : ''} />
           </label>
         {/if}
         {#if bounded && twoBounds}
@@ -151,45 +164,56 @@
           </label>
         {/if}
         <div class="checks">
-          <label class="check"><input type="checkbox" bind:checked={ignoreBlank} /> Ignore blank</label>
+          <label class="check"><input type="checkbox" bind:checked={ignoreBlank} /> {t('validation.ignoreBlank')}</label>
           {#if allow === 'list'}
-            <label class="check"><input type="checkbox" bind:checked={inCellDropdown} /> In-cell dropdown</label>
+            <label class="check"><input type="checkbox" bind:checked={inCellDropdown} /> {t('validation.inCellDropdown')}</label>
           {/if}
         </div>
         {#if allow === 'custom'}
-          <p class="hint">Written for the top-left cell of the selection; it moves with each cell, as a copied formula would. TRUE (or a number other than 0) allows the entry.</p>
+          <p class="hint">{t('validation.customHint')}</p>
         {:else if allow === 'list'}
-          <p class="hint">A comma-separated list, or a range or a defined name starting with =.</p>
+          <p class="hint">{t('validation.listHint')}</p>
         {:else if allow !== 'any'}
-          <p class="hint">A bound can be a formula, so =$B$1 follows B1.</p>
+          <p class="hint">{t('validation.boundHint')}</p>
         {/if}
+      {:else if tab === 'input'}
+        <label class="check"><input type="checkbox" bind:checked={showInput} /> {t('validation.showInput')}</label>
+        <div class="lead">{t('validation.inputLead')}</div>
+        <label class="field">
+          <span>{t('validation.inputTitle')}</span>
+          <input type="text" bind:value={inputTitle} disabled={!showInput} />
+        </label>
+        <label class="field message">
+          <span>{t('validation.inputMessage')}</span>
+          <textarea rows="4" bind:value={inputMessage} disabled={!showInput}></textarea>
+        </label>
       {:else}
-        <div class="lead">When the user enters invalid data, show this alert:</div>
+        <div class="lead">{t('validation.alertLead')}</div>
         <label class="field">
-          <span>Style:</span>
+          <span>{t('validation.style')}</span>
           <select bind:value={style}>
-            <option value="stop">Stop</option>
-            <option value="warning">Warning</option>
+            <option value="stop">{t('validation.stop')}</option>
+            <option value="warning">{t('validation.warning')}</option>
           </select>
         </label>
         <label class="field">
-          <span>Title:</span>
+          <span>{t('validation.errorTitle')}</span>
           <input type="text" bind:value={title} />
         </label>
         <label class="field message">
-          <span>Error message:</span>
+          <span>{t('validation.errorMessage')}</span>
           <textarea rows="4" bind:value={message}></textarea>
         </label>
-        <p class="hint">Stop refuses the entry and offers Retry; Warning asks whether to keep it anyway.</p>
+        <p class="hint">{t('validation.alertHint')}</p>
       {/if}
     </div>
   </form>
   {#snippet footer()}
     <div class="sv-sheet-dialog-buttons">
-      <button type="button" class="btn" onclick={clearAll}>Clear All</button>
+      <button type="button" class="btn" onclick={clearAll}>{t('validation.clearAll')}</button>
       <span class="spacer"></span>
-      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>OK</button>
-      <button type="button" class="btn" onclick={close}>Cancel</button>
+      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
     </div>
   {/snippet}
 </SvModal>

package/dist/SvSheetEditRanges.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  /**
+   * Excel's Allow Users to Edit Ranges: the blocks that take an edit while
+   * the sheet is protected, locked or not, each with a title. New adds
+   * one from a title and an A1 text (`B2:B10`, or several areas with
+   * commas), Modify edits one in place, Delete removes it; OK hands the
+   * list back as one change, and Protect Sheet... closes this and opens
+   * that dialog, as Excel's button does. No password per range.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+  import { newEditRangeId, parseRangeText, rangeText, type EditRange } from './sheet/protection'
+
+  type Props = {
+    open?: boolean
+    /** The sheet's ranges as they stand. */
+    ranges: ReadonlyArray<EditRange>
+    /** The selection as A1 text, what a new range's cells open on. */
+    selection: string
+    onApply: (ranges: EditRange[]) => void
+    /** The Protect Sheet... button: the shell opens that dialog. */
+    onProtect: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), ranges, selection, onApply, onProtect, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let working = $state<EditRange[]>([])
+  let newTitle = $state('')
+  let newRefers = $state('')
+  let editing = $state<string | null>(null)
+  let editTitle = $state('')
+  let editRefers = $state('')
+  let problem = $state<string | null>(null)
+  let titleBox = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    const copy = ranges.map((r) => ({ ...r, rects: r.rects.map(([r1, c1, r2, c2]) => [r1, c1, r2, c2] as const) }))
+    working = copy
+    newTitle = `Range${copy.length + 1}`
+    newRefers = selection
+    editing = null
+    problem = null
+    queueMicrotask(() => titleBox?.focus())
+  })
+
+  function add() {
+    const rects = parseRangeText(newRefers)
+    if (!rects) { problem = t('editRanges.invalidRef', { text: newRefers }); return }
+    const title = newTitle.trim() || `Range${working.length + 1}`
+    working = [...working, { id: newEditRangeId(), title, rects }]
+    newTitle = `Range${working.length + 1}`
+    newRefers = ''
+    problem = null
+  }
+
+  function startEdit(range: EditRange) {
+    editing = range.id
+    editTitle = range.title
+    editRefers = rangeText(range.rects)
+    problem = null
+  }
+
+  function saveEdit() {
+    const rects = parseRangeText(editRefers)
+    if (!rects) { problem = t('editRanges.invalidRef', { text: editRefers }); return }
+    working = working.map((r) => (r.id === editing ? { ...r, title: editTitle.trim() || r.title, rects } : r))
+    editing = null
+    problem = null
+  }
+
+  function remove(id: string) {
+    working = working.filter((r) => r.id !== id)
+    if (editing === id) editing = null
+  }
+
+  function ok() {
+    open = false
+    onApply(working)
+    onClose?.()
+  }
+
+  function protect() {
+    open = false
+    onApply(working)
+    onProtect()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('editRanges.title')} size="md">
+  <div class="sv-sheet-dialog ranges" role="group" aria-label={t('editRanges.title')}>
+    <div class="lead">{t('editRanges.lead')}</div>
+    <table class="list">
+      <thead>
+        <tr><th>{t('editRanges.name')}</th><th>{t('editRanges.refersTo')}</th><th></th></tr>
+      </thead>
+      <tbody>
+        {#each working as range (range.id)}
+          <tr>
+            {#if editing === range.id}
+              <td><input type="text" bind:value={editTitle} aria-label={t('editRanges.name')} spellcheck="false" /></td>
+              <td class="mono">
+                <input
+                  type="text"
+                  bind:value={editRefers}
+                  aria-label={t('editRanges.refersTo')}
+                  spellcheck="false"
+                  onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); saveEdit() } if (e.key === 'Escape') { e.stopPropagation(); editing = null } }}
+                />
+              </td>
+              <td class="actions">
+                <button type="button" class="link" onclick={saveEdit}>{t('save')}</button>
+                <button type="button" class="link" onclick={() => (editing = null)}>{t('cancel')}</button>
+              </td>
+            {:else}
+              <td>{range.title}</td>
+              <td class="mono">{rangeText(range.rects)}</td>
+              <td class="actions">
+                <button type="button" class="link" onclick={() => startEdit(range)}>{t('editRanges.modify')}</button>
+                <button type="button" class="link" onclick={() => remove(range.id)}>{t('delete')}</button>
+              </td>
+            {/if}
+          </tr>
+        {:else}
+          <tr><td colspan="3" class="empty">{t('editRanges.empty')}</td></tr>
+        {/each}
+      </tbody>
+    </table>
+    <form class="new" onsubmit={(e) => { e.preventDefault(); add() }}>
+      <label>
+        <span>{t('editRanges.titleField')}</span>
+        <input bind:this={titleBox} type="text" bind:value={newTitle} placeholder={t('editRanges.titlePlaceholder')} spellcheck="false" />
+      </label>
+      <label>
+        <span>{t('editRanges.refersField')}</span>
+        <input type="text" bind:value={newRefers} placeholder={t('editRanges.refersPlaceholder')} spellcheck="false" />
+      </label>
+      <button type="submit" class="btn">{t('editRanges.new')}</button>
+    </form>
+    {#if problem}<p class="status problem" role="alert">{problem}</p>{/if}
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={protect}>{t('editRanges.protectSheet')}</button>
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .ranges { min-width: 460px; }
+  .list {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+  .list th {
+    padding: 4px 8px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--sg-muted, #616161);
+    border-bottom: 1px solid var(--sg-border, #d1d1d1);
+  }
+  .list td {
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sg-border, #e5e5e5);
+    vertical-align: middle;
+  }
+  .list td input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 3px 6px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .empty { color: var(--sg-muted, #616161); text-align: center; }
+  .actions { white-space: nowrap; text-align: right; }
+  .link {
+    padding: 0 4px;
+    font: inherit;
+    color: var(--sg-accent, #107c41);
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .link:hover { text-decoration: underline; }
+  .new {
+    display: grid;
+    grid-template-columns: 1fr 2fr auto;
+    gap: 8px;
+    align-items: end;
+    margin-top: 6px;
+  }
+  .new label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
+  .new input {
+    padding: 4px 8px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .spacer { flex: 1; }
+</style>

package/dist/SvSheetEditRanges.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type EditRange } from './sheet/protection.js';
+type Props = {
+    open?: boolean;
+    /** The sheet's ranges as they stand. */
+    ranges: ReadonlyArray<EditRange>;
+    /** The selection as A1 text, what a new range's cells open on. */
+    selection: string;
+    onApply: (ranges: EditRange[]) => void;
+    /** The Protect Sheet... button: the shell opens that dialog. */
+    onProtect: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetEditRanges: import("svelte").Component<Props, {}, "open">;
+type SvSheetEditRanges = ReturnType<typeof SvSheetEditRanges>;
+export default SvSheetEditRanges;