@a3s-lab/office 0.11.0 → 0.13.0

package/dist/office-kernel.worker.js

@@ -13051,8 +13051,8 @@
         };
     })();
     (()=>{
-        const MAX_LAYOUT_BLOCKS = 10000;
-        const MAX_LAYOUT_PAGE_STYLES = MAX_LAYOUT_BLOCKS;
+        const MAX_LAYOUT_BLOCKS = 200000;
+        const MAX_LAYOUT_PAGE_STYLES = 10000;
         const MAX_LAYOUT_EXTENT = 1000000;
         const MAX_LAYOUT_PAGE_INDEX = 1000000;
         function layoutOfficeDocumentInJavaScript(request) {
@@ -13072,10 +13072,10 @@
                 ensurePageMetrics(pages, page);
                 if (void 0 !== block.flowCount) {
                     const end = index + block.flowCount;
-                    layoutFlow(request.blocks.slice(index, end), request.blocks.slice(end), pages, page, request.page, pageStyles, end < request.blocks.length);
+                    layoutFlow(request.blocks, index, end, pages, page, request.page, pageStyles, end < request.blocks.length);
                     index = end;
                 } else {
-                    layoutSingleBlock(block, request.blocks.slice(index + 1), pages, page, request.page, pageStyles, index + 1 < request.blocks.length);
+                    layoutSingleBlock(block, request.blocks, index + 1, pages, page, request.page, pageStyles, index + 1 < request.blocks.length);
                     index += 1;
                 }
             }
@@ -13119,7 +13119,7 @@
             }
             validateFlowSequences(request.blocks);
         }
-        function layoutSingleBlock(block, next, pages, page, defaultPage, pageStyles, hasMoreBlocks) {
+        function layoutSingleBlock(block, blocks, nextIndex, pages, page, defaultPage, pageStyles, hasMoreBlocks) {
             const availableHeight = pageBodyHeight(page);
             let current = pages.at(-1);
             let currentHasContent = current.placements.length > 0;
@@ -13129,7 +13129,7 @@
                 currentHasContent = false;
             }
             const remaining = Math.max(0, availableHeight - current.usedHeight);
-            const nextHeight = nextBlockPreviewHeight(next, page, defaultPage, pageStyles);
+            const nextHeight = nextBlockPreviewHeight(blocks, nextIndex, page, defaultPage, pageStyles);
             const groupedHeight = block.height + (block.keepWithNext ? nextHeight : 0);
             const shouldAdvance = currentHasContent && (block.height > remaining || (block.keepTogether || block.keepWithNext) && groupedHeight <= availableHeight && groupedHeight > remaining);
             if (shouldAdvance) {
@@ -13139,13 +13139,13 @@
             placeFragment(block, current, availableHeight);
             if (block.breakAfter && hasMoreBlocks) pages.push(emptyPage(nextPageIndex(pages), page));
         }
-        function layoutFlow(blocks, next, pages, page, defaultPage, pageStyles, hasMoreBlocks) {
+        function layoutFlow(blocks, start, end, pages, page, defaultPage, pageStyles, hasMoreBlocks) {
             const availableHeight = pageBodyHeight(page);
-            const first = blocks[0];
-            const last = blocks.at(-1);
+            const first = blocks[start];
+            const last = blocks[end - 1];
             if (first.breakBefore && pages.at(-1)?.placements.length) pages.push(emptyPage(nextPageIndex(pages), page));
-            const totalHeight = fragmentHeight(blocks, 0, blocks.length);
-            const nextHeight = last.keepWithNext ? nextBlockPreviewHeight(next, page, defaultPage, pageStyles) : 0;
+            const totalHeight = fragmentHeight(blocks, start, end);
+            const nextHeight = last.keepWithNext ? nextBlockPreviewHeight(blocks, end, page, defaultPage, pageStyles) : 0;
             let current = pages.at(-1);
             const repeatHeaderCount = first.repeatHeaderCount ?? 0;
             const repeatHeaderHeight = first.repeatHeaderHeight ?? 0;
@@ -13154,8 +13154,8 @@
                 current = emptyPage(nextPageIndex(pages), page);
                 pages.push(current);
             }
-            if (repeatHeaderCount > 0 && repeatHeaderCount < blocks.length) {
-                const leadingHeight = fragmentHeight(blocks, 0, repeatHeaderCount + 1);
+            if (repeatHeaderCount > 0 && repeatHeaderCount < end - start) {
+                const leadingHeight = fragmentHeight(blocks, start, start + repeatHeaderCount + 1);
                 const remainingHeight = Math.max(0, availableHeight - current.usedHeight);
                 if (current.placements.length > 0 && leadingHeight <= availableHeight && leadingHeight > remainingHeight) {
                     current = emptyPage(nextPageIndex(pages), page);
@@ -13163,22 +13163,23 @@
                 }
             }
             const minimum = Math.max(1, first.minimumFragmentsPerPage ?? 1);
-            let cursor = 0;
-            while(cursor < blocks.length){
+            let cursor = start;
+            let remainingFlowHeight = totalHeight;
+            while(cursor < end){
                 current = pages.at(-1);
-                if (cursor >= repeatHeaderCount && cursor > 0 && repeatHeaderHeight > 0 && 0 === current.placements.length && 0 === current.usedHeight) current.usedHeight = repeatHeaderHeight;
+                if (cursor - start >= repeatHeaderCount && cursor > start && repeatHeaderHeight > 0 && 0 === current.placements.length && 0 === current.usedHeight) current.usedHeight = repeatHeaderHeight;
                 const currentHasContent = current.placements.length > 0;
                 const remainingHeight = Math.max(0, availableHeight - current.usedHeight);
-                const remainingFragments = blocks.length - cursor;
-                const remainingFlowHeight = fragmentHeight(blocks, cursor, blocks.length);
+                const remainingFragments = end - cursor;
                 if (nextHeight > 0 && currentHasContent && remainingFlowHeight <= remainingHeight && remainingFlowHeight + nextHeight > remainingHeight && remainingFlowHeight + nextHeight <= availableHeight) {
                     pages.push(emptyPage(nextPageIndex(pages), page));
                     continue;
                 }
-                let fitting = fragmentsFitting(blocks, cursor, blocks.length, remainingHeight);
+                let fitting = fragmentsFitting(blocks, cursor, end, remainingHeight);
                 if (fitting === remainingFragments) {
-                    placeFragments(blocks, cursor, blocks.length, current, availableHeight);
-                    cursor = blocks.length;
+                    placeFragments(blocks, cursor, end, current, availableHeight);
+                    cursor = end;
+                    remainingFlowHeight = 0;
                     continue;
                 }
                 if (0 === fitting) {
@@ -13195,18 +13196,19 @@
                     continue;
                 }
                 fitting = Math.max(1, fitting);
+                remainingFlowHeight -= fragmentHeight(blocks, cursor, cursor + fitting);
                 placeFragments(blocks, cursor, cursor + fitting, current, availableHeight);
                 cursor += fitting;
-                if (cursor < blocks.length) pages.push(emptyPage(nextPageIndex(pages), page));
+                if (cursor < end) pages.push(emptyPage(nextPageIndex(pages), page));
             }
             if (last.breakAfter && hasMoreBlocks) pages.push(emptyPage(nextPageIndex(pages), page));
         }
-        function nextBlockPreviewHeight(blocks, currentPage, defaultPage, pageStyles) {
-            const first = blocks[0];
+        function nextBlockPreviewHeight(blocks, start, currentPage, defaultPage, pageStyles) {
+            const first = blocks[start];
             if (!first || first.breakBefore) return 0;
             if (!pageMetricsEqual(currentPage, pageMetricsForBlock(first, defaultPage, pageStyles))) return 0;
             const count = Math.min(2, first.flowCount ?? 1);
-            return fragmentHeight(blocks, 0, count);
+            return fragmentHeight(blocks, start, Math.min(blocks.length, start + count));
         }
         function fragmentsFitting(blocks, start, end, availableHeight) {
             let used = 0;
@@ -13274,13 +13276,13 @@
                 const count = block.flowCount;
                 const repeatHeaderCount = block.repeatHeaderCount;
                 const repeatHeaderHeight = block.repeatHeaderHeight;
-                const flow = blocks.slice(index, index + count);
-                if (flow.length !== count) throw kernelError('office.kernel.flow_sequence_invalid', 'A layout flow must contain its declared number of fragments.');
-                flow.forEach((fragment, flowIndex)=>{
+                if (index + count > blocks.length) throw kernelError('office.kernel.flow_sequence_invalid', 'A layout flow must contain its declared number of fragments.');
+                for(let flowIndex = 0; flowIndex < count; flowIndex += 1){
+                    const fragment = blocks[index + flowIndex];
                     if (fragment.flowId !== block.flowId || fragment.flowIndex !== flowIndex || fragment.flowCount !== count || fragment.minimumFragmentsPerPage !== block.minimumFragmentsPerPage || fragment.repeatHeaderCount !== repeatHeaderCount || fragment.repeatHeaderHeight !== repeatHeaderHeight || fragment.pageStyleId !== block.pageStyleId) throw kernelError('office.kernel.flow_sequence_invalid', 'Layout flow fragments must be consecutive and consistently indexed.');
                     if (flowIndex > 0 && fragment.breakBefore) throw kernelError('office.kernel.flow_break_invalid', 'Only the first flow fragment may request breakBefore.');
                     if (flowIndex + 1 < count && fragment.breakAfter) throw kernelError('office.kernel.flow_break_invalid', 'Only the last flow fragment may request breakAfter.');
-                });
+                }
                 index += count;
             }
         }

package/dist/react.d.ts

@@ -8,13 +8,19 @@ import type { SpreadsheetEditorProps as InternalSpreadsheetEditorProps } from '.
 import type { WorkOfficeFileAction } from './internal/features/work/editors/work-office-chrome';
 import { type OfficeSurfaceProps, type OfficeTheme } from './office-surface';
 export type OfficeEditorKind = 'document' | 'markdown' | 'spreadsheet' | 'presentation' | 'pdf';
+export interface OfficeEditorPreloadOptions {
+    /** Overrides the packaged PDFium asset when preloading the PDF runtime. */
+    pdfWasmUrl?: string;
+    /** Also fetches PDFium WebAssembly. Disabled unless explicitly enabled. */
+    preloadRuntimeAssets?: boolean;
+}
 /**
  * Starts loading one editor without mounting it.
  *
  * Call this from an intent signal such as hover or keyboard focus to keep the
  * initial application bundle small without adding latency to editor opening.
  */
-export declare function preloadOfficeEditor(kind: OfficeEditorKind): Promise<void>;
+export declare function preloadOfficeEditor(kind: OfficeEditorKind, options?: OfficeEditorPreloadOptions): Promise<void>;
 export declare const defaultPdfiumWasmUrl: string;
 export declare const defaultOfficeKernelWasmUrl: string;
 export declare const defaultDocumentLayoutFontUrl: string;

package/dist/styles.css

@@ -6912,15 +6912,181 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
 
 .work-editor-loading.ds-state-view {
   background: var(--a3s-bg);
-  flex: 1;
+  flex: 1 1 0;
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
   width: 100%;
   min-width: 0;
-  min-height: 0;
+  max-width: none;
+  height: 100%;
+  min-height: 100%;
   margin: 0;
+  padding: clamp(24px, 5vw, 56px);
+  position: relative;
+  overflow: hidden;
+}
+
+.work-editor-loading.ds-state-view .ds-state-view-icon {
+  background: none;
+  border-radius: 22px;
+  width: 72px;
+  height: 72px;
+  margin-bottom: 16px;
+}
+
+.work-editor-loading-visual {
+  isolation: isolate;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  display: grid;
+  position: relative;
+}
+
+.work-editor-loading-focus {
+  z-index: -1;
+  background: color-mix(in srgb, var(--a3s-blue) 10%, var(--a3s-panel));
+  opacity: .44;
+  border-radius: 18px;
+  animation: 1.8s ease-in-out infinite work-editor-loading-focus;
+  position: absolute;
+  inset: 5px;
+}
+
+.work-editor-loading-page {
+  border: 1px solid color-mix(in srgb, var(--a3s-blue) 24%, var(--a3s-line));
+  background: var(--a3s-panel);
+  width: 32px;
+  height: 42px;
+  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--a3s-blue) 70%, black);
+  border-radius: 7px;
+  flex-direction: column;
+  gap: 5px;
+  padding: 11px 7px 8px;
+  animation: 1.8s cubic-bezier(.16, 1, .3, 1) infinite work-editor-loading-page;
+  display: flex;
+  position: relative;
+}
+
+.work-editor-loading-page:after {
+  border-top: 1px solid color-mix(in srgb, var(--a3s-blue) 48%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--a3s-blue) 48%, transparent);
+  content: "";
+  border-radius: 0 2px 0 0;
+  width: 5px;
+  height: 5px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.work-editor-loading-line {
+  background: color-mix(in srgb, var(--a3s-ink) 36%, transparent);
+  transform-origin: 0;
+  border-radius: 2px;
+  flex: 0 0 2px;
+  width: 100%;
+  height: 2px;
+  animation: 1.8s cubic-bezier(.16, 1, .3, 1) infinite work-editor-loading-line;
+  display: block;
+}
+
+.work-editor-loading-line--accent {
+  background: var(--a3s-blue);
+  width: 68%;
+  animation-delay: -120ms;
+}
+
+.work-editor-loading-line--short {
+  width: 76%;
+  animation-delay: .12s;
 }
 
 .work-editor-loading.ds-state-view h2 {
+  letter-spacing: -.01em;
+  text-wrap: balance;
+  max-width: min(360px, 100%);
   font-size: 13px;
+  font-weight: 650;
+}
+
+@keyframes work-editor-loading-focus {
+  0%, 100% {
+    opacity: .34;
+    transform: scale(.88);
+  }
+
+  48% {
+    opacity: .72;
+    transform: scale(1);
+  }
+}
+
+@keyframes work-editor-loading-page {
+  0%, 100% {
+    box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--a3s-blue) 56%, black);
+    transform: translateY(1px);
+  }
+
+  48% {
+    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--a3s-blue) 72%, black);
+    transform: translateY(-1px);
+  }
+}
+
+@keyframes work-editor-loading-line {
+  0%, 12% {
+    opacity: .38;
+    transform: scaleX(.28);
+  }
+
+  44%, 72% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  100% {
+    opacity: .62;
+    transform: scaleX(.78);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .work-editor-loading-focus, .work-editor-loading-page, .work-editor-loading-line {
+    animation: none;
+  }
+
+  .work-editor-loading-focus {
+    opacity: .56;
+    transform: none;
+  }
+
+  .work-editor-loading-line {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .work-editor-loading-focus {
+    background: canvas;
+    outline: 1px solid highlight;
+  }
+
+  .work-editor-loading-page {
+    box-shadow: none;
+    background: canvas;
+    border-color: canvastext;
+  }
+
+  .work-editor-loading-line {
+    background: canvastext;
+  }
+
+  .work-editor-loading-line--accent {
+    background: highlight;
+  }
 }
 
 .work-version-history {
@@ -10727,6 +10893,10 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   table-layout: auto;
 }
 
+.work-document-page .tiptap table[data-office-table-layout="autofit"][data-office-table-width-type="auto"] col, .work-document-page .tiptap table[data-office-table-layout="contents"] col {
+  width: auto !important;
+}
+
 .work-document-page .tiptap table[data-office-table-layout="fixed"] {
   table-layout: fixed;
 }
@@ -11129,13 +11299,29 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
 }
 
 .work-document-page .tiptap > .work-document-section {
-  column-count: var(--work-document-column-count, 1);
   column-gap: var(--work-document-column-gap, 12mm);
   column-rule: var(--work-document-column-rule, none);
   min-height: 120px;
   position: relative;
 }
 
+.work-document-page .tiptap > .work-document-section:not([data-section-column-count="1"]) {
+  column-count: var(--work-document-column-count);
+}
+
+.work-document-page .tiptap .work-document-chunk {
+  width: 100%;
+  display: flow-root;
+}
+
+.work-document-page .tiptap .work-document-chunk.placeholder {
+  box-sizing: border-box;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  overflow: hidden;
+}
+
 .work-document-page .tiptap > .work-document-section:first-child {
   min-height: 760px;
 }
@@ -11249,6 +11435,10 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   table-layout: auto;
 }
 
+.work-document-preview-page table[data-office-table-layout="autofit"][data-office-table-width-type="auto"] col, .work-document-print-body table[data-office-table-layout="autofit"][data-office-table-width-type="auto"] col, .work-document-preview-page table[data-office-table-layout="contents"] col, .work-document-print-body table[data-office-table-layout="contents"] col {
+  width: auto !important;
+}
+
 .work-document-preview-page table[data-office-table-layout="fixed"], .work-document-print-body table[data-office-table-layout="fixed"] {
   table-layout: fixed;
   width: auto;
@@ -14820,6 +15010,253 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   color: currentColor;
 }
 
+.work-spreadsheet-border-split-root {
+  border-radius: 6px;
+  flex: none;
+  align-items: stretch;
+  height: 29px;
+  display: inline-flex;
+}
+
+.work-office-ribbon .work-office-toolbar .work-spreadsheet-border-primary, .work-office-ribbon .work-office-toolbar .work-spreadsheet-border-disclosure {
+  border-radius: 0;
+  height: 29px;
+  padding: 0;
+}
+
+.work-office-ribbon .work-office-toolbar .work-spreadsheet-border-primary {
+  border-radius: 6px 0 0 6px;
+  width: 29px;
+  min-width: 29px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-spreadsheet-border-disclosure {
+  border-left: 1px solid color-mix(in srgb, var(--a3s-line) 72%, transparent);
+  border-radius: 0 6px 6px 0;
+  width: 16px;
+  min-width: 16px;
+}
+
+.work-spreadsheet-border-disclosure svg {
+  transition: transform .12s;
+}
+
+.work-spreadsheet-border-disclosure[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.work-spreadsheet-border-primary:focus-visible, .work-spreadsheet-border-disclosure:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--work-spreadsheet-accent);
+  outline: 0;
+}
+
+.work-spreadsheet-border-panel {
+  --work-office-menu-accent: var(--work-office-control-accent, #159469);
+  width: min(292px, 100vw - 32px);
+  padding: 8px;
+}
+
+.work-spreadsheet-border-section-label {
+  color: var(--a3s-faint);
+  padding: 2px 6px 7px;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-border-targets {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px;
+  display: grid;
+}
+
+.work-spreadsheet-border-targets > button {
+  min-width: 0;
+  min-height: 32px;
+  color: var(--a3s-muted);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  grid-template-columns: 22px minmax(0, 1fr);
+  align-items: center;
+  gap: 7px;
+  padding: 4px 7px;
+  display: grid;
+}
+
+.work-spreadsheet-border-targets > button:hover:not(:disabled), .work-spreadsheet-border-targets > button:focus-visible, .work-spreadsheet-border-targets > button[aria-checked="true"] {
+  background: color-mix(in srgb,
+    var(--work-office-menu-accent) 10%,
+    var(--a3s-panel));
+  color: var(--a3s-ink);
+  outline: 0;
+}
+
+.work-spreadsheet-border-targets > button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--work-office-menu-accent);
+}
+
+.work-spreadsheet-border-targets > button:disabled {
+  cursor: not-allowed;
+  opacity: .4;
+}
+
+.work-spreadsheet-border-targets > button > span:last-child {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  overflow: hidden;
+}
+
+.work-spreadsheet-border-glyph {
+  border: 1px solid color-mix(in srgb, currentcolor 34%, transparent);
+  width: 17px;
+  height: 17px;
+  color: var(--work-office-menu-accent, var(--work-spreadsheet-accent));
+  flex: 0 0 17px;
+  display: block;
+  position: relative;
+}
+
+.work-spreadsheet-border-glyph:before, .work-spreadsheet-border-glyph:after {
+  content: "";
+  position: absolute;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="top"] {
+  border-top: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="bottom"] {
+  border-bottom: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="left"] {
+  border-left: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="right"] {
+  border-right: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="outside"], .work-spreadsheet-border-glyph[data-border-target="all"] {
+  border: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="inside"]:before, .work-spreadsheet-border-glyph[data-border-target="all"]:before, .work-spreadsheet-border-glyph[data-border-target="vertical"]:before {
+  border-left: 1px solid;
+  top: 1px;
+  bottom: 1px;
+  left: 7px;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="inside"]:after, .work-spreadsheet-border-glyph[data-border-target="all"]:after, .work-spreadsheet-border-glyph[data-border-target="horizontal"]:after {
+  border-top: 1px solid;
+  top: 7px;
+  left: 1px;
+  right: 1px;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="none"] {
+  border-style: dashed;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="none"]:before, .work-spreadsheet-border-glyph[data-border-target="diagonal"]:before {
+  border-top: 1px solid;
+  top: 7px;
+  left: -1px;
+  right: -1px;
+  transform: rotate(-45deg);
+}
+
+.work-spreadsheet-border-glyph[data-border-target="none"]:after {
+  border-top: 1px solid;
+  top: 7px;
+  left: -1px;
+  right: -1px;
+  transform: rotate(45deg);
+}
+
+.work-spreadsheet-border-settings {
+  border-top: 1px solid var(--a3s-line);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  margin-top: 8px;
+  padding: 9px 6px 2px;
+  display: grid;
+}
+
+.work-spreadsheet-border-settings > label {
+  min-width: 0;
+  color: var(--a3s-faint);
+  gap: 5px;
+  font-size: 10px;
+  display: grid;
+}
+
+.work-spreadsheet-border-settings select, .work-spreadsheet-border-color-control {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  width: 100%;
+  min-width: 0;
+  height: 30px;
+  color: var(--a3s-ink);
+  font: inherit;
+  border-radius: 6px;
+}
+
+.work-spreadsheet-border-settings select {
+  padding-inline: 7px;
+}
+
+.work-spreadsheet-border-color-control {
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 5px;
+  padding: 0 6px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-border-color-control input {
+  cursor: pointer;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.work-spreadsheet-border-color-swatch {
+  border: 1px solid var(--a3s-line-strong);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+}
+
+.work-spreadsheet-border-color-control output {
+  color: var(--a3s-muted);
+  text-overflow: ellipsis;
+  font-size: 9px;
+  overflow: hidden;
+}
+
+@media (width <= 480px) {
+  .work-spreadsheet-border-panel {
+    width: min(276px, 100vw - 24px);
+  }
+
+  .work-spreadsheet-border-targets > button {
+    min-height: 44px;
+  }
+
+  .work-spreadsheet-border-settings {
+    grid-template-columns: 1fr;
+  }
+}
+
 .work-spreadsheet-sheet-list {
   min-width: 220px;
 }