@jonsoc/ui 1.1.34

package/src/components/toast.tsx

@@ -0,0 +1,185 @@
+import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
+import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
+import type { ComponentProps, JSX } from "solid-js"
+import { Show } from "solid-js"
+import { Portal } from "solid-js/web"
+import { useI18n } from "../context/i18n"
+import { Icon, type IconProps } from "./icon"
+import { IconButton } from "./icon-button"
+
+export interface ToastRegionProps extends ComponentProps<typeof Kobalte.Region> {}
+
+function ToastRegion(props: ToastRegionProps) {
+  return (
+    <Portal>
+      <Kobalte.Region data-component="toast-region" {...props}>
+        <Kobalte.List data-slot="toast-list" />
+      </Kobalte.Region>
+    </Portal>
+  )
+}
+
+export interface ToastRootComponentProps extends ToastRootProps {
+  class?: string
+  classList?: ComponentProps<"li">["classList"]
+  children?: JSX.Element
+}
+
+function ToastRoot(props: ToastRootComponentProps) {
+  return (
+    <Kobalte
+      data-component="toast"
+      classList={{
+        ...(props.classList ?? {}),
+        [props.class ?? ""]: !!props.class,
+      }}
+      {...props}
+    />
+  )
+}
+
+function ToastIcon(props: { name: IconProps["name"] }) {
+  return (
+    <div data-slot="toast-icon">
+      <Icon name={props.name} />
+    </div>
+  )
+}
+
+function ToastContent(props: ComponentProps<"div">) {
+  return <div data-slot="toast-content" {...props} />
+}
+
+function ToastTitle(props: ToastTitleProps & ComponentProps<"div">) {
+  return <Kobalte.Title data-slot="toast-title" {...props} />
+}
+
+function ToastDescription(props: ToastDescriptionProps & ComponentProps<"div">) {
+  return <Kobalte.Description data-slot="toast-description" {...props} />
+}
+
+function ToastActions(props: ComponentProps<"div">) {
+  return <div data-slot="toast-actions" {...props} />
+}
+
+function ToastCloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
+  const i18n = useI18n()
+  return (
+    <Kobalte.CloseButton
+      data-slot="toast-close-button"
+      as={IconButton}
+      icon="close"
+      variant="ghost"
+      aria-label={i18n.t("ui.common.dismiss")}
+      {...props}
+    />
+  )
+}
+
+function ToastProgressTrack(props: ComponentProps<typeof Kobalte.ProgressTrack>) {
+  return <Kobalte.ProgressTrack data-slot="toast-progress-track" {...props} />
+}
+
+function ToastProgressFill(props: ComponentProps<typeof Kobalte.ProgressFill>) {
+  return <Kobalte.ProgressFill data-slot="toast-progress-fill" {...props} />
+}
+
+export const Toast = Object.assign(ToastRoot, {
+  Region: ToastRegion,
+  Icon: ToastIcon,
+  Content: ToastContent,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  CloseButton: ToastCloseButton,
+  ProgressTrack: ToastProgressTrack,
+  ProgressFill: ToastProgressFill,
+})
+
+export { toaster }
+
+export type ToastVariant = "default" | "success" | "error" | "loading"
+
+export interface ToastAction {
+  label: string
+  onClick: "dismiss" | (() => void)
+}
+
+export interface ToastOptions {
+  title?: string
+  description?: string
+  icon?: IconProps["name"]
+  variant?: ToastVariant
+  duration?: number
+  persistent?: boolean
+  actions?: ToastAction[]
+}
+
+export function showToast(options: ToastOptions | string) {
+  const opts = typeof options === "string" ? { description: options } : options
+  return toaster.show((props) => (
+    <Toast
+      toastId={props.toastId}
+      duration={opts.duration}
+      persistent={opts.persistent}
+      data-variant={opts.variant ?? "default"}
+    >
+      <Show when={opts.icon}>
+        <Toast.Icon name={opts.icon!} />
+      </Show>
+      <Toast.Content>
+        <Show when={opts.title}>
+          <Toast.Title>{opts.title}</Toast.Title>
+        </Show>
+        <Show when={opts.description}>
+          <Toast.Description>{opts.description}</Toast.Description>
+        </Show>
+        <Show when={opts.actions?.length}>
+          <Toast.Actions>
+            {opts.actions!.map((action) => (
+              <button
+                data-slot="toast-action"
+                onClick={() => {
+                  if (typeof action.onClick === "function") {
+                    action.onClick()
+                  }
+                  toaster.dismiss(props.toastId)
+                }}
+              >
+                {action.label}
+              </button>
+            ))}
+          </Toast.Actions>
+        </Show>
+      </Toast.Content>
+      <Toast.CloseButton />
+    </Toast>
+  ))
+}
+
+export interface ToastPromiseOptions<T, U = unknown> {
+  loading?: JSX.Element
+  success?: (data: T) => JSX.Element
+  error?: (error: U) => JSX.Element
+}
+
+export function showPromiseToast<T, U = unknown>(
+  promise: Promise<T> | (() => Promise<T>),
+  options: ToastPromiseOptions<T, U>,
+) {
+  return toaster.promise(promise, (props) => (
+    <Toast
+      toastId={props.toastId}
+      data-variant={props.state === "pending" ? "loading" : props.state === "fulfilled" ? "success" : "error"}
+    >
+      <Toast.Content>
+        <Toast.Description>
+          {props.state === "pending" && options.loading}
+          {props.state === "fulfilled" && options.success?.(props.data!)}
+          {props.state === "rejected" && options.error?.(props.error)}
+        </Toast.Description>
+      </Toast.Content>
+      <Toast.CloseButton />
+    </Toast>
+  ))
+}

package/src/components/tooltip.css

@@ -0,0 +1,74 @@
+[data-component="tooltip-trigger"] {
+  display: flex;
+}
+
+[data-slot="tooltip-keybind"] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+[data-slot="tooltip-keybind-key"] {
+  color: var(--text-invert-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+}
+
+[data-component="tooltip"] {
+  z-index: 1000;
+  max-width: 320px;
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  background: var(--surface-float-base);
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+
+  box-shadow: var(--shadow-md);
+  pointer-events: none !important;
+  /* transition: all 150ms ease-out; */
+  /* transform: translate3d(0, 0, 0); */
+  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
+
+  /* text-12-medium */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+
+  &[data-expanded] {
+    opacity: 1;
+    /* transform: translate3d(0, 0, 0); */
+  }
+
+  &[data-closed] {
+    opacity: 0;
+  }
+
+  /* &[data-placement="top"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, 4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="bottom"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, -4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="left"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(4px, 0, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="right"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(-4px, 0, 0); */
+  /*   } */
+  /* } */
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,77 @@
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
+import { children, createSignal, Match, onMount, splitProps, Switch, type JSX } from "solid-js"
+import type { ComponentProps } from "solid-js"
+
+export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
+  value: JSX.Element
+  class?: string
+  contentClass?: string
+  contentStyle?: JSX.CSSProperties
+  inactive?: boolean
+}
+
+export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
+  title: string
+  keybind: string
+}
+
+export function TooltipKeybind(props: TooltipKeybindProps) {
+  const [local, others] = splitProps(props, ["title", "keybind"])
+  return (
+    <Tooltip
+      {...others}
+      value={
+        <div data-slot="tooltip-keybind">
+          <span>{local.title}</span>
+          <span data-slot="tooltip-keybind-key">{local.keybind}</span>
+        </div>
+      }
+    />
+  )
+}
+
+export function Tooltip(props: TooltipProps) {
+  const [open, setOpen] = createSignal(false)
+  const [local, others] = splitProps(props, ["children", "class", "contentClass", "contentStyle", "inactive"])
+
+  const c = children(() => local.children)
+
+  onMount(() => {
+    const childElements = c()
+    if (childElements instanceof HTMLElement) {
+      childElements.addEventListener("focus", () => setOpen(true))
+      childElements.addEventListener("blur", () => setOpen(false))
+    } else if (Array.isArray(childElements)) {
+      for (const child of childElements) {
+        if (child instanceof HTMLElement) {
+          child.addEventListener("focus", () => setOpen(true))
+          child.addEventListener("blur", () => setOpen(false))
+        }
+      }
+    }
+  })
+
+  return (
+    <Switch>
+      <Match when={local.inactive}>{local.children}</Match>
+      <Match when={true}>
+        <KobalteTooltip forceMount gutter={4} {...others} open={open()} onOpenChange={setOpen}>
+          <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
+            {c()}
+          </KobalteTooltip.Trigger>
+          <KobalteTooltip.Portal>
+            <KobalteTooltip.Content
+              data-component="tooltip"
+              data-placement={props.placement}
+              class={local.contentClass}
+              style={local.contentStyle}
+            >
+              {others.value}
+              {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */}
+            </KobalteTooltip.Content>
+          </KobalteTooltip.Portal>
+        </KobalteTooltip>
+      </Match>
+    </Switch>
+  )
+}

package/src/components/typewriter.css

@@ -0,0 +1,14 @@
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.blinking-cursor {
+  animation: blink 1s step-end infinite;
+}

package/src/components/typewriter.tsx

@@ -0,0 +1,55 @@
+import { createEffect, onCleanup, Show, type ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+
+export const Typewriter = <T extends ValidComponent = "p">(props: { text?: string; class?: string; as?: T }) => {
+  const [store, setStore] = createStore({
+    typing: false,
+    displayed: "",
+    cursor: true,
+  })
+
+  createEffect(() => {
+    const text = props.text
+    if (!text) return
+
+    let i = 0
+    const timeouts: ReturnType<typeof setTimeout>[] = []
+    setStore("typing", true)
+    setStore("displayed", "")
+    setStore("cursor", true)
+
+    const getTypingDelay = () => {
+      const random = Math.random()
+      if (random < 0.05) return 150 + Math.random() * 100
+      if (random < 0.15) return 80 + Math.random() * 60
+      return 30 + Math.random() * 50
+    }
+
+    const type = () => {
+      if (i < text.length) {
+        setStore("displayed", text.slice(0, i + 1))
+        i++
+        timeouts.push(setTimeout(type, getTypingDelay()))
+      } else {
+        setStore("typing", false)
+        timeouts.push(setTimeout(() => setStore("cursor", false), 2000))
+      }
+    }
+
+    timeouts.push(setTimeout(type, 200))
+
+    onCleanup(() => {
+      for (const timeout of timeouts) clearTimeout(timeout)
+    })
+  })
+
+  return (
+    <Dynamic component={props.as || "p"} class={props.class}>
+      {store.displayed}
+      <Show when={store.cursor}>
+        <span classList={{ "blinking-cursor": !store.typing }}>│</span>
+      </Show>
+    </Dynamic>
+  )
+}

package/src/context/code.tsx

@@ -0,0 +1,10 @@
+import type { ValidComponent } from "solid-js"
+import { createSimpleContext } from "./helper"
+
+const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
+  name: "CodeComponent",
+  init: (props) => props.component,
+})
+
+export const CodeComponentProvider = ctx.provider
+export const useCodeComponent = ctx.use

package/src/context/data.tsx

@@ -0,0 +1,74 @@
+import type {
+  Message,
+  Session,
+  Part,
+  FileDiff,
+  SessionStatus,
+  PermissionRequest,
+  QuestionRequest,
+  QuestionAnswer,
+} from "@jonsoc/sdk/v2"
+import { createSimpleContext } from "./helper"
+import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
+
+type Data = {
+  session: Session[]
+  session_status: {
+    [sessionID: string]: SessionStatus
+  }
+  session_diff: {
+    [sessionID: string]: FileDiff[]
+  }
+  session_diff_preload?: {
+    [sessionID: string]: PreloadMultiFileDiffResult<any>[]
+  }
+  permission?: {
+    [sessionID: string]: PermissionRequest[]
+  }
+  question?: {
+    [sessionID: string]: QuestionRequest[]
+  }
+  message: {
+    [sessionID: string]: Message[]
+  }
+  part: {
+    [messageID: string]: Part[]
+  }
+}
+
+export type PermissionRespondFn = (input: {
+  sessionID: string
+  permissionID: string
+  response: "once" | "always" | "reject"
+}) => void
+
+export type QuestionReplyFn = (input: { requestID: string; answers: QuestionAnswer[] }) => void
+
+export type QuestionRejectFn = (input: { requestID: string }) => void
+
+export type NavigateToSessionFn = (sessionID: string) => void
+
+export const { use: useData, provider: DataProvider } = createSimpleContext({
+  name: "Data",
+  init: (props: {
+    data: Data
+    directory: string
+    onPermissionRespond?: PermissionRespondFn
+    onQuestionReply?: QuestionReplyFn
+    onQuestionReject?: QuestionRejectFn
+    onNavigateToSession?: NavigateToSessionFn
+  }) => {
+    return {
+      get store() {
+        return props.data
+      },
+      get directory() {
+        return props.directory
+      },
+      respondToPermission: props.onPermissionRespond,
+      replyToQuestion: props.onQuestionReply,
+      rejectQuestion: props.onQuestionReject,
+      navigateToSession: props.onNavigateToSession,
+    }
+  },
+})

package/src/context/dialog.tsx

@@ -0,0 +1,111 @@
+import {
+  createContext,
+  createRoot,
+  createSignal,
+  getOwner,
+  type Owner,
+  type ParentProps,
+  runWithOwner,
+  useContext,
+  type JSX,
+} from "solid-js"
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+
+type DialogElement = () => JSX.Element
+
+type Active = {
+  id: string
+  node: JSX.Element
+  dispose: () => void
+  owner: Owner
+  onClose?: () => void
+}
+
+const Context = createContext<ReturnType<typeof init>>()
+
+function init() {
+  const [active, setActive] = createSignal<Active | undefined>()
+
+  const close = () => {
+    const current = active()
+    if (!current) return
+    current.onClose?.()
+    current.dispose()
+    setActive(undefined)
+  }
+
+  const show = (element: DialogElement, owner: Owner, onClose?: () => void) => {
+    close()
+
+    const id = Math.random().toString(36).slice(2)
+    let dispose: (() => void) | undefined
+
+    const node = runWithOwner(owner, () =>
+      createRoot((d) => {
+        dispose = d
+        return (
+          <Kobalte
+            modal
+            open={true}
+            onOpenChange={(open) => {
+              if (open) return
+              close()
+            }}
+          >
+            <Kobalte.Portal>
+              <Kobalte.Overlay data-component="dialog-overlay" onClick={close} />
+              {element()}
+            </Kobalte.Portal>
+          </Kobalte>
+        )
+      }),
+    )
+
+    if (!dispose) return
+
+    setActive({ id, node, dispose, owner, onClose })
+  }
+
+  return {
+    get active() {
+      return active()
+    },
+    close,
+    show,
+  }
+}
+
+export function DialogProvider(props: ParentProps) {
+  const ctx = init()
+  return (
+    <Context.Provider value={ctx}>
+      {props.children}
+      <div data-component="dialog-stack">{ctx.active?.node}</div>
+    </Context.Provider>
+  )
+}
+
+export function useDialog() {
+  const ctx = useContext(Context)
+  const owner = getOwner()
+
+  if (!owner) {
+    throw new Error("useDialog must be used within a DialogProvider")
+  }
+  if (!ctx) {
+    throw new Error("useDialog must be used within a DialogProvider")
+  }
+
+  return {
+    get active() {
+      return ctx.active
+    },
+    show(element: DialogElement, onClose?: () => void) {
+      const base = ctx.active?.owner ?? owner
+      ctx.show(element, base, onClose)
+    },
+    close() {
+      ctx.close()
+    },
+  }
+}

package/src/context/diff.tsx

@@ -0,0 +1,10 @@
+import type { ValidComponent } from "solid-js"
+import { createSimpleContext } from "./helper"
+
+const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
+  name: "DiffComponent",
+  init: (props) => props.component,
+})
+
+export const DiffComponentProvider = ctx.provider
+export const useDiffComponent = ctx.use

package/src/context/helper.tsx

@@ -0,0 +1,37 @@
+import { createContext, createMemo, Show, useContext, type ParentProps, type Accessor } from "solid-js"
+
+export function createSimpleContext<T, Props extends Record<string, any>>(input: {
+  name: string
+  init: ((input: Props) => T) | (() => T)
+  gate?: boolean
+}) {
+  const ctx = createContext<T>()
+
+  return {
+    provider: (props: ParentProps<Props>) => {
+      const init = input.init(props)
+      const gate = input.gate ?? true
+
+      if (!gate) {
+        return <ctx.Provider value={init}>{props.children}</ctx.Provider>
+      }
+
+      // Access init.ready inside the memo to make it reactive for getter properties
+      const isReady = createMemo(() => {
+        // @ts-expect-error
+        const ready = init.ready as Accessor<boolean> | boolean | undefined
+        return ready === undefined || (typeof ready === "function" ? ready() : ready)
+      })
+      return (
+        <Show when={isReady()}>
+          <ctx.Provider value={init}>{props.children}</ctx.Provider>
+        </Show>
+      )
+    },
+    use() {
+      const value = useContext(ctx)
+      if (!value) throw new Error(`${input.name} context must be used within a context provider`)
+      return value
+    },
+  }
+}

package/src/context/i18n.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, type Accessor, type ParentProps } from "solid-js"
+import { dict as en } from "../i18n/en"
+
+export type UiI18nKey = keyof typeof en
+
+export type UiI18nParams = Record<string, string | number | boolean>
+
+export type UiI18n = {
+  locale: Accessor<string>
+  t: (key: UiI18nKey, params?: UiI18nParams) => string
+}
+
+function resolveTemplate(text: string, params?: UiI18nParams) {
+  if (!params) return text
+  return text.replace(/{{\s*([^}]+?)\s*}}/g, (_, rawKey) => {
+    const key = String(rawKey)
+    const value = params[key]
+    return value === undefined ? "" : String(value)
+  })
+}
+
+const fallback: UiI18n = {
+  locale: () => "en",
+  t: (key, params) => {
+    const value = en[key] ?? String(key)
+    return resolveTemplate(value, params)
+  },
+}
+
+const Context = createContext<UiI18n>(fallback)
+
+export function I18nProvider(props: ParentProps<{ value: UiI18n }>) {
+  return <Context.Provider value={props.value}>{props.children}</Context.Provider>
+}
+
+export function useI18n() {
+  return useContext(Context)
+}

package/src/context/index.ts

@@ -0,0 +1,5 @@
+export * from "./helper"
+export * from "./data"
+export * from "./diff"
+export * from "./dialog"
+export * from "./i18n"