@brett_lamy/docstream 0.1.0 → 0.3.0

package/src/styles.css

@@ -11,12 +11,25 @@
   --gb-accent-foreground: var(--accent-foreground);
   --gb-primary: var(--primary);
   --gb-primary-foreground: var(--primary-foreground);
-  --gb-code-bg: color-mix(in oklab, var(--muted) 82%, var(--foreground) 8%);
+  /* Plain rgba/hex values (no color-mix()/oklch()) so the theme renders
+     correctly in older Chromium forks; hosts can override any token. */
+  --gb-code-bg: rgba(128, 128, 128, 0.13);
   --gb-code-fg: var(--foreground);
-  --gb-info: var(--chart-2, var(--primary));
-  --gb-success: var(--chart-1, var(--primary));
-  --gb-warning: var(--chart-3, var(--primary));
-  --gb-danger: var(--destructive);
+
+  /* Semantic hint palette — solid color plus precomputed tints. Matches the
+     editor palette in @brett_lamy/docstream-editor/styles.css. */
+  --gb-info: #3b82f6;
+  --gb-info-border: rgba(59, 130, 246, 0.45);
+  --gb-info-bg: rgba(59, 130, 246, 0.1);
+  --gb-success: #22c55e;
+  --gb-success-border: rgba(34, 197, 94, 0.45);
+  --gb-success-bg: rgba(34, 197, 94, 0.1);
+  --gb-warning: #f59e0b;
+  --gb-warning-border: rgba(245, 158, 11, 0.5);
+  --gb-warning-bg: rgba(245, 158, 11, 0.12);
+  --gb-danger: #ef4444;
+  --gb-danger-border: rgba(239, 68, 68, 0.45);
+  --gb-danger-bg: rgba(239, 68, 68, 0.1);
 }
 
 .docs-article {
@@ -130,8 +143,8 @@
 }
 
 .docs-hint-info {
-  border-color: color-mix(in oklab, var(--gb-info) 45%, transparent);
-  background: color-mix(in oklab, var(--gb-info) 12%, transparent);
+  border-color: var(--gb-info-border);
+  background: var(--gb-info-bg);
 }
 
 .docs-hint-info .docs-hint-icon {
@@ -139,8 +152,8 @@
 }
 
 .docs-hint-success {
-  border-color: color-mix(in oklab, var(--gb-success) 45%, transparent);
-  background: color-mix(in oklab, var(--gb-success) 12%, transparent);
+  border-color: var(--gb-success-border);
+  background: var(--gb-success-bg);
 }
 
 .docs-hint-success .docs-hint-icon {
@@ -148,8 +161,8 @@
 }
 
 .docs-hint-warning {
-  border-color: color-mix(in oklab, var(--gb-warning) 48%, transparent);
-  background: color-mix(in oklab, var(--gb-warning) 14%, transparent);
+  border-color: var(--gb-warning-border);
+  background: var(--gb-warning-bg);
 }
 
 .docs-hint-warning .docs-hint-icon {
@@ -157,8 +170,8 @@
 }
 
 .docs-hint-danger {
-  border-color: color-mix(in oklab, var(--gb-danger) 45%, transparent);
-  background: color-mix(in oklab, var(--gb-danger) 12%, transparent);
+  border-color: var(--gb-danger-border);
+  background: var(--gb-danger-bg);
 }
 
 .docs-hint-danger .docs-hint-icon {
@@ -495,23 +508,23 @@
 }
 
 .oas-method-get {
-  background: color-mix(in oklab, var(--gb-success) 18%, transparent);
+  background: var(--gb-success-bg);
   color: var(--gb-success);
 }
 
 .oas-method-post {
-  background: color-mix(in oklab, var(--gb-info) 18%, transparent);
+  background: var(--gb-info-bg);
   color: var(--gb-info);
 }
 
 .oas-method-put,
 .oas-method-patch {
-  background: color-mix(in oklab, var(--gb-warning) 20%, transparent);
+  background: var(--gb-warning-bg);
   color: var(--gb-warning);
 }
 
 .oas-method-delete {
-  background: color-mix(in oklab, var(--gb-danger) 16%, transparent);
+  background: var(--gb-danger-bg);
   color: var(--gb-danger);
 }
 
@@ -602,18 +615,18 @@
 }
 
 .oas-code-2 {
-  background: color-mix(in oklab, var(--gb-success) 18%, transparent);
+  background: var(--gb-success-bg);
   color: var(--gb-success);
 }
 
 .oas-code-3 {
-  background: color-mix(in oklab, var(--gb-warning) 20%, transparent);
+  background: var(--gb-warning-bg);
   color: var(--gb-warning);
 }
 
 .oas-code-4,
 .oas-code-5 {
-  background: color-mix(in oklab, var(--gb-danger) 16%, transparent);
+  background: var(--gb-danger-bg);
   color: var(--gb-danger);
 }
 
@@ -715,7 +728,7 @@
 
 .hljs-operator,
 .hljs-punctuation {
-  color: color-mix(in oklab, var(--gb-code-fg) 78%, var(--gb-primary));
+  color: var(--gb-code-fg);
 }
 
 .hljs-deletion {
@@ -725,3 +738,77 @@
 .hljs-addition {
   color: var(--gb-success);
 }
+
+.docs-react-demo {
+  overflow: hidden;
+  border: 1px solid var(--gb-border);
+  border-radius: 12px;
+  background: var(--gb-panel);
+}
+
+.docs-react-demo-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--gb-border);
+  color: var(--gb-panel-foreground);
+  font-size: 13px;
+  font-weight: 550;
+}
+
+.docs-react-demo-status {
+  margin-left: auto;
+  color: var(--gb-muted-foreground);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.docs-react-demo-status-ready {
+  color: var(--gb-success);
+}
+
+.docs-react-demo-status-error {
+  color: var(--gb-danger);
+}
+
+.docs-react-demo-run {
+  border: 1px solid var(--gb-border);
+  border-radius: 6px;
+  padding: 4px 9px;
+  color: var(--gb-panel-foreground);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.docs-react-demo-run:disabled {
+  cursor: wait;
+  opacity: 0.55;
+}
+
+.docs-react-demo-frame,
+.docs-react-demo-placeholder {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.docs-react-demo-placeholder {
+  display: grid;
+  place-items: center;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.docs-react-demo-error {
+  margin: 0;
+  min-height: 100px;
+  overflow: auto;
+  padding: 14px;
+  color: var(--gb-danger);
+  background: var(--gb-code-bg);
+  white-space: pre-wrap;
+}

package/src/video/VideoEmbed.tsx

@@ -0,0 +1,62 @@
+import type { CSSProperties } from "react"
+
+export interface VideoEmbedProps {
+  /** A direct media asset or a public player URL. */
+  src: string
+  title?: string
+  className?: string
+  /** CSS aspect-ratio for iframe embeds. Defaults to 16 / 9. */
+  aspectRatio?: CSSProperties["aspectRatio"]
+  controls?: boolean
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  poster?: string
+  allowFullScreen?: boolean
+}
+
+function isDirectVideo(src: string): boolean {
+  return /\.(?:mp4|webm|ogg)(?:[?#]|$)/i.test(src)
+}
+
+export function VideoEmbed({
+  src,
+  title = "Video",
+  className,
+  aspectRatio = "16 / 9",
+  controls = true,
+  autoplay = false,
+  loop = false,
+  muted = false,
+  poster,
+  allowFullScreen = true,
+}: VideoEmbedProps) {
+  const mediaClass = `video-embed__media ${className ?? ""}`.trim()
+  if (isDirectVideo(src)) {
+    return (
+      <video
+        className={mediaClass}
+        src={src}
+        title={title}
+        controls={controls}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        poster={poster}
+        playsInline
+      />
+    )
+  }
+  return (
+    <iframe
+      className={mediaClass}
+      src={src}
+      title={title}
+      loading="lazy"
+      allow="autoplay; fullscreen"
+      allowFullScreen={allowFullScreen}
+      style={{ aspectRatio }}
+      referrerPolicy="strict-origin-when-cross-origin"
+    />
+  )
+}

package/src/video/index.ts

@@ -0,0 +1,2 @@
+export { VideoEmbed } from "./VideoEmbed"
+export type { VideoEmbedProps } from "./VideoEmbed"