@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css"

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,36 @@
+import { useCallback, useRef, useState } from "react"
+import { toast } from "sonner"
+
+type UseCopyToClipboardProps = {
+  text: string
+  copyMessage?: string
+}
+
+export function useCopyToClipboard({
+  text,
+  copyMessage = "Copied to clipboard!",
+}: UseCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = useState(false)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        toast.success(copyMessage)
+        setIsCopied(true)
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+          timeoutRef.current = null
+        }
+        timeoutRef.current = setTimeout(() => {
+          setIsCopied(false)
+        }, 2000)
+      })
+      .catch(() => {
+        toast.error("failed to copy to clipboard.")
+      })
+  }, [text, copyMessage])
+
+  return { isCopied, handleCopy }
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/lib/display-name.ts

@@ -0,0 +1,15 @@
+/**
+ * Named resources — apps, agents, flows, knowledge, MCP servers, publications —
+ * carry both a `name`, the slug that addresses them (`veo-3-1`), and an
+ * optional `title`, the name a person reads (`Veo 3.1`).
+ *
+ * The slug belongs in URLs, refs and code samples. The title belongs in
+ * headings, cards, page titles and prose. Not every resource has a title,
+ * so this falls back to the slug.
+ */
+export function displayName(
+  resource: { title?: string; name?: string } | null | undefined,
+  fallback = "",
+): string {
+  return resource?.title?.trim() || resource?.name?.trim() || fallback
+}

package/src/lib/example-input.ts

@@ -0,0 +1,130 @@
+/**
+ * An example input for an app, used by every code sample that runs it.
+ *
+ * The app's own example comes first: a top-level `examples` entry on its input
+ * schema (pydantic's `json_schema_extra={"examples": [...]}`). Without one, the
+ * input is built from the schema: required fields, fields with an example, and
+ * optional lists of objects that carry no default (the question lists of the
+ * decision apps, where the app needs at least one entry). Values come from each
+ * field's example, then its default, then a placeholder.
+ */
+
+import type { Schema } from './schema'
+
+type Json = unknown
+
+const MAX_DEPTH = 6
+
+function first(value: Json): Json {
+  return Array.isArray(value) ? value[0] : value
+}
+
+function isObject(value: Json): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function deref(schema: Schema, root: Schema): Schema {
+  if (!schema?.$ref) return schema
+  const name = schema.$ref.replace('#/$defs/', '').replace('#/definitions/', '')
+  const target = root.$defs?.[name] ?? root.definitions?.[name]
+  if (!target) return schema
+  const { $ref: _ref, ...rest } = schema
+  return { ...deref(target, root), ...rest }
+}
+
+/** The non-null branch of `anyOf [T, null]` or `T | null`, else the schema itself. */
+function concrete(schema: Schema, root: Schema): Schema {
+  const s = deref(schema, root)
+  const branches = s.anyOf ?? s.oneOf
+  if (branches?.length) {
+    const branch = branches.find((b) => b.type !== 'null') ?? branches[0]
+    const { anyOf: _a, oneOf: _o, ...rest } = s
+    return concrete({ ...rest, ...(branch as Schema) }, root)
+  }
+  if (Array.isArray(s.type)) {
+    return { ...s, type: s.type.find((t) => t !== 'null') ?? s.type[0] }
+  }
+  return s
+}
+
+function itemSchema(schema: Schema, root: Schema): Schema | undefined {
+  const items = Array.isArray(schema.items) ? schema.items[0] : schema.items
+  return items ? concrete(items, root) : undefined
+}
+
+function hasExample(schema: Schema): boolean {
+  return first(schema.examples) !== undefined
+}
+
+/** An optional list of objects with required fields and no default: the app expects entries. */
+function expectsEntries(schema: Schema, root: Schema): boolean {
+  if (schema.type !== 'array' || schema.default !== undefined) return false
+  const item = itemSchema(schema, root)
+  return item?.type === 'object' && (item.required?.length ?? 0) > 0
+}
+
+/** Where a value sits: its own key, and the list it is an entry of. */
+interface Place {
+  key: string
+  list?: { key: string; index: number }
+}
+
+// Keys that name an entry, so entries of one list (and of sibling lists) stay distinct.
+const NAME_KEYS = new Set(['id', 'name', 'key'])
+
+function placeholder(place: Place): string {
+  if (place.list && NAME_KEYS.has(place.key)) return `${place.list.key}_${place.list.index + 1}`
+  return place.key
+}
+
+function value(raw: Schema, root: Schema, place: Place, depth: number): Json {
+  const schema = concrete(raw, root)
+  const example = first(schema.examples)
+  if (example !== undefined) return example
+  if (schema.default !== undefined && schema.default !== null && schema.default !== '') return schema.default
+  if (schema.const !== undefined) return schema.const
+  if (schema.enum?.length) return schema.enum[0]
+
+  switch (schema.type) {
+    case 'string':
+      if (schema.format === 'file' || schema.format === 'uri' || schema.format === 'url') return 'https://example.com/file.png'
+      return placeholder(place)
+    case 'integer':
+    case 'number':
+      return schema.minimum ?? 0
+    case 'boolean':
+      return false
+    case 'array': {
+      const item = itemSchema(schema, root)
+      if (!item || depth >= MAX_DEPTH) return []
+      const count = Math.max(schema.minItems ?? 1, 1)
+      return Array.from({ length: count }, (_, index) => {
+        if (item.type === 'object') return object(item, root, { key: place.key, index }, depth + 1)
+        return value(item, root, { key: `${place.key}_${index + 1}` }, depth + 1)
+      })
+    }
+    case 'object':
+      return depth >= MAX_DEPTH ? {} : object(schema, root, undefined, depth + 1)
+    default:
+      return placeholder(place)
+  }
+}
+
+function object(schema: Schema, root: Schema, list: Place['list'], depth: number): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  const required = new Set(schema.required ?? [])
+  for (const [key, raw] of Object.entries(schema.properties ?? {})) {
+    const prop = concrete(raw, root)
+    if (required.has(key) || hasExample(prop) || expectsEntries(prop, root)) {
+      out[key] = value(raw, root, { key, list }, depth)
+    }
+  }
+  return out
+}
+
+export function exampleInput(schema?: Schema | null): Record<string, unknown> {
+  if (!schema) return {}
+  const own = first(schema.examples)
+  if (isObject(own)) return own
+  return object(schema, schema, undefined, 0)
+}

package/src/lib/plans.ts

@@ -0,0 +1,44 @@
+/**
+ * Reading a plan for display: its price, and the limits worth listing. Shared
+ * by the app's billing pages and the marketing site's pricing page.
+ */
+import type { EntitlementResource, PlanLimit, PlanVersionDTO, SubscriptionInterval } from '@inferencesh/sdk'
+
+type Priced = { active_version?: PlanVersionDTO }
+
+/** A limit as plans carry it; every field optional so partial plan shapes fit. */
+export type PlanLimitLike = Partial<PlanLimit>
+
+export function getPriceAmount(plan: Priced, interval: SubscriptionInterval): number {
+  const v = plan.active_version
+  if (!v) return 0
+  return interval === 'yearly' ? (v.amount_yearly ?? 0) : (v.amount_monthly ?? 0)
+}
+
+/** The price per month: the monthly amount, or a twelfth of the yearly one. */
+export function getMonthlyPrice(plan: Priced, interval: SubscriptionInterval): number {
+  if (interval === 'monthly') return getPriceAmount(plan, 'monthly')
+  return Math.round(getPriceAmount(plan, 'yearly') / 12)
+}
+
+export function hasPricing(plan: Priced): boolean {
+  const v = plan.active_version
+  return !!v && ((v.amount_monthly ?? 0) > 0 || (v.amount_yearly ?? 0) > 0)
+}
+
+/** Keys of the limits worth showing; every returned key is present in limits. */
+export function getVisibleLimitKeys(
+  limits: { [key in EntitlementResource]?: PlanLimitLike } | undefined,
+): EntitlementResource[] {
+  return (Object.entries(limits || {}) as [EntitlementResource, PlanLimitLike][])
+    .filter(([, v]) => v.label && v.type === 'limit' && (v.unlimited || (v.limit != null && v.limit > 0)))
+    .map(([k]) => k)
+}
+
+/** Format a numeric limit value with its unit. Unit comes from backend. */
+export function formatLimitValue(limit: PlanLimitLike): string {
+  if (limit.unlimited) return '∞'
+  if (!limit.limit) return '0'
+  if (limit.unit === 'mb' && limit.limit >= 1024) return `${Math.round(limit.limit / 1024)} gb`
+  return `${limit.limit}${limit.unit ? ` ${limit.unit}` : ''}`
+}

package/src/lib/safe-content.ts

@@ -0,0 +1,137 @@
+/**
+ * The one place user-supplied values are checked before they become a URL,
+ * a frame or a CSS value in the app (INF-1176, INC-2026-11-02).
+ *
+ * Text is safe as React renders it (escaped). What is not: a link or image
+ * address (javascript:, vbscript:, data:text/html), a frame that is given
+ * allow-same-origin while it loads from the app's own origin, and a value
+ * written into a <style> element. Every renderer of user content (the
+ * markdown renderers, the chat renderer, agent UI widgets, MCP cards, the
+ * artifact frame, charts) goes through these functions.
+ *
+ * Raw HTML in markdown is a separate rule: it is sanitised by
+ * rehype-sanitize (docs-markdown-renderer) or never parsed.
+ */
+
+/** Schemes a link may use. Anything else, javascript: included, is dropped. */
+const LINK_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:"])
+
+/** Schemes an image, video or audio source may use. */
+const MEDIA_SCHEMES = new Set(["http:", "https:", "blob:"])
+
+/** data: media types an image may carry inline (no SVG: it is a document). */
+const DATA_IMAGE = /^data:image\/(png|jpe?g|gif|webp|avif|bmp|x-icon);base64,[a-z0-9+/=\s]*$/i
+
+// ASCII control characters and whitespace a browser strips from a URL
+// before reading its scheme ("java\tscript:", " javascript:").
+// eslint-disable-next-line no-control-regex
+const STRIPPED = /[\u0000-\u0020\u007f]/g
+
+/**
+ * schemeOf is the lowercased scheme of url as a browser reads it, or "" for
+ * a relative reference (/path, #hash, ?q, path).
+ */
+function schemeOf(url: string): string {
+  const s = url.replace(STRIPPED, "")
+  const m = /^([a-z][a-z0-9+.-]*):/i.exec(s)
+  if (!m) return ""
+  // "a/b:c" and "a?b:c" are relative: a scheme ends before any / ? #.
+  const colon = s.indexOf(":")
+  const firstDelim = s.search(/[/?#]/)
+  if (firstDelim !== -1 && firstDelim < colon) return ""
+  return m[1]!.toLowerCase() + ":"
+}
+
+/**
+ * safeUrl is url when it is a link target that runs nothing: http(s),
+ * mailto, tel or a relative reference. Otherwise undefined, so the caller
+ * renders no link.
+ */
+export function safeUrl(url: unknown): string | undefined {
+  if (typeof url !== "string") return undefined
+  const trimmed = url.trim()
+  if (!trimmed) return undefined
+  const scheme = schemeOf(trimmed)
+  if (scheme === "") {
+    // Protocol-relative ("//host") is an absolute http(s) link: allowed.
+    return trimmed
+  }
+  return LINK_SCHEMES.has(scheme) ? trimmed : undefined
+}
+
+/**
+ * safeMediaSrc is src when it is an image/video/audio source: http(s),
+ * blob:, a relative reference or an inline raster data: image. Otherwise
+ * undefined.
+ */
+export function safeMediaSrc(src: unknown): string | undefined {
+  if (typeof src !== "string") return undefined
+  const trimmed = src.trim()
+  if (!trimmed) return undefined
+  const scheme = schemeOf(trimmed)
+  if (scheme === "") return trimmed
+  if (scheme === "data:") return DATA_IMAGE.test(trimmed) ? trimmed : undefined
+  return MEDIA_SCHEMES.has(scheme) ? trimmed : undefined
+}
+
+/**
+ * safeUrlTransform is safeUrl as react-markdown's urlTransform: "" for a
+ * refused URL (react-markdown then drops the attribute's value). img src
+ * goes through safeMediaSrc.
+ */
+export function safeUrlTransform(url: string, key: string): string {
+  if (key === "src") return safeMediaSrc(url) ?? ""
+  return safeUrl(url) ?? ""
+}
+
+/**
+ * isolatedFrameSrc is src when a frame may load it with allow-same-origin:
+ * an https (or, for local development, http) URL whose origin is not the
+ * host page's. A same-origin src with allow-scripts and allow-same-origin
+ * is the host page itself: the frame could remove its own sandbox. Returns
+ * undefined otherwise; the caller shows no frame.
+ */
+export function isolatedFrameSrc(src: unknown, hostOrigin?: string): string | undefined {
+  if (typeof src !== "string" || !src) return undefined
+  let u: URL
+  try {
+    u = new URL(src)
+  } catch {
+    return undefined // relative: resolves to the host's origin
+  }
+  if (u.protocol !== "https:" && u.protocol !== "http:") return undefined
+  const host = hostOrigin ?? (typeof window !== "undefined" ? window.location.origin : undefined)
+  if (!host || u.origin === host) return undefined
+  return u.toString()
+}
+
+/** A CSS identifier we generate or accept from data (a series key, an id). */
+const CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]{0,63}$/
+
+/** safeCssIdent is v when it is a plain identifier, else undefined. */
+export function safeCssIdent(v: unknown): string | undefined {
+  return typeof v === "string" && CSS_IDENT.test(v) ? v : undefined
+}
+
+const CSS_COLOR = [
+  /^#[0-9a-f]{3,8}$/i,
+  /^[a-z]{3,20}$/i, // named colour
+  // rgb()/hsl()/oklch()/... and var(--x), with numbers, %, deg, commas,
+  // slashes and nested functions ("hsl(var(--chart-1) / 0.5)"). Quotes,
+  // url(), image-set(), semicolons and braces are refused before this.
+  /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|var)\([a-z0-9\s.,%/+()-]*\)$/i,
+]
+
+/**
+ * safeCssColor is v when it is a CSS colour value (hex, a name, a colour
+ * function or var(--x)), else undefined. A value from data written into a
+ * <style> element could otherwise close the rule and style the whole page
+ * (or load url()s that leak what is on it).
+ */
+export function safeCssColor(v: unknown): string | undefined {
+  if (typeof v !== "string") return undefined
+  const s = v.trim()
+  if (!s || s.length > 100) return undefined
+  if (/url\(|image-set\(|[;{}<>"'\\@!]|expression|\/\*/i.test(s)) return undefined
+  return CSS_COLOR.some((re) => re.test(s)) ? s : undefined
+}