@neurocode-ai/web 1.18.8

package/src/components/share/common.tsx

@@ -0,0 +1,128 @@
+import { createContext, createSignal, splitProps, useContext } from "solid-js"
+import type { JSX } from "solid-js/jsx-runtime"
+import { makeResizeObserver } from "@solid-primitives/resize-observer"
+import { IconCheckCircle, IconHashtag } from "../icons"
+
+export type ShareMessages = { locale: string } & Record<string, string>
+
+const shareContext = createContext<ShareMessages>()
+
+export function ShareI18nProvider(props: { messages: ShareMessages; children: JSX.Element }) {
+  return <shareContext.Provider value={props.messages}>{props.children}</shareContext.Provider>
+}
+
+export function useShareMessages() {
+  const value = useContext(shareContext)
+  if (value) {
+    return value
+  }
+  throw new Error("ShareI18nProvider is required")
+}
+
+export function normalizeLocale(locale: string) {
+  return locale === "root" ? "en" : locale
+}
+
+export function formatNumber(value: number, locale: string) {
+  return new Intl.NumberFormat(normalizeLocale(locale)).format(value)
+}
+
+export function formatCurrency(value: number, locale: string) {
+  return new Intl.NumberFormat(normalizeLocale(locale), {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value)
+}
+
+export function formatCount(value: number, locale: string, singular: string, plural: string) {
+  const unit = value === 1 ? singular : plural
+  return `${formatNumber(value, locale)} ${unit}`
+}
+
+interface AnchorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  id: string
+}
+export function AnchorIcon(props: AnchorProps) {
+  const [local, rest] = splitProps(props, ["id", "children"])
+  const [copied, setCopied] = createSignal(false)
+  const messages = useShareMessages()
+
+  return (
+    <div {...rest} data-element-anchor title={messages.link_to_message} data-status={copied() ? "copied" : ""}>
+      <a
+        href={`#${local.id}`}
+        onClick={(e) => {
+          e.preventDefault()
+
+          const anchor = e.currentTarget
+          const hash = anchor.getAttribute("href") || ""
+          const { origin, pathname, search } = window.location
+
+          navigator.clipboard
+            .writeText(`${origin}${pathname}${search}${hash}`)
+            .catch((err) => console.error("Copy failed", err))
+
+          setCopied(true)
+          setTimeout(() => setCopied(false), 3000)
+        }}
+      >
+        {local.children}
+        <IconHashtag width={18} height={18} />
+        <IconCheckCircle width={18} height={18} />
+      </a>
+      <span data-element-tooltip>{messages.copied}</span>
+    </div>
+  )
+}
+
+export function createOverflow() {
+  const [overflow, setOverflow] = createSignal(false)
+  return {
+    get status() {
+      return overflow()
+    },
+    ref(el: HTMLElement) {
+      const sync = () => {
+        setOverflow(el.scrollHeight > el.clientHeight + 1)
+      }
+
+      const obs = makeResizeObserver(sync)
+      obs.observe(el)
+
+      sync()
+    },
+  }
+}
+
+export function formatDuration(ms: number, locale: string): string {
+  const normalized = normalizeLocale(locale)
+  const ONE_SECOND = 1000
+  const ONE_MINUTE = 60 * ONE_SECOND
+
+  if (ms >= ONE_MINUTE) {
+    return new Intl.NumberFormat(normalized, {
+      style: "unit",
+      unit: "minute",
+      unitDisplay: "narrow",
+      maximumFractionDigits: 0,
+    }).format(Math.floor(ms / ONE_MINUTE))
+  }
+
+  if (ms >= ONE_SECOND) {
+    return new Intl.NumberFormat(normalized, {
+      style: "unit",
+      unit: "second",
+      unitDisplay: "narrow",
+      maximumFractionDigits: 0,
+    }).format(Math.floor(ms / ONE_SECOND))
+  }
+
+  return new Intl.NumberFormat(normalized, {
+    style: "unit",
+    unit: "millisecond",
+    unitDisplay: "narrow",
+    maximumFractionDigits: 0,
+  }).format(ms)
+}

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

@@ -0,0 +1,85 @@
+.root {
+  display: contents;
+
+  [data-slot="expand-button"] {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.75rem;
+  }
+
+  [data-slot="body"] {
+    border: 1px solid var(--sl-color-divider);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  [data-slot="header"] {
+    position: relative;
+    border-bottom: 1px solid var(--sl-color-divider);
+    width: 100%;
+    height: 1.625rem;
+    text-align: center;
+    padding: 0 3.25rem;
+
+    > span {
+      max-width: min(100%, 140ch);
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      line-height: 1.625rem;
+      font-size: 0.75rem;
+      text-overflow: ellipsis;
+      color: var(--sl-color-text-dimmed);
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      top: 8px;
+      left: 10px;
+      width: 2rem;
+      height: 0.5rem;
+      line-height: 0;
+      background-color: var(--sl-color-hairline);
+      mask-image: var(--term-icon);
+      mask-repeat: no-repeat;
+    }
+  }
+
+  [data-slot="content"] {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem calc(0.5rem + 3px);
+
+    pre {
+      --shiki-dark-bg: var(--sl-color-bg) !important;
+      background-color: var(--sl-color-bg) !important;
+      line-height: 1.6;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+      margin: 0;
+
+      span {
+        white-space: break-spaces;
+      }
+    }
+  }
+
+  [data-slot="output"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 10;
+    line-clamp: 10;
+    overflow: hidden;
+  }
+
+  &[data-expanded] [data-slot="output"] {
+    display: block;
+    -webkit-line-clamp: none;
+    line-clamp: none;
+    overflow: visible;
+  }
+}

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

@@ -0,0 +1,67 @@
+import style from "./content-bash.module.css"
+import { createResource, createSignal } from "solid-js"
+import { createOverflow, useShareMessages } from "./common"
+import { codeToHtml } from "shiki"
+
+interface Props {
+  command: string
+  output: string
+  expand?: boolean
+}
+
+export function ContentBash(props: Props) {
+  const messages = useShareMessages()
+  const [commandHtml] = createResource(
+    () => props.command,
+    async (command) => {
+      return codeToHtml(command || "", {
+        lang: "bash",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+      })
+    },
+  )
+
+  const [outputHtml] = createResource(
+    () => props.output,
+    async (output) => {
+      return codeToHtml(output || "", {
+        lang: "console",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+      })
+    },
+  )
+
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+
+  return (
+    <div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
+      <div data-slot="body">
+        <div data-slot="header">
+          <span>Shell</span>
+        </div>
+        <div data-slot="content">
+          <div innerHTML={commandHtml()} />
+          <div data-slot="output" ref={overflow.ref} innerHTML={outputHtml()} />
+        </div>
+      </div>
+
+      {!props.expand && overflow.status && (
+        <button
+          type="button"
+          data-component="text-button"
+          data-slot="expand-button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded() ? messages.show_less : messages.show_more}
+        </button>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,26 @@
+.root {
+  border: 1px solid var(--sl-color-divider);
+  background-color: var(--sl-color-bg-surface);
+  border-radius: 0.25rem;
+  padding: 0.5rem calc(0.5rem + 3px);
+
+  &[data-flush="true"] {
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+  }
+
+  pre {
+    --shiki-dark-bg: var(--sl-color-bg-surface) !important;
+    background-color: var(--sl-color-bg-surface) !important;
+    line-height: 1.6;
+    font-size: 0.75rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    span {
+      white-space: break-spaces;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import { codeToHtml, bundledLanguages } from "shiki"
+import { createResource, Suspense } from "solid-js"
+import style from "./content-code.module.css"
+
+interface Props {
+  code: string
+  lang?: string
+  flush?: boolean
+}
+export function ContentCode(props: Props) {
+  const [html] = createResource(
+    () => [props.code, props.lang],
+    async ([code, lang]) => {
+      // TODO: For testing delays
+      // await new Promise((resolve) => setTimeout(resolve, 3000))
+      return (await codeToHtml(code || "", {
+        lang: lang && lang in bundledLanguages ? lang : "text",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+      })) as string
+    },
+  )
+  return (
+    <Suspense>
+      <div innerHTML={html()} class={style.root} data-flush={props.flush === true ? true : undefined} />
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,153 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--sl-color-divider);
+  background-color: var(--sl-color-bg-surface);
+  border-radius: 0.25rem;
+
+  [data-component="desktop"] {
+    display: block;
+  }
+
+  [data-component="mobile"] {
+    display: none;
+  }
+
+  [data-component="diff-block"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-component="diff-row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: stretch;
+
+    &:first-child {
+      [data-slot="before"],
+      [data-slot="after"] {
+        padding-top: 0.25rem;
+      }
+    }
+
+    &:last-child {
+      [data-slot="before"],
+      [data-slot="after"] {
+        padding-bottom: 0.25rem;
+      }
+    }
+
+    [data-slot="before"],
+    [data-slot="after"] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow-x: visible;
+      min-width: 0;
+      align-items: stretch;
+      padding: 0 1rem 0 2.2ch;
+
+      &[data-diff-type="removed"] {
+        background-color: var(--sl-color-red-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-red-low) !important;
+          background-color: var(--sl-color-red-low) !important;
+        }
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-red-high);
+        }
+      }
+
+      &[data-diff-type="added"] {
+        background-color: var(--sl-color-green-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-green-low) !important;
+          background-color: var(--sl-color-green-low) !important;
+        }
+
+        &::before {
+          content: "+";
+          position: absolute;
+          user-select: none;
+          color: var(--sl-color-green-high);
+          left: 0.6ch;
+          top: 1px;
+        }
+      }
+    }
+
+    [data-slot="before"] {
+      border-right: 1px solid var(--sl-color-divider);
+    }
+  }
+
+  [data-component="mobile"] {
+    & > [data-component="diff-block"]:first-child > div {
+      padding-top: 0.25rem;
+    }
+
+    & > [data-component="diff-block"]:last-child > div {
+      padding-bottom: 0.25rem;
+    }
+
+    & > [data-component="diff-block"] > div {
+      padding: 0 1rem 0 2.2ch;
+
+      &[data-diff-type="removed"] {
+        position: relative;
+        background-color: var(--sl-color-red-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-red-low) !important;
+          background-color: var(--sl-color-red-low) !important;
+        }
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-red-high);
+        }
+      }
+
+      &[data-diff-type="added"] {
+        position: relative;
+        background-color: var(--sl-color-green-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-green-low) !important;
+          background-color: var(--sl-color-green-low) !important;
+        }
+
+        &::before {
+          content: "+";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-green-high);
+        }
+      }
+    }
+  }
+
+  @media (max-width: 40rem) {
+    [data-component="desktop"] {
+      display: none;
+    }
+
+    [data-component="mobile"] {
+      display: block;
+    }
+  }
+}