@svadmin/ui 0.64.0 → 0.65.1

package/dist/components/VirtualTable.svelte

@@ -1,74 +1,106 @@
 <script lang="ts">
-  /**
-   * VirtualTable — A lightweight virtual scrolling wrapper for large datasets.
-   * Uses IntersectionObserver-based approach instead of a heavy dependency.
-   *
-   * Usage:
-   *   <VirtualTable items={rows} rowHeight={40} containerHeight={500}>
-   *     {#snippet row(item, index)}
-   *       <tr>...</tr>
-   *     {/snippet}
-   *   </VirtualTable>
-   */
   import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
 
-  interface Props<T> {
-    items: T[];
-    /** Estimated row height in pixels */
-    rowHeight?: number;
-    /** Container height in pixels */
-    containerHeight?: number;
-    /** Number of extra rows to render above/below visible area */
+  export interface VirtualTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+  }
+
+  interface Props {
+    items?: Record<string, unknown>[];
+    columns: VirtualTableColumn[];
+    itemHeight?: number;
+    height?: number;
     overscan?: number;
-    /** Row rendering snippet */
-    row: Snippet<[T, number]>;
+    rowKey?: string;
     class?: string;
+    rowSnippet?: Snippet<[Record<string, unknown>, number]>;
   }
 
   let {
-    items,
-    rowHeight = 40,
-    containerHeight = 500,
-    overscan = 5,
-    row,
+    items = [],
+    columns,
+    itemHeight = 44,
+    height = 360,
+    overscan = 4,
+    rowKey = 'id',
     class: className = '',
-  }: Props<unknown> = $props();
+    rowSnippet,
+  }: Props = $props();
 
   let scrollTop = $state(0);
 
-  const visibleRange = $derived.by(() => {
-    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
-    const visibleCount = Math.ceil(containerHeight / rowHeight);
-    const end = Math.min(items.length - 1, start + visibleCount + overscan * 2);
-    return { start, end };
-  });
+  function handleScroll(e: Event) {
+    const target = e.currentTarget as HTMLElement;
+    scrollTop = target.scrollTop;
+  }
 
-  const visibleItems = $derived(
-    items.slice(visibleRange.start, visibleRange.end + 1).map((item, i) => ({
+  const totalHeight = $derived(items.length * itemHeight);
+  const startIndex = $derived(Math.max(0, Math.floor(scrollTop / itemHeight) - overscan));
+  const endIndex = $derived(Math.min(items.length, Math.ceil((scrollTop + height) / itemHeight) + overscan));
+  const visibleSlice = $derived(
+    items.slice(startIndex, endIndex).map((item, idx) => ({
       item,
-      index: visibleRange.start + i,
-      offsetY: (visibleRange.start + i) * rowHeight,
+      index: startIndex + idx,
+      top: (startIndex + idx) * itemHeight,
     }))
   );
-
-  function handleScroll(e: Event) {
-    const target = e.target as HTMLDivElement;
-    scrollTop = target.scrollTop;
-  }
 </script>
 
-<div
-  class="overflow-auto {className}"
-  style="height: {containerHeight}px;"
-  onscroll={handleScroll}
->
-  <table class="w-full relative" style="border-spacing: 0;">
-    <tbody style="display: block;">
-      <tr style="height: {visibleRange.start * rowHeight}px; border: none; padding: 0; display: block;"></tr>
-      {#each visibleItems as { item, index } (index)}
-        {@render row(item, index)}
+<div class={cn('w-full rounded-xl border border-border bg-card shadow-xs overflow-hidden flex flex-col text-xs', className)}>
+  <!-- Sticky Header -->
+  <div class="border-b border-border/80 bg-muted/40 font-semibold text-muted-foreground flex items-center h-10 px-4 select-none shrink-0">
+    {#each columns as col (col.key)}
+      <div
+        style={col.width ? `width: ${col.width}; flex-shrink: 0;` : 'flex: 1; min-width: 0;'}
+        class={cn('truncate px-2', col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left')}
+      >
+        {col.label}
+      </div>
+    {/each}
+  </div>
+
+  <!-- Virtual Scroll Viewport -->
+  <div
+    class="overflow-y-auto relative w-full"
+    style="height: {height}px;"
+    onscroll={handleScroll}
+  >
+    <div style="height: {totalHeight}px; width: 100%; position: relative;">
+      {#each visibleSlice as { item, index, top } (item[rowKey] ?? index)}
+        <div
+          class="absolute left-0 right-0 flex items-center px-4 border-b border-border/40 hover:bg-muted/30 transition-colors"
+          style="top: {top}px; height: {itemHeight}px;"
+        >
+          {#if rowSnippet}
+            {@render rowSnippet(item, index)}
+          {:else}
+            {#each columns as col (col.key)}
+              <div
+                style={col.width ? `width: ${col.width}; flex-shrink: 0;` : 'flex: 1; min-width: 0;'}
+                class={cn('truncate px-2 font-medium text-foreground', col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left')}
+              >
+                {item[col.key] ?? '—'}
+              </div>
+            {/each}
+          {/if}
+        </div>
       {/each}
-      <tr style="height: {Math.max(0, (items.length - visibleRange.end - 1) * rowHeight)}px; border: none; padding: 0; display: block;"></tr>
-    </tbody>
-  </table>
+
+      {#if items.length === 0}
+        <div class="h-32 flex items-center justify-center text-muted-foreground text-xs">
+          No records to display
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Footer Info -->
+  <div class="flex items-center justify-between px-4 py-2 border-t border-border/60 bg-muted/20 text-[11px] text-muted-foreground shrink-0">
+    <span>Total <strong class="text-foreground font-semibold">{items.length}</strong> rows</span>
+    <span>Rendered {visibleSlice.length} in viewport</span>
+  </div>
 </div>

package/dist/components/VirtualTable.svelte.d.ts

@@ -1,27 +1,20 @@
-/**
-   * VirtualTable — A lightweight virtual scrolling wrapper for large datasets.
-   * Uses IntersectionObserver-based approach instead of a heavy dependency.
-   *
-   * Usage:
-   *   <VirtualTable items={rows} rowHeight={40} containerHeight={500}>
-   *     {#snippet row(item, index)}
-   *       <tr>...</tr>
-   *     {/snippet}
-   *   </VirtualTable>
-   */
 import type { Snippet } from 'svelte';
-interface Props<T> {
-    items: T[];
-    /** Estimated row height in pixels */
-    rowHeight?: number;
-    /** Container height in pixels */
-    containerHeight?: number;
-    /** Number of extra rows to render above/below visible area */
+export interface VirtualTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface Props {
+    items?: Record<string, unknown>[];
+    columns: VirtualTableColumn[];
+    itemHeight?: number;
+    height?: number;
     overscan?: number;
-    /** Row rendering snippet */
-    row: Snippet<[T, number]>;
+    rowKey?: string;
     class?: string;
+    rowSnippet?: Snippet<[Record<string, unknown>, number]>;
 }
-declare const VirtualTable: import("svelte").Component<Props<unknown>, {}, "">;
+declare const VirtualTable: import("svelte").Component<Props, {}, "">;
 type VirtualTable = ReturnType<typeof VirtualTable>;
 export default VirtualTable;

package/dist/components/Watermark.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { onMount, onDestroy, type Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+  }
+
+  interface Props {
+    content?: string | string[];
+    image?: string;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    zIndex?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    opacity?: number;
+    font?: WatermarkFont;
+    antiTamper?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    content = 'CONFIDENTIAL',
+    image,
+    width = 120,
+    height = 64,
+    rotate = -22,
+    zIndex = 9,
+    gap = [100, 100],
+    offset = [gap[0] / 2, gap[1] / 2],
+    opacity = 0.12,
+    font = {},
+    antiTamper = true,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let base64Url = $state<string>('');
+  let watermarkRevision = $state(0);
+  let observer: MutationObserver | null = null;
+  let isCleaningUp = false;
+
+  function renderWatermark() {
+    if (typeof window === 'undefined') return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const ratio = window.devicePixelRatio || 1;
+    const [gapX, gapY] = gap;
+    const canvasWidth = (gapX + width) * ratio;
+    const canvasHeight = (gapY + height) * ratio;
+
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    canvas.style.width = `${gapX + width}px`;
+    canvas.style.height = `${gapY + height}px`;
+
+    ctx.scale(ratio, ratio);
+    ctx.translate(offset[0], offset[1]);
+    ctx.rotate((rotate * Math.PI) / 180);
+
+    if (image) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.referrerPolicy = 'no-referrer';
+      img.onload = () => {
+        ctx.globalAlpha = opacity;
+        ctx.drawImage(img, -width / 2, -height / 2, width, height);
+        base64Url = canvas.toDataURL();
+      };
+      img.src = image;
+    } else {
+      const {
+        fontSize = 14,
+        fontFamily = 'sans-serif',
+        fontWeight = 'normal',
+        fontStyle = 'normal',
+        color = 'currentColor',
+      } = font;
+
+      ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+      ctx.fillStyle = color === 'currentColor' ? 'rgba(128, 128, 128, 0.85)' : color;
+      ctx.globalAlpha = opacity;
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+
+      const contents = Array.isArray(content) ? content : [content];
+      const lineHeight = fontSize + 4;
+      const totalHeight = contents.length * lineHeight;
+      const startY = -(totalHeight / 2) + lineHeight / 2;
+
+      contents.forEach((text, i) => {
+        ctx.fillText(text, 0, startY + i * lineHeight);
+      });
+
+      base64Url = canvas.toDataURL();
+    }
+  }
+
+  $effect(() => {
+    // Re-generate watermark when inputs change
+    if (content || image || width || height || rotate || gap || offset || opacity || font) {
+      renderWatermark();
+    }
+  });
+
+  onMount(() => {
+    renderWatermark();
+
+    if (antiTamper && typeof MutationObserver !== 'undefined' && containerEl) {
+      observer = new MutationObserver((mutations) => {
+        if (isCleaningUp) return;
+        for (const mutation of mutations) {
+          if (mutation.type === 'childList' || mutation.type === 'attributes') {
+            watermarkRevision += 1;
+            break;
+          }
+        }
+      });
+
+      observer.observe(containerEl, {
+        attributes: true,
+        subtree: true,
+        childList: true,
+        attributeFilter: ['style', 'class', 'hidden'],
+      });
+    }
+  });
+
+  onDestroy(() => {
+    isCleaningUp = true;
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
+</script>
+
+<div
+  bind:this={containerEl}
+  class={cn('relative overflow-hidden', className)}
+  data-svadmin-watermark-wrapper
+>
+  {#key watermarkRevision}
+    {#if base64Url}
+      <div
+        data-svadmin-watermark
+        class="absolute inset-0 pointer-events-none"
+        style="z-index: {zIndex}; background-image: url('{base64Url}'); background-position: {offset[0]}px {offset[1]}px; background-repeat: repeat;"
+      ></div>
+    {/if}
+  {/key}
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/Watermark.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Snippet } from 'svelte';
+interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+}
+interface Props {
+    content?: string | string[];
+    image?: string;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    zIndex?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    opacity?: number;
+    font?: WatermarkFont;
+    antiTamper?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Watermark: import("svelte").Component<Props, {}, "">;
+type Watermark = ReturnType<typeof Watermark>;
+export default Watermark;

package/dist/index.d.ts

@@ -24,8 +24,6 @@ export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.s
 export { default as CanAccess } from './components/CanAccess.svelte';
 export { default as Can } from './components/CanAccess.svelte';
 export { default as UndoableNotification } from './components/UndoableNotification.svelte';
-export { default as ModalForm } from './components/ModalForm.svelte';
-export { default as DrawerForm } from './components/DrawerForm.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
 export { default as Authenticated } from './components/Authenticated.svelte';
 export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
@@ -58,6 +56,64 @@ export { default as Transfer } from './components/Transfer.svelte';
 export type { TransferItem } from './components/Transfer.svelte';
 export { default as FilterBuilder } from './components/FilterBuilder.svelte';
 export type { FilterRuleItem } from './components/FilterBuilder.svelte';
+export { default as Watermark } from './components/Watermark.svelte';
+export { default as ColumnSettings } from './components/ColumnSettings.svelte';
+export type { ColumnItem } from './components/ColumnSettings.svelte';
+export { default as UnsavedChangesPrompt } from './components/UnsavedChangesPrompt.svelte';
+export { default as ImportWizard } from './components/ImportWizard.svelte';
+export { default as ColumnHeaderFilter } from './components/ColumnHeaderFilter.svelte';
+export { default as TreeTable } from './components/TreeTable.svelte';
+export type { TreeTableColumn } from './components/TreeTable.svelte';
+export { default as SensitiveDataMask } from './components/SensitiveDataMask.svelte';
+export type { MaskType } from './components/SensitiveDataMask.svelte';
+export { default as ApprovalActionCard } from './components/ApprovalActionCard.svelte';
+export type { ApprovalStatus } from './components/ApprovalActionCard.svelte';
+export { default as StepForm } from './components/StepForm.svelte';
+export type { FormStep } from './components/StepForm.svelte';
+export { default as ModalForm } from './components/ModalForm.svelte';
+export { default as DrawerForm } from './components/DrawerForm.svelte';
+export { default as TableSummary } from './components/TableSummary.svelte';
+export type { TableSummaryColumn, AggregationType } from './components/TableSummary.svelte';
+export { default as VersionDiffViewer } from './components/VersionDiffViewer.svelte';
+export { default as VirtualTable } from './components/VirtualTable.svelte';
+export type { VirtualTableColumn } from './components/VirtualTable.svelte';
+export { default as EditableTable } from './components/EditableTable.svelte';
+export type { EditableTableColumn } from './components/EditableTable.svelte';
+export { default as DraggableRowTable } from './components/DraggableRowTable.svelte';
+export type { DraggableTableColumn } from './components/DraggableRowTable.svelte';
+export { default as SplitPaneLayout } from './components/SplitPaneLayout.svelte';
+export { default as MasterDetailView } from './components/MasterDetailView.svelte';
+export { default as MediaLibraryModal } from './components/MediaLibraryModal.svelte';
+export type { MediaItem } from './components/MediaLibraryModal.svelte';
+export { default as ImageCropper } from './components/ImageCropper.svelte';
+export { default as ActivityFeed } from './components/ActivityFeed.svelte';
+export type { ActivityItem } from './components/ActivityFeed.svelte';
+export { default as PresenceAvatarGroup } from './components/PresenceAvatarGroup.svelte';
+export type { PresenceUser } from './components/PresenceAvatarGroup.svelte';
+export { default as PrintableBill } from './components/PrintableBill.svelte';
+export type { BillItem } from './components/PrintableBill.svelte';
+export { default as JsonSchemaForm } from './components/JsonSchemaForm.svelte';
+export { default as MentionsInput } from './components/MentionsInput.svelte';
+export type { MentionOption } from './components/MentionsInput.svelte';
+export { default as KanbanBoard } from './components/KanbanBoard.svelte';
+export type { KanbanCard, KanbanColumn } from './components/KanbanBoard.svelte';
+export { default as PivotTable } from './components/PivotTable.svelte';
+export type { AggregationFn } from './components/PivotTable.svelte';
+export { default as MultiTabKeepAlive } from './components/MultiTabKeepAlive.svelte';
+export type { WorkspaceTab } from './components/MultiTabKeepAlive.svelte';
+export { default as GanttChart } from './components/GanttChart.svelte';
+export type { GanttTask } from './components/GanttChart.svelte';
+export { default as CanvasAnnotation } from './components/CanvasAnnotation.svelte';
+export type { AnnotationTool } from './components/CanvasAnnotation.svelte';
+export { default as SignaturePad } from './components/SignaturePad.svelte';
+export { default as PdfDocumentViewer } from './components/PdfDocumentViewer.svelte';
+export type { DocumentStamp } from './components/PdfDocumentViewer.svelte';
+export { default as SpreadsheetView } from './components/SpreadsheetView.svelte';
+export type { SheetData } from './components/SpreadsheetView.svelte';
+export { default as DecisionTable } from './components/DecisionTable.svelte';
+export type { DecisionColumn, DecisionRule } from './components/DecisionTable.svelte';
+export { default as OfflineSyncBanner } from './components/OfflineSyncBanner.svelte';
+export type { PendingMutation } from './components/OfflineSyncBanner.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
@@ -72,7 +128,6 @@ export { default as VoiceInput } from "./components/VoiceInput.svelte";
 export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
 export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
 export { default as InlineEdit } from "./components/InlineEdit.svelte";
-export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
 export { default as FeedbackNotice } from './components/content/FeedbackNotice.svelte';

package/dist/index.js

@@ -27,8 +27,6 @@ export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.s
 export { default as CanAccess } from './components/CanAccess.svelte';
 export { default as Can } from './components/CanAccess.svelte';
 export { default as UndoableNotification } from './components/UndoableNotification.svelte';
-export { default as ModalForm } from './components/ModalForm.svelte';
-export { default as DrawerForm } from './components/DrawerForm.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
 export { default as Authenticated } from './components/Authenticated.svelte';
 export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
@@ -58,6 +56,41 @@ export { default as TreeSelect } from './components/TreeSelect.svelte';
 export { default as Cascader } from './components/Cascader.svelte';
 export { default as Transfer } from './components/Transfer.svelte';
 export { default as FilterBuilder } from './components/FilterBuilder.svelte';
+export { default as Watermark } from './components/Watermark.svelte';
+export { default as ColumnSettings } from './components/ColumnSettings.svelte';
+export { default as UnsavedChangesPrompt } from './components/UnsavedChangesPrompt.svelte';
+export { default as ImportWizard } from './components/ImportWizard.svelte';
+export { default as ColumnHeaderFilter } from './components/ColumnHeaderFilter.svelte';
+export { default as TreeTable } from './components/TreeTable.svelte';
+export { default as SensitiveDataMask } from './components/SensitiveDataMask.svelte';
+export { default as ApprovalActionCard } from './components/ApprovalActionCard.svelte';
+export { default as StepForm } from './components/StepForm.svelte';
+export { default as ModalForm } from './components/ModalForm.svelte';
+export { default as DrawerForm } from './components/DrawerForm.svelte';
+export { default as TableSummary } from './components/TableSummary.svelte';
+export { default as VersionDiffViewer } from './components/VersionDiffViewer.svelte';
+export { default as VirtualTable } from './components/VirtualTable.svelte';
+export { default as EditableTable } from './components/EditableTable.svelte';
+export { default as DraggableRowTable } from './components/DraggableRowTable.svelte';
+export { default as SplitPaneLayout } from './components/SplitPaneLayout.svelte';
+export { default as MasterDetailView } from './components/MasterDetailView.svelte';
+export { default as MediaLibraryModal } from './components/MediaLibraryModal.svelte';
+export { default as ImageCropper } from './components/ImageCropper.svelte';
+export { default as ActivityFeed } from './components/ActivityFeed.svelte';
+export { default as PresenceAvatarGroup } from './components/PresenceAvatarGroup.svelte';
+export { default as PrintableBill } from './components/PrintableBill.svelte';
+export { default as JsonSchemaForm } from './components/JsonSchemaForm.svelte';
+export { default as MentionsInput } from './components/MentionsInput.svelte';
+export { default as KanbanBoard } from './components/KanbanBoard.svelte';
+export { default as PivotTable } from './components/PivotTable.svelte';
+export { default as MultiTabKeepAlive } from './components/MultiTabKeepAlive.svelte';
+export { default as GanttChart } from './components/GanttChart.svelte';
+export { default as CanvasAnnotation } from './components/CanvasAnnotation.svelte';
+export { default as SignaturePad } from './components/SignaturePad.svelte';
+export { default as PdfDocumentViewer } from './components/PdfDocumentViewer.svelte';
+export { default as SpreadsheetView } from './components/SpreadsheetView.svelte';
+export { default as DecisionTable } from './components/DecisionTable.svelte';
+export { default as OfflineSyncBanner } from './components/OfflineSyncBanner.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
@@ -72,7 +105,6 @@ export { default as VoiceInput } from "./components/VoiceInput.svelte";
 export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
 export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
 export { default as InlineEdit } from "./components/InlineEdit.svelte";
-export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
 export { default as FeedbackNotice } from './components/content/FeedbackNotice.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.64.0",
+  "version": "0.65.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.46.0",
+    "@svadmin/core": "^0.47.1",
     "@tanstack/svelte-query": "^6.1.48",
     "highlight.js": "^11.12.0",
     "isomorphic-dompurify": "^3.23.0",