@dotit/editor 1.1.0 → 1.2.1

package/dist/line-keymap.d.ts

@@ -0,0 +1,2 @@
+import { Extension } from "@tiptap/core";
+export declare const LineKeymap: Extension<any, any>;

package/dist/page-geometry.d.ts

@@ -21,5 +21,12 @@ export interface PageGeometry {
 }
 /** Compute the page geometry from `.it` source (its page:/header:/footer: blocks). */
 export declare function getPageGeometry(source: string): PageGeometry;
+/**
+ * Set (or replace) the `margin:` property on the document's `page:` block.
+ * Idempotent: replaces any existing margin/margins prop rather than appending,
+ * so repeated ruler drags never accumulate duplicate pipe segments. Inserts a
+ * `page:` block (after the meta/title preamble) when the document has none.
+ */
+export declare function setPageMargin(source: string, marginValue: string): string;
 /** Resolve {{page}}/{{pages}} tokens for on-screen display. */
 export declare function resolvePageTokens(text: string, page: number, pages: number): string;

package/dist/print.d.ts

@@ -1,6 +1,9 @@
 export type PrintMode = "normal" | "minimal-ink";
 /** Print / save-as-PDF via the browser's print dialog. Browser-only. */
 export declare function exportDocumentPDF(content: string, theme: string, printMode?: PrintMode): void;
+/** Download the raw `.it` source as a file. This is the editor's "Save".
+ *  Derives a filename from the document's meta id / title when available. */
+export declare function downloadItFile(content: string, filename?: string): void;
 /** Download the print-ready HTML document. Browser-only. */
 export declare function exportDocumentHTML(content: string, theme: string, printMode?: PrintMode): void;
 /** Built-in theme ids — for the ribbon's theme select. */

package/dist/style.css

@@ -790,28 +790,54 @@
   color: #555;
 }
 
-/* sign → core .it-signature: signature rule line (hairline on top). */
+/* sign → core .it-signature: name + (role · date) above a signature rule, with
+   a "Signed" badge at the line end. Structure mirrors core's renderer exactly. */
 .docs-page .tiptap .it-doc-trust--sign {
-  margin: 14px 0 10px;
-  padding: 7px 2px 5px;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 14px;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin: 16px 0 8px;
+  padding: 0;
+  border: 0;
+}
+.docs-page .tiptap .it-doc-trust__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.docs-page .tiptap .it-doc-trust__rule {
+  display: block;
+  order: 3;
+  margin-top: 6px;
   border-top: 1px solid #111;
+  width: 100%;
+  height: 0;
 }
 .docs-page .tiptap .it-doc-trust__name {
+  order: 1;
   font-weight: 600;
   font-size: 0.95rem;
   color: #111;
 }
-.docs-page .tiptap .it-doc-trust__role {
-  font-size: 0.85rem;
-  color: #555;
+.docs-page .tiptap .it-doc-trust__meta {
+  order: 2;
+  font-size: 0.82rem;
+  color: #666;
+  margin-top: 1px;
 }
-.docs-page .tiptap .it-doc-trust__status {
+.docs-page .tiptap .it-doc-trust__badge {
+  flex-shrink: 0;
   font-size: 0.72rem;
   font-weight: 600;
-  margin-inline-start: auto;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.07em;
   color: #2e7d32;
+  white-space: nowrap;
+  align-self: flex-end;
+  padding-bottom: 7px;
 }
 
 /* seal / freeze → core .it-sealed-banner: SEALED band, thin top+bottom rules. */
@@ -864,11 +890,6 @@
   margin-inline-start: auto;
   font-variant-numeric: tabular-nums;
 }
-/* sign rows: status sits at the end — date stays inline. */
-.docs-page .tiptap .it-doc-trust--sign .it-doc-trust__date {
-  margin-inline-start: 0;
-}
-
 /* ─── Template variables ({{path}}) ───────────────────────── */
 .docs-page .tiptap .it-doc-var {
   background: #eef2ff;
@@ -1116,6 +1137,38 @@
   color: #1d4ed8;
 }
 
+/* ─── Info callout — quiet variant (parity with core .intent-info) ───
+   The Plain Writing Overrides above flatten every callout; info is the
+   exception — a soft gray panel with an italic body and an ⓘ marker (no loud
+   "NOTE" label), exactly matching core's document-css.ts so editor == print.
+   Declared AFTER the overrides so it wins. */
+.docs-page .tiptap .it-doc-callout[data-variant="info"] {
+  display: block;
+  margin: 10px 0;
+  padding: 8px 14px 8px 12px;
+  background: #f5f6f8;
+  border: none;
+  border-inline-start: 3px solid #c7ccd3;
+  border-radius: 0 3px 3px 0;
+}
+.docs-page .tiptap .it-doc-callout[data-variant="info"] .it-doc-callout-icon {
+  display: none;
+}
+.docs-page .tiptap .it-doc-callout[data-variant="info"] .it-doc-callout-text {
+  display: inline;
+  font-style: italic;
+  color: #4f4f4f;
+}
+.docs-page
+  .tiptap
+  .it-doc-callout[data-variant="info"]
+  .it-doc-callout-text::before {
+  content: "ⓘ ";
+  font-style: normal;
+  font-weight: 600;
+  color: #6e6e6e;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    Ribbon — ONE compact Docs-style toolbar row
    (Edit | File | Text | Paragraph | Insert | Trust)
@@ -1259,6 +1312,16 @@
   background: rgba(220, 38, 38, 0.12);
   color: #dc2626;
 }
+.docs-trust-banner__warn {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  padding: 2px 9px;
+  border-radius: 10px;
+  font-size: 11.5px;
+  font-weight: 600;
+  background: rgba(217, 119, 6, 0.13);
+  color: #b45309;
+}
 
 .docs-props-bar {
   flex-shrink: 0;
@@ -1386,6 +1449,271 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* Draggable margin stops (Google-Docs blue markers). */
+.docs-ruler--draggable .docs-ruler-stop {
+  position: absolute;
+  z-index: 2;
+}
+.docs-ruler-stop--h {
+  top: 2px;
+  width: 9px;
+  height: 9px;
+  margin-left: -4.5px;
+  cursor: ew-resize;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 7px solid #5b6b8c;
+}
+.docs-ruler-stop--h:hover,
+.docs-ruler-stop--h.dragging {
+  border-top-color: #1a73e8;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Canvas row — left vertical ruler + the scrollable canvas
+   ═══════════════════════════════════════════════════════════════ */
+.docs-canvas-row {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+.docs-canvas-row .docs-canvas {
+  flex: 1;
+  min-width: 0;
+}
+
+.docs-ruler-v {
+  flex-shrink: 0;
+  width: 20px;
+  background: #fff;
+  border-right: 1px solid #dadce0;
+  overflow: hidden;
+  user-select: none;
+}
+.docs-ruler-v-track {
+  position: relative;
+  width: 100%;
+  margin: 14px auto 0; /* matches .docs-canvas top padding so 0 aligns to sheet top */
+}
+.docs-ruler-margin--v {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: auto;
+  bottom: auto;
+  width: auto;
+  background: rgba(60, 64, 67, 0.1);
+}
+.docs-ruler-tick--v {
+  bottom: auto;
+  left: auto;
+  right: 4px;
+  width: 4px;
+  height: 1px;
+}
+.docs-ruler-tick--v.docs-ruler-tick--major {
+  width: 7px;
+}
+.docs-ruler-num--v {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  writing-mode: vertical-rl;
+}
+.docs-ruler-stop--v {
+  position: absolute;
+  z-index: 2;
+  left: 2px;
+  width: 9px;
+  height: 9px;
+  margin-top: -4.5px;
+  cursor: ns-resize;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 7px solid #5b6b8c;
+}
+.docs-ruler-stop--v:hover,
+.docs-ruler-stop--v.dragging {
+  border-left-color: #1a73e8;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Trust control — one self-explanatory state button + popover
+   ═══════════════════════════════════════════════════════════════ */
+.trust-control {
+  position: relative;
+}
+.trust-face {
+  gap: 5px;
+}
+.trust-face__icon {
+  display: inline-flex;
+}
+.trust-face__ok {
+  color: #188038;
+  font-weight: 700;
+}
+.trust-face--draft {
+  color: #5f6368;
+}
+.trust-face--signed {
+  color: #1a73e8;
+}
+.trust-face--sealed {
+  color: #188038;
+}
+.trust-face--broken {
+  color: #d93025;
+}
+.trust-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 50;
+  width: 280px;
+  background: #fff;
+  border: 1px solid #dadce0;
+  border-radius: 10px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
+  padding: 12px;
+  font-size: 13px;
+}
+.trust-popover__state strong {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+.trust-popover__meta {
+  color: #5f6368;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.trust-popover__warn {
+  margin-top: 7px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: rgba(217, 119, 6, 0.1);
+  color: #b45309;
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+.trust-popover__help-toggle {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
+  color: #1a73e8;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+.trust-popover__help-toggle:hover {
+  text-decoration: underline;
+}
+.trust-popover__help {
+  margin-top: 6px;
+  padding: 8px 10px;
+  background: #f6f8fb;
+  border-radius: 6px;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: #3c4043;
+}
+.trust-popover__help p {
+  margin: 0 0 6px;
+}
+.trust-popover__help p:last-child {
+  margin-bottom: 0;
+}
+.trust-popover__divider {
+  height: 1px;
+  background: #ececec;
+  margin: 10px 0;
+}
+.trust-popover__action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-top: 4px;
+  border: 1px solid #dadce0;
+  border-radius: 7px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  color: #202124;
+  text-align: left;
+}
+.trust-popover__action:hover {
+  background: #f1f3f4;
+}
+.trust-popover__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.trust-popover__action--primary {
+  background: #1a73e8;
+  border-color: #1a73e8;
+  color: #fff;
+}
+.trust-popover__action--primary:hover {
+  background: #1666c8;
+}
+.trust-popover__action--warn {
+  color: #b06000;
+}
+.trust-popover__verify {
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+.trust-verify--ok {
+  color: #188038;
+}
+.trust-verify--bad {
+  color: #d93025;
+}
+.trust-popover__hash {
+  margin-top: 6px;
+}
+.trust-popover__hash summary {
+  cursor: pointer;
+  color: #5f6368;
+}
+.trust-popover__hash code {
+  display: block;
+  margin-top: 4px;
+  word-break: break-all;
+  font-size: 11px;
+  color: #5f6368;
+}
+.trust-sign-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.trust-sign-input {
+  width: 100%;
+  padding: 7px 9px;
+  border: 1px solid #dadce0;
+  border-radius: 6px;
+  font-size: 13px;
+}
+.trust-sign-input:focus {
+  outline: none;
+  border-color: #1a73e8;
+}
+.trust-sign-actions {
+  display: flex;
+  gap: 6px;
+}
+.trust-sign-actions .trust-popover__action {
+  margin-top: 2px;
+}
+
 /* ─── Mobile ──────────────────────────────────────────────── */
 
 @media (max-width: 768px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotit/editor",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Embeddable WYSIWYG visual editor for IntentText (.it) documents — Word-like pages, ribbon, trust banner, and WYSIWYG PDF/HTML export. Drop it into any React app (ERPs, portals, back offices).",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -63,7 +63,7 @@
     "@tiptap/react": "^3.20.1",
     "@tiptap/starter-kit": "^3.20.1",
     "lucide-react": "^0.577.0",
-    "@dotit/core": "^1.1.1"
+    "@dotit/core": "^1.2.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
@@ -76,7 +76,7 @@
   },
   "scripts": {
     "build:core": "pnpm --filter @dotit/core build",
-    "build": "pnpm run build:core && rm -rf dist && vite build && tsc && cp src/styles.css dist/style.css",
+    "build": "pnpm run build:core && rm -rf dist && vite build && tsc -p tsconfig.build.json && cp src/styles.css dist/style.css",
     "dev": "vite build --watch"
   }
 }