Voice Widget

fern/components/index.tsx

@@ -0,0 +1,8 @@
+// Barrel for docs MDX components. Each component lives in its own subdirectory as an index.tsx
+// for organization. MDX pages import this barrel as a file path —
+// `import { VoiceWidget } from "@/components/index"` — because Fern's resolver only resolves file
+// paths, not directories (and not directory→index). For the same reason the re-exports below use
+// explicit `/index` file paths rather than bare directory paths. `export *` pulls in each
+// component's public surface (components + types) without enumerating them.
+export * from "./voice-widget/index";
+export * from "./skeleton/index";

fern/components/skeleton/index.tsx

@@ -0,0 +1,50 @@
+import type { CSSProperties } from "react";
+
+// Reusable loading-skeleton primitive for custom MDX components that fetch data at runtime.
+// Compose a few of these to mimic the shape of the content that's loading. Pairs with this folder's
+// styles.css (loaded via docs.yml `css:` — Fern's component bundler doesn't process CSS imports).
+// Theme-aware (light/dark) through Fern's grayscale vars.
+//
+//   import { Skeleton, SkeletonText } from "@/components/index";
+//   if (!data) return <Skeleton width="60%" height={20} />;
+
+export interface SkeletonProps {
+  /** CSS width — number (px) or any CSS length (e.g. "60%"). */
+  width?: string | number;
+  /** CSS height — number (px) or any CSS length. Default: 14. */
+  height?: string | number;
+  /** Border radius override — number (px) or any CSS length (e.g. "50%" for a circle). */
+  radius?: string | number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function Skeleton({ width, height = 14, radius, className, style }: SkeletonProps) {
+  return (
+    <div
+      className={`sw-skeleton${className ? ` ${className}` : ""}`}
+      aria-hidden="true"
+      style={{ width, height, ...(radius != null ? { borderRadius: radius } : null), ...style }}
+    />
+  );
+}
+
+export interface SkeletonTextProps {
+  /** Number of lines. Default: 3. */
+  lines?: number;
+  /** Gap between lines in px. Default: 8. */
+  gap?: number;
+  /** Per-line widths; defaults to full width with a shorter last line. */
+  widths?: (string | number)[];
+}
+
+/** A stack of text-line skeletons — for paragraph/description placeholders. */
+export function SkeletonText({ lines = 3, gap = 8, widths }: SkeletonTextProps) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap }} aria-hidden="true">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} height={12} width={widths?.[i] ?? (i === lines - 1 ? "60%" : "100%")} />
+      ))}
+    </div>
+  );
+}

fern/components/skeleton/styles.css

@@ -0,0 +1,25 @@
+/* Reusable loading-skeleton (shimmer) for custom MDX components, ported from the SignalWire
+   components design reference. The original drove it with --skeleton-base / --skeleton-shimmer
+   design tokens; here those map onto Fern's theme-aware grayscale vars so it follows light/dark.
+   Loaded globally via docs.yml `css:`. Markup comes from this folder's index.tsx (`.sw-skeleton`). */
+.sw-skeleton {
+  background: var(--grayscale-a3);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  flex: none; /* keep its size in flex layouts */
+}
+.sw-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--grayscale-a4), transparent);
+  animation: sw-shimmer 1.5s infinite;
+}
+@keyframes sw-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sw-skeleton::after { animation: none; }
+}

fern/components/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  // Local tooling only (editor + LSP type-checking of the custom MDX components). Fern owns the
+  // production build and provides React at build time, so React lives in the root package.json's
+  // devDependencies — these settings just teach tsserver how to resolve the JSX runtime and types.
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "types": ["react"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}