@aseity/idocs-preview 0.4.0 → 0.5.0

package/dist/view/ime.js

@@ -98,7 +98,7 @@ export function createImeBridge(host) {
         textarea.style.left = `${left}px`;
         textarea.style.top = `${top}px`;
         textarea.style.height = `${height}px`;
-        textarea.style.fontSize = `${Math.max(10, Math.round(height * 0.8))}px`;
+        textarea.style.fontSize = `${(caret.style?.size ?? caret.height) * scale}px`;
     };
     const onFocus = () => {
         focused = true;
@@ -153,10 +153,10 @@ export function createImeBridge(host) {
             const data = event.data;
             void enqueue(() => host.replaceSelection(data));
         }
-        else if (event.inputType === 'insertParagraph') {
+        else if (event.inputType === 'insertLineBreak' || event.inputType === 'insertParagraph') {
             event.preventDefault();
             textarea.value = '';
-            void enqueue(() => host.splitBlock());
+            void enqueue(event.inputType === 'insertLineBreak' ? () => host.replaceSelection('\n') : () => host.splitBlock());
         }
     };
     const onInput = (event) => {
@@ -279,9 +279,9 @@ export function createImeBridge(host) {
             void enqueue(() => host.deleteForward());
             return;
         }
-        if (key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        if (key === 'Enter' && !event.ctrlKey && !event.metaKey && !event.altKey) {
             event.preventDefault();
-            void enqueue(() => host.splitBlock());
+            void enqueue(event.shiftKey ? () => host.replaceSelection('\n') : () => host.splitBlock());
             return;
         }
         if (key === 'ArrowLeft' || key === 'ArrowRight') {

package/dist/view/index.d.ts

@@ -28,4 +28,4 @@ export type { FindBar } from './find-bar.js';
 export * from './edit-selection.js';
 export * from './editor.js';
 export type { InputMode } from './ime.js';
-export { type EditorWorkspace, type EditorWorkspaceOptions, formatAskAssistantLabel, mountEditorWorkspace, type PickedImage, } from './workspace.js';
+export { type EditorWorkspace, type EditorWorkspaceOptions, formatAskAssistantLabel, type InsertDockButton, mountEditorWorkspace, type PickedImage, } from './workspace.js';

package/dist/view/workspace-styles.js

@@ -50,6 +50,7 @@ const WORKSPACE_CSS = `
   --ws-danger: #b91c1c;
   --ws-menu-shadow: var(--idocs-menu-shadow, 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.1));
   --ws-dock-shadow: var(--idocs-dock-shadow, 0 3px 6px rgba(0, 0, 0, 0.03), 0 4px 80px 8px rgba(0, 0, 0, 0.03), 0 0 1px rgba(0, 0, 0, 0.22));
+  --ws-toolbar-inset: 12px;
   color-scheme: light;
 
   display: flex;
@@ -107,6 +108,7 @@ ${DARK_TOKENS}
 }
 
 .idocs-ws-toolbar {
+  position: relative;
   min-height: 52px;
   height: 52px;
   flex-shrink: 0;
@@ -114,7 +116,7 @@ ${DARK_TOKENS}
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 0 12px;
+  padding: 0 var(--ws-toolbar-inset);
   background: var(--ws-toolbar-bg);
   border-bottom: 1px solid var(--ws-border);
   user-select: none;
@@ -130,25 +132,58 @@ ${DARK_TOKENS}
 }
 
 .idocs-ws-tb-left {
+  flex-shrink: 0;
   gap: 6px;
 }
 
 .idocs-ws-tb-right {
+  flex-shrink: 0;
   gap: 2px;
 }
 
 .idocs-ws-tb-center {
   flex: 1;
-  justify-content: center;
-  overflow: visible;
 }
 
+.idocs-ws-toolbar-viewport {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.idocs-ws-toolbar-strip {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+  margin-inline: auto;
+}
+
+.idocs-ws-toolbar-content,
 .idocs-ws-ctx {
-  display: inline-flex;
+  display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 4px;
-  max-width: 100%;
-  flex-wrap: nowrap;
+}
+
+.idocs-ws-toolbar-content {
+  padding: 4px 3px;
+}
+
+.idocs-ws-tb-center > .idocs-ws-toolbar-arrow {
+  width: 24px;
+}
+
+.idocs-ws-toolbar-arrow:first-child svg {
+  transform: rotate(90deg);
+}
+
+.idocs-ws-toolbar-arrow:last-child svg {
+  transform: rotate(-90deg);
 }
 
 .idocs-ws-icon-btn {
@@ -218,6 +253,16 @@ ${DARK_TOKENS}
   background: rgba(255, 59, 48, 0.1);
 }
 
+.idocs-ws-ctx.is-table .idocs-ws-pill-btn,
+.idocs-ws-ctx.is-readonly-target .idocs-ws-pill-btn {
+  font-weight: 400;
+}
+
+.idocs-ws-ctx.is-readonly-target .idocs-ws-pill-btn > svg {
+  flex-shrink: 0;
+  transform: translateY(-1px);
+}
+
 .idocs-ws-select-trigger {
   height: 28px;
   min-width: 88px;
@@ -279,7 +324,7 @@ ${DARK_TOKENS}
   background: transparent;
   color: var(--ws-ink-2);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 .idocs-ws-seg-btn[aria-pressed='true'] {
@@ -306,15 +351,7 @@ ${DARK_TOKENS}
   background: var(--ws-warn-bg);
   border: 1px solid var(--ws-warn-border);
   color: var(--ws-warn-ink);
-}
-
-.idocs-ws-note {
-  font-size: 12px;
-  color: var(--ws-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 280px;
+  font-weight: 400;
 }
 
 .idocs-ws-zoom-label {
@@ -384,7 +421,7 @@ ${DARK_TOKENS}
 }
 
 .idocs-ws-body {
-  --ws-rail-width: 208px;
+  --ws-rail-width: 184px;
   --ws-rail-ease: cubic-bezier(0.22, 1, 0.36, 1);
   --ws-rail-duration: 220ms;
   flex: 1;
@@ -451,7 +488,7 @@ ${DARK_TOKENS}
 .idocs-ws-rail-tabs {
   display: flex;
   gap: 2px;
-  margin: 10px 12px 6px;
+  margin: 10px var(--ws-toolbar-inset) 6px;
   padding: 2px;
   border-radius: 8px;
   background: var(--ws-muted-fill);
@@ -494,10 +531,10 @@ ${DARK_TOKENS}
   min-height: 0;
   overflow-y: auto;
   scrollbar-gutter: stable;
-  padding: 8px 16px 20px;
+  padding: 8px var(--ws-toolbar-inset) 20px;
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 4px;
 }
 
 .idocs-ws-rail-list.is-outline {
@@ -506,18 +543,29 @@ ${DARK_TOKENS}
 }
 
 .idocs-ws-thumb-card {
-  position: relative;
   width: 100%;
   flex-shrink: 0;
   margin: 0;
-  padding: 0;
+  padding: 8px;
   border: 0;
-  border-radius: 6px;
+  border-radius: 16px;
   background: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
+  display: grid;
+  grid-template-columns: minmax(20px, max-content) minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+}
+
+.idocs-ws-thumb-card:hover {
+  background: var(--ws-hover);
+}
+
+.idocs-ws-thumb-card.is-active {
+  background: color-mix(in srgb, var(--ws-accent-soft) 40%, var(--ws-hover));
+}
+
+.idocs-ws .idocs-ws-thumb-card:focus-visible {
+  outline-offset: -2px;
 }
 
 .idocs-ws-thumb-sheet {
@@ -525,28 +573,19 @@ ${DARK_TOKENS}
   display: block;
   width: 100%;
   overflow: hidden;
-  border-radius: 5px;
+  border-radius: 8px;
   background: #ffffff;
-  transition: box-shadow 160ms ease;
 }
 
 .idocs-ws-thumb-sheet::after {
   content: "";
   position: absolute;
   inset: 0;
+  border: 1px solid rgba(15, 23, 42, 0.11);
   border-radius: inherit;
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.11);
   pointer-events: none;
 }
 
-.idocs-ws-thumb-card:hover .idocs-ws-thumb-sheet {
-  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
-}
-
-.idocs-ws-thumb-card.is-active .idocs-ws-thumb-sheet::after {
-  box-shadow: inset 0 0 0 2px var(--ws-accent);
-}
-
 .idocs-ws-thumb-canvas {
   display: block;
   width: 100%;
@@ -554,15 +593,16 @@ ${DARK_TOKENS}
 }
 
 .idocs-ws-thumb-label {
-  font-size: 11px;
-  line-height: 1;
+  padding-top: 2px;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: right;
   font-variant-numeric: tabular-nums;
-  color: var(--ws-muted);
+  color: var(--ws-ink-2);
 }
 
 .idocs-ws-thumb-card.is-active .idocs-ws-thumb-label {
   color: var(--ws-accent);
-  font-weight: 600;
 }
 
 .idocs-ws-outline-item {
@@ -680,7 +720,8 @@ ${DARK_TOKENS}
   z-index: 20;
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  width: max-content;
+  gap: 4px;
   padding: 5px;
   border: 0;
   border-radius: 15px;
@@ -690,27 +731,46 @@ ${DARK_TOKENS}
 }
 
 .idocs-ws-dock-btn {
+  width: 34px;
   height: 34px;
-  padding: 0 11px;
+  padding: 0;
   border: 0;
   border-radius: 10px;
   background: transparent;
   color: var(--ws-ink-2);
-  font-size: 12.5px;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
+  display: grid;
+  place-items: center;
   transition: background 140ms ease, color 140ms ease;
 }
 
+.idocs-ws-dock-btn > svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.33;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .idocs-ws-dock-btn:hover,
+.idocs-ws-dock-btn:focus-visible,
 .idocs-ws-dock-btn[aria-expanded='true'] {
   background: var(--ws-hover);
   color: var(--ws-ink);
 }
 
+@media (pointer: coarse) {
+  .idocs-ws-dock {
+    bottom: 10px;
+  }
+
+  .idocs-ws-dock-btn {
+    width: 44px;
+    height: 44px;
+  }
+}
+
 .idocs-ws-popover-anchor {
   position: relative;
   display: inline-flex;

package/dist/view/workspace.d.ts

@@ -1,10 +1,17 @@
-import type { Anchor, BlockStyle, EditorSession, PreviewDocument, TextAlign } from '../core/index.js';
+import type { Anchor, BlockStyle, CalloutColors, EditorSession, PreviewDocument, TextAlign } from '../core/index.js';
 import type { ReadOnlyTarget } from './edit-selection.js';
 import { type EditorView, type EditorViewOptions, type EditorViewSelection, type SelectedImageTarget } from './editor.js';
 export interface PickedImage {
     readonly src: string;
     readonly alt?: string;
 }
+export interface InsertDockButton {
+    readonly container: HTMLElement;
+    readonly label: string;
+    readonly className: string;
+    activate(): void;
+    bind(button: HTMLButtonElement | null): void;
+}
 export interface EditorWorkspaceOptions {
     readonly view?: EditorViewOptions;
     readonly readOnly?: boolean;
@@ -12,12 +19,14 @@ export interface EditorWorkspaceOptions {
     readonly busyLabel?: string;
     readonly railOpen?: boolean;
     readonly assistantName?: string;
+    readonly calloutColors?: CalloutColors;
     readonly onPickImage?: () => Promise<PickedImage | null>;
     readonly onQuoteSelection?: (selection: {
         text: string;
         path: string;
         page: number;
     }) => void;
+    readonly mountInsertButtons?: (buttons: readonly InsertDockButton[]) => () => void;
 }
 export interface EditorWorkspace {
     readonly view: EditorView;
@@ -41,8 +50,6 @@ export type ToolbarContext = {
 } | {
     readonly kind: 'readOnlyTarget';
     readonly target: ReadOnlyTarget;
-    readonly badge: string;
-    readonly message: string;
 } | {
     readonly kind: 'image';
     readonly target: SelectedImageTarget;