@birdycom/omniaui-react 0.12.0 → 0.12.2

package/manifest.json

@@ -318,12 +318,24 @@
       "file": "src/components/LinkArrow.tsx",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "link-row",
+      "kind": "component",
+      "file": "src/components/LinkRow.tsx",
+      "snippet": "@birdycom/omniaui/snippets/link-row.html"
+    },
     {
       "name": "list-toolbar",
       "kind": "component",
       "file": "src/components/ListToolbar.tsx",
       "snippet": "@birdycom/omniaui/snippets/list-toolbar.html"
     },
+    {
+      "name": "live-frame",
+      "kind": "component",
+      "file": "src/components/LiveFrame.tsx",
+      "snippet": "@birdycom/omniaui/snippets/live-frame.html"
+    },
     {
       "name": "marquee",
       "kind": "component",
@@ -642,6 +654,12 @@
       "file": "src/components/VersionBanner.tsx",
       "snippet": "@birdycom/omniaui/snippets/version-banner.html"
     },
+    {
+      "name": "watermark",
+      "kind": "component",
+      "file": "src/components/Watermark.tsx",
+      "snippet": "@birdycom/omniaui/snippets/watermark.html"
+    },
     {
       "name": "about-timeline",
       "kind": "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
   "type": "module",
   "license": "MIT",

package/src/components/LinkRow.tsx

@@ -0,0 +1,34 @@
+// File: packages/react/src/components/LinkRow.tsx | Map: types -> LinkRow (ul.oc-link-row -> li > a per link, or children)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface LinkRowLink {
+  href: string;
+  label: ReactNode;
+}
+
+export interface LinkRowProps extends HTMLAttributes<HTMLUListElement> {
+  /** The links; external ones get an arrow and github.com links the GitHub mark (CSS, by the href). Or pass <li> children. */
+  links?: LinkRowLink[];
+  tone?: "default" | "accent" | "muted";
+  size?: "sm" | "default" | "lg";
+  children?: ReactNode;
+}
+
+const external = (href: string) => /^https?:\/\//.test(href);
+
+/** `<ul class="oc-link-row">`: a row of links under a card, icons by the href. */
+export const LinkRow = forwardRef<HTMLUListElement, LinkRowProps>(function LinkRow(
+  { links, tone = "default", size = "default", className, children, ...rest },
+  ref,
+) {
+  const classes = cx("oc-link-row", tone !== "default" && `oc-link-row--${tone}`, size !== "default" && `oc-link-row--${size}`, className);
+  return (
+    <ul ref={ref} className={classes} {...rest}>
+      {links
+        ? links.map((l, i) => <li key={i}><a href={l.href} rel={external(l.href) ? "noopener" : undefined}>{l.label}</a></li>)
+        : children}
+    </ul>
+  );
+});

package/src/components/LiveFrame.tsx

@@ -0,0 +1,37 @@
+// File: packages/react/src/components/LiveFrame.tsx | Map: types -> LiveFrame (div.oc-live-frame + virtual size -> iframe or children)
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface LiveFrameProps extends HTMLAttributes<HTMLDivElement> {
+  /** Page to show in an iframe. Leave empty and pass children (an <img>, <video>, or .oc-live-frame__content). */
+  src?: string;
+  /** Accessible name of the iframe. */
+  title?: string;
+  /** Virtual size in px: the page is laid out at this size and scaled to the frame width. */
+  width?: number;
+  height?: number;
+  /** A picture of a page: clicks and scrolling pass through. */
+  static?: boolean;
+  /** Put the frame in the view slot of an OmniaUI browser frame (adds .oc-browser-frame__view). */
+  inBrowserFrame?: boolean;
+  children?: ReactNode;
+}
+
+/** `.oc-live-frame`: a live page at a virtual size, scaled down to the frame width in pure CSS. */
+export const LiveFrame = forwardRef<HTMLDivElement, LiveFrameProps>(function LiveFrame(
+  { src, title = "", width = 1280, height = 720, static: isStatic = false, inBrowserFrame = false, className, style, children, ...rest },
+  ref,
+) {
+  const size = { "--oc-live-w": width, "--oc-live-h": height } as CSSProperties;
+  return (
+    <div
+      ref={ref}
+      className={cx(inBrowserFrame && "oc-browser-frame__view", "oc-live-frame", isStatic && "oc-live-frame--static", className)}
+      style={{ ...size, ...style }}
+      {...rest}
+    >
+      {src ? <iframe src={src} title={title} loading="lazy" scrolling="no" tabIndex={isStatic ? -1 : undefined} /> : children}
+    </div>
+  );
+});

package/src/components/Watermark.tsx

@@ -0,0 +1,35 @@
+// File: packages/react/src/components/Watermark.tsx | Map: types -> Watermark (span.oc-watermark + modifiers, text once or tiled)
+import { forwardRef, Fragment } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type WatermarkVariant = "diagonal" | "straight" | "tile" | "corner" | "corner-top";
+export type WatermarkTone = "default" | "light" | "primary" | "destructive";
+
+export interface WatermarkProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The text ("Concept", "Draft"), or a logo (<img>) or icon (<svg>). */
+  text?: ReactNode;
+  variant?: WatermarkVariant;
+  tone?: WatermarkTone;
+  /** How often the text repeats with variant="tile". */
+  repeat?: number;
+  /** Turn an <img> logo into a flat gray stamp. */
+  mono?: boolean;
+}
+
+/**
+ * `<span class="oc-watermark">`: light text over its positioned parent (put it last inside an element with
+ * `className="relative"`). Click-through and aria-hidden: say "draft" in the content itself when it matters.
+ */
+export const Watermark = forwardRef<HTMLSpanElement, WatermarkProps>(function Watermark(
+  { text = "Concept", variant = "diagonal", tone = "default", repeat = 12, mono = false, className, ...rest },
+  ref,
+) {
+  const classes = cx("oc-watermark", variant !== "diagonal" && `oc-watermark--${variant}`, tone !== "default" && `oc-watermark--${tone}`, mono && "oc-watermark--mono", className);
+  const count = variant === "tile" ? Math.max(1, repeat) : 1;
+  return (
+    <span ref={ref} className={classes} aria-hidden="true" {...rest}>
+      {Array.from({ length: count }, (_, i) => (typeof text === "string" || typeof text === "number" ? <span key={i}>{text}</span> : <Fragment key={i}>{text}</Fragment>))}
+    </span>
+  );
+});

package/src/index.ts

@@ -54,7 +54,9 @@ export * from "./components/LanguageSelect";
 export * from "./components/LauncherCard";
 export * from "./components/Lightbox";
 export * from "./components/LinkArrow";
+export * from "./components/LinkRow";
 export * from "./components/ListToolbar";
+export * from "./components/LiveFrame";
 export * from "./components/Marquee";
 export * from "./components/MediaCard";
 export * from "./components/MediaRow";
@@ -108,6 +110,7 @@ export * from "./components/Tree";
 export * from "./components/UpgradeBanner";
 export * from "./components/User";
 export * from "./components/VersionBanner";
+export * from "./components/Watermark";
 export * from "./blocks/BlockAboutTimeline";
 export * from "./blocks/BlockAppHeader";
 export * from "./blocks/BlockAppShell";