@openeditor/ui 0.0.12 → 0.0.14

package/dist/index.css

@@ -90,13 +90,13 @@
 }
 .oe-prosemirror blockquote,
 .oe-viewer blockquote {
-  border-left: 3px solid var(--oe-accent, #f5f5f5);
+  border-left: 3px solid var(--oe-structural-line, var(--oe-border, #e5e5e5));
   margin: 18px 0;
   padding-left: 16px;
 }
 .oe-prosemirror pre,
 .oe-viewer pre {
-  background: var(--oe-code-bg, #f5f5f5);
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
   border-radius: 8px;
   color: var(--oe-code-text, #171717);
   overflow: auto;
@@ -204,7 +204,6 @@
   align-self: start;
   background: transparent;
   border: 0;
-  border-radius: 6px;
   color: var(--oe-muted, #737373);
   cursor: pointer;
   display: inline-flex;
@@ -216,18 +215,25 @@
 }
 .oe-toggle-list-trigger:hover,
 .oe-toggle-list-trigger:focus-visible {
-  background: var(--oe-surface-muted, #f5f5f5);
   color: var(--oe-text, #171717);
   outline: none;
 }
+.oe-toggle-list-trigger:focus-visible .oe-toggle-list-chevron {
+  filter: drop-shadow(0 0 2px var(--oe-text, #171717));
+}
 .oe-toggle-list-trigger:disabled {
   cursor: default;
 }
 .oe-toggle-list-chevron {
-  font-size: 22px;
-  line-height: 1;
+  border-bottom: 4px solid transparent;
+  border-left: 6px solid currentColor;
+  border-top: 4px solid transparent;
+  display: block;
+  height: 0;
   transform: rotate(0deg);
+  transform-origin: 3px center;
   transition: transform 140ms ease;
+  width: 0;
 }
 .oe-toggle-list-item[data-open=true] > .oe-toggle-list-trigger .oe-toggle-list-chevron {
   transform: rotate(90deg);
@@ -245,45 +251,40 @@
   display: none;
 }
 .oe-callout {
-  --oe-callout-color: var(--oe-accent-strong, #171717);
-  background: color-mix(in srgb, var(--oe-callout-color) 8%, var(--oe-surface, #ffffff));
-  border: 1px solid color-mix(in srgb, var(--oe-callout-color) 24%, var(--oe-border, #e5e5e5));
-  border-left: 4px solid var(--oe-callout-color);
-  border-radius: 10px;
+  align-items: start;
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border: 0;
+  border-radius: 8px;
+  box-sizing: border-box;
   display: grid;
-  gap: 10px;
-  grid-template-columns: auto minmax(0, 1fr);
-  margin: 18px 0;
-  padding: 14px;
-}
-.oe-callout[data-tone=success] {
-  --oe-callout-color: #16a34a;
-}
-.oe-callout[data-tone=warning] {
-  --oe-callout-color: #d97706;
-}
-.oe-callout[data-tone=danger] {
-  --oe-callout-color: #dc2626;
-}
-.oe-callout-tone {
-  align-self: start;
-  background: var(--oe-surface, #ffffff);
-  border: 1px solid var(--oe-border-strong, #d4d4d4);
-  border-radius: 6px;
-  color: var(--oe-text, #171717);
-  font: inherit;
-  font-size: 12px;
-  padding: 4px 6px;
-  text-transform: capitalize;
+  gap: 8px;
+  grid-template-columns: 28px minmax(0, 1fr);
+  margin: 1em 0;
+  padding: 10px 14px;
+  width: 100%;
 }
-.oe-callout-content > :first-child {
+.oe-callout-content > :first-child,
+.oe-callout-content > [data-node-view-content-react] > :first-child {
   margin-top: 0;
 }
-.oe-callout-content > :last-child {
+.oe-callout-content > :last-child,
+.oe-callout-content > [data-node-view-content-react] > :last-child {
   margin-bottom: 0;
 }
-.oe-viewer .oe-callout {
-  grid-template-columns: minmax(0, 1fr);
+.oe-callout-emoji {
+  align-items: center;
+  align-self: start;
+  display: inline-flex;
+  font-size: 20px;
+  height: 26px;
+  justify-content: center;
+  line-height: 1;
+  width: 28px;
+}
+.oe-callout .oe-callout-emoji-trigger {
+  height: 26px;
+  line-height: 1;
+  width: 28px;
 }
 .oe-page {
   align-items: center;
@@ -304,21 +305,156 @@
 .oe-page:focus-within {
   background: var(--oe-surface-muted, #f5f5f5);
 }
-.oe-page-icon,
-.oe-page-icon-input {
+.oe-page[data-page-id]:not([data-page-id=""]) {
+  cursor: pointer;
+}
+.oe-page[data-page-id]:not([data-page-id=""]):focus-visible {
+  box-shadow: 0 0 0 2px var(--oe-surface, #ffffff), 0 0 0 4px var(--oe-structural-line, #d4d4d4);
+  outline: none;
+}
+.oe-page-icon {
   flex: 0 0 auto;
   font-size: 18px;
   line-height: 1;
   text-align: center;
   width: 24px;
 }
-.oe-page-icon-input {
+.oe-emoji-trigger {
+  align-items: center;
   background: transparent;
   border: 0;
+  border-radius: 6px;
   color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 20px;
+  height: 30px;
+  justify-content: center;
+  padding: 0;
+  width: 30px;
+}
+.oe-emoji-trigger:hover,
+.oe-emoji-trigger:focus-visible,
+.oe-emoji-trigger[data-popup-open] {
+  background: color-mix(in srgb, var(--oe-text, #171717) 8%, transparent);
   outline: none;
+}
+.oe-emoji-trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--oe-surface, #ffffff), 0 0 0 4px var(--oe-structural-line, #d4d4d4);
+}
+.oe-emoji-trigger:disabled {
+  cursor: default;
+}
+.oe-page-icon-trigger {
+  font-size: 18px;
+  height: 28px;
+  width: 28px;
+}
+.oe-emoji-popover {
+  background: var(--oe-surface, #ffffff);
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px var(--oe-shadow, rgb(0 0 0 / 8%)), 0 16px 48px var(--oe-shadow, rgb(0 0 0 / 16%));
+  color: var(--oe-text, #171717);
+  overflow: hidden;
+  transform-origin: var(--transform-origin);
+  z-index: 1100;
+}
+.oe-emoji-picker {
+  display: flex;
+  height: min(360px, calc(100vh - 32px));
+  isolation: isolate;
+  width: min(320px, calc(100vw - 24px));
+  flex-direction: column;
+}
+.oe-emoji-search {
+  appearance: none;
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border: 0;
+  border-radius: 8px;
+  color: var(--oe-text, #171717);
+  font: inherit;
+  font-size: 14px;
+  margin: 8px;
+  min-height: 38px;
+  outline: none;
+  padding: 0 11px;
+}
+.oe-emoji-search:focus {
+  box-shadow: inset 0 0 0 1px var(--oe-structural-line, var(--oe-border, #e5e5e5));
+}
+.oe-emoji-viewport {
+  min-height: 0;
+  outline: none;
+  overflow: auto;
+  position: relative;
+  flex: 1;
+}
+.oe-emoji-state {
+  align-items: center;
+  color: var(--oe-muted, #737373);
+  display: flex;
+  font-size: 13px;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+}
+.oe-emoji-list {
+  padding-bottom: 6px;
+  user-select: none;
+}
+.oe-emoji-category {
+  background: var(--oe-surface, #ffffff);
+  color: var(--oe-muted, #737373);
+  font-size: 11px;
+  font-weight: 650;
+  padding: 8px 10px 4px;
+}
+.oe-emoji-row {
+  display: flex;
+  padding: 0 6px;
+  scroll-margin-block: 4px;
+}
+.oe-emoji-option {
+  align-items: center;
+  aspect-ratio: 1;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  font-size: 20px;
+  justify-content: center;
+  min-width: 0;
   padding: 0;
 }
+.oe-emoji-option[data-active] {
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+}
+.oe-emoji-footer {
+  align-items: center;
+  border-top: 1px solid var(--oe-structural-line, var(--oe-border, #e5e5e5));
+  color: var(--oe-muted, #737373);
+  display: flex;
+  font-size: 12px;
+  gap: 7px;
+  min-height: 42px;
+  padding: 5px 8px;
+}
+.oe-emoji-footer > span:first-child {
+  font-size: 18px;
+}
+.oe-emoji-footer [frimousse-skin-tone-selector] {
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 18px;
+  margin-left: auto;
+  min-height: 30px;
+  min-width: 30px;
+}
 .oe-page-title {
   flex: 1 1 auto;
   font-weight: 500;
@@ -358,13 +494,14 @@
   color: var(--oe-muted, #737373);
 }
 .oe-diagram {
-  border: 1px solid var(--oe-border, #e5e5e5);
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border: 0;
   border-radius: 12px;
   margin: 18px 0;
   overflow: hidden;
 }
 .oe-diagram-preview {
-  background: var(--oe-surface, #ffffff);
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
   min-height: 120px;
   overflow: auto;
   padding: 18px;
@@ -377,9 +514,9 @@
 }
 .oe-diagram-source,
 .oe-diagram-error {
-  background: var(--oe-code-bg, #f5f5f5);
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
   border: 0;
-  border-top: 1px solid var(--oe-border, #e5e5e5);
+  border-top: 1px solid var(--oe-structural-line, var(--oe-border, #e5e5e5));
   box-sizing: border-box;
   color: var(--oe-code-text, #171717);
   display: block;
@@ -413,7 +550,7 @@
 .oe-prosemirror hr::after,
 .oe-divider::after,
 .oe-viewer hr::after {
-  background: var(--oe-border, #e5e5e5);
+  background: var(--oe-structural-line, var(--oe-border, #e5e5e5));
   content: "";
   display: block;
   height: 1px;
@@ -429,7 +566,7 @@
 }
 .oe-prosemirror hr.ProseMirror-selectednode::after,
 .oe-divider.ProseMirror-selectednode::after {
-  background: var(--oe-border-strong, #d4d4d4);
+  background: var(--oe-structural-line, var(--oe-border, #e5e5e5));
   box-shadow: 0 0 0 6px var(--oe-accent, #f5f5f5);
 }
 .oe-columns {
@@ -476,7 +613,7 @@
 }
 .oe-task-checkbox {
   appearance: none;
-  background: var(--oe-surface-muted, #f5f5f5);
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
   border: 0;
   border-radius: 4px;
   box-shadow: none;
@@ -515,29 +652,25 @@
   margin: 0;
   min-height: 1.6em;
 }
-.oe-prosemirror table,
-.oe-viewer table {
+.oe-prosemirror table[data-openeditor-table],
+.oe-viewer table[data-openeditor-table] {
   border-collapse: collapse;
   margin: 18px 0;
   table-layout: fixed;
   width: 100%;
 }
-.oe-prosemirror th,
-.oe-prosemirror td,
-.oe-viewer th,
-.oe-viewer td {
-  border: 1px solid var(--oe-border-strong, #d4d4d4);
+.oe-prosemirror table[data-openeditor-table] th,
+.oe-prosemirror table[data-openeditor-table] td,
+.oe-viewer table[data-openeditor-table] th,
+.oe-viewer table[data-openeditor-table] td {
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border: 1px solid var(--oe-structural-line, var(--oe-border, #e5e5e5));
   min-width: 96px;
   padding: 10px;
   vertical-align: top;
 }
-.oe-prosemirror td,
-.oe-viewer td {
-  background: var(--oe-surface, #ffffff);
-}
-.oe-prosemirror th,
-.oe-viewer th {
-  background: var(--oe-surface-muted, #f5f5f5);
+.oe-prosemirror table[data-openeditor-table] th,
+.oe-viewer table[data-openeditor-table] th {
   font-weight: 700;
 }
 .oe-button,
@@ -578,6 +711,16 @@
   display: inline-flex;
   gap: 6px;
 }
+.oe-cascade-menu {
+  align-items: flex-start;
+  display: flex;
+  gap: 4px;
+  outline: none;
+  z-index: 1002;
+}
+.oe-cascade-panel {
+  flex: 0 0 auto;
+}
 .oe-slash-menu {
   background: var(--oe-surface, #ffffff);
   border-radius: 23px;
@@ -639,6 +782,16 @@
   color: var(--oe-muted, #737373);
   flex: 0 0 auto;
 }
+.oe-submenu-chevron {
+  color: var(--oe-muted, #737373);
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+.oe-slash-submenu {
+  display: grid;
+  gap: 2px;
+  width: 190px;
+}
 .oe-slash-menu-item:focus .oe-slash-menu-icon,
 .oe-slash-menu-item:hover .oe-slash-menu-icon,
 .oe-slash-menu-item:focus-visible .oe-slash-menu-icon,
@@ -717,6 +870,9 @@
   padding: 6px;
   z-index: 1002;
 }
+.oe-block-transform-submenu {
+  min-width: 160px;
+}
 .oe-block-transform-menu,
 .oe-block-transform-menu *,
 .oe-block-transform-menu *::before,
@@ -892,4 +1048,118 @@
   color: var(--oe-surface, #ffffff);
   opacity: 0.88;
 }
+.oe-attachment {
+  align-items: center;
+  background: var(--oe-surface, #fff);
+  border: 1px solid var(--oe-border, #e5e5e5);
+  border-radius: 12px;
+  color: var(--oe-text, #171717);
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  min-height: 68px;
+  padding: 10px 12px;
+  text-align: left;
+  text-decoration: none;
+  transition:
+    border-color 140ms,
+    box-shadow 140ms,
+    background 140ms;
+  width: 100%;
+}
+.oe-attachment:hover,
+.oe-attachment:focus-within {
+  border-color: var(--oe-border-strong, #d4d4d4);
+  box-shadow: 0 4px 18px var(--oe-shadow, rgb(0 0 0 / 8%));
+  outline: none;
+}
+.oe-attachment[data-state=error],
+.oe-attachment[data-state=missing] {
+  border-color: #efb0b0;
+}
+.oe-attachment-icon {
+  align-items: center;
+  background: var(--oe-surface-muted, #f5f5f5);
+  border-radius: 9px;
+  display: flex;
+  flex: 0 0 42px;
+  height: 48px;
+  justify-content: center;
+}
+.oe-attachment-icon span {
+  color: var(--oe-muted, #737373);
+  font-size: 9px;
+  font-weight: 750;
+  letter-spacing: .04em;
+}
+.oe-attachment-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.oe-attachment-name {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  font-weight: 650;
+  min-width: 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oe-attachment-meta {
+  color: var(--oe-muted, #737373);
+  display: block;
+  font-size: 12px;
+  margin-top: 3px;
+}
+.oe-attachment-progress {
+  background: var(--oe-surface-muted, #f5f5f5);
+  border-radius: 2px;
+  height: 4px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+.oe-attachment-progress span {
+  background: var(--oe-accent-strong, #171717);
+  display: block;
+  height: 100%;
+  transition: width 90ms linear;
+}
+.oe-attachment-error {
+  color: #b42318;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.oe-attachment-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: flex-end;
+}
+.oe-attachment-actions button {
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  color: var(--oe-muted, #737373);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  min-height: 34px;
+  padding: 0 8px;
+}
+.oe-attachment-actions button:hover,
+.oe-attachment-actions button:focus-visible {
+  background: var(--oe-surface-muted, #f5f5f5);
+  color: var(--oe-text, #171717);
+  outline: none;
+}
+.oe-attachment-viewer {
+  cursor: pointer;
+}
 /*# sourceMappingURL=index.css.map */