@w100n/documents 0.13.0 → 0.15.0

package/dist/index.css

@@ -746,8 +746,8 @@
 }
 .w100n-docs-reopen-right {
   left: auto;
-  right: 10px;
-  top: 10px;
+  right: 7px;
+  top: 5px;
 }
 .w100n-docs-picker {
   position: relative;
@@ -1251,26 +1251,6 @@
   overflow-y: auto;
   padding: 12px;
 }
-.w100n-docs-outline {
-  display: grid;
-  gap: 2px;
-}
-.w100n-docs-outline button {
-  padding: 6px 9px;
-  border-radius: 8px;
-  text-align: left;
-  overflow-wrap: anywhere;
-}
-.w100n-docs-outline button:hover {
-  background: var(--docs-hover);
-}
-.w100n-docs-outline button[data-level="2"] {
-  padding-left: 20px;
-}
-.w100n-docs-outline button[data-level="3"] {
-  padding-left: 32px;
-  color: var(--docs-muted);
-}
 .w100n-docs-versions {
   display: grid;
   gap: 4px;
@@ -2911,11 +2891,12 @@ svg.w100n-pdf-marks {
   margin: 0 6px 0 4px;
 }
 .w100n-text-people .w100n-text-face {
-  width: 26px;
-  height: 26px;
-  margin-left: -6px;
+  width: 28px;
+  height: 28px;
+  margin-left: 4px;
   overflow: hidden;
-  border-radius: 50%;
+  border-radius: 28%;
+  font-size: 10.5px;
   background:
     linear-gradient(
       145deg,
@@ -3673,176 +3654,1070 @@ svg.w100n-pdf-marks {
     grid-template-columns: 1fr;
   }
 }
-
-/* src/sheets/sheets.css */
-@font-face {
-  font-family: "Calibri";
-  font-weight: 400;
-  font-style: normal;
-  src:
-    local("Calibri"),
-    local("Carlito"),
-    local("Arial"),
-    local("ArialMT"),
-    local("Liberation Sans");
+.w100n-text-menus {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
 }
-@font-face {
-  font-family: "Calibri";
-  font-weight: 400;
-  font-style: italic;
-  src:
-    local("Calibri Italic"),
-    local("Carlito Italic"),
-    local("Arial Italic"),
-    local("Arial-ItalicMT"),
-    local("Liberation Sans Italic");
+.w100n-text-ribbon .w100n-text-anchor > button.w100n-text-menu-button {
+  width: auto;
+  height: 28px;
+  padding: 0 9px;
+  color: var(--docs-text);
+  font-size: 12.5px;
+  font-weight: 550;
 }
-@font-face {
-  font-family: "Calibri";
-  font-weight: 700;
-  font-style: normal;
-  src:
-    local("Calibri Bold"),
-    local("Carlito Bold"),
-    local("Arial Bold"),
-    local("Arial-BoldMT"),
-    local("Liberation Sans Bold");
+.w100n-text-ribbon .w100n-text-anchor > button.w100n-text-menu-button[aria-expanded=true] {
+  background: var(--docs-soft);
 }
-@font-face {
-  font-family: "Calibri";
-  font-weight: 700;
-  font-style: italic;
-  src:
-    local("Calibri Bold Italic"),
-    local("Carlito Bold Italic"),
-    local("Arial Bold Italic"),
-    local("Arial-BoldItalicMT"),
-    local("Liberation Sans Bold Italic");
+.w100n-text-menu {
+  display: grid;
+  gap: 1px;
+  min-width: 240px;
 }
-@font-face {
-  font-family: "Aptos";
-  font-weight: 400;
-  font-style: normal;
-  src:
-    local("Aptos"),
-    local("Arial"),
-    local("ArialMT"),
-    local("Liberation Sans");
+.w100n-docs .w100n-text-menu button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  color: var(--docs-text);
+  font-size: 13px;
+  text-align: left;
 }
-@font-face {
-  font-family: "Aptos";
-  font-weight: 400;
-  font-style: italic;
-  src:
-    local("Aptos Italic"),
-    local("Arial Italic"),
-    local("Arial-ItalicMT"),
-    local("Liberation Sans Italic");
+.w100n-text-menu button:hover:not(:disabled) {
+  background: var(--docs-hover);
 }
-@font-face {
-  font-family: "Aptos";
-  font-weight: 700;
-  font-style: normal;
-  src:
-    local("Aptos Bold"),
-    local("Arial Bold"),
-    local("Arial-BoldMT"),
-    local("Liberation Sans Bold");
+.w100n-text-menu button:disabled {
+  opacity: .45;
 }
-@font-face {
-  font-family: "Aptos";
-  font-weight: 700;
-  font-style: italic;
-  src:
-    local("Aptos Bold Italic"),
-    local("Arial Bold Italic"),
-    local("Arial-BoldItalicMT"),
-    local("Liberation Sans Bold Italic");
+.w100n-text-menu button svg {
+  width: 14px;
+  height: 14px;
+  color: var(--docs-accent);
+  visibility: hidden;
 }
-.w100n-sheet {
-  position: relative;
+.w100n-text-menu button[aria-checked=true] svg {
+  visibility: visible;
+}
+.w100n-text-menu button span {
   flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
 }
-.w100n-sheet-ribbon {
-  align-self: center;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 6px;
-  width: min(100%, 1240px);
-  padding: 4px;
-  border: 1px solid var(--docs-border);
-  border-radius: 12px;
-  background: var(--docs-card);
-  box-shadow: var(--docs-shadow);
+.w100n-text-menu kbd {
+  color: var(--docs-dim);
+  font:
+    11.5px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
 }
-.w100n-sheet-tools {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2px;
+.w100n-text-menu hr {
+  width: 100%;
+  margin: 4px 0;
+  border: 0;
+  border-top: 1px solid var(--docs-border);
+}
+.w100n-text-ribbon .w100n-text-anchor > button.w100n-text-picker[data-size=small] {
+  width: 78px;
+}
+.w100n-text-grow {
+  flex: 1;
+}
+@container (max-width: 560px) {
+  .w100n-text-menus {
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .w100n-text-menus > * {
+    flex-shrink: 0;
+  }
+  .w100n-text-grow {
+    display: none;
+  }
+}
+.w100n-text-ribbon .w100n-text-anchor > button.w100n-text-picker[data-size=mid] {
+  width: 118px;
+}
+.w100n-text-picker > span {
   min-width: 0;
-  min-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.w100n-sheet-ribbon button:not(.w100n-docs-action) {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  color: var(--docs-muted);
+.w100n-text-styles hr {
+  width: 100%;
+  margin: 4px 0;
+  border: 0;
+  border-top: 1px solid var(--docs-border);
 }
-.w100n-sheet-ribbon button:not(.w100n-docs-action):hover:not(:disabled) {
-  background: var(--docs-hover);
-  color: var(--docs-text);
+.w100n-text-pop.w100n-text-styles {
+  max-height: 360px;
+  overflow-y: auto;
 }
-.w100n-docs .w100n-sheet-ribbon button[aria-pressed=true],
-.w100n-docs .w100n-sheet-ribbon button[aria-expanded=true] {
-  color: #fff;
+.w100n-text-scroll[data-paint=true] .w100n-text-body {
+  cursor: copy;
+}
+.w100n-docs-prose sup,
+.w100n-docs-prose sub {
+  font-size: .75em;
+  line-height: 0;
+}
+.w100n-docs .w100n-setup {
+  width: min(460px, 100%);
+  gap: 10px;
+}
+.w100n-new-tile[data-tone=blue] {
   background:
     linear-gradient(
       145deg,
-      #8b5cf6,
-      #6d28d9);
-  box-shadow: 0 6px 14px -6px #7c3aed99;
+      #3b82f6,
+      #1d4ed8);
 }
-.w100n-sheet-gap {
-  width: 1px;
-  height: 20px;
-  margin: 0 5px;
-  background: var(--docs-border);
+.w100n-setup .w100n-docs-caption {
+  padding: 0;
+  font-size: 12px;
+  color: var(--docs-muted);
+  font-weight: 550;
 }
-.w100n-sheet-end {
+.w100n-setup-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+.w100n-setup-grid label,
+.w100n-setup-line {
+  display: grid;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--docs-muted);
+}
+.w100n-docs .w100n-setup .w100n-docs-field {
+  height: 32px;
+  color: var(--docs-text);
+}
+.w100n-setup-check {
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 32px;
+  font-size: 13px;
 }
-.w100n-sheet-muted {
-  max-width: 380px;
-  color: var(--docs-muted);
-  font-size: 12px;
-  line-height: 1.35;
+.w100n-setup-check input {
+  width: 16px;
+  height: 16px;
+  accent-color: #7c3aed;
 }
-.w100n-sheet-anchor {
-  position: relative;
-  display: inline-flex;
+.w100n-text-first {
+  position: absolute;
+  top: calc(var(--mt) / -2 - 7px);
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  user-select: none;
 }
-.w100n-sheet-bar {
+.w100n-text-head,
+.w100n-text-foot {
   position: absolute;
-  left: 8px;
-  right: 8px;
-  bottom: 4px;
-  height: 3px;
-  border-radius: 2px;
+  left: var(--ml);
+  max-width: 60%;
+  overflow: hidden;
+  color: #64748b;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.w100n-sheet-ribbon .w100n-sheet-anchor > button.w100n-sheet-picker {
-  display: flex;
+.w100n-text-first .w100n-text-head {
+  left: 0;
+}
+.w100n-text-gap .w100n-text-head {
+  bottom: calc(var(--mt) / 2 - 7px);
+}
+.w100n-text-gap .w100n-text-foot {
+  top: auto;
+  bottom: calc(var(--mt) + 24px + var(--mb) / 2 - 7px);
+}
+.w100n-text-gap.is-end .w100n-text-foot {
+  bottom: calc(var(--mb) / -2 - 7px);
+}
+.w100n-text-body [data-resize-container] {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+.w100n-text-body [data-resize-container]:has(img[data-wrap=left]) {
+  float: left;
+  margin: 4px 16px 8px 0;
+}
+.w100n-text-body [data-resize-container]:has(img[data-wrap=right]) {
+  float: right;
+  margin: 4px 0 8px 16px;
+}
+.w100n-text-body [data-resize-handle] {
+  position: absolute;
+  z-index: 2;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #7c3aed;
+  border-radius: 3px;
+  background: #fff;
+  opacity: 0;
+}
+.w100n-text-body [data-resize-container]:hover [data-resize-handle],
+.w100n-text-body .ProseMirror-selectednode [data-resize-handle],
+.w100n-text-body [data-resize-state=true] [data-resize-handle] {
+  opacity: 1;
+}
+.w100n-text-body [data-resize-handle=top-left] {
+  top: -6px;
+  left: -6px;
+  cursor: nwse-resize;
+}
+.w100n-text-body [data-resize-handle=top-right] {
+  top: -6px;
+  right: -6px;
+  cursor: nesw-resize;
+}
+.w100n-text-body [data-resize-handle=bottom-left] {
+  bottom: -6px;
+  left: -6px;
+  cursor: nesw-resize;
+}
+.w100n-text-body [data-resize-handle=bottom-right] {
+  bottom: -6px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+.w100n-text-body .ProseMirror-selectednode img,
+.w100n-text-body [data-resize-container].ProseMirror-selectednode img {
+  outline: 2px solid #7c3aed;
+  outline-offset: 2px;
+}
+.w100n-text-body table[data-borders=none] :is(td, th) {
+  border-color: transparent;
+  outline: 1px dashed #e2e8f0;
+  outline-offset: -1px;
+}
+.w100n-text-body .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  width: 4px;
+  background: #7c3aed;
+  pointer-events: none;
+}
+.w100n-text-body.resize-cursor,
+.w100n-text-body .resize-cursor {
+  cursor: col-resize;
+}
+.w100n-text-body .tableWrapper {
+  overflow-x: auto;
+}
+.w100n-text-body :is(td, th) {
+  position: relative;
+}
+.w100n-text-body .w100n-found {
+  background: #fde68a;
+  border-radius: 2px;
+}
+.w100n-text-body .w100n-found.is-current {
+  background: #f59e0b;
+  color: #fff;
+}
+.w100n-text-find {
+  display: grid;
+  gap: 8px;
+  width: 340px;
+}
+.w100n-text-find .w100n-docs-row {
+  gap: 6px;
+}
+.w100n-docs .w100n-text-find input:not([type]) {
+  flex: 1;
+  min-width: 0;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--docs-border);
+  border-radius: 9px;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+}
+.w100n-text-find small {
+  min-width: 56px;
+  color: var(--docs-dim);
+  font-size: 11.5px;
+  text-align: right;
+  white-space: nowrap;
+}
+.w100n-docs .w100n-text-find .w100n-docs-row > button:not(.w100n-docs-action):not(.w100n-pdf-link) {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: var(--docs-muted);
+}
+.w100n-text-find .w100n-docs-row > button:not(.w100n-docs-action):not(.w100n-pdf-link):hover:not(:disabled) {
+  background: var(--docs-hover);
+}
+.w100n-docs-new {
+  position: relative;
+}
+.w100n-docs .w100n-docs-new > .w100n-docs-action {
+  height: 30px;
+  padding: 0 10px;
+  gap: 5px;
+}
+.w100n-docs-new .w100n-docs-menu {
+  right: 0;
+  left: auto;
+  min-width: 210px;
+}
+.w100n-text-scroll {
+  padding-bottom: 150px;
+}
+.w100n-docs .w100n-text-ribbon:is(.w100n-text-island, .w100n-text-corner) {
+  position: absolute;
+  z-index: 6;
+  bottom: 14px;
+  display: grid;
+  gap: 4px;
+  width: max-content;
+  padding: 5px;
+  border-radius: 13px;
+}
+.w100n-docs .w100n-text-ribbon.w100n-text-island {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: calc(100% - 330px);
+}
+.w100n-docs .w100n-text-ribbon.w100n-text-corner {
+  max-width: none;
+}
+.w100n-text-corner[data-side=left] {
+  left: 14px;
+}
+.w100n-text-corner[data-side=right] {
+  right: 14px;
+}
+.w100n-text-island > .w100n-text-tools + .w100n-text-tools {
+  padding-top: 4px;
+  border-top: 1px solid var(--docs-border);
+}
+.w100n-text-island .w100n-text-tools,
+.w100n-text-corner .w100n-text-tools {
+  min-height: 34px;
+}
+.w100n-docs .w100n-text-ribbon:is(.w100n-text-island, .w100n-text-corner) :is(.w100n-text-tools, .w100n-text-anchor) > button:not(.w100n-docs-action, .w100n-text-picker, .w100n-text-word) {
+  width: 34px;
+  height: 34px;
+}
+.w100n-text-island .w100n-text-pop,
+.w100n-text-corner .w100n-text-pop {
+  top: auto;
+  bottom: calc(100% + 12px);
+}
+.w100n-text-corner[data-side=right] .w100n-text-pop {
+  left: auto;
+  right: 0;
+}
+.w100n-text-corner .w100n-text-anchor > button.w100n-text-picker[data-size=small] {
+  width: 64px;
+  border-color: transparent;
+  justify-content: center;
+}
+.w100n-text-corner .w100n-text-picker svg {
+  display: none;
+}
+.w100n-docs .w100n-text-ribbon.w100n-text-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.w100n-docs .w100n-text-ribbon.w100n-text-docbar {
+  display: flex;
+  align-items: center;
+  align-self: auto;
+  width: auto;
+  max-width: none;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+.w100n-docs .w100n-text-docbar .w100n-text-anchor > button.w100n-text-menu-button {
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 6px;
+  color: var(--docs-muted);
+  font-size: 12.5px;
+  font-weight: 500;
+}
+.w100n-docs .w100n-text-docbar .w100n-text-anchor > button.w100n-text-menu-button:is(:hover, [aria-expanded=true]) {
+  color: var(--docs-text);
+  background: var(--docs-hover);
+}
+.w100n-docs-menus {
+  margin-left: -6px;
+  min-width: 0;
+}
+.w100n-docs-status {
+  display: contents;
+}
+.w100n-text-ribbon .w100n-text-end > button.w100n-text-saved {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: auto;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 8px;
+  color: #f87171;
+  background: #f8717114;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.w100n-text-saved svg {
+  width: 15px;
+  height: 15px;
+}
+@container (max-width: 900px) {
+  .w100n-docs .w100n-text-ribbon.w100n-text-island {
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+    width: auto;
+    max-width: none;
+  }
+  .w100n-text-island > .w100n-text-tools {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .w100n-text-corner[data-side=left] {
+    display: none;
+  }
+  .w100n-docs .w100n-text-ribbon.w100n-text-corner[data-side=right] {
+    top: 54px;
+    right: 8px;
+    bottom: auto;
+  }
+  .w100n-docs-menus {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+}
+.w100n-docs-filters {
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+}
+.w100n-docs-filters .w100n-docs-search {
+  flex: 1;
+  min-width: 0;
+}
+.w100n-docs-types {
+  position: relative;
+  flex-shrink: 0;
+}
+.w100n-docs .w100n-docs-types > .w100n-docs-field {
+  width: auto;
+}
+.w100n-docs .w100n-docs-types > .w100n-docs-field > svg:first-child {
+  width: 15px;
+  height: 15px;
+  color: var(--docs-dim);
+}
+.w100n-docs .w100n-docs-types > .w100n-docs-field[data-on=true] {
+  border-color: var(--docs-accent);
+  box-shadow: 0 0 0 3px var(--docs-active);
+}
+.w100n-docs-types > .w100n-docs-field .w100n-docs-badge {
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 6px;
+}
+.w100n-docs-types .w100n-docs-menu {
+  left: auto;
+  width: 230px;
+}
+.w100n-docs-types .w100n-docs-tile {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  box-shadow: none;
+}
+.w100n-docs-types .w100n-docs-tile svg {
+  width: 12px;
+  height: 12px;
+}
+.w100n-docs-box {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1.5px solid var(--docs-line2);
+  border-radius: 5px;
+}
+.w100n-docs-menu button[aria-selected=true] .w100n-docs-box {
+  border-color: transparent;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  color: #fff;
+}
+.w100n-docs-menu .w100n-docs-box svg {
+  width: 11px;
+  height: 11px;
+  margin: 0;
+  color: #fff;
+  stroke-width: 3;
+}
+.w100n-docs-menu-foot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--docs-border);
+}
+.w100n-docs-menu .w100n-docs-menu-foot button {
+  width: auto;
+  min-height: 28px;
+  color: var(--docs-accent);
+  font-weight: 600;
+}
+.w100n-docs-chips button svg {
+  width: 12px;
+  height: 12px;
+}
+.w100n-text-island .w100n-text-anchor > button.w100n-text-picker[data-size=mid] {
+  width: 112px;
+}
+.w100n-text .ProseMirror > :first-child:not(.ProseMirror-widget),
+.w100n-text .ProseMirror > .w100n-text-first:first-child + * {
+  margin-top: 0;
+}
+.w100n-docs-outline {
+  display: grid;
+  gap: 6px;
+  padding: 4px 2px;
+}
+.w100n-docs-reading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 2px 6px 10px;
+}
+.w100n-docs-reading span {
+  flex: 1;
+  height: 4px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: var(--docs-soft);
+}
+.w100n-docs-reading i {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  background:
+    linear-gradient(
+      90deg,
+      #a78bfa,
+      #7c3aed);
+}
+.w100n-docs-reading small {
+  color: var(--docs-dim);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.w100n-docs-outline .w100n-docs-search {
+  margin-bottom: 8px;
+}
+.w100n-docs-chapter-row {
+  display: flex;
+  align-items: center;
+  border-radius: 11px;
+}
+.w100n-docs-chapter-row:hover {
+  background: var(--docs-hover);
+}
+.w100n-docs .w100n-docs-chapter-go {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+  padding: 9px 12px;
+  color: var(--docs-text);
+  text-align: left;
+}
+.w100n-docs-chapter-go b {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13.5px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.w100n-docs-chapter-num {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  background: var(--docs-soft);
+  color: var(--docs-muted);
+  font-size: 12.5px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-docs-chapter-num svg {
+  width: 14px;
+  height: 14px;
+}
+.w100n-docs-chapter[data-state=done] .w100n-docs-chapter-num {
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #34d399,
+      #059669);
+}
+.w100n-docs-chapter[data-state=now] .w100n-docs-chapter-num {
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #a78bfa,
+      #7c3aed);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-docs .w100n-docs-chapter-fold {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding: 0 12px;
+  color: var(--docs-dim);
+}
+.w100n-docs-chapter-fold:hover {
+  color: var(--docs-text);
+}
+.w100n-docs-chapter-fold small {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.w100n-docs-chapter-fold svg {
+  width: 15px;
+  height: 15px;
+}
+.w100n-docs-sections {
+  display: grid;
+  gap: 4px;
+  margin: 6px 0 12px 26px;
+  padding-left: 18px;
+  border-left: 1.5px solid var(--docs-line2);
+}
+.w100n-docs .w100n-docs-sections button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 9px 14px;
+  border-radius: 10px;
+  color: var(--docs-muted);
+  font-size: 13px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.w100n-docs-sections button:hover {
+  background: var(--docs-hover);
+  color: var(--docs-text);
+}
+.w100n-docs .w100n-docs-sections button[data-level="2"] {
+  padding-left: 34px;
+}
+.w100n-docs-sections button i {
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--docs-line2);
+}
+.w100n-docs-sections button[data-state=done] i {
+  background: #34d399;
+}
+.w100n-docs .w100n-docs-sections button[aria-current] {
+  color: var(--docs-text);
+  background: var(--docs-active);
+  font-weight: 650;
+}
+.w100n-docs-sections button[aria-current] i {
+  background: var(--docs-accent);
+  box-shadow: 0 0 0 3px var(--docs-active);
+}
+.w100n-docs-sections button[aria-current]::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  bottom: 9px;
+  left: -20px;
+  width: 3px;
+  border-radius: 2px;
+  background: linear-gradient(#a78bfa, #7c3aed);
+}
+.w100n-docs .w100n-docs-rename {
+  min-width: 0;
+  width: min(420px, 100%);
+  height: 24px;
+  padding: 0 6px;
+  margin-left: -6px;
+  border: 1px solid var(--docs-accent);
+  border-radius: 7px;
+  outline: none;
+  background: var(--docs-card);
+  color: var(--docs-text);
+  font: inherit;
+  box-shadow: 0 0 0 3px var(--docs-active);
+}
+.w100n-docs-tabs {
+  min-width: 0;
+  overflow: hidden;
+}
+.w100n-docs-tabs button {
+  min-width: 0;
+}
+.w100n-docs-tabs button span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.w100n-docs-prose {
+  counter-reset: w100n-fn;
+}
+.w100n-fn {
+  counter-increment: w100n-fn;
+  padding: 0 1px;
+  color: #6d28d9;
+  font-weight: 600;
+  cursor: pointer;
+}
+.w100n-fn::after {
+  content: counter(w100n-fn);
+}
+.w100n-fn.ProseMirror-selectednode,
+.w100n-math.ProseMirror-selectednode {
+  outline: 2px solid #8b5cf6;
+  outline-offset: 1px;
+  border-radius: 3px;
+}
+.w100n-math {
+  padding: 0 2px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.w100n-math:hover {
+  background: #ede9fe;
+}
+.w100n-math math {
+  font-size: 1.05em;
+}
+.w100n-text-footnotes {
+  position: absolute;
+  left: var(--ml);
+  right: var(--mr);
+  bottom: calc(var(--mt) + 24px + var(--mb));
+  padding-top: 6px;
+  color: #334155;
+  font-size: 10.5px;
+  line-height: 15px;
+}
+.w100n-text-footnotes::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 33%;
+  border-top: 1px solid #94a3b8;
+}
+.w100n-text-footnotes p {
+  margin: 0;
+}
+.w100n-text-footnotes sup {
+  margin-right: 2px;
+  color: #6d28d9;
+  font-weight: 600;
+}
+.w100n-text-gap.is-end .w100n-text-footnotes {
+  bottom: 0;
+}
+.w100n-docs .w100n-insert {
+  width: min(500px, 100%);
+  gap: 12px;
+}
+.w100n-insert-grid {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 4px;
+}
+.w100n-docs .w100n-insert-grid button,
+.w100n-docs .w100n-insert-tools button {
+  height: 34px;
+  border: 1px solid var(--docs-border);
+  border-radius: 8px;
+  background: var(--docs-soft);
+  color: var(--docs-text);
+  font-size: 15px;
+}
+.w100n-docs .w100n-insert-tools button {
+  min-width: 38px;
+  padding: 0 8px;
+  font-size: 13px;
+}
+.w100n-docs .w100n-insert-grid button:hover,
+.w100n-docs .w100n-insert-tools button:hover {
+  border-color: var(--docs-accent);
+  background: var(--docs-active);
+}
+.w100n-insert-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.w100n-docs .w100n-insert-latex {
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  outline: none;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font:
+    14px ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+.w100n-docs .w100n-insert-latex:focus,
+.w100n-docs .w100n-insert-note:focus {
+  border-color: var(--docs-accent);
+  box-shadow: 0 0 0 3px var(--docs-active);
+}
+.w100n-insert-preview {
+  display: grid;
+  place-items: center;
+  min-height: 56px;
+  padding: 8px;
+  border-radius: 10px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 20px;
+}
+.w100n-docs .w100n-insert-note {
+  min-height: 96px;
+  padding: 10px 12px;
+  border: 1px solid var(--docs-border);
+  border-radius: 10px;
+  outline: none;
+  resize: vertical;
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  font: inherit;
+}
+.w100n-new-tile[data-tone=pink] {
+  background:
+    linear-gradient(
+      145deg,
+      #ec4899,
+      #be185d);
+}
+.w100n-new-tile[data-tone=violet] {
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+}
+
+/* src/sheets/sheets.css */
+@font-face {
+  font-family: "Calibri";
+  font-weight: 400;
+  font-style: normal;
+  src:
+    local("Calibri"),
+    local("Carlito"),
+    local("Arial"),
+    local("ArialMT"),
+    local("Liberation Sans");
+}
+@font-face {
+  font-family: "Calibri";
+  font-weight: 400;
+  font-style: italic;
+  src:
+    local("Calibri Italic"),
+    local("Carlito Italic"),
+    local("Arial Italic"),
+    local("Arial-ItalicMT"),
+    local("Liberation Sans Italic");
+}
+@font-face {
+  font-family: "Calibri";
+  font-weight: 700;
+  font-style: normal;
+  src:
+    local("Calibri Bold"),
+    local("Carlito Bold"),
+    local("Arial Bold"),
+    local("Arial-BoldMT"),
+    local("Liberation Sans Bold");
+}
+@font-face {
+  font-family: "Calibri";
+  font-weight: 700;
+  font-style: italic;
+  src:
+    local("Calibri Bold Italic"),
+    local("Carlito Bold Italic"),
+    local("Arial Bold Italic"),
+    local("Arial-BoldItalicMT"),
+    local("Liberation Sans Bold Italic");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 400;
+  font-style: normal;
+  src:
+    local("Aptos"),
+    local("Arial"),
+    local("ArialMT"),
+    local("Liberation Sans");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 400;
+  font-style: italic;
+  src:
+    local("Aptos Italic"),
+    local("Arial Italic"),
+    local("Arial-ItalicMT"),
+    local("Liberation Sans Italic");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 700;
+  font-style: normal;
+  src:
+    local("Aptos Bold"),
+    local("Arial Bold"),
+    local("Arial-BoldMT"),
+    local("Liberation Sans Bold");
+}
+@font-face {
+  font-family: "Aptos";
+  font-weight: 700;
+  font-style: italic;
+  src:
+    local("Aptos Bold Italic"),
+    local("Arial Bold Italic"),
+    local("Arial-BoldItalicMT"),
+    local("Liberation Sans Bold Italic");
+}
+.w100n-sheet {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.w100n-sheet-ribbon {
+  align-self: center;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 6px;
+  width: min(100%, 1240px);
+  padding: 4px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  background: var(--docs-card);
+  box-shadow: var(--docs-shadow);
+}
+.w100n-sheet-tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  min-height: 32px;
+}
+.w100n-sheet-ribbon button:not(.w100n-docs-action) {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  color: var(--docs-muted);
+}
+.w100n-sheet-ribbon button:not(.w100n-docs-action):hover:not(:disabled) {
+  background: var(--docs-hover);
+  color: var(--docs-text);
+}
+.w100n-docs .w100n-sheet-ribbon button[aria-pressed=true],
+.w100n-docs .w100n-sheet-ribbon button[aria-expanded=true] {
+  color: #fff;
+  background:
+    linear-gradient(
+      145deg,
+      #8b5cf6,
+      #6d28d9);
+  box-shadow: 0 6px 14px -6px #7c3aed99;
+}
+.w100n-sheet-gap {
+  width: 1px;
+  height: 20px;
+  margin: 0 5px;
+  background: var(--docs-border);
+}
+.w100n-sheet-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+.w100n-sheet-muted {
+  max-width: 380px;
+  color: var(--docs-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+.w100n-sheet-anchor {
+  position: relative;
+  display: inline-flex;
+}
+.w100n-sheet-bar {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 4px;
+  height: 3px;
+  border-radius: 2px;
+}
+.w100n-sheet-ribbon .w100n-sheet-anchor > button.w100n-sheet-picker {
+  display: flex;
   justify-content: space-between;
   gap: 6px;
   width: 132px;
@@ -3941,8 +4816,9 @@ svg.w100n-pdf-marks {
   overflow: hidden;
   border: 1px solid var(--docs-border);
   border-radius: 13px;
-  background: var(--docs-card);
+  background: #fff;
   box-shadow: var(--docs-shadow);
+  color-scheme: light;
 }
 .w100n-sheet-grid,
 .w100n-sheet-host {
@@ -3962,8 +4838,8 @@ svg.w100n-pdf-marks {
   z-index: 5;
   display: grid;
   place-items: center;
-  background: var(--docs-card);
-  color: var(--docs-muted);
+  background: #fff;
+  color: #64748b;
   font-weight: 600;
 }
 .w100n-sheet-cover span {