@thebase/ui 0.0.5 → 0.0.7

package/dist/runtime/milkdown/theme/common/reset.css

@@ -0,0 +1,289 @@
+.milkdown {
+  position: relative;
+}
+
+  .milkdown * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .milkdown button,
+  .milkdown input {
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+
+  .milkdown button:focus, .milkdown input:focus {
+      outline: none;
+    }
+
+  .milkdown :focus-visible {
+    outline: none;
+  }
+
+  .milkdown {
+
+  font-family: var(--crepe-font-default);
+  font-size: var(--crepe-base-font-size, 16px);
+  color: var(--crepe-color-on-background);
+  background: var(--crepe-color-background);
+}
+
+  .milkdown .milkdown-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .milkdown .ProseMirror-focused {
+    outline: none;
+  }
+
+  .milkdown .ProseMirror {
+    padding: 60px 120px;
+  }
+
+  .milkdown .ProseMirror *::-moz-selection {
+      background: var(--crepe-color-selected);
+    }
+
+  .milkdown .ProseMirror *::selection {
+      background: var(--crepe-color-selected);
+    }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode {
+      background: var(--crepe-color-selected);
+      outline: none;
+    }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode ::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode ::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode:after {
+      all: unset;
+    }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode {
+      background: var(--crepe-color-selected);
+      outline: none;
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-selected),
+        transparent 60%
+      );
+    }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode ::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode ::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror[data-dragging='true']::-moz-selection, .milkdown .ProseMirror[data-dragging='true'] *::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror[data-dragging='true'] .ProseMirror-selectednode,
+      .milkdown .ProseMirror[data-dragging='true']::selection,
+      .milkdown .ProseMirror[data-dragging='true'] *::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror[data-dragging='true'] input::-moz-selection {
+        background: var(--crepe-color-selected);
+      }
+
+  .milkdown .ProseMirror[data-dragging='true'] input::selection {
+        background: var(--crepe-color-selected);
+      }
+
+  .milkdown .ProseMirror img {
+      vertical-align: bottom;
+      max-width: 100%;
+    }
+
+  .milkdown .ProseMirror img.ProseMirror-selectednode {
+        background: none;
+        outline: 2px solid var(--crepe-color-primary);
+      }
+
+  .milkdown .ProseMirror h1,
+    .milkdown .ProseMirror h2,
+    .milkdown .ProseMirror h3,
+    .milkdown .ProseMirror h4,
+    .milkdown .ProseMirror h5,
+    .milkdown .ProseMirror h6 {
+      font-family: var(--crepe-font-title);
+      font-weight: 400;
+      padding: 2px 0;
+    }
+
+  .milkdown .ProseMirror h1 {
+      font-size: 2.625em;
+      line-height: 1.1905;
+      margin-top: 32px;
+    }
+
+  .milkdown .ProseMirror h2 {
+      font-size: 2.25em;
+      line-height: 1.2222;
+      margin-top: 28px;
+    }
+
+  .milkdown .ProseMirror h3 {
+      font-size: 2em;
+      line-height: 1.25;
+      margin-top: 24px;
+    }
+
+  .milkdown .ProseMirror h4 {
+      font-size: 1.75em;
+      line-height: 1.2857;
+      margin-top: 20px;
+    }
+
+  .milkdown .ProseMirror h5 {
+      font-size: 1.5em;
+      line-height: 1.3333;
+      margin-top: 16px;
+    }
+
+  .milkdown .ProseMirror h6 {
+      font-size: 1.125em;
+      font-weight: 700;
+      line-height: 1.5556;
+      margin-top: 16px;
+    }
+
+  .milkdown .ProseMirror p {
+      font-size: 1em;
+      line-height: 1.5;
+      padding: 4px 0;
+    }
+
+  .milkdown .ProseMirror code {
+      color: var(--crepe-color-inline-code);
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-inline-area),
+        transparent 40%
+      );
+      font-family: var(--crepe-font-code);
+      padding: 0 2px;
+      border-radius: 4px;
+      font-size: 87.5%;
+      display: inline-block;
+      line-height: 1.4286;
+    }
+
+  .milkdown .ProseMirror a {
+      color: var(--crepe-color-primary);
+      text-decoration: underline;
+    }
+
+  .milkdown .ProseMirror pre {
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-inline-area),
+        transparent 40%
+      );
+      padding: 10px;
+      border-radius: 4px;
+    }
+
+  .milkdown .ProseMirror pre code {
+        padding: 0;
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror blockquote {
+      position: relative;
+      padding-left: 40px;
+      padding-top: 0;
+      padding-bottom: 0;
+      box-sizing: content-box;
+      margin: 4px 0;
+    }
+
+  .milkdown .ProseMirror blockquote::before {
+        content: '';
+        width: 4px;
+        left: 0;
+        top: 4px;
+        bottom: 4px;
+        position: absolute;
+        background: var(--crepe-color-selected);
+        border-radius: 100px;
+      }
+
+  .milkdown .ProseMirror blockquote hr {
+        margin-bottom: 16px;
+      }
+
+  .milkdown .ProseMirror hr {
+      border: none;
+      background-color: color-mix(
+        in srgb,
+        var(--crepe-color-outline),
+        transparent 80%
+      );
+      background-clip: content-box;
+      padding: 6px 0;
+      height: 13px;
+      position: relative;
+    }
+
+  .milkdown .ProseMirror hr.ProseMirror-selectednode {
+        outline: none;
+        background-color: color-mix(
+          in srgb,
+          var(--crepe-color-outline),
+          transparent 20%
+        );
+        background-clip: content-box;
+      }
+
+  .milkdown .ProseMirror hr.ProseMirror-selectednode::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          background-color: color-mix(
+            in srgb,
+            var(--crepe-color-outline),
+            transparent 80%
+          );
+          pointer-events: none;
+        }
+
+  .milkdown .ProseMirror ul,
+    .milkdown .ProseMirror ol {
+      padding: 0;
+    }

package/dist/runtime/milkdown/theme/common/style.css

@@ -0,0 +1,15 @@
+@import './prosemirror.css';
+@import './reset.css';
+@import './block-edit.css';
+@import './code-mirror.css';
+@import './cursor.css';
+@import './image-block.css';
+@import './link-tooltip.css';
+@import './list-item.css';
+@import './placeholder.css';
+@import './toolbar.css';
+@import './table.css';
+@import './latex.css';
+@import './top-bar.css';
+@import './diff.css';
+@import './ai.css';

package/dist/runtime/milkdown/theme/common/table.css

@@ -0,0 +1,219 @@
+@import '@milkdown/kit/prose/tables/style/tables.css';
+
+.milkdown .milkdown-table-block {
+    display: block;
+    margin: 4px 0;
+  }
+
+.milkdown .milkdown-table-block th,
+    .milkdown .milkdown-table-block td {
+      border: 1px solid
+        color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      padding: 4px 16px;
+    }
+
+.milkdown .milkdown-table-block th .ProseMirror-selectednode, .milkdown .milkdown-table-block td .ProseMirror-selectednode {
+        background-color: transparent !important;
+      }
+
+.milkdown .milkdown-table-block th:has(.ProseMirror-selectednode), .milkdown .milkdown-table-block td:has(.ProseMirror-selectednode) {
+        outline: 1px solid var(--crepe-color-primary);
+        outline-offset: -1px;
+      }
+
+.milkdown .milkdown-table-block .selectedCell::after {
+        background-color: var(--crepe-color-selected);
+        opacity: 0.4;
+      }
+
+.milkdown .milkdown-table-block .selectedCell ::-moz-selection {
+        background: transparent;
+      }
+
+.milkdown .milkdown-table-block .selectedCell ::selection {
+        background: transparent;
+      }
+
+.milkdown .milkdown-table-block .drag-preview {
+      background-color: var(--crepe-color-surface);
+      opacity: 0.4;
+      position: absolute;
+      z-index: 100;
+      display: flex;
+      flex-direction: column;
+      outline: 1px solid var(--crepe-color-primary);
+      outline-offset: -1px;
+    }
+
+.milkdown .milkdown-table-block .drag-preview[data-show='false'] {
+        display: none;
+      }
+
+.milkdown .milkdown-table-block .drag-preview th:has(.ProseMirror-selectednode), .milkdown .milkdown-table-block .drag-preview td:has(.ProseMirror-selectednode) {
+          outline: none;
+        }
+
+.milkdown .milkdown-table-block .handle {
+      position: absolute;
+      font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+      transition: opacity ease-in-out 0.2s;
+    }
+
+.milkdown .milkdown-table-block .handle[data-show='false'] {
+      opacity: 0;
+    }
+
+.milkdown .milkdown-table-block svg {
+      fill: var(--crepe-color-outline);
+    }
+
+.milkdown .milkdown-table-block .cell-handle {
+      z-index: 50;
+      left: -999px;
+      top: -999px;
+      cursor: grab;
+      background-color: var(--crepe-color-surface);
+      color: var(--crepe-color-outline);
+      border-radius: 100px;
+      box-shadow: var(--crepe-shadow-1);
+      transition: background-color 0.2s ease-in-out;
+    }
+
+.milkdown .milkdown-table-block .cell-handle:hover {
+        background-color: var(--crepe-color-hover);
+      }
+
+.milkdown .milkdown-table-block .cell-handle:has(.button-group:hover) {
+        background-color: var(--crepe-color-surface);
+      }
+
+.milkdown .milkdown-table-block .cell-handle[data-role='col-drag-handle'] {
+        transform: translateY(50%);
+        padding: 0 6px;
+        width: 28px;
+        height: 16px;
+      }
+
+.milkdown .milkdown-table-block .cell-handle[data-role='row-drag-handle'] {
+        transform: translateX(50%);
+        padding: 6px 0;
+        width: 16px;
+        height: 28px;
+      }
+
+.milkdown .milkdown-table-block .cell-handle .button-group {
+        position: absolute;
+        transform: translateX(-50%);
+        left: 50%;
+        top: -52px;
+        display: flex;
+        background-color: var(--crepe-color-surface);
+        border-radius: 8px;
+        box-shadow: var(--crepe-shadow-1);
+      }
+
+.milkdown .milkdown-table-block .cell-handle .button-group::after {
+          content: '';
+          position: absolute;
+          bottom: -8px;
+          height: 8px;
+          background-color: transparent;
+          width: 100%;
+        }
+
+.milkdown .milkdown-table-block .cell-handle .button-group[data-show='false'] {
+          display: none;
+        }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button {
+          cursor: pointer;
+          margin: 6px;
+          padding: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 4px;
+        }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button svg {
+            width: 24px;
+            height: 24px;
+          }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button:hover {
+            border-radius: 8px;
+            background-color: var(--crepe-color-hover);
+          }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button:active {
+            background: var(--crepe-color-selected);
+          }
+
+.milkdown .milkdown-table-block .cell-handle:hover {
+        opacity: 1;
+      }
+
+.milkdown .milkdown-table-block .line-handle {
+      z-index: 20;
+      background-color: var(--crepe-color-primary);
+    }
+
+.milkdown .milkdown-table-block .line-handle:hover {
+        opacity: 1;
+      }
+
+.milkdown .milkdown-table-block .line-handle .add-button {
+        cursor: pointer;
+        background-color: var(--crepe-color-surface);
+        color: var(--crepe-color-outline);
+        border-radius: 100px;
+        box-shadow: var(--crepe-shadow-1);
+        transition: background-color 0.2s ease-in-out;
+      }
+
+.milkdown .milkdown-table-block .line-handle .add-button svg {
+          width: 16px;
+          height: 16px;
+        }
+
+.milkdown .milkdown-table-block .line-handle .add-button:hover {
+          background-color: var(--crepe-color-hover);
+        }
+
+.milkdown .milkdown-table-block .line-handle .add-button:active {
+          background: var(--crepe-color-selected);
+        }
+
+.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] {
+        height: 1px;
+        z-index: 2;
+      }
+
+.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] .add-button {
+          position: absolute;
+          transform: translateX(-50%) translateY(-50%);
+          padding: 6px 0;
+          width: 16px;
+          height: 28px;
+        }
+
+.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] {
+        width: 1px;
+        z-index: 1;
+      }
+
+.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] .add-button {
+          position: absolute;
+          transform: translateY(-50%) translateX(-50%);
+          padding: 0 6px;
+          width: 28px;
+          height: 16px;
+        }
+
+.milkdown .milkdown-table-block .line-handle[data-display-type='indicator'] .add-button {
+          display: none;
+        }
+
+.milkdown .milkdown-table-block.readonly .handle {
+      display: none;
+    }

package/dist/runtime/milkdown/theme/common/toolbar.css

@@ -0,0 +1,50 @@
+.milkdown:has(.milkdown-link-preview[data-show='true']) .milkdown-toolbar,
+  .milkdown:has(.milkdown-link-edit[data-show='true']) .milkdown-toolbar {
+    display: none;
+  }
+  .milkdown .milkdown-toolbar[data-show='false'] {
+      display: none;
+    }
+  .milkdown .milkdown-toolbar {
+    z-index: 10;
+    position: absolute;
+    display: flex;
+    background: var(--crepe-color-surface);
+    box-shadow: var(--crepe-shadow-1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+  .milkdown .milkdown-toolbar .divider {
+      width: 1px;
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-outline),
+        transparent 80%
+      );
+      height: 24px;
+      margin: 10px;
+    }
+  .milkdown .milkdown-toolbar .toolbar-item {
+      width: 32px;
+      height: 32px;
+      margin: 6px;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+  .milkdown .milkdown-toolbar .toolbar-item:hover {
+        background: var(--crepe-color-hover);
+      }
+  .milkdown .milkdown-toolbar .toolbar-item:active {
+        background: var(--crepe-color-selected);
+      }
+  .milkdown .milkdown-toolbar .toolbar-item svg {
+        height: 24px;
+        width: 24px;
+        color: var(--crepe-color-outline);
+        fill: var(--crepe-color-outline);
+      }
+  .milkdown .milkdown-toolbar .toolbar-item.active svg {
+          color: var(--crepe-color-primary);
+          fill: var(--crepe-color-primary);
+        }