cortena-ui 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortena-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Cortena UI — the shared React component library for cortenaweb and every Cortena extension. shadcn over Base UI, styled entirely from cortena-design tokens.",
   "license": "UNLICENSED",
   "repository": {

package/src/components/button-link.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+import { buttonVariants, type ButtonProps } from "@/components/button";
+
+/**
+ * An anchor that looks like a Button and keeps link semantics.
+ *
+ * `Button render={<a />}` makes Base UI treat the anchor as a button (role,
+ * tabindex, its `nativeButton` warning), which demotes real navigation for
+ * assistive technology and breaks `getByRole("link")`. Navigation should stay
+ * an anchor. This is the migration target for every Radix-era
+ * `<Button asChild><Link /></Button>`.
+ *
+ * Framework routers: pass `render` with the router's link so the styling and
+ * `href` land on it, e.g. `render={<NextLink href="/x" />}`; otherwise it
+ * renders a plain `<a>`.
+ */
+export interface ButtonLinkProps
+  extends Omit<React.ComponentProps<"a">, "children">,
+    Pick<ButtonProps, "variant" | "size"> {
+  children?: React.ReactNode;
+  /** Replace the rendered `<a>` with a router link; props are merged onto it. */
+  render?: React.ReactElement<Record<string, unknown>>;
+  disabled?: boolean;
+}
+
+function ButtonLink({ className, variant, size, render, disabled, children, ...props }: ButtonLinkProps) {
+  const classes = cn(buttonVariants({ variant, size }), disabled && "pointer-events-none opacity-50", className);
+  const merged = {
+    ...props,
+    "data-slot": "button-link",
+    className: classes,
+    "aria-disabled": disabled || undefined,
+    tabIndex: disabled ? -1 : props.tabIndex,
+  };
+  if (render) {
+    const Element = render.type as React.ElementType;
+    return (
+      <Element {...(render.props as Record<string, unknown>)} {...merged}>
+        {children ?? (render.props as { children?: React.ReactNode }).children}
+      </Element>
+    );
+  }
+  return <a {...merged}>{children}</a>;
+}
+
+export { ButtonLink };

package/src/components/markdown.tsx

@@ -327,6 +327,15 @@ export interface MarkdownProps extends Omit<React.ComponentProps<"div">, "childr
   remarkPlugins?: NonNullable<Options["remarkPlugins"]>;
   /** Extra rehype plugins, appended after sanitize. */
   rehypePlugins?: NonNullable<Options["rehypePlugins"]>;
+  /**
+   * Rehype plugins that must run BEFORE sanitize. The one legitimate use is
+   * `rehype-raw` in a host that embeds trusted custom tags in markdown (the
+   * webchat's `<cortena-*>` blocks): raw HTML has to become nodes before the
+   * sanitizer sees it, and the sanitize schema then decides what survives.
+   * Anything placed here widens what reaches the sanitizer, so keep the
+   * schema strict when you use it.
+   */
+  rehypePluginsBeforeSanitize?: NonNullable<Options["rehypePlugins"]>;
   /** Replace the sanitize schema; defaults to `markdownSanitizeSchema`. */
   sanitizeSchema?: SanitizeSchema;
   /** Rewrite URLs; defaults to react-markdown's, which drops non-http(s)/mailto/tel schemes. */
@@ -340,6 +349,7 @@ function Markdown({
   components,
   remarkPlugins,
   rehypePlugins,
+  rehypePluginsBeforeSanitize,
   sanitizeSchema = markdownSanitizeSchema,
   urlTransform,
   className,
@@ -351,8 +361,8 @@ function Markdown({
   );
   const remark = React.useMemo(() => [remarkGfm, ...(remarkPlugins ?? [])], [remarkPlugins]);
   const rehype = React.useMemo(
-    () => [[rehypeSanitize, sanitizeSchema] as const, ...(rehypePlugins ?? [])],
-    [rehypePlugins, sanitizeSchema],
+    () => [...(rehypePluginsBeforeSanitize ?? []), [rehypeSanitize, sanitizeSchema] as const, ...(rehypePlugins ?? [])],
+    [rehypePluginsBeforeSanitize, rehypePlugins, sanitizeSchema],
   );
   return (
     <div

package/src/index.ts

@@ -9,6 +9,8 @@ export type { AlertProps } from "@/components/alert";
 export { Avatar, AvatarFallback, AvatarImage } from "@/components/avatar";
 export { Badge, badgeVariants } from "@/components/badge";
 export type { BadgeProps } from "@/components/badge";
+export { ButtonLink } from "@/components/button-link";
+export type { ButtonLinkProps } from "@/components/button-link";
 export { Button, buttonVariants } from "@/components/button";
 export type { ButtonProps } from "@/components/button";
 export { Calendar, CalendarDayButton } from "@/components/calendar";