akanjs 3.0.0-beta.9 → 3.0.1

package/ui/Link/types.ts

@@ -1,55 +0,0 @@
-import type { AnchorHTMLAttributes, ReactNode } from "react";
-
-type LinkProps = Record<never, never>;
-export type CommonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps | "href"> &
-  Omit<LinkProps, "href"> & {
-    /** Destination route. When omitted or disabled, Link renders a non-clickable div with the same children. */
-    href?: string | null;
-    children?: ReactNode;
-    /** Prevent navigation while preserving layout and children rendering. */
-    disabled?: boolean;
-    /** Scroll to the top after client-side navigation. */
-    scrollToTop?: boolean;
-    /** Replace current history entry instead of pushing a new one. */
-    replace?: boolean;
-    /** Class applied when the current route matches href. */
-    activeClassName?: string;
-    /** Match activeClassName only on exact route matches. */
-    activeExact?: boolean;
-    /** Bypass route cache for client-side navigation when supported by the renderer. */
-    noCache?: boolean;
-  };
-
-export interface CsrLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Destination route for client-side navigation. */
-  href: string;
-  children?: ReactNode;
-  /** Replace current history entry instead of pushing a new one. */
-  replace?: boolean;
-  /** Class applied when the current route matches href. */
-  activeClassName?: string;
-  /** Match activeClassName only on exact route matches. */
-  activeExact?: boolean;
-  /** Scroll to the top after client-side navigation. */
-  scrollToTop?: boolean;
-}
-
-export interface SsrLinkProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps | "href">,
-    LinkProps {
-  /** Destination route for server-rendered anchor output. */
-  href: string;
-  children?: ReactNode;
-  /** Prevent navigation while preserving layout and children rendering. */
-  disabled?: boolean;
-  /** Scroll to the top after navigation. */
-  scrollToTop?: boolean;
-  /** Replace current history entry instead of pushing a new one. */
-  replace?: boolean;
-  /** Class applied when the current route matches href. */
-  activeClassName?: string;
-  /** Match activeClassName only on exact route matches. */
-  activeExact?: boolean;
-  /** Bypass route cache for client-side navigation when supported by the renderer. */
-  noCache?: boolean;
-}

package/ui/Loading/Area.tsx

@@ -1,27 +0,0 @@
-import { cn, usePage } from "akanjs/client";
-import type { ReactNode } from "react";
-
-import { Spin } from "./Spin";
-
-export interface AreaProps {
-  className?: string;
-  /** The mark above the message. */
-  indicator?: ReactNode;
-  /** The message under the mark. */
-  children?: ReactNode;
-}
-
-export const Area = ({ className, indicator, children }: AreaProps) => {
-  const { l } = usePage();
-  return (
-    <div
-      className={cn(
-        "absolute inset-0 flex size-full flex-col items-center justify-center gap-2 rounded-[inherit] bg-background/60 backdrop-blur-sm",
-        className,
-      )}
-    >
-      {indicator ?? <Spin />}
-      <div className="text-foreground/60 text-sm">{children ?? l("base.processing")}</div>
-    </div>
-  );
-};

package/ui/Loading/Button.tsx

@@ -1,15 +0,0 @@
-import { cn } from "akanjs/client";
-import type { CSSProperties } from "react";
-
-export interface LoadingProps {
-  className?: string;
-  active?: boolean;
-  style?: CSSProperties;
-}
-
-export const Button = ({ className = "", active = true, style }: LoadingProps) => (
-  <div
-    className={cn("inline-block h-9 w-20 rounded-field bg-muted align-bottom", active && "animate-pulse", className)}
-    style={style}
-  />
-);

package/ui/Loading/Input.tsx

@@ -1,15 +0,0 @@
-import { cn } from "akanjs/client";
-import type { CSSProperties } from "react";
-
-export interface LoadingProps {
-  className?: string;
-  active?: boolean;
-  style?: CSSProperties;
-}
-
-export const Input = ({ className = "", active = true, style }: LoadingProps) => (
-  <div
-    className={cn("inline-block h-9 w-44 rounded-field bg-muted align-bottom", active && "animate-pulse", className)}
-    style={style}
-  />
-);

package/ui/Model/LoadInit.tsx

@@ -1,11 +0,0 @@
-"use client";
-import type { ClientInit } from "akanjs/fetch";
-
-import { Load } from "../Load";
-
-interface LoadInitProps<T extends string, Light extends { id: string }> {
-  init: ClientInit<T, Light>;
-}
-export default function LoadInit<T extends string, Light extends { id: string }>({ init }: LoadInitProps<T, Light>) {
-  return <Load.Units init={init} renderList={() => null} loading={null} renderEmpty={null} />;
-}

package/ui/Model/LoadView.tsx

@@ -1,11 +0,0 @@
-"use client";
-import type { ClientView } from "akanjs/fetch";
-
-import { Load } from "../Load";
-
-interface LoadViewProps<T extends string, Model extends { id: string }> {
-  view: ClientView<T, Model>;
-}
-export default function LoadView<T extends string, Light extends { id: string }>({ view }: LoadViewProps<T, Light>) {
-  return <Load.View view={view} renderView={() => null} loading={null} />;
-}

package/ui/Reference/Collapse.tsx

@@ -1,26 +0,0 @@
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-import { BiChevronDown } from "react-icons/bi";
-import { docUi } from "./style";
-
-interface CollapseProps {
-  className?: string;
-  contentClassName?: string;
-  summary: ReactNode;
-  children: ReactNode;
-  open?: boolean;
-}
-
-/** 레퍼런스 카드의 접이식 컨테이너. daisyui `collapse` 대신 네이티브 `<details>/<summary>` — 열고 닫는 데 JS 가 없다. */
-export const Collapse = ({ summary, children, open, className, contentClassName }: CollapseProps) => (
-  <details
-    className={cn(docUi.card, "group overflow-hidden transition-colors hover:border-foreground/20", className)}
-    open={open}
-  >
-    <summary className="flex cursor-pointer list-none items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/40 [&::-webkit-details-marker]:hidden">
-      <div className="min-w-0 flex-1">{summary}</div>
-      <BiChevronDown className="mt-1 shrink-0 text-foreground/30 transition-transform group-open:rotate-180" />
-    </summary>
-    <div className={cn("flex w-full flex-col gap-4 border-border/70 border-t p-4", contentClassName)}>{children}</div>
-  </details>
-);

package/ui/Reference/Summary.tsx

@@ -1,25 +0,0 @@
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-import { docUi } from "./style";
-
-interface SummaryCardProps {
-  className?: string;
-  label: string;
-  value: number | string;
-}
-
-export const SummaryCard = ({ className, label, value }: SummaryCardProps) => (
-  <div className={cn(docUi.card, "px-4 py-3", className)}>
-    <div className={docUi.sectionLabel}>{label}</div>
-    <div className="font-bold text-2xl">{value}</div>
-  </div>
-);
-
-interface SummaryGridProps {
-  className?: string;
-  children: ReactNode;
-}
-
-export const SummaryGrid = ({ className, children }: SummaryGridProps) => (
-  <div className={cn("grid grid-cols-2 gap-2 md:grid-cols-4", className)}>{children}</div>
-);

package/ui/Reference/Toolbar.tsx

@@ -1,44 +0,0 @@
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-import { docUi } from "./style";
-
-interface ToolbarProps {
-  className?: string;
-  children: ReactNode;
-}
-
-export const Toolbar = ({ className, children }: ToolbarProps) => (
-  <div className={cn(docUi.card, "flex flex-wrap items-center gap-x-6 gap-y-3 px-4 py-3", className)}>{children}</div>
-);
-
-interface ToolbarFieldProps {
-  className?: string;
-  label: string;
-  children: ReactNode;
-}
-
-export const ToolbarField = ({ className, label, children }: ToolbarFieldProps) => (
-  <div className={cn("flex min-w-0 items-center gap-2", className)}>
-    <span className={docUi.sectionLabel}>{label}</span>
-    {children}
-  </div>
-);
-
-interface SectionProps {
-  className?: string;
-  title: string;
-  action?: ReactNode;
-  children: ReactNode;
-}
-
-/** Titled band with a rule running to the edge, so a long document reads as sections rather than as one list. */
-export const Section = ({ className, title, action, children }: SectionProps) => (
-  <section className={cn("flex flex-col gap-3", className)}>
-    <div className="flex items-center gap-3">
-      <h2 className={docUi.sectionTitle}>{title}</h2>
-      <div className="h-px flex-1 bg-border" />
-      {action}
-    </div>
-    {children}
-  </section>
-);

package/ui/Reference/dictText.ts

@@ -1,9 +0,0 @@
-interface Translator {
-  _: (key: string) => string;
-}
-
-/** `l._` echoes an absent key back, and a raw `user.signal.x.desc` reads as prose on a document surface. */
-export const dictText = (l: Translator, key: string) => {
-  const text = l._(key);
-  return text === key ? "" : text;
-};

package/ui/Reference/style.ts

@@ -1,45 +0,0 @@
-import { cn } from "../../client/cn";
-
-export type Tone = "info" | "success" | "warning" | "error" | "muted";
-
-const toneFill: { [key in Tone]: string } = {
-  info: "bg-info/15 text-info ring-info/25",
-  success: "bg-success/15 text-success ring-success/25",
-  warning: "bg-warning/15 text-warning ring-warning/25",
-  error: "bg-destructive/15 text-destructive ring-destructive/25",
-  muted: "bg-muted text-foreground/60 ring-border",
-};
-
-const toneBorder: { [key in Tone]: string } = {
-  info: "border-info/40",
-  success: "border-success/40",
-  warning: "border-warning/40",
-  error: "border-destructive/40",
-  muted: "border-border",
-};
-
-const pill = "inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-xs ring-1 ring-inset";
-
-/** Shared vocabulary for the generated reference surfaces — Constant schema docs and Signal API docs. */
-export const docUi = {
-  card: "rounded-box border border-border bg-card",
-  panel: "rounded-box border border-border bg-background",
-  tablePanel: "overflow-x-auto rounded-box border border-border bg-background",
-  sectionLabel: "font-semibold text-foreground/45 text-xs uppercase tracking-wider",
-  sectionTitle: "font-bold text-xl",
-  pageTitle: "font-bold text-3xl",
-  sectionDescription: "text-foreground/70 text-sm",
-  prose: "text-foreground/75 text-sm leading-relaxed",
-  key: "font-medium font-mono",
-  subLabel: "text-foreground/45 text-xs",
-  tableClass:
-    "w-full text-left text-sm [&_th]:whitespace-nowrap [&_th]:px-3 [&_th]:py-2 [&_th]:font-semibold [&_th]:text-foreground/45 [&_th]:text-xs [&_th]:uppercase [&_th]:tracking-wider [&_td]:px-3 [&_td]:py-2.5 [&_td]:align-top [&_tbody_tr]:border-border/70 [&_tbody_tr]:border-t [&_tbody_tr]:transition-colors hover:[&_tbody_tr]:bg-muted/40",
-  emptyPanel: "rounded-box border border-border border-dashed p-8 text-center text-foreground/40 text-sm",
-};
-
-export const docPill = (tone: Tone, className?: string) => cn(pill, toneFill[tone], className);
-
-export const docBorder = (tone: Tone) => toneBorder[tone];
-
-/** Absent optional cell. One glyph everywhere, so an empty column reads as empty rather than as data. */
-export const docDash = "text-foreground/25";

package/ui/Signal/Message.tsx

@@ -1,215 +0,0 @@
-"use client";
-import { PrimitiveRegistry } from "akanjs/base";
-import { fetch, usePage } from "akanjs/client";
-import { capitalize, type DynamicRecord } from "akanjs/common";
-import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
-import type { SerializedEndpoint } from "akanjs/signal";
-import { useEffect, useMemo, useState } from "react";
-import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSend, AiOutlineSwap } from "react-icons/ai";
-import { BiSolidNetworkChart } from "react-icons/bi";
-import { buttonRecipe } from "../Button";
-import { Collapse, dictText, docUi, Panel, Segmented } from "../Reference";
-import Arg from "./Arg";
-import { guardsOf } from "./endpointEntries";
-import Listener from "./Listener";
-import { makeRequestExample } from "./makeExample";
-import UiObject from "./Object";
-import Response from "./Response";
-import { getGuardBadgeClassName, getWsBadgeClassName } from "./style";
-
-const messageViewItems = [
-  { key: "doc", label: "Reference", icon: <AiOutlineFileWord /> },
-  { key: "test", label: "Try it", icon: <BiSolidNetworkChart /> },
-] as const;
-
-export default function Message() {
-  return <div></div>;
-}
-
-interface MessageEndpointProps {
-  refName: string;
-  endpointKey: string;
-  endpoint: SerializedEndpoint;
-  open?: boolean;
-}
-const MessageEndpoint = ({ refName, endpointKey, endpoint, open }: MessageEndpointProps) => {
-  const { l } = usePage();
-  const [viewStatus, setViewStatus] = useState<"doc" | "test">("doc");
-  const guards = guardsOf(endpoint);
-  const label = dictText(l, `${refName}.signal.${endpointKey}`);
-  const desc = dictText(l, `${refName}.signal.${endpointKey}.desc`);
-  return (
-    <Collapse
-      open={open}
-      summary={
-        <div className="flex min-w-0 flex-col gap-1.5">
-          <div className="flex flex-wrap items-center gap-2">
-            <span className={getWsBadgeClassName(endpoint.type)}>{endpoint.type}</span>
-            <span className="break-all font-medium font-mono text-sm">{endpointKey}</span>
-            <span className="ml-auto flex flex-wrap items-center gap-1.5">
-              {guards.map((guard) => (
-                <span className={getGuardBadgeClassName(guard)} key={guard}>
-                  {guard}
-                </span>
-              ))}
-            </span>
-          </div>
-          {label ? <div className="text-foreground/55 text-sm">{label}</div> : null}
-        </div>
-      }
-    >
-      {desc ? <p className={docUi.prose}>{desc}</p> : null}
-      <Segmented items={messageViewItems} onChange={setViewStatus} value={viewStatus} />
-      {viewStatus === "doc" ? (
-        <MessageInterface refName={refName} endpointKey={endpointKey} endpoint={endpoint} />
-      ) : (
-        <MessageTry endpointKey={endpointKey} endpoint={endpoint} />
-      )}
-    </Collapse>
-  );
-};
-Message.Endpoint = MessageEndpoint;
-
-interface MessageInterfaceProps {
-  refName: string;
-  endpointKey: string;
-  endpoint: SerializedEndpoint;
-}
-const MessageInterface = ({ refName, endpointKey, endpoint }: MessageInterfaceProps) => {
-  const returnRef = ConstantRegistry.getModelRef(endpoint.returns.refName, endpoint.returns.modelType);
-  const uploadArgs = endpoint.args.filter((arg) => arg.refName === "Upload");
-  const args = endpoint.args.filter((arg) => arg.refName !== "Upload");
-  const isReturnModelType = !PrimitiveRegistry.has(returnRef);
-  const argSections = [
-    { label: "Form data", args: uploadArgs },
-    { label: "Variables", args },
-  ].filter((section) => section.args.length);
-  return (
-    <div className="flex flex-col gap-4">
-      {argSections.map((section) => (
-        <div className="flex flex-col gap-2" key={section.label}>
-          <div className={docUi.sectionLabel}>{section.label}</div>
-          <div className={docUi.tablePanel}>
-            <Arg.Table refName={refName} endpointKey={endpointKey} args={section.args} />
-          </div>
-        </div>
-      ))}
-      <div className="grid gap-3 md:grid-cols-2 md:items-start">
-        <Panel bodyClassName="max-h-none" label="Returns">
-          <div className="flex flex-col items-start gap-3">
-            <UiObject.Type objRef={returnRef} arrDepth={endpoint.returns.arrDepth ?? 0} />
-            {isReturnModelType ? (
-              <UiObject.Detail className="w-full border-0 bg-transparent" objRef={returnRef as ConstantCls} />
-            ) : null}
-          </div>
-        </Panel>
-        <Response.Example endpoint={endpoint} />
-      </div>
-    </div>
-  );
-};
-Message.Interface = MessageInterface;
-
-interface MessageTryProps {
-  endpointKey: string;
-  endpoint: SerializedEndpoint;
-}
-const MessageTry = ({ endpointKey, endpoint }: MessageTryProps) => {
-  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(endpoint), null, 2), []);
-  const [gqlRequest, setGqlRequest] = useState<string>(requestExample);
-  const [stopListen, setStopListen] = useState<(() => void) | null>(null);
-  const [messages, setMessages] = useState<string | boolean | object[]>("");
-  const [response, setResponse] = useState<{
-    status: "ready" | "error" | "listening" | "loading";
-    data: string | boolean | object[] | null;
-  }>({ status: "ready", data: "" });
-
-  const onSend = async () => {
-    const request = JSON.parse(gqlRequest) as { [key: string]: string | number | boolean | null };
-    const argData = endpoint.args.map((arg) => request[arg.refName]);
-    const fetchFn = ((fetch as unknown as DynamicRecord)[endpointKey] as (...args: any[]) => Promise<any>).bind(
-      fetch,
-    ) as (...args: any[]) => Promise<any>;
-    await fetchFn(...argData);
-  };
-  const onListen = () => {
-    setResponse({ status: "loading", data: null });
-    const fetchFn = (
-      (fetch as unknown as DynamicRecord)[`listen${capitalize(endpointKey)}`] as (...args: any[]) => Promise<any>
-    ).bind(fetch) as (data: (data: any) => void) => Promise<() => void>;
-    setResponse({ status: "loading", data: messages });
-    const stopListen = fetchFn((data: any) => {
-      setMessages((prev) =>
-        typeof data === "boolean"
-          ? data
-          : typeof data === "string"
-            ? `${prev as string}\n${data}`
-            : typeof data === "object"
-              ? [...((prev && (prev as object[]).length ? [...(prev as object[])] : []) as object[]), data]
-              : (data as string),
-      );
-    });
-    setResponse({ status: "listening", data: messages });
-    setStopListen(() => stopListen);
-  };
-  const onStopListen = () => {
-    if (!stopListen) return;
-    stopListen();
-    setStopListen(null);
-    setResponse({ status: "ready", data: null });
-    setMessages("");
-  };
-
-  useEffect(() => {
-    if (!stopListen) return;
-    return () => {
-      onStopListen();
-    };
-  }, [stopListen]);
-
-  return (
-    <div className="flex w-full flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <div className={docUi.sectionLabel}>Variables</div>
-        <Arg.Json
-          value={gqlRequest}
-          onChange={(value: string) => {
-            setGqlRequest(value);
-          }}
-        />
-      </div>
-      <div className="grid gap-2 md:grid-cols-3">
-        <button
-          disabled={!!stopListen}
-          className={buttonRecipe({ variant: "primary" }, "w-full")}
-          onClick={() => {
-            onListen();
-          }}
-          type="button"
-        >
-          <AiOutlineSwap /> Listen
-        </button>
-        <button
-          disabled={!stopListen}
-          className={buttonRecipe({ variant: "secondary" }, "w-full")}
-          onClick={() => void onSend()}
-          type="button"
-        >
-          <AiOutlineSend /> Send
-        </button>
-        <button
-          disabled={!stopListen}
-          className={buttonRecipe({ variant: "outline" }, "w-full")}
-          onClick={() => {
-            onStopListen();
-          }}
-          type="button"
-        >
-          <AiOutlineDisconnect /> Stop
-        </button>
-      </div>
-      <Listener.Result status={response.status} data={messages} />
-    </div>
-  );
-};
-Message.Try = MessageTry;