@jonsoc/ui 1.1.34 → 1.1.49

package/src/components/markdown.css

@@ -1,209 +1,209 @@
-[data-component="markdown"] {
-  /* Reset & Base Typography */
-  min-width: 0;
-  max-width: 100%;
-  overflow-wrap: break-word;
-  color: var(--text-base);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base); /* 14px */
-  line-height: var(--line-height-x-large);
-
-  /* Spacing for flow */
-  > *:first-child {
-    margin-top: 0;
-  }
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  /* Headings: Same size, distinguished by color and spacing */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: var(--font-size-base);
-    color: var(--text-strong);
-    font-weight: var(--font-weight-medium);
-    margin-top: 2rem;
-    margin-bottom: 0.75rem;
-    line-height: var(--line-height-large);
-  }
-
-  /* Emphasis & Strong: Neutral strong color */
-  strong,
-  b {
-    color: var(--text-strong);
-    font-weight: var(--font-weight-medium);
-  }
-
-  /* Paragraphs */
-  p {
-    margin-bottom: 1rem;
-  }
-
-  /* Links */
-  a {
-    color: var(--text-interactive-base);
-    text-decoration: none;
-    font-weight: inherit;
-  }
-
-  a:hover {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-
-  /* Lists */
-  ul,
-  ol {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-    padding-left: 1.5rem;
-    list-style-position: outside;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  li {
-    margin-bottom: 0.5rem;
-  }
-
-  li > p:first-child {
-    display: inline;
-    margin: 0;
-  }
-
-  li > p + p {
-    display: block;
-    margin-top: 0.5rem;
-  }
-
-  li::marker {
-    color: var(--text-weak);
-  }
-
-  /* Nested lists spacing */
-  li > ul,
-  li > ol {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    padding-left: 1rem; /* Minimal indent for nesting only */
-  }
-
-  /* Blockquotes */
-  blockquote {
-    border-left: 2px solid var(--border-weak-base);
-    margin: 1.5rem 0;
-    padding-left: 0.5rem;
-    color: var(--text-weak);
-    font-style: normal;
-  }
-
-  /* Horizontal Rule - Invisible spacing only */
-  hr {
-    border: none;
-    height: 0;
-    margin: 2.5rem 0;
-  }
-
-  .shiki {
-    font-size: 13px;
-    padding: 8px 12px;
-    border-radius: 4px;
-    border: 0.5px solid var(--border-weak-base);
-  }
-
-  [data-component="markdown-code"] {
-    position: relative;
-  }
-
-  [data-slot="markdown-copy-button"] {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-    z-index: 1;
-  }
-
-  [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
-    opacity: 1;
-  }
-
-  [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
-    display: none;
-  }
-
-  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="copy-icon"] {
-    display: none;
-  }
-
-  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="check-icon"] {
-    display: inline-flex;
-  }
-
-  pre {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    overflow: auto;
-
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  :not(pre) > code {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    color: var(--syntax-string);
-    font-weight: var(--font-weight-medium);
-    /* font-size: 13px; */
-
-    /* padding: 2px 2px; */
-    /* margin: 0 1.5px; */
-    /* border-radius: 2px; */
-    /* background: var(--surface-base); */
-    /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
-  }
-
-  /* Tables */
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1.5rem 0;
-    font-size: var(--font-size-base);
-  }
-
-  th,
-  td {
-    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
-    border-bottom: 1px solid var(--border-weaker-base);
-    padding: 0.75rem 0.5rem;
-    text-align: left;
-    vertical-align: top;
-  }
-
-  th {
-    color: var(--text-strong);
-    font-weight: var(--font-weight-medium);
-    border-bottom: 1px solid var(--border-weak-base);
-  }
-
-  /* Images */
-  img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 4px;
-    margin: 1.5rem 0;
-    display: block;
-  }
-}
+[data-component="markdown"] {
+  /* Reset & Base Typography */
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  color: var(--text-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base); /* 14px */
+  line-height: var(--line-height-x-large);
+
+  /* Spacing for flow */
+  > *:first-child {
+    margin-top: 0;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Headings: Same size, distinguished by color and spacing */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: var(--font-size-base);
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
+    line-height: var(--line-height-large);
+  }
+
+  /* Emphasis & Strong: Neutral strong color */
+  strong,
+  b {
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Paragraphs */
+  p {
+    margin-bottom: 1rem;
+  }
+
+  /* Links */
+  a {
+    color: var(--text-interactive-base);
+    text-decoration: none;
+    font-weight: inherit;
+  }
+
+  a:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    list-style-position: outside;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  li > p:first-child {
+    display: inline;
+    margin: 0;
+  }
+
+  li > p + p {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  li::marker {
+    color: var(--text-weak);
+  }
+
+  /* Nested lists spacing */
+  li > ul,
+  li > ol {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding-left: 1rem; /* Minimal indent for nesting only */
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-left: 2px solid var(--border-weak-base);
+    margin: 1.5rem 0;
+    padding-left: 0.5rem;
+    color: var(--text-weak);
+    font-style: normal;
+  }
+
+  /* Horizontal Rule - Invisible spacing only */
+  hr {
+    border: none;
+    height: 0;
+    margin: 2.5rem 0;
+  }
+
+  .shiki {
+    font-size: 13px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 0.5px solid var(--border-weak-base);
+  }
+
+  [data-component="markdown-code"] {
+    position: relative;
+  }
+
+  [data-slot="markdown-copy-button"] {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 1;
+  }
+
+  [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
+    opacity: 1;
+  }
+
+  [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
+    display: none;
+  }
+
+  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="copy-icon"] {
+    display: none;
+  }
+
+  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="check-icon"] {
+    display: inline-flex;
+  }
+
+  pre {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    overflow: auto;
+
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  :not(pre) > code {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    color: var(--syntax-string);
+    font-weight: var(--font-weight-medium);
+    /* font-size: 13px; */
+
+    /* padding: 2px 2px; */
+    /* margin: 0 1.5px; */
+    /* border-radius: 2px; */
+    /* background: var(--surface-base); */
+    /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
+  }
+
+  /* Tables */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    font-size: var(--font-size-base);
+  }
+
+  th,
+  td {
+    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
+    border-bottom: 1px solid var(--border-weaker-base);
+    padding: 0.75rem 0.5rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+    border-bottom: 1px solid var(--border-weak-base);
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 1.5rem 0;
+    display: block;
+  }
+}

package/src/components/message-nav.css

@@ -1,122 +1,122 @@
-[data-component="message-nav"] {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding-left: 0;
-  list-style: none;
-
-  &[data-size="normal"] {
-    width: 240px;
-    gap: 4px;
-  }
-
-  &[data-size="compact"] {
-    width: 24px;
-  }
-}
-
-[data-slot="message-nav-item"] {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-  justify-content: flex-end;
-
-  [data-component="message-nav"][data-size="normal"] & {
-    justify-content: flex-start;
-  }
-}
-
-[data-slot="message-nav-tick-button"] {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 12px;
-  width: 24px;
-  border: none;
-  background: none;
-  padding: 0;
-
-  &[data-active] [data-slot="message-nav-tick-line"] {
-    background-color: var(--icon-strong-base);
-    width: 100%;
-  }
-}
-
-[data-slot="message-nav-tick-line"] {
-  height: 1px;
-  width: 16px;
-  background-color: var(--icon-base);
-  transition:
-    width 0.2s,
-    background-color 0.2s;
-}
-
-[data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
-  width: 100%;
-  background-color: var(--icon-strong-base);
-}
-
-[data-slot="message-nav-message-button"] {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-  width: 100%;
-  column-gap: 12px;
-  cursor: default;
-  border: none;
-  background: none;
-  padding: 4px 12px;
-  border-radius: var(--radius-sm);
-}
-
-[data-slot="message-nav-title-preview"] {
-  font-size: 14px; /* text-14-regular */
-  color: var(--text-base);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  text-align: left;
-
-  &[data-active] {
-    color: var(--text-strong);
-  }
-}
-
-[data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
-  background-color: var(--surface-base);
-}
-[data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
-  color: var(--text-base);
-}
-
-[data-slot="message-nav-tooltip"] {
-  z-index: 1000;
-}
-
-[data-slot="message-nav-tooltip-content"] {
-  display: flex;
-  padding: 4px 4px 6px 4px;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-md);
-  background: var(--surface-raised-stronger-non-alpha);
-  max-height: calc(100vh - 6rem);
-  overflow-y: auto;
-
-  /* border/shadow-xs/base */
-  box-shadow:
-    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
-    0 1px 2px -1px rgba(19, 16, 16, 0.04),
-    0 1px 2px 0 rgba(19, 16, 16, 0.06),
-    0 1px 3px 0 rgba(19, 16, 16, 0.08);
-
-  * {
-    margin: 0 !important;
-  }
-}
+[data-component="message-nav"] {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 0;
+  list-style: none;
+
+  &[data-size="normal"] {
+    width: 240px;
+    gap: 4px;
+  }
+
+  &[data-size="compact"] {
+    width: 24px;
+  }
+}
+
+[data-slot="message-nav-item"] {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: flex-end;
+
+  [data-component="message-nav"][data-size="normal"] & {
+    justify-content: flex-start;
+  }
+}
+
+[data-slot="message-nav-tick-button"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 12px;
+  width: 24px;
+  border: none;
+  background: none;
+  padding: 0;
+
+  &[data-active] [data-slot="message-nav-tick-line"] {
+    background-color: var(--icon-strong-base);
+    width: 100%;
+  }
+}
+
+[data-slot="message-nav-tick-line"] {
+  height: 1px;
+  width: 16px;
+  background-color: var(--icon-base);
+  transition:
+    width 0.2s,
+    background-color 0.2s;
+}
+
+[data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
+  width: 100%;
+  background-color: var(--icon-strong-base);
+}
+
+[data-slot="message-nav-message-button"] {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  column-gap: 12px;
+  cursor: default;
+  border: none;
+  background: none;
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+}
+
+[data-slot="message-nav-title-preview"] {
+  font-size: 14px; /* text-14-regular */
+  color: var(--text-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  text-align: left;
+
+  &[data-active] {
+    color: var(--text-strong);
+  }
+}
+
+[data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base);
+}
+[data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base-active);
+}
+
+[data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
+  color: var(--text-base);
+}
+
+[data-slot="message-nav-tooltip"] {
+  z-index: 1000;
+}
+
+[data-slot="message-nav-tooltip-content"] {
+  display: flex;
+  padding: 4px 4px 6px 4px;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  max-height: calc(100vh - 6rem);
+  overflow-y: auto;
+
+  /* border/shadow-xs/base */
+  box-shadow:
+    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+  * {
+    margin: 0 !important;
+  }
+}