@milkdown/crepe 7.20.0 → 7.21.0

package/lib/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: 14px;
+  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: 14px;
+  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: 12px;
+  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: 11px;
+  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: 14px;
+  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: 13px;
+  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: 11px;
+  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: 13px;
+  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: 11px;
+  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/lib/theme/common/code-mirror.css

@@ -22,6 +22,20 @@
       outline: 1px solid var(--crepe-color-primary);
     }
 
+    .milkdown .milkdown-code-block .milkdown-code-block-placeholder {
+      margin: 0;
+      padding: 4px 0;
+      font-family: var(--crepe-font-code, monospace);
+      font-size: 14px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    .milkdown .milkdown-code-block .milkdown-code-block-placeholder code {
+        font-family: inherit;
+      }
+
     .milkdown .milkdown-code-block .cm-editor {
       outline: none !important;
       background: var(--crepe-color-surface);

package/lib/theme/common/diff.css

@@ -0,0 +1,177 @@
+.milkdown {
+  --crepe-color-diff-added: #22c55e;
+  --crepe-color-diff-removed: #ef4444;
+
+  --crepe-color-diff-added-bg: color-mix(
+    in srgb,
+    var(--crepe-color-diff-added),
+    transparent 88%
+  );
+  --crepe-color-diff-added-text: color-mix(
+    in srgb,
+    var(--crepe-color-diff-added),
+    var(--crepe-color-on-background) 40%
+  );
+  --crepe-color-diff-removed-bg: color-mix(
+    in srgb,
+    var(--crepe-color-diff-removed),
+    transparent 88%
+  );
+  --crepe-color-diff-removed-text: color-mix(
+    in srgb,
+    var(--crepe-color-diff-removed),
+    var(--crepe-color-on-background) 40%
+  );
+}
+
+  /* Inline deletion: strikethrough */
+  .milkdown .milkdown-diff-removed {
+    text-decoration: line-through;
+    background-color: var(--crepe-color-diff-removed-bg);
+    color: var(--crepe-color-diff-removed-text);
+  }
+  /* Block deletion: node-level overlay for custom node views */
+  .milkdown .milkdown-diff-removed-block {
+    position: relative;
+    opacity: 0.45;
+    outline: 2px dashed var(--crepe-color-diff-removed) !important;
+    outline-offset: 2px;
+    border-radius: 4px;
+    background-color: var(--crepe-color-diff-removed-bg);
+  }
+  /* Inline insertion */
+  .milkdown .milkdown-diff-added {
+    background-color: var(--crepe-color-diff-added-bg);
+    color: var(--crepe-color-diff-added-text);
+    padding: 0 2px;
+    border-radius: 2px;
+  }
+  /* Block insertion */
+  .milkdown .milkdown-diff-added-block {
+    display: block;
+    background-color: var(--crepe-color-diff-added-bg);
+    border-left: 3px solid var(--crepe-color-diff-added);
+    border-radius: 4px;
+    padding: 8px 12px;
+    margin: 8px 0;
+  }
+  .milkdown .milkdown-diff-added-block h1,
+    .milkdown .milkdown-diff-added-block h2,
+    .milkdown .milkdown-diff-added-block h3,
+    .milkdown .milkdown-diff-added-block h4,
+    .milkdown .milkdown-diff-added-block h5,
+    .milkdown .milkdown-diff-added-block h6 {
+      color: var(--crepe-color-diff-added-text);
+      margin: 4px 0;
+    }
+  .milkdown .milkdown-diff-added-block p {
+      color: var(--crepe-color-diff-added-text);
+      margin: 4px 0;
+    }
+  .milkdown .milkdown-diff-added-block ul,
+    .milkdown .milkdown-diff-added-block ol {
+      color: var(--crepe-color-diff-added-text);
+      margin: 4px 0;
+      padding-left: 20px;
+    }
+  .milkdown .milkdown-diff-added-block li {
+      margin: 2px 0;
+    }
+  .milkdown .milkdown-diff-added-block table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 4px 0;
+    }
+  .milkdown .milkdown-diff-added-block th,
+    .milkdown .milkdown-diff-added-block td {
+      border: 1px solid
+        color-mix(in srgb, var(--crepe-color-diff-added), transparent 50%);
+      padding: 6px 12px;
+      text-align: left;
+    }
+  .milkdown .milkdown-diff-added-block th {
+      font-weight: 600;
+    }
+  .milkdown .milkdown-diff-added-block img {
+      max-width: 100%;
+      border-radius: 4px;
+    }
+  .milkdown .milkdown-diff-added-block pre,
+    .milkdown .milkdown-diff-added-block code {
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-diff-added),
+        transparent 94%
+      );
+      border-radius: 4px;
+      padding: 8px 12px;
+      font-family: var(--crepe-font-code);
+      font-size: 13px;
+      overflow-x: auto;
+      display: block;
+      white-space: pre;
+    }
+  /* Inline controls */
+  .milkdown .milkdown-diff-controls {
+    display: inline-flex;
+    gap: 3px;
+    margin: 0 4px;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  .milkdown .milkdown-diff-controls button {
+      font-family: var(--crepe-font-default);
+      font-size: 11px;
+      line-height: 1;
+      padding: 2px 6px;
+      border-radius: 3px;
+      cursor: pointer;
+      border: 1px solid;
+      font-weight: 500;
+    }
+  /* Block controls */
+  .milkdown .milkdown-diff-controls-block {
+    display: flex;
+    gap: 4px;
+    margin: 4px 0;
+  }
+  .milkdown .milkdown-diff-accept {
+    background-color: color-mix(
+      in srgb,
+      var(--crepe-color-diff-added),
+      var(--crepe-color-background) 85%
+    );
+    color: var(--crepe-color-diff-added-text);
+    border-color: color-mix(
+      in srgb,
+      var(--crepe-color-diff-added),
+      transparent 50%
+    );
+  }
+  .milkdown .milkdown-diff-accept:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--crepe-color-diff-added),
+        var(--crepe-color-background) 75%
+      );
+    }
+  .milkdown .milkdown-diff-reject {
+    background-color: color-mix(
+      in srgb,
+      var(--crepe-color-diff-removed),
+      var(--crepe-color-background) 85%
+    );
+    color: var(--crepe-color-diff-removed-text);
+    border-color: color-mix(
+      in srgb,
+      var(--crepe-color-diff-removed),
+      transparent 50%
+    );
+  }
+  .milkdown .milkdown-diff-reject:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--crepe-color-diff-removed),
+        var(--crepe-color-background) 75%
+      );
+    }

package/lib/theme/common/style.css

@@ -11,3 +11,5 @@
 @import './table.css';
 @import './latex.css';
 @import './top-bar.css';
+@import './diff.css';
+@import './ai.css';