@umami/shiso 1.12.0 → 1.13.0

package/src/components/docs/Update.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import { Badge } from './Badge';
+import { styles } from './styles';
+import { slugify } from './utils';
+
+export interface UpdateRss {
+  title?: string;
+  description?: string;
+}
+
+export interface UpdateProps {
+  /** Left-hand label. Also creates the anchor id (slugified, like headings). */
+  label: string;
+  description?: ReactNode;
+  tags?: string[];
+  /**
+   * Mintlify compatibility: custom RSS title/description for this entry.
+   * Shiso does not generate an RSS feed yet; the prop is accepted and ignored.
+   */
+  rss?: UpdateRss;
+  children?: ReactNode;
+}
+
+function normalizeTags(tags: UpdateProps['tags']): string[] {
+  if (!Array.isArray(tags)) {
+    return [];
+  }
+
+  const seen = new Set<string>();
+  for (const tag of tags) {
+    if (typeof tag !== 'string') {
+      continue;
+    }
+    const trimmed = tag.trim();
+    if (trimmed && !seen.has(trimmed)) {
+      seen.add(trimmed);
+    }
+  }
+
+  return [...seen];
+}
+
+export function Update({ label, description, tags, rss: _rss, children }: UpdateProps) {
+  const id = slugify(label, 'update');
+  const normalizedTags = normalizeTags(tags);
+
+  return (
+    <section
+      id={id}
+      aria-label={label}
+      className={styles.update}
+      data-tags={normalizedTags.join(',')}
+    >
+      <div className={styles.updateMeta}>
+        <a href={`#${id}`} className={styles.updateLabel}>
+          {label}
+        </a>
+        {description ? <div className={styles.updateDescription}>{description}</div> : null}
+        {normalizedTags.length > 0 ? (
+          <div className={styles.updateTags}>
+            {normalizedTags.map(tag => (
+              <Badge key={tag} size="sm">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      <div className={styles.updateBody}>{children}</div>
+    </section>
+  );
+}

package/src/components/docs/index.ts

@@ -3,16 +3,23 @@ export * from './Badge';
 export * from './Button';
 export * from './Callout';
 export * from './Card';
+export * from './Changelog';
 export * from './CodeGroup';
 export * from './Columns';
 export * from './Expandable';
 export * from './Frame';
 export * from './Icon';
 export * from './Link';
+export * from './Mermaid';
+export * from './Panel';
+export * from './panel-context';
 export * from './ParamField';
 export * from './PropertiesTable';
 export * from './ResponseField';
 export * from './Steps';
 export * from './Tabs';
+export * from './Tiles';
 export * from './Tooltip';
+export * from './Tree';
+export * from './Update';
 export * from './ZoomableImage';

package/src/components/docs/panel-context.tsx

@@ -0,0 +1,25 @@
+import { createContext, type ReactNode, useContext, useState } from 'react';
+
+interface PanelContextValue {
+  content: ReactNode;
+  setContent: (content: ReactNode) => void;
+}
+
+const PanelContext = createContext<PanelContextValue>({
+  content: null,
+  setContent: () => {},
+});
+
+export function PanelProvider({ children }: { children: ReactNode }) {
+  const [content, setContent] = useState<ReactNode>(null);
+
+  return <PanelContext.Provider value={{ content, setContent }}>{children}</PanelContext.Provider>;
+}
+
+export function usePanelContent(): ReactNode {
+  return useContext(PanelContext).content;
+}
+
+export function useSetPanelContent(): (content: ReactNode) => void {
+  return useContext(PanelContext).setContent;
+}

package/src/components/docs/styles.ts

@@ -68,6 +68,8 @@ export const styles = {
     'relative mt-3 px-4 pb-1 text-center text-sm leading-5 text-muted-foreground [&_p]:m-0 [&_a]:font-semibold',
 
   field: 'my-3',
+  fieldGroup:
+    'my-4 divide-y divide-border overflow-hidden rounded-lg border border-border text-sm leading-6 [&>[data-slot=field-group-item]]:my-0 [&>[data-slot=field-group-item]]:px-4 [&>[data-slot=field-group-item]]:py-3 [&_[data-slot=field-group-body]]:mt-2 [&_[data-slot=field-group-type]]:text-xs',
   paramField: 'my-3',
   fieldHeader: 'flex flex-wrap items-center gap-2',
   fieldBody: 'mt-3',
@@ -84,4 +86,51 @@ export const styles = {
 
   tooltipTrigger:
     'peer cursor-help border-0 border-muted-foreground border-b border-dotted bg-transparent p-0 text-inherit [font:inherit]',
+
+  update:
+    'my-8 grid scroll-mt-24 grid-cols-1 gap-4 border-border border-t pt-6 md:grid-cols-[220px_minmax(0,1fr)]',
+  updateMeta: 'flex min-w-0 flex-col items-start gap-2 md:sticky md:top-24 md:self-start',
+  updateLabel:
+    'w-fit text-lg font-semibold text-foreground hover:text-primary hover:underline [&:hover]:decoration-primary',
+  updateDescription: 'text-sm text-muted-foreground leading-6',
+  updateTags: 'flex flex-wrap gap-1.5',
+  updateBody: 'min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_:where(p,ul,ol)]:leading-7',
+  changelog: 'my-4 flex flex-col',
+  changelogFilters: 'mb-2 flex flex-wrap items-center gap-1',
+  changelogFilterButton:
+    'rounded-md p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring [&>[data-slot=badge]]:cursor-pointer',
+  changelogClear:
+    'ml-1 text-xs font-medium text-muted-foreground hover:text-foreground hover:underline',
+  changelogEmpty: 'my-6 text-sm text-muted-foreground',
+
+  mermaid: 'my-4',
+  mermaidTitle: 'mb-2 text-sm font-semibold text-foreground',
+  mermaidViewport:
+    'relative overflow-auto rounded-lg border border-border bg-card p-4 [&_svg]:mx-auto [&_svg]:max-w-full [&_svg]:shrink-0',
+  mermaidSvg: 'origin-top-left transition-transform duration-150 [&_svg]:h-auto [&_svg]:max-w-none',
+  mermaidFallback: 'bg-transparent p-0 font-mono text-xs text-muted-foreground whitespace-pre-wrap',
+  mermaidError: 'mt-2 text-sm text-destructive',
+  mermaidControls:
+    'absolute flex items-center gap-1 rounded-md border border-border bg-background/90 p-1 shadow-sm [&_button]:flex [&_button]:size-6 [&_button]:items-center [&_button]:justify-center [&_button]:rounded [&_button]:text-sm [&_button]:text-muted-foreground [&_button:hover]:bg-muted [&_button:hover]:text-foreground',
+
+  panel: 'flex min-w-0 flex-col gap-4 text-sm [&>:first-child]:mt-0 [&>:last-child]:mb-0',
+  panelInline: 'my-4 lg:hidden',
+
+  tile: 'block h-full overflow-hidden rounded-lg border border-border bg-card hover:border-primary',
+  tilePreview:
+    'flex h-36 items-center justify-center gap-2 overflow-hidden border-border border-b bg-muted/40 bg-[radial-gradient(circle_at_1px_1px,var(--border)_1px,transparent_0)] bg-[size:16px_16px] p-4 [&_img]:max-h-full [&_img]:w-auto [&_img]:max-w-full [&_img]:object-contain',
+  tileBody: 'flex flex-col gap-1 p-4',
+  tileTitle: 'text-sm font-semibold text-foreground',
+  tileDescription: 'text-sm text-muted-foreground leading-6',
+
+  tree: 'not-prose my-4 overflow-hidden rounded-lg border border-border bg-card text-sm',
+  treeList: 'flex flex-col gap-0.5 p-3',
+  treeGroup: 'my-0 ml-[15px] flex list-none flex-col gap-px border-border border-l pl-1',
+  treeItem: 'my-0 min-w-0 list-none p-0 [&::marker]:content-none',
+  treeRow:
+    'flex w-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground hover:bg-muted [&:focus-visible]:bg-muted [&:focus-visible]:ring-2 [&:focus-visible]:ring-ring [&:focus-visible]:outline-none',
+  treeChevron: 'shrink-0 text-muted-foreground transition-transform [&[data-open]]:rotate-90',
+  treeIcon: 'shrink-0 text-muted-foreground',
+  treeName: 'min-w-0 flex-1 truncate font-mono text-[0.85rem]',
+  treeHighlight: 'bg-primary/10 text-primary [&_svg]:text-primary',
 } as const;

package/src/components/icons/index.ts

@@ -3,11 +3,15 @@ export {
   ArrowRight,
   Check,
   Check as CheckIcon,
+  ChevronDown,
   ChevronRight,
   CircleAlert,
   Copy,
   ExternalLink,
+  File,
   FileText,
+  Folder,
+  FolderOpen,
   Hand,
   Info as InfoIcon,
   Lightbulb,

package/src/lib/rehype-shiki.ts

@@ -133,8 +133,25 @@ async function highlightBlock(pre: MdNode, code: MdNode, config: ResolvedCodeBlo
     ? codeProperties.className.map(String)
     : [];
   const requested = classes.map(value => value.match(/^language-(\S+)$/)?.[1]).find(Boolean);
-  const lang = resolveLanguage(requested);
   const meta = parseCodeMeta(typeof code.data?.meta === 'string' ? code.data.meta : '');
+
+  // Mermaid diagrams render client-side via the <Mermaid> component; keep the
+  // raw definition so CodeBlock can hand it over untouched.
+  if (requested === 'mermaid') {
+    const metaRaw = typeof code.data?.meta === 'string' ? code.data.meta : '';
+    const placement = metaRaw.match(/placement=["'](top-left|top-right|bottom-left|bottom-right)["']/)?.[1];
+    const actions = metaRaw.match(/actions=\{(true|false)\}/)?.[1];
+    pre.properties = {
+      ...(pre.properties as Properties),
+      'data-language': 'mermaid',
+      ...(meta.title ? { 'data-title': meta.title } : {}),
+      ...(placement ? { 'data-placement': placement } : {}),
+      ...(actions ? { 'data-actions': actions } : {}),
+    };
+    return;
+  }
+
+  const lang = resolveLanguage(requested);
   // mdast-util-to-hast appends a trailing newline to the code text.
   const source = toText(code).replace(/\n$/, '');
 

package/types/components.d.ts

@@ -211,6 +211,85 @@ export interface TooltipProps {
 
 export declare function Tooltip(props: TooltipProps): ReactElement;
 
+export interface UpdateRss {
+  title?: string;
+  description?: string;
+}
+
+export interface UpdateProps {
+  label: string;
+  description?: ReactNode;
+  tags?: string[];
+  rss?: UpdateRss;
+  children?: ReactNode;
+}
+
+export declare function Update(props: UpdateProps): ReactElement;
+
+export interface ChangelogProps {
+  children?: ReactNode;
+}
+
+export declare function Changelog(props: ChangelogProps): ReactElement;
+
+export type MermaidPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export interface MermaidProps {
+  chart?: string;
+  title?: ReactNode;
+  actions?: boolean;
+  placement?: MermaidPlacement;
+  children?: ReactNode;
+}
+
+export declare function Mermaid(props: MermaidProps): ReactElement;
+
+export interface PanelProps {
+  children?: ReactNode;
+}
+
+export declare function Panel(props: PanelProps): ReactElement;
+
+export interface TileProps {
+  href: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  target?: '_self' | '_blank';
+}
+
+export interface TilesProps {
+  children?: ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+}
+
+export declare function Tile(props: TileProps): ReactElement;
+export declare function Tiles(props: TilesProps): ReactElement;
+
+export interface TreeFolderProps {
+  name: string;
+  defaultOpen?: boolean;
+  openable?: boolean;
+  highlight?: boolean;
+  children?: ReactNode;
+}
+
+export interface TreeFileProps {
+  name: string;
+  highlight?: boolean;
+}
+
+export interface TreeProps {
+  children?: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export declare function Tree(props: TreeProps): ReactElement;
+export declare function FileTree(props: TreeProps): ReactElement;
+export declare function TreeFolder(props: TreeFolderProps): ReactElement;
+export declare function TreeFile(props: TreeFileProps): ReactElement;
+
 export interface ZoomableImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   noZoom?: boolean;
 }