@thebase/ui 0.0.5 → 0.0.7

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

@@ -0,0 +1,446 @@
+/* Every selector lives under `.milkdown` so the AI feature's class names
+   (which include generic ones like `.ai-instruction-*`) can't leak into
+   host applications that happen to reuse the same names. Mirrors the
+   pattern used by the other Crepe theme files. */
+
+/* AI Instruction Tooltip */
+.milkdown .milkdown-ai-instruction {
+  position: absolute;
+  z-index: 10;
+}
+
+.milkdown .milkdown-ai-instruction[data-show='false'] {
+  display: none;
+}
+
+.milkdown .milkdown-ai-instruction > .ai-instruction {
+  width: 360px;
+  background: var(--crepe-color-surface);
+  border-radius: 12px;
+  box-shadow: var(--crepe-shadow-2);
+  font-family: var(--crepe-font-default);
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+  color: var(--crepe-color-on-background);
+  overflow: hidden;
+}
+
+.milkdown .ai-instruction-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px;
+  padding: 4px 4px 4px 12px;
+  background: var(--crepe-color-background);
+  border: 1px solid
+    color-mix(in srgb, var(--crepe-color-primary) 35%, transparent);
+  border-radius: 999px;
+}
+
+.milkdown .ai-instruction-input-prefix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--crepe-color-primary);
+}
+
+.milkdown .ai-instruction-input-prefix svg {
+  width: 18px;
+  height: 18px;
+  color: var(--crepe-color-primary);
+  fill: var(--crepe-color-primary);
+}
+
+.milkdown .ai-instruction-input-field {
+  flex: 1;
+  min-width: 0;
+  outline: none;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+  line-height: 20px;
+  color: var(--crepe-color-on-background);
+  padding: 4px 0;
+}
+
+.milkdown .ai-instruction-input-field::-moz-placeholder {
+  color: var(--crepe-color-outline);
+}
+
+.milkdown .ai-instruction-input-field::placeholder {
+  color: var(--crepe-color-outline);
+}
+
+.milkdown .ai-instruction-submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--crepe-color-primary);
+  color: var(--crepe-color-on-inverse);
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.milkdown .ai-instruction-submit svg {
+  width: 16px;
+  height: 16px;
+  color: var(--crepe-color-on-inverse);
+  fill: var(--crepe-color-on-inverse);
+}
+
+.milkdown .ai-instruction-submit:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--crepe-color-primary) 85%, white);
+}
+
+.milkdown .ai-instruction-submit:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.milkdown .ai-instruction-list {
+  max-height: 320px;
+  overflow-y: auto;
+  padding-bottom: 6px;
+}
+
+.milkdown .ai-instruction-back {
+  /* Rendered as a real <button> for keyboard / screen-reader access;
+     reset the user-agent button styling so it visually matches the
+     surrounding palette chrome. */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border: none;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px 4px;
+  cursor: pointer;
+  color: var(--crepe-color-outline);
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.75);
+  font-weight: 500;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.milkdown .ai-instruction-back:hover {
+  color: var(--crepe-color-on-background);
+}
+
+.milkdown .ai-instruction-back-icon {
+  display: inline-flex;
+}
+
+.milkdown .ai-instruction-back-icon svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+}
+
+.milkdown .ai-instruction-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.milkdown .ai-instruction-section-header {
+  padding: 6px 16px 4px;
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.6875);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--crepe-color-outline);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.milkdown .ai-instruction-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  color: var(--crepe-color-on-background);
+}
+
+.milkdown .ai-instruction-item.active {
+  background: var(--crepe-color-hover);
+}
+
+.milkdown .ai-instruction-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.milkdown .ai-instruction-item-icon svg {
+  width: 18px;
+  height: 18px;
+  color: var(--crepe-color-on-surface-variant);
+  fill: var(--crepe-color-on-surface-variant);
+  stroke: var(--crepe-color-on-surface-variant);
+}
+
+.milkdown .ai-instruction-item-label {
+  flex: 1;
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.milkdown .ai-instruction-item-label mark {
+  background: var(--crepe-color-secondary);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.milkdown .ai-instruction-item-arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--crepe-color-outline);
+}
+
+.milkdown .ai-instruction-item-arrow svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+}
+
+.milkdown .ai-instruction-item-prompt .ai-instruction-item-label {
+  color: var(--crepe-color-primary);
+}
+
+.milkdown .ai-instruction-item-prompt .ai-instruction-item-icon svg {
+  color: var(--crepe-color-primary);
+  fill: var(--crepe-color-primary);
+}
+
+.milkdown .ai-instruction-item-quote {
+  font-weight: 500;
+}
+
+.milkdown .ai-instruction-item-shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 20px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--crepe-color-surface-low);
+  color: var(--crepe-color-outline);
+  flex-shrink: 0;
+}
+
+.milkdown .ai-instruction-item-shortcut svg {
+  width: 14px;
+  height: 14px;
+  color: var(--crepe-color-outline);
+  fill: var(--crepe-color-outline);
+}
+
+/* Streaming Indicator */
+.milkdown .milkdown-ai-streaming-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px 4px 12px;
+  margin: 4px 0;
+  border-radius: 999px;
+  border: 1px solid
+    color-mix(in srgb, var(--crepe-color-primary) 20%, transparent);
+  background: var(--crepe-color-surface);
+  vertical-align: middle;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-family: var(--crepe-font-default);
+}
+
+.milkdown .milkdown-ai-streaming-spinner {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1.5px solid
+    color-mix(in srgb, var(--crepe-color-primary) 25%, transparent);
+  border-top-color: var(--crepe-color-primary);
+  flex-shrink: 0;
+  /* Rotation is driven by requestAnimationFrame in JS so it survives
+     DOM re-mounts when the indicator's position advances. */
+  will-change: transform;
+}
+
+.milkdown .milkdown-ai-streaming-label {
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.8125);
+  line-height: 18px;
+  color: var(--crepe-color-on-background);
+}
+
+.milkdown .milkdown-ai-streaming-esc {
+  font-family: var(--crepe-font-code, ui-monospace, monospace);
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.6875);
+  line-height: 1;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--crepe-color-surface-low);
+  color: var(--crepe-color-outline);
+}
+
+/* Diff Actions Panel — appended to the editor's `.milkdown` host so the
+   descendant selector below matches even though `position: fixed` takes
+   the panel out of normal flow. */
+.milkdown .milkdown-ai-diff-actions {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 11;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  background: var(--crepe-color-surface);
+  border: 1px solid
+    color-mix(in srgb, var(--crepe-color-primary) 18%, transparent);
+  border-radius: 999px;
+  box-shadow: var(--crepe-shadow-2);
+  font-family: var(--crepe-font-default);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.milkdown .milkdown-ai-diff-actions[data-show='false'] {
+  display: none;
+}
+
+.milkdown .milkdown-ai-diff-actions-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  font-family: inherit;
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.8125);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--crepe-color-on-background);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.milkdown .milkdown-ai-diff-actions-btn:hover {
+  background: var(--crepe-color-hover);
+}
+
+.milkdown .milkdown-ai-diff-actions-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.milkdown .milkdown-ai-diff-actions-btn:disabled:hover {
+  background: transparent;
+}
+
+.milkdown .milkdown-ai-diff-actions-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+}
+
+.milkdown .milkdown-ai-diff-actions-icon svg {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+  fill: currentColor;
+}
+
+.milkdown .milkdown-ai-diff-actions-btn-retry {
+  color: var(--crepe-color-on-surface-variant);
+}
+
+.milkdown .milkdown-ai-diff-actions-btn-reject {
+  color: var(--crepe-color-diff-removed-text, #ba1a1a);
+  background: color-mix(
+    in srgb,
+    var(--crepe-color-diff-removed, #ef4444) 8%,
+    transparent
+  );
+}
+
+.milkdown .milkdown-ai-diff-actions-btn-reject:hover {
+  background: color-mix(
+    in srgb,
+    var(--crepe-color-diff-removed, #ef4444) 16%,
+    transparent
+  );
+}
+
+.milkdown .milkdown-ai-diff-actions-btn-accept {
+  color: var(--crepe-color-diff-added-text, #166534);
+  background: color-mix(
+    in srgb,
+    var(--crepe-color-diff-added, #22c55e) 12%,
+    transparent
+  );
+}
+
+.milkdown .milkdown-ai-diff-actions-btn-accept:hover {
+  background: color-mix(
+    in srgb,
+    var(--crepe-color-diff-added, #22c55e) 22%,
+    transparent
+  );
+}
+
+.milkdown .milkdown-ai-diff-actions-shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 4px;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: color-mix(
+    in srgb,
+    var(--crepe-color-diff-added, #22c55e) 14%,
+    transparent
+  );
+  font-family: var(--crepe-font-code, ui-monospace, monospace);
+  font-size: calc(var(--crepe-base-font-size, 16px) * 0.6875);
+  color: inherit;
+}
+
+.milkdown .milkdown-ai-diff-actions-shortcut-icon {
+  display: inline-flex;
+}
+
+.milkdown .milkdown-ai-diff-actions-shortcut-icon svg {
+  width: 12px;
+  height: 12px;
+  color: currentColor;
+  fill: currentColor;
+}

package/dist/runtime/milkdown/theme/common/block-edit.css

@@ -0,0 +1,131 @@
+.milkdown .milkdown-block-handle[data-show='false'] {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .milkdown .milkdown-block-handle {
+    transition: all 0.2s;
+    position: absolute;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+}
+    .milkdown .milkdown-block-handle .operation-item {
+      border-radius: 4px;
+      width: 32px;
+      height: 32px;
+      padding: 4px;
+    }
+    .milkdown .milkdown-block-handle .operation-item svg {
+        width: 24px;
+        height: 24px;
+        fill: var(--crepe-color-outline);
+      }
+    .milkdown .milkdown-block-handle .operation-item:hover {
+        background: var(--crepe-color-hover);
+      }
+    .milkdown .milkdown-block-handle .operation-item.active {
+        background: var(--crepe-color-selected);
+      }
+  .milkdown .milkdown-slash-menu[data-show='false'] {
+      display: none;
+    }
+  .milkdown .milkdown-slash-menu {
+    position: absolute;
+    z-index: 10;
+    display: block;
+    font-family: var(--crepe-font-default);
+    color: var(--crepe-color-on-surface);
+    background: var(--crepe-color-surface);
+    border-radius: 12px;
+    box-shadow: var(--crepe-shadow-1);
+}
+  .milkdown .milkdown-slash-menu ul {
+      list-style-type: none;
+    }
+  .milkdown .milkdown-slash-menu ul li {
+        cursor: pointer;
+        border-radius: 8px;
+      }
+  .milkdown .milkdown-slash-menu .tab-group {
+      border-bottom: 1px solid
+        color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      padding: 12px 12px 0;
+    }
+  .milkdown .milkdown-slash-menu .tab-group ul {
+        padding: 8px 10px;
+        display: flex;
+        gap: 10px;
+        flex-wrap: nowrap;
+      }
+  .milkdown .milkdown-slash-menu .tab-group ul li {
+          padding: 6px 10px;
+          font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+          font-style: normal;
+          font-weight: 600;
+          line-height: 20px;
+        }
+  .milkdown .milkdown-slash-menu .tab-group ul li:hover {
+            background: var(--crepe-color-hover);
+          }
+  .milkdown .milkdown-slash-menu .tab-group ul li.selected {
+            background: var(--crepe-color-selected);
+          }
+  .milkdown .milkdown-slash-menu .menu-groups {
+      padding: 0 12px 12px;
+      max-height: 420px;
+      overflow: auto;
+      overscroll-behavior: contain;
+      scroll-behavior: smooth;
+    }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group h6 {
+          font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+          font-style: normal;
+          font-weight: 600;
+          line-height: 20px;
+          padding: 14px 10px;
+          text-transform: uppercase;
+          color: color-mix(
+            in srgb,
+            var(--crepe-color-on-surface),
+            transparent 40%
+          );
+        }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li {
+          min-width: 220px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          gap: 16px;
+          padding: 14px 10px;
+        }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li.hover {
+            background: var(--crepe-color-hover);
+          }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li.active {
+            background: var(--crepe-color-selected);
+          }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li svg {
+            width: 24px;
+            height: 24px;
+            color: var(--crepe-color-outline);
+            fill: var(--crepe-color-outline);
+          }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li > span {
+            font-size: calc(var(--crepe-base-font-size, 16px) * 0.875);
+            font-style: normal;
+            font-weight: 600;
+            line-height: 20px;
+          }
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group + .menu-group::before {
+        content: '';
+        display: block;
+        height: 1px;
+        background: color-mix(
+          in srgb,
+          var(--crepe-color-outline),
+          transparent 80%
+        );
+        margin: 0 10px;
+      }