mdx-artifacts 0.1.1 → 0.2.0

package/dist/lib/react/styles.css

@@ -1,7 +1,3 @@
-@import "tailwindcss";
-@source "./components/**/*.{ts,tsx}";
-@source "../../artifact-docs/**/*.{mdx}";
-
 :root {
   color-scheme: light;
   --ak-bg: oklch(0.985 0 0);
@@ -20,6 +16,10 @@
   --ak-warn-subtle: oklch(0.97 0.04 85);
   --ak-risk: oklch(0.577 0.245 27.325);
   --ak-risk-subtle: oklch(0.971 0.013 17.38);
+  --ak-info: oklch(0.5 0.14 245);
+  --ak-info-subtle: oklch(0.96 0.035 245);
+  --ak-accent: oklch(0.52 0.15 300);
+  --ak-accent-subtle: oklch(0.96 0.035 300);
   --ak-code-bg: oklch(0.97 0 0);
   --ak-code-text: oklch(0.269 0 0);
   --ak-code-highlight-bg: oklch(0.91 0.055 85);
@@ -65,6 +65,10 @@
   --ak-warn-subtle: oklch(0.34 0.06 85);
   --ak-risk: oklch(0.704 0.191 22.216);
   --ak-risk-subtle: oklch(0.31 0.08 22);
+  --ak-info: oklch(0.75 0.13 245);
+  --ak-info-subtle: oklch(0.32 0.055 245);
+  --ak-accent: oklch(0.78 0.13 300);
+  --ak-accent-subtle: oklch(0.32 0.06 300);
   --ak-code-bg: oklch(1 0 0 / 8%);
   --ak-code-text: oklch(0.922 0 0);
   --ak-code-highlight-bg: oklch(0.34 0.06 85);
@@ -96,6 +100,10 @@
     --ak-warn-subtle: oklch(0.34 0.06 85);
     --ak-risk: oklch(0.704 0.191 22.216);
     --ak-risk-subtle: oklch(0.31 0.08 22);
+    --ak-info: oklch(0.75 0.13 245);
+    --ak-info-subtle: oklch(0.32 0.055 245);
+    --ak-accent: oklch(0.78 0.13 300);
+    --ak-accent-subtle: oklch(0.32 0.06 300);
     --ak-code-bg: oklch(1 0 0 / 8%);
     --ak-code-text: oklch(0.922 0 0);
     --ak-code-highlight-bg: oklch(0.34 0.06 85);
@@ -192,7 +200,8 @@ body {
 .ak-content-section > p,
 .ak-content-section > ul,
 .ak-content-section > ol,
-.ak-content-section > blockquote {
+.ak-content-section > blockquote,
+.ak-content-section > pre {
   margin: 0;
 }
 
@@ -330,6 +339,54 @@ body {
   padding-left: 14px;
 }
 
+.ak-document a,
+.ak-review-content a,
+.ak-content-section a {
+  color: var(--ak-primary-dark);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ak-document :where(p, li, blockquote) code,
+.ak-review-content :where(p, li, blockquote) code,
+.ak-content-section :where(p, li, blockquote) code {
+  border-radius: 4px;
+  background: var(--ak-code-bg);
+  color: var(--ak-code-text);
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.92em;
+  padding: 1px 4px;
+}
+
+.ak-document > pre,
+.ak-review-content > pre,
+.ak-content-section > pre {
+  overflow: auto;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-code-bg);
+  color: var(--ak-code-text);
+  padding: 12px;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.ak-document > pre code,
+.ak-review-content > pre code,
+.ak-content-section > pre code {
+  display: block;
+  min-width: max-content;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+  white-space: pre;
+}
+
 .ak-section {
   display: grid;
   gap: 16px;
@@ -347,6 +404,29 @@ body {
   line-height: 1.25;
 }
 
+.ak-content-set-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.ak-content-set-icon {
+  display: inline-grid;
+  flex: 0 0 auto;
+  width: 1.35em;
+  height: 1.35em;
+  place-items: center;
+  color: var(--ak-primary-dark);
+  font-size: 22px;
+  line-height: 1;
+}
+
+.ak-content-set-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
 .ak-stack,
 .ak-columns,
 .ak-grid,
@@ -493,6 +573,360 @@ body {
   margin: 4px 0;
 }
 
+.ak-content-set-items {
+  display: grid;
+  gap: 14px;
+}
+
+.ak-content-set-surface-plain,
+.ak-content-set-surface-subtle,
+.ak-content-set-surface-outlined {
+  border-radius: 10px;
+  padding: 16px;
+}
+
+.ak-content-set-surface-subtle {
+  background: var(--ak-surface-subtle);
+}
+
+.ak-content-set-surface-outlined {
+  border: 1px solid var(--ak-border);
+  background: var(--ak-surface);
+}
+
+.ak-content-set-items-grid {
+  grid-template-columns: repeat(var(--ak-content-set-columns), minmax(0, 1fr));
+}
+
+.ak-content-set-items-stack {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.ak-content-item {
+  --ak-content-item-tone: var(--ak-border);
+  --ak-content-item-tone-bg: var(--ak-surface-subtle);
+  min-width: 0;
+  height: 100%;
+  border: 1px solid color-mix(in oklch, var(--ak-content-item-tone) 38%, var(--ak-border));
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--ak-content-item-tone-bg) 36%, var(--ak-surface));
+  padding: 16px;
+  box-shadow: var(--ak-shadow);
+}
+
+.ak-content-item-tone-neutral {
+  --ak-content-item-tone: var(--ak-border);
+  --ak-content-item-tone-bg: var(--ak-surface-subtle);
+}
+
+.ak-content-item-tone-info {
+  --ak-content-item-tone: var(--ak-info);
+  --ak-content-item-tone-bg: var(--ak-info-subtle);
+}
+
+.ak-content-item-tone-positive {
+  --ak-content-item-tone: var(--ak-good);
+  --ak-content-item-tone-bg: var(--ak-good-subtle);
+}
+
+.ak-content-item-tone-warning {
+  --ak-content-item-tone: var(--ak-warn);
+  --ak-content-item-tone-bg: var(--ak-warn-subtle);
+}
+
+.ak-content-item-tone-danger {
+  --ak-content-item-tone: var(--ak-risk);
+  --ak-content-item-tone-bg: var(--ak-risk-subtle);
+}
+
+.ak-content-item-tone-accent {
+  --ak-content-item-tone: var(--ak-accent);
+  --ak-content-item-tone-bg: var(--ak-accent-subtle);
+}
+
+.ak-content-item-emphasis-primary {
+  border-width: 2px;
+  border-color: color-mix(in oklch, var(--ak-content-item-tone) 70%, var(--ak-border));
+  background: color-mix(in oklch, var(--ak-content-item-tone-bg) 56%, var(--ak-surface));
+  box-shadow: 0 2px 8px rgb(0 0 0 / 7%);
+}
+
+.ak-content-item-emphasis-subtle {
+  border-color: color-mix(in oklch, var(--ak-content-item-tone) 18%, var(--ak-border));
+  background: color-mix(in oklch, var(--ak-content-item-tone-bg) 18%, var(--ak-surface));
+  box-shadow: none;
+}
+
+.ak-content-item-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ak-content-item-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ak-content-item-icon {
+  display: inline-grid;
+  flex: 0 0 auto;
+  width: 1.3em;
+  height: 1.3em;
+  place-items: center;
+  color: var(--ak-content-item-tone);
+  font-size: 17px;
+  line-height: 1;
+}
+
+.ak-content-item-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.ak-content-item-header h3 {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.3;
+}
+
+.ak-content-item-badge {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--ak-content-item-tone) 14%, var(--ak-surface-subtle));
+  color: var(--ak-content-item-tone);
+  padding: 3px 8px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ak-content-item-emphasis-subtle .ak-content-item-badge,
+.ak-content-item-emphasis-subtle .ak-content-item-summary {
+  opacity: 0.78;
+}
+
+.ak-content-item-summary {
+  margin: 10px 0 0;
+  color: var(--ak-muted);
+}
+
+.ak-content-item-body {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.ak-content-item-body > :first-child {
+  margin-top: 0;
+}
+
+.ak-content-item-body > :last-child {
+  margin-bottom: 0;
+}
+
+.ak-content-item-body :where(h1, h2, h3, h4, h5, h6) {
+  margin: 6px 0 0;
+  font-size: 15px;
+  line-height: 1.35;
+}
+
+.ak-content-item-body :where(p, ul, ol, blockquote) {
+  margin: 0;
+}
+
+.ak-content-item-body :where(ul, ol) {
+  padding-left: 18px;
+}
+
+.ak-content-item-body li {
+  margin: 4px 0;
+}
+
+.ak-sortable-list-summary {
+  margin: 0;
+  color: var(--ak-muted);
+}
+
+.ak-sortable-list-editor-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ak-sortable-list-editor {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 12px;
+}
+
+.ak-sortable-list-editor-field,
+.ak-sortable-list-editor-check {
+  display: grid;
+  gap: 5px;
+  color: var(--ak-muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.ak-sortable-list-editor-field input {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 9px;
+}
+
+.ak-sortable-list-editor-check {
+  grid-template-columns: auto 1fr;
+  align-items: center;
+}
+
+.ak-sortable-list-editor-buttons {
+  display: flex;
+  align-items: end;
+  gap: 6px;
+}
+
+.ak-sortable-list-editor-error {
+  margin: 0;
+  color: var(--ak-risk);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.ak-sortable-list-items {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ak-sortable-list-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  border: 1px solid var(--ak-border);
+  border-radius: 8px;
+  background: var(--ak-surface);
+  padding: 12px;
+}
+
+.ak-sortable-list-item[draggable="true"] {
+  cursor: grab;
+}
+
+.ak-sortable-list-item[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.ak-sortable-list-item-disabled {
+  opacity: 0.62;
+}
+
+.ak-sortable-list-rank {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid var(--ak-border);
+  border-radius: 999px;
+  color: var(--ak-muted);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.ak-sortable-list-content {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ak-sortable-list-item-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.ak-sortable-list-item-header h3 {
+  margin: 0;
+}
+
+.ak-sortable-list-badge,
+.ak-sortable-list-tag {
+  width: fit-content;
+  border: 1px solid var(--ak-border);
+  border-radius: 999px;
+  background: var(--ak-surface-subtle);
+  color: var(--ak-muted);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1;
+  padding: 4px 8px;
+}
+
+.ak-sortable-list-item-summary {
+  margin: 0;
+  color: var(--ak-muted);
+}
+
+.ak-sortable-list-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ak-sortable-list-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ak-sortable-list-control {
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  padding: 7px 9px;
+}
+
+.ak-sortable-list-control:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (max-width: 720px) {
+  .ak-sortable-list-editor {
+    grid-template-columns: 1fr;
+  }
+
+  .ak-sortable-list-item {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .ak-sortable-list-controls {
+    grid-column: 1 / -1;
+  }
+}
+
 .ak-inline-text {
   min-width: 0;
 }
@@ -618,11 +1052,34 @@ body {
   min-width: 0;
 }
 
+.ak-code-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 .ak-code-language {
   flex: 0 0 auto;
   text-transform: lowercase;
 }
 
+.ak-code-copy {
+  border: 1px solid var(--ak-border);
+  border-radius: 6px;
+  background: var(--ak-surface);
+  color: var(--ak-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 8px;
+}
+
+.ak-code-copy:hover {
+  border-color: var(--ak-accent);
+}
+
 .ak-code-pre {
   overflow: auto;
   margin: 0;
@@ -769,6 +1226,18 @@ body {
   border-radius: 8px;
 }
 
+.ak-comment-target-block::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: -6px;
+  border: 2px solid var(--ak-comment-accent);
+  border-radius: 12px;
+  box-shadow: 0 0 0 3px var(--ak-comment-accent-subtle);
+  opacity: 0;
+  pointer-events: none;
+}
+
 .ak-comment-target-card {
   height: 100%;
 }
@@ -787,13 +1256,17 @@ body {
 .ak-comment-target-has-comments > .ak-comment-target-content,
 .ak-comment-target-selected > .ak-comment-target-content {
   border-radius: 8px;
-  box-shadow:
-    0 0 0 2px var(--ak-comment-accent),
-    0 0 0 6px var(--ak-comment-accent-subtle);
 }
 
-.ak-comment-target-block:has(.ak-comment-target-block:hover):not(.ak-comment-target-selected) > .ak-comment-target-content {
-  box-shadow: none;
+.ak-comment-target-block:hover::after,
+.ak-comment-target-block:focus-within::after,
+.ak-comment-target-has-comments::after,
+.ak-comment-target-selected::after {
+  opacity: 1;
+}
+
+.ak-comment-target-block:has(.ak-comment-target-block:hover):not(.ak-comment-target-selected)::after {
+  opacity: 0;
 }
 
 .ak-comment-marker-anchor,
@@ -1145,40 +1618,15 @@ body {
   font-weight: 700;
 }
 
-.ak-badge-high {
-  background: var(--ak-good-subtle);
-  color: var(--ak-good);
-}
-
-.ak-badge-medium {
-  background: var(--ak-warn-subtle);
-  color: var(--ak-warn);
-}
-
-.ak-badge-low {
-  background: var(--ak-risk-subtle);
-  color: var(--ak-risk);
+.ak-badge-default {
+  background: var(--ak-surface-subtle);
+  color: var(--ak-muted);
 }
 
 .ak-muted {
   color: var(--ak-muted);
 }
 
-.ak-list-block {
-  margin-top: 12px;
-}
-
-.ak-list-block h4 {
-  margin: 0;
-  font-size: 13px;
-}
-
-.ak-verdict,
-.ak-intent {
-  color: var(--ak-primary-dark);
-  font-weight: 700;
-}
-
 .ak-export-panel {
   border: 1px solid var(--ak-border);
   border-radius: 8px;
@@ -1383,6 +1831,10 @@ body {
     padding-top: 20px;
   }
 
+  .ak-content-set-items-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .ak-export-dock {
     right: 10px;
     bottom: 10px;