@neocode-ai/web 1.1.1

package/src/components/share/content-error.module.css

@@ -0,0 +1,64 @@
+.root {
+  background-color: var(--sl-color-bg-surface);
+  padding: 0.5rem calc(0.5rem + 3px);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  align-self: flex-start;
+
+  [data-section="content"] {
+    pre {
+      margin-bottom: 0.5rem;
+      line-height: 1.5;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      span {
+        margin-right: 0.25rem;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      span[data-color="red"] {
+        color: var(--sl-color-red);
+      }
+      span[data-color="dimmed"] {
+        color: var(--sl-color-text-dimmed);
+      }
+      span[data-marker="label"] {
+        text-transform: uppercase;
+        letter-spacing: -0.5px;
+      }
+      span[data-separator] {
+        margin-right: 0.375rem;
+      }
+    }
+  }
+
+  &[data-expanded="true"] {
+    [data-section="content"] {
+      display: block;
+    }
+  }
+  &[data-expanded="false"] {
+    [data-section="content"] {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 7;
+      overflow: hidden;
+    }
+  }
+
+  button {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.75rem;
+  }
+}

package/src/components/share/content-error.tsx

@@ -0,0 +1,24 @@
+import style from "./content-error.module.css"
+import { type JSX, createSignal } from "solid-js"
+import { createOverflow } from "./common"
+
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  expand?: boolean
+}
+export function ContentError(props: Props) {
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+
+  return (
+    <div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
+      <div data-section="content" ref={overflow.ref}>
+        {props.children}
+      </div>
+      {((!props.expand && overflow.status) || expanded()) && (
+        <button type="button" data-element-button-text onClick={() => setExpanded((e) => !e)}>
+          {expanded() ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/share/content-markdown.module.css

@@ -0,0 +1,154 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+
+  [data-slot="expand-button"] {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.857em;
+  }
+
+  [data-slot="markdown"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+
+    [data-expanded] & {
+      display: block;
+    }
+
+    font-size: 1em;
+    line-height: 1.5;
+
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre {
+      margin-bottom: 1rem;
+    }
+
+    ul,
+    ol {
+      margin-bottom: 0.5rem;
+    }
+
+    /* Add spacing between top-level list items */
+    ol > li {
+      margin-bottom: 0.5rem;
+    }
+
+    strong {
+      font-weight: 600;
+    }
+
+    ol {
+      list-style-position: outside;
+      padding-left: 1.5rem;
+    }
+
+    ul {
+      padding-left: 1.5rem;
+    }
+
+    /* Nested list spacing */
+    li ul,
+    li ol {
+      margin-top: 0.25rem;
+      margin-bottom: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 1em;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    pre {
+      --shiki-dark-bg: var(--sl-color-bg-surface) !important;
+      background-color: var(--sl-color-bg-surface) !important;
+      padding: 0.5rem 0.75rem;
+      line-height: 1.6;
+      font-size: 0.857em;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      span {
+        white-space: break-spaces;
+      }
+    }
+
+    code {
+      font-weight: 500;
+
+      &:not(pre code) {
+        &::before {
+          content: "`";
+          font-weight: 700;
+        }
+
+        &::after {
+          content: "`";
+          font-weight: 700;
+        }
+      }
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th,
+    td {
+      border: 1px solid var(--sl-color-border);
+      padding: 0.5rem 0.75rem;
+      text-align: left;
+    }
+
+    th {
+      border-bottom: 1px solid var(--sl-color-border);
+    }
+
+    /* Remove outer borders */
+    table tr:first-child th,
+    table tr:first-child td {
+      border-top: none;
+    }
+
+    table tr:last-child td {
+      border-bottom: none;
+    }
+
+    table th:first-child,
+    table td:first-child {
+      border-left: none;
+    }
+
+    table th:last-child,
+    table td:last-child {
+      border-right: none;
+    }
+  }
+
+  [data-component="copy-button"] {
+    top: 0;
+    right: 0;
+  }
+}

package/src/components/share/content-markdown.tsx

@@ -0,0 +1,75 @@
+import { marked } from "marked"
+import { codeToHtml } from "shiki"
+import markedShiki from "marked-shiki"
+import { createOverflow } from "./common"
+import { CopyButton } from "./copy-button"
+import { createResource, createSignal } from "solid-js"
+import { transformerNotationDiff } from "@shikijs/transformers"
+import style from "./content-markdown.module.css"
+
+const markedWithShiki = marked.use(
+  {
+    renderer: {
+      link({ href, title, text }) {
+        const titleAttr = title ? ` title="${title}"` : ""
+        return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`
+      },
+    },
+  },
+  markedShiki({
+    highlight(code, lang) {
+      return codeToHtml(code, {
+        lang: lang || "text",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        transformers: [transformerNotationDiff()],
+      })
+    },
+  }),
+)
+
+interface Props {
+  text: string
+  expand?: boolean
+  highlight?: boolean
+}
+export function ContentMarkdown(props: Props) {
+  const [html] = createResource(
+    () => strip(props.text),
+    async (markdown) => {
+      return markedWithShiki.parse(markdown)
+    },
+  )
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+
+  return (
+    <div
+      class={style.root}
+      data-highlight={props.highlight === true ? true : undefined}
+      data-expanded={expanded() || props.expand === true ? true : undefined}
+    >
+      <div data-slot="markdown" ref={overflow.ref} innerHTML={html()} />
+
+      {!props.expand && overflow.status && (
+        <button
+          type="button"
+          data-component="text-button"
+          data-slot="expand-button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded() ? "Show less" : "Show more"}
+        </button>
+      )}
+      <CopyButton text={props.text} />
+    </div>
+  )
+}
+
+function strip(text: string): string {
+  const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
+  const match = text.match(wrappedRe)
+  return match ? match[2] : text
+}

package/src/components/share/content-text.module.css

@@ -0,0 +1,63 @@
+.root {
+  position: relative;
+  color: var(--sl-color-text);
+  background-color: var(--sl-color-bg-surface);
+  padding: 0.5rem calc(0.5rem + 3px);
+  padding-right: calc(1rem + 18px);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  align-self: flex-start;
+  font-size: 0.875rem;
+
+  &[data-compact] {
+    font-size: 0.75rem;
+    color: var(--sl-color-text-dimmed);
+  }
+
+  [data-slot="text"] {
+    line-height: 1.5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+
+    [data-expanded] & {
+      display: block;
+    }
+  }
+
+  [data-slot="expand-button"] {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.75rem;
+  }
+
+  &[data-theme="invert"] {
+    background-color: var(--sl-color-blue-high);
+    color: var(--sl-color-text-invert);
+
+    [data-slot="expand-button"] {
+      opacity: 0.85;
+      color: var(--sl-color-text-invert);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &[data-theme="blue"] {
+    background-color: var(--sl-color-blue-low);
+  }
+
+  [data-component="copy-button"] {
+    top: 0.5rem;
+    right: calc(0.5rem - 1px);
+  }
+}

package/src/components/share/content-text.tsx

@@ -0,0 +1,37 @@
+import style from "./content-text.module.css"
+import { createSignal } from "solid-js"
+import { createOverflow } from "./common"
+import { CopyButton } from "./copy-button"
+
+interface Props {
+  text: string
+  expand?: boolean
+  compact?: boolean
+}
+export function ContentText(props: Props) {
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+
+  return (
+    <div
+      class={style.root}
+      data-expanded={expanded() || props.expand === true ? true : undefined}
+      data-compact={props.compact === true ? true : undefined}
+    >
+      <pre data-slot="text" ref={overflow.ref}>
+        {props.text}
+      </pre>
+      {((!props.expand && overflow.status) || expanded()) && (
+        <button
+          type="button"
+          data-component="text-button"
+          data-slot="expand-button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded() ? "Show less" : "Show more"}
+        </button>
+      )}
+      <CopyButton text={props.text} />
+    </div>
+  )
+}

package/src/components/share/copy-button.module.css

@@ -0,0 +1,30 @@
+.root {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0.125rem;
+    color: var(--sl-color-text-secondary);
+
+    svg {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &[data-copied="true"] {
+      color: var(--sl-color-green-high);
+    }
+  }
+}
+
+/* Show copy button when parent is hovered */
+*:hover > .root {
+  opacity: 1;
+  visibility: visible;
+}

package/src/components/share/copy-button.tsx

@@ -0,0 +1,28 @@
+import { createSignal } from "solid-js"
+import { IconClipboard, IconCheckCircle } from "../icons"
+import styles from "./copy-button.module.css"
+
+interface CopyButtonProps {
+  text: string
+}
+
+export function CopyButton(props: CopyButtonProps) {
+  const [copied, setCopied] = createSignal(false)
+
+  function handleCopyClick() {
+    if (props.text) {
+      navigator.clipboard.writeText(props.text).catch((err) => console.error("Copy failed", err))
+
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  return (
+    <div data-component="copy-button" class={styles.root}>
+      <button type="button" onClick={handleCopyClick} data-copied={copied() ? true : undefined}>
+        {copied() ? <IconCheckCircle width={16} height={16} /> : <IconClipboard width={16} height={16} />}
+      </button>
+    </div>
+  )
+}