gridjs-spreadsheet 26.8.0 → 26.8.1

package/{9667af4182f3e39eec9844c10e1a6eb8.svg → 544d1ebaa4cddf566b9f3c24186b9873.svg}

@@ -1194,4 +1194,29 @@
     <rect x="24" y="17" width="6" height="20" fill="#FFFFFF" id="redact-plus-v" />
   </g>
 </g>
-   &#10;    </svg>
+   &#10;
+<g id="RedactionSearchResult" transform="matrix(0.3033,0,0,0.3033,180,126)">
+
+  
+  
+  <!-- Unified blue-grey rounded background to indicate 'search' context -->
+  <rect x="4" y="4" width="54" height="54" fill="#56754B" rx="4" ry="4" id="bg-rect" />
+  <!-- Search results list: two white horizontal lines representing the searched content -->
+  <rect x="10" y="10" width="14" height="3" fill="#FFFFFF" rx="1.5" id="search-line-1" />
+  <rect x="10" y="16" width="14" height="3" fill="#FFFFFF" rx="1.5" id="search-line-2" />
+  
+  <!-- Magnifying glass: represents the 'search' action, positioned on the right side of the list -->
+  <circle cx="35" cy="18" r="7" fill="none" stroke="#FFFFFF" stroke-width="2.5" id="search-glass" />
+  <line x1="42" y1="23" x2="47" y2="28" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" id="search-handle" />
+
+   <g transform="translate(27, 27) scale(0.66) translate(-32, -16)">
+    <rect x="9" y="9" width="36" height="36" fill="#E53935" rx="4" ry="4" id="redact-rect" />
+    <line x1="9" y1="9" x2="45" y2="45" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" id="redact-line" />
+    <rect x="17" y="24" width="20" height="6" fill="#FFFFFF" id="redact-plus-h" />
+    <rect x="24" y="17" width="6" height="20" fill="#FFFFFF" id="redact-plus-v" />
+  </g>
+
+  
+</g>  &#10;
+
+   </svg>

package/angular.d.ts

@@ -8,7 +8,7 @@ import type {
   SimpleChanges,
 } from '@angular/core';
 import type * as i0 from '@angular/core';
-import type Spreadsheet from 'gridjs-spreadsheet';
+import type Spreadsheet, { SemanticAutomationOptions } from 'gridjs-spreadsheet';
 import type { GridJsAdapter } from './shared';
 
 export declare class GridJsSpreadsheetComponent implements AfterViewInit, OnChanges, OnDestroy {
@@ -21,6 +21,7 @@ export declare class GridJsSpreadsheetComponent implements AfterViewInit, OnChan
   height: string;
   showToolbar: boolean;
   showContextmenu: boolean;
+  semanticAutomation: SemanticAutomationOptions | null;
   ready: EventEmitter<{ instance: Spreadsheet; adapter: GridJsAdapter }>;
   change: EventEmitter<any[]>;
   error: EventEmitter<any>;
@@ -47,6 +48,7 @@ export declare class GridJsSpreadsheetComponent implements AfterViewInit, OnChan
       height: { alias: 'height'; required: false };
       showToolbar: { alias: 'showToolbar'; required: false };
       showContextmenu: { alias: 'showContextmenu'; required: false };
+      semanticAutomation: { alias: 'semanticAutomation'; required: false };
     },
     {
       ready: 'ready';

package/angular.js

@@ -29,6 +29,7 @@ export class GridJsSpreadsheetComponent {
   height = 'calc(100vh - 96px)';
   showToolbar = true;
   showContextmenu = true;
+  semanticAutomation = null;
 
   ready = new EventEmitter();
   change = new EventEmitter();
@@ -80,6 +81,7 @@ export class GridJsSpreadsheetComponent {
       this.locale,
       String(this.showToolbar),
       String(this.showContextmenu),
+      JSON.stringify(this.semanticAutomation || null),
     ].join('|');
 
     if (mountKey === this.lastMountKey && this.adapter) return;
@@ -100,6 +102,7 @@ export class GridJsSpreadsheetComponent {
         token: this.token,
         showToolbar: this.showToolbar,
         showContextmenu: this.showContextmenu,
+        semanticAutomation: this.semanticAutomation,
         callbacks: {
           ready: (instance, activeAdapter) => this.zone.run(() => this.ready.emit({ instance, adapter: activeAdapter })),
           change: (...args) => this.zone.run(() => this.change.emit(args)),
@@ -154,6 +157,7 @@ GridJsSpreadsheetComponent.ɵcmp = /* @__PURE__ */ i0.ɵɵngDeclareComponent({
     height: 'height',
     showToolbar: 'showToolbar',
     showContextmenu: 'showContextmenu',
+    semanticAutomation: 'semanticAutomation',
   },
   outputs: {
     ready: 'ready',

package/index.d.ts

@@ -69,6 +69,123 @@ declare module 'gridjs-spreadsheet' {
      * @returns Promise<string> for the new reason, or null to cancel
      */
     onRedactionAddReason?: (existingReasons: string[]) => Promise<string | null>;
+    /** Versioned Object API for AI Agent and automated tests. Disabled by default. */
+    semanticAutomation?: SemanticAutomationOptions;
+  }
+
+  export interface SemanticAutomationOptions {
+    enabled?: boolean;
+    instanceId?: string;
+  }
+
+  export type SemanticRuntimePhase =
+    | 'disabled'
+    | 'initializing'
+    | 'loading'
+    | 'rendering'
+    | 'ready'
+    | 'updating'
+    | 'failed'
+    | 'destroyed';
+
+  export interface SemanticRuntimeState {
+    contractVersion: string;
+    instanceId: string;
+    instanceGeneration: string;
+    workbookSessionId: string | null;
+    phase: SemanticRuntimePhase;
+    revision: number;
+    failure: { code: string; message: string; retryable: boolean } | null;
+    activeOperationIds: string[];
+    lastOperationId: string | null;
+    activeSheetId: string | null;
+  }
+
+  export interface SemanticOperation {
+    operationId: string;
+    kind: string;
+    action: string;
+    instanceGeneration: string;
+    workbookSessionId: string | null;
+    parentOperationId: string | null;
+    phase: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+    progress: number;
+    revision: number | null;
+    result: Record<string, any> | null;
+    error: { code: string; message: string; retryable: boolean } | null;
+  }
+
+  export interface SemanticStateRequest {
+    kind: 'workbook' | 'sheets' | 'sheet' | 'cell' | 'range' | 'selection';
+    sheetId?: string;
+    address?: string;
+    range?: string;
+    offset?: number;
+    limit?: number;
+  }
+
+  export interface SemanticStateSnapshot {
+    contractVersion: string;
+    instanceId: string;
+    instanceGeneration: string;
+    workbookSessionId: string;
+    revision: number;
+    target: Record<string, any>;
+    state: Record<string, any>;
+  }
+
+  export type SemanticCellValue =
+    | { kind: 'blank' }
+    | { kind: 'text'; value: string }
+    | { kind: 'number'; value: number }
+    | { kind: 'boolean'; value: boolean };
+
+  export type SemanticEditableCellValue =
+    | { kind: 'blank' }
+    | { kind: 'text'; value: string };
+
+  export type SemanticActionRequest =
+    | { action: 'sheet.activate'; parameters: { sheetId: string }; invocationId?: string }
+    | { action: 'cell.activate'; parameters: { sheetId: string; address: string }; invocationId?: string }
+    | { action: 'range.select'; parameters: { sheetId: string; address?: string; range?: string }; invocationId?: string }
+    | { action: 'cell.setValue'; parameters: { sheetId: string; address: string; value: SemanticEditableCellValue }; invocationId?: string };
+
+  export interface SemanticActionReceipt {
+    operationId: string;
+    action: string;
+    instanceGeneration: string;
+    workbookSessionId: string;
+    phase: 'running';
+  }
+
+  export interface SemanticFacade {
+    describeContract(): Record<string, any>;
+    getCapabilities(): Record<string, any>;
+    getContract(): Record<string, any>;
+    getRuntimeState(): SemanticRuntimeState;
+    waitForRuntime(options?: { phase?: SemanticRuntimePhase; timeoutMs?: number; signal?: AbortSignal }): Promise<SemanticRuntimeState>;
+    subscribe(options: { event?: 'runtimechange' | 'operationchange' | 'sheetchange' | 'selectionchange' | 'cellchange' | '*'; fromRevision?: number; onEvent: (event: Record<string, any>) => void }): { unsubscribe(): void };
+    getOperation(operationId: string): SemanticOperation;
+    listOperations(): SemanticOperation[];
+    waitForOperation(options: { operationId: string; timeoutMs?: number; signal?: AbortSignal }): Promise<SemanticOperation>;
+    getState(request: SemanticStateRequest): SemanticStateSnapshot;
+    query(request: SemanticStateRequest): SemanticStateSnapshot;
+    getAvailableActions(request?: Pick<SemanticStateRequest, 'kind' | 'sheetId'>): ReadonlyArray<{ action: string; capability: string }>;
+    perform(request: SemanticActionRequest): SemanticActionReceipt;
+  }
+
+  export interface SemanticInstanceDescriptor {
+    instanceId: string;
+    instanceGeneration: string;
+    contractVersion: string;
+    runtimePhase: SemanticRuntimePhase;
+    workbookSessionId: string | null;
+  }
+
+  export interface GridJSSemanticAutomationRegistry {
+    readonly version: '1.0.0';
+    listInstances(): SemanticInstanceDescriptor[];
+    getInstance(instanceId: string): SemanticFacade | null;
   }
 
   export type CELL_SELECTED = 'cell-selected';
@@ -92,6 +209,7 @@ declare module 'gridjs-spreadsheet' {
   export type REDACTION_UPDATED = 'redaction-updated';
   export type REDACTION_REASON_INSERTED = 'redactionReason-inserted';
   export type REDACTION_TRANSPARENCY_TOGGLED = 'redactionTransparency-toggled';
+  export type SEARCH_REDACTED = 'search-redacted';
   export type CUSTOM_BUTTON = 'custom-button';
   export type UPDATE_SERVER_ERROR = 'updateServerError';
   export type UPDATE_CELL_ERROR = 'updateCellError';
@@ -279,6 +397,10 @@ declare module 'gridjs-spreadsheet' {
       envt: REDACTION_TRANSPARENCY_TOGGLED,
       callback: (isTransparent: boolean) => void
     ): void;
+    (
+      envt: SEARCH_REDACTED,
+      callback: (sheetNames: string[], detail: { keywords: string, isCaseSensitive: boolean, matchWholeCell: boolean, reason: string, color: string, baseId: string }) => void
+    ): void;
     (
       envt: CUSTOM_BUTTON,
       callback: (tag: string, button: CustomToolbarButton) => void
@@ -366,6 +488,8 @@ declare module 'gridjs-spreadsheet' {
     constructor(container: string | HTMLElement, opts?: Options);
     /** Build version string (injected at compile time) */
     readonly version: string;
+    /** Public Semantic Automation facade. */
+    semantic: SemanticFacade;
     on: SpreadsheetEventHandler;
     /**
      * retrieve cell
@@ -548,6 +672,7 @@ declare module 'gridjs-spreadsheet' {
   global {
     interface Window {
       x_spreadsheet(container: string | HTMLElement, opts?: Options): Spreadsheet; 
+      GridJSSemanticAutomation?: GridJSSemanticAutomationRegistry;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "26.8.0",
+  "version": "26.8.1",
   "description": "Lightweight, high-performance JavaScript spreadsheet component for building online Excel editors and web spreadsheet apps. Supports React, Vue 3, and Angular with TypeScript declarations. Features include formulas, charts, formatting, data validation, copy/paste from Excel, and server-side integration.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/react.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type Spreadsheet from 'gridjs-spreadsheet';
+import type Spreadsheet, { SemanticAutomationOptions } from 'gridjs-spreadsheet';
 import type { GridJsAdapter } from './shared';
 
 export interface GridJsSpreadsheetProps {
@@ -12,6 +12,7 @@ export interface GridJsSpreadsheetProps {
   height?: string | number;
   showToolbar?: boolean;
   showContextmenu?: boolean;
+  semanticAutomation?: SemanticAutomationOptions;
   className?: string;
   style?: CSSProperties;
   onReady?: (instance: Spreadsheet, adapter: GridJsAdapter) => void;

package/react.js

@@ -22,6 +22,7 @@ export function GridJsSpreadsheet({
   height = 'calc(100vh - 96px)',
   showToolbar = true,
   showContextmenu = true,
+  semanticAutomation,
   className = 'gridjs-react-host',
   style,
   onReady,
@@ -54,6 +55,7 @@ export function GridJsSpreadsheet({
         token,
         showToolbar,
         showContextmenu,
+        semanticAutomation,
         callbacks: {
           ready: onReady,
           change: onChange,
@@ -88,7 +90,7 @@ export function GridJsSpreadsheet({
       adapterRef.current = null;
       if (hostRef.current) hostRef.current.innerHTML = '';
     };
-  }, [apiBase, dataKey, loader, mode, locale, token, showToolbar, showContextmenu]);
+  }, [apiBase, dataKey, loader, mode, locale, token, showToolbar, showContextmenu, semanticAutomation]);
 
   useEffect(() => {
     if (adapterRef.current && token) {

package/readme.md

@@ -393,6 +393,12 @@ Modern browsers — Chrome, Firefox, Safari, Edge.
 
 ## Version History
 
+<details>
+<summary><strong>v26.8.1</strong> — Support redaction for search matches</summary>
+
+- Support redaction for search matches
+</details>
+
 <details>
 <summary><strong>v26.8</strong> — Support redaction for entire sheet</summary>
 

package/shared.d.ts

@@ -1,4 +1,4 @@
-import type Spreadsheet from 'gridjs-spreadsheet';
+import type Spreadsheet, { SemanticAutomationOptions } from 'gridjs-spreadsheet';
 
 export interface GridJsEndpoints {
   updateCell: string;
@@ -48,6 +48,7 @@ export interface GridJsAdapterConfig {
   fileName?: string;
   basicZorder?: number;
   view?: Record<string, any>;
+  semanticAutomation?: SemanticAutomationOptions;
   callbacks?: GridJsAdapterCallbacks;
   dependencies?: GridJsAdapterDependencies;
 }

package/shared.js

@@ -119,6 +119,7 @@ function buildSpreadsheetOptions(config, endpoints) {
     ...(config.token ? { token: config.token } : {}),
     ...(config.loadingGif ? { loadingGif: config.loadingGif } : {}),
     ...(config.view ? { view: config.view } : {}),
+    ...(config.semanticAutomation ? { semanticAutomation: config.semanticAutomation } : {}),
   };
 }
 

package/vue.d.ts

@@ -1,5 +1,5 @@
 import type { DefineComponent } from 'vue';
-import type Spreadsheet from 'gridjs-spreadsheet';
+import type Spreadsheet, { SemanticAutomationOptions } from 'gridjs-spreadsheet';
 import type { GridJsAdapter } from './shared';
 
 export interface GridJsSpreadsheetProps {
@@ -12,6 +12,7 @@ export interface GridJsSpreadsheetProps {
   height?: string | number;
   showToolbar?: boolean;
   showContextmenu?: boolean;
+  semanticAutomation?: SemanticAutomationOptions;
 }
 
 export declare const GridJsSpreadsheet: DefineComponent<GridJsSpreadsheetProps, {}, any>;

package/vue.js

@@ -30,6 +30,7 @@ export const GridJsSpreadsheet = defineComponent({
     height: { type: [String, Number], default: 'calc(100vh - 96px)' },
     showToolbar: { type: Boolean, default: true },
     showContextmenu: { type: Boolean, default: true },
+    semanticAutomation: { type: Object, default: null },
   },
   emits: [
     'ready',
@@ -59,6 +60,7 @@ export const GridJsSpreadsheet = defineComponent({
         token: props.token,
         showToolbar: props.showToolbar,
         showContextmenu: props.showContextmenu,
+        semanticAutomation: props.semanticAutomation,
         callbacks: {
           ready: (instance, activeAdapter) => emit('ready', instance, activeAdapter),
           change: (...args) => emit('change', ...args),
@@ -84,6 +86,7 @@ export const GridJsSpreadsheet = defineComponent({
         props.locale,
         props.showToolbar,
         props.showContextmenu,
+        props.semanticAutomation,
       ],
       () => {
         mountGridJs().catch(error => emit('error', { type: 'mountError', error }));

package/xspreadsheet.css

@@ -21,6 +21,7 @@ body {
 .x-spreadsheet-workspace {
   display: grid;
   width: 100%;
+  min-height: 0;
   grid-template-columns: minmax(0, 1fr) 0;
   align-items: stretch;
   overflow: hidden;
@@ -30,6 +31,7 @@ body {
 }
 .x-spreadsheet-workspace-sheet-pane {
   min-width: 0;
+  min-height: 0;
   overflow: hidden;
 }
 .x-spreadsheet-workspace-sheet-pane > .x-spreadsheet-bottombar {
@@ -42,6 +44,7 @@ body {
   display: flex;
   width: 100%;
   min-width: 0;
+  min-height: 0;
   flex-direction: column;
   align-self: stretch;
   box-sizing: border-box;
@@ -65,6 +68,7 @@ body {
 }
 .x-spreadsheet-format-panel-header {
   display: flex;
+  flex: 0 0 52px;
   min-height: 52px;
   align-items: center;
   justify-content: space-between;
@@ -112,6 +116,7 @@ body {
 }
 .x-spreadsheet-format-panel-tabs {
   display: flex;
+  flex: 0 0 56px;
   min-height: 56px;
   align-items: stretch;
   justify-content: center;
@@ -154,11 +159,37 @@ body {
   background: #2f7d50;
 }
 .x-spreadsheet-format-panel-body {
-  flex: 1;
+  flex: 1 1 0;
+  height: 0;
+  min-height: 0;
   box-sizing: border-box;
-  overflow: auto;
+  padding-bottom: 24px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-bottom: 24px;
+  scrollbar-color: #a7adb5 #f3f4f6;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
   background: #fff;
 }
+.x-spreadsheet-format-panel-body::-webkit-scrollbar {
+  width: 10px;
+}
+.x-spreadsheet-format-panel-body::-webkit-scrollbar-track {
+  background: #f3f4f6;
+}
+.x-spreadsheet-format-panel-body::-webkit-scrollbar-thumb {
+  background: #a7adb5;
+  background-clip: padding-box;
+  border: 2px solid #f3f4f6;
+  border-radius: 999px;
+}
+.x-spreadsheet-format-panel-body::-webkit-scrollbar-thumb:hover {
+  background: #858d97;
+  background-clip: padding-box;
+}
 .x-spreadsheet-format-panel-empty-title {
   margin: 24px 20px 6px;
   font-size: 14px;
@@ -306,6 +337,123 @@ body {
   margin: 14px 0;
   background: #d6d9dd;
 }
+.x-spreadsheet-format-panel-fill-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.x-spreadsheet-format-panel-select {
+  width: 100%;
+  min-width: 0;
+  height: 36px;
+  box-sizing: border-box;
+  padding: 0 30px 0 10px;
+  color: #27313d;
+  font: inherit;
+  font-size: 13px;
+  background: #fff;
+  border: 1px solid #9aa1a9;
+  border-radius: 5px;
+}
+.x-spreadsheet-format-panel-select:hover:not(:disabled),
+.x-spreadsheet-format-panel-select:focus-visible {
+  border-color: #217346;
+  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.14);
+  outline: none;
+}
+.x-spreadsheet-format-panel-select:disabled {
+  color: #89939f;
+  background: #f1f3f5;
+  border-color: #d4d8dd;
+  cursor: not-allowed;
+}
+.x-spreadsheet-format-panel-texture-trigger {
+  display: inline-flex;
+  width: 82px;
+  height: 42px;
+  align-items: center;
+  justify-self: end;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 4px 10px 4px 5px;
+  color: #27313d;
+  background: #fff;
+  border: 1px solid #8f969e;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-texture-trigger:hover:not(:disabled),
+.x-spreadsheet-format-panel-texture-trigger:focus-visible {
+  border-color: #217346;
+  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.14);
+  outline: none;
+}
+.x-spreadsheet-format-panel-texture-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+.x-spreadsheet-format-panel-texture-trigger-preview,
+.x-spreadsheet-format-panel-texture-preview {
+  display: block;
+  flex: 0 0 auto;
+  background-image: url(d022c86edc5b2d12a8d3d4890df3bebb.jpg);
+  background-repeat: no-repeat;
+  background-size: 500% 500%;
+}
+.x-spreadsheet-format-panel-texture-trigger-preview {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #c5c9ce;
+}
+.x-spreadsheet-format-panel-texture-trigger-arrow {
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-2px) rotate(45deg);
+}
+.x-spreadsheet-format-panel-texture-gallery {
+  display: none;
+  grid-template-columns: repeat(5, 64px);
+  gap: 4px;
+  box-sizing: border-box;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #8f969e;
+  border-radius: 6px;
+  box-shadow: 0 10px 28px rgba(31, 42, 55, 0.24);
+}
+.x-spreadsheet-format-panel-texture-option {
+  width: 64px;
+  height: 64px;
+  box-sizing: border-box;
+  padding: 2px;
+  background: #fff;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-texture-option:hover,
+.x-spreadsheet-format-panel-texture-option:focus-visible {
+  border-color: #66707a;
+  outline: none;
+}
+.x-spreadsheet-format-panel-texture-option.x-spreadsheet-format-panel-texture-option-selected {
+  border-color: #217346;
+  box-shadow: inset 0 0 0 1px #217346;
+}
+.x-spreadsheet-format-panel-texture-preview {
+  width: 58px;
+  height: 58px;
+}
+.x-spreadsheet-format-panel-unsupported-fill {
+  padding: 9px 10px;
+  color: #5f6874;
+  font-size: 12px;
+  line-height: 18px;
+  background: #f6f7f8;
+  border-radius: 4px;
+}
 .x-spreadsheet-format-panel-label {
   min-width: 0;
   color: #374151;
@@ -378,6 +526,69 @@ body {
 .x-spreadsheet-format-panel-color-control {
   justify-self: end;
 }
+.x-spreadsheet-format-panel-transparency-control {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(58px, 1fr) 82px;
+  align-items: center;
+  gap: 8px;
+}
+.x-spreadsheet-format-panel-transparency-range {
+  width: 100%;
+  min-width: 0;
+  accent-color: #217346;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-transparency-range:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.x-spreadsheet-format-panel-percent-control {
+  width: 82px;
+  min-width: 0;
+}
+.x-spreadsheet-format-panel-pattern-label {
+  color: #374151;
+  font-size: 13px;
+  line-height: 18px;
+}
+.x-spreadsheet-format-panel-pattern-gallery {
+  display: grid;
+  grid-template-columns: repeat(6, 34px);
+  gap: 5px;
+}
+.x-spreadsheet-format-panel-pattern-button {
+  display: inline-flex;
+  width: 34px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-pattern-button:hover:not(:disabled),
+.x-spreadsheet-format-panel-pattern-button:focus-visible {
+  border-color: #7c8794;
+  outline: none;
+}
+.x-spreadsheet-format-panel-pattern-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+.x-spreadsheet-format-panel-pattern-button-selected {
+  border-color: #217346;
+  box-shadow: 0 0 0 1px #217346;
+}
+.x-spreadsheet-format-panel-pattern-preview {
+  display: block;
+  width: 30px;
+  height: 24px;
+}
 .x-spreadsheet-format-panel-color-button {
   display: inline-flex;
   width: 72px;
@@ -454,6 +665,9 @@ body {
   .x-spreadsheet-format-panel-color-control {
     justify-self: start;
   }
+  .x-spreadsheet-format-panel-transparency-control {
+    width: 100%;
+  }
   .x-spreadsheet-format-panel-error {
     grid-column: 1;
   }
@@ -2581,11 +2795,27 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(9667af4182f3e39eec9844c10e1a6eb8.svg);
+  background-image: url(544d1ebaa4cddf566b9f3c24186b9873.svg);
   position: absolute;
   width: 262px;
   height: 444px;
   opacity: 0.86;
+  /*
+    // Search & Redact icon (text-based, no sprite dependency)
+    &.searchRedact {
+      background-image: none;
+      width: auto;
+      height: auto;
+      &::before {
+        content: '🔍';
+        font-size: 14px;
+        line-height: 18px;
+        color: #555;
+        display: block;
+        text-align: center;
+      }
+    }
+      */
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img.undo {
   left: 0;
@@ -2717,6 +2947,10 @@ form fieldset select {
   display: block;
   text-align: center;
 }
+.x-spreadsheet-icon .x-spreadsheet-icon-img.searchRedact {
+  left: -180px;
+  top: -126px;
+}
 .x-spreadsheet-icon .x-spreadsheet-icon-img.autofilter {
   left: -90px;
   top: -18px;