@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/8starlabs-ui/marquee.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { cn } from "../../infrastructure/utilities/utils";
+import React from "react";
+
+interface MarqueeProps {
+  grayscale?: boolean;
+  direction?: "left" | "right";
+  pauseOnHover?: boolean;
+  fade?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function Marquee({
+  grayscale = false,
+  direction = "left",
+  pauseOnHover = true,
+  fade = true,
+  children,
+  className
+}: MarqueeProps) {
+  const content = React.Children.toArray(children);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const preventScroll = (e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      container.scrollLeft = 0;
+    };
+    container.addEventListener("scroll", preventScroll, { passive: false });
+    container.addEventListener("wheel", preventScroll, { passive: false });
+    container.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      container.removeEventListener("scroll", preventScroll);
+      container.removeEventListener("wheel", preventScroll);
+      container.removeEventListener("touchmove", preventScroll);
+    };
+  }, []);
+
+  const animationClass =
+    direction === "left" ? "marquee-inner" : "marquee-inner-reverse";
+
+  return (
+    <div className="relative overflow-hidden">
+      <style dangerouslySetInnerHTML={{__html: `
+        .marquee-container::-webkit-scrollbar {
+          display: none;
+        }
+
+        .marquee-inner {
+          animation: marquee-anim 20s linear infinite;
+        }
+
+        .marquee-inner-reverse {
+          animation: marquee-anim-reverse 20s linear infinite;
+        }
+
+        .marquee-container:hover .marquee-inner,
+        .marquee-container:hover .marquee-inner-reverse {
+          animation-play-state: paused !important;
+        }
+
+        @keyframes marquee-anim {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(-50%);
+          }
+        }
+
+        @keyframes marquee-anim-reverse {
+          from {
+            transform: translateX(-50%);
+          }
+          to {
+            transform: translateX(0);
+          }
+        }
+      `}} />
+
+      <div
+        ref={containerRef}
+        className={cn(
+          "flex w-full p-2 [--gap:3rem] select-none cursor-default marquee-container",
+          grayscale &&
+            "grayscale brightness-0 dark:invert opacity-80 transition-opacity",
+          className
+        )}
+        style={{
+          maskImage: fade
+            ? "linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, transparent 100%)"
+            : "none",
+          WebkitMaskImage: fade
+            ? "linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, transparent 100%)"
+            : "none",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          pointerEvents: pauseOnHover ? "auto" : "none",
+          overflow: "hidden",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none"
+        }}
+      >
+        <div
+          className={cn(
+            "flex shrink-0 items-center will-change-transform",
+            animationClass
+          )}
+        >
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div
+              key={i}
+              className="flex shrink-0 items-center gap-(--gap) pr-(--gap)"
+            >
+              {content.map((item, index) => (
+                <div
+                  key={index}
+                  className="flex shrink-0 items-center justify-center"
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/presentation/8starlabs-ui/partition-bar.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import {
+  Children,
+  createContext,
+  HTMLAttributes,
+  isValidElement,
+  type ReactElement,
+  useContext
+} from "react";
+import { cn } from "../../infrastructure/utilities/utils";
+import { cva, VariantProps } from "class-variance-authority";
+
+type PartitionBarContextType = {
+  total: number;
+  size: VariantProps<typeof partitionBarVariants>["size"];
+};
+
+const PartitionBarCtxt = createContext<PartitionBarContextType | null>(null);
+
+function usePartitionBarContext(): PartitionBarContextType {
+  const context = useContext(PartitionBarCtxt);
+  if (!context) {
+    throw new Error(
+      "usePartitionBarContext must be used within a PartitionBarProvider"
+    );
+  }
+  return context;
+}
+
+//////////////////////////////////////////////////////////////////////////////
+
+const partitionBarVariants = cva("flex flex-row", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-md"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+interface PartitionBar
+  extends HTMLAttributes<HTMLUListElement>,
+    VariantProps<typeof partitionBarVariants> {
+  children?:
+    | ReactElement<PartitionBarSegment>
+    | ReactElement<PartitionBarSegment>[];
+  gap?: number;
+}
+
+export default function PartitionBar({
+  children,
+  className,
+  gap = 1,
+  size,
+  ...props
+}: PartitionBar) {
+  const total = Children.toArray(children).reduce<number>(
+    (sum, child) =>
+      isValidElement(child)
+        ? sum + ((child.props as PartitionBarSegment).num || 0)
+        : sum,
+    0
+  );
+
+  return (
+    <PartitionBarCtxt.Provider value={{ total, size }}>
+      <ul
+        className={cn("w-full", partitionBarVariants({ size }), className)}
+        style={{
+          gap: `${gap * 4}px`
+        }}
+        {...props}
+      >
+        {children}
+      </ul>
+    </PartitionBarCtxt.Provider>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////
+
+const partitionBarLineVariants = cva("", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      secondary: "bg-primary/60",
+      destructive: "bg-destructive",
+      outline: "border border-input bg-background",
+      muted: "bg-primary/40"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+const partitionBarTitleVariants = cva("", {
+  variants: {
+    variant: {
+      default: "text-primary",
+      secondary: "text-primary/60",
+      destructive: "text-destructive",
+      outline: "text-foreground",
+      muted: "text-primary/40"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+interface PartitionBarSegment
+  extends HTMLAttributes<HTMLLIElement>,
+    VariantProps<typeof partitionBarLineVariants> {
+  children?: React.ReactNode;
+  num?: number;
+  variant?: VariantProps<typeof partitionBarLineVariants>["variant"];
+  alignment?: "left" | "center" | "right";
+}
+
+export function PartitionBarSegment({
+  children,
+  num = 0,
+  variant = "default",
+  alignment = "center",
+  className,
+  ...props
+}: PartitionBarSegment) {
+  const { total, size } = usePartitionBarContext();
+
+  const widthPercent = total > 0 ? (num / total) * 100 : 0;
+
+  return (
+    <li
+      className="flex flex-col min-w-0"
+      style={{
+        flexBasis: `${widthPercent}%`,
+        flexGrow: 0,
+        flexShrink: 0
+      }}
+      {...props}
+    >
+      <div
+        className={cn(
+          partitionBarLineVariants({ variant }),
+          "rounded-full w-full shrink-0",
+          size === "sm" ? "h-2" : size === "md" ? "h-3" : "h-4",
+          className
+        )}
+      />
+      <div
+        className={cn(
+          partitionBarTitleVariants({ variant }),
+          "w-full whitespace-normal flex flex-col",
+          size === "sm" ? "mt-2" : size === "md" ? "mt-3" : "mt-4",
+          alignment === "left" && "items-start",
+          alignment === "center" && "items-center",
+          alignment === "right" && "items-end"
+        )}
+      >
+        {children}
+      </div>
+    </li>
+  );
+}
+
+/////////////////////////////////////////////////////////////////////////////
+
+interface PartitionBarSegmentTitle extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function PartitionBarSegmentTitle({
+  children,
+  className
+}: PartitionBarSegmentTitle) {
+  return <div className={cn("w-fit font-semibold", className)}>{children}</div>;
+}
+
+interface PartitionBarSegmentValue extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function PartitionBarSegmentValue({
+  children,
+  className
+}: PartitionBarSegmentValue) {
+  return (
+    <div className={cn("w-fit text-muted-foreground text-[80%]", className)}>
+      {children}
+    </div>
+  );
+}

package/src/presentation/8starlabs-ui/scroll-fade.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React, { useEffect, useRef, useState, useLayoutEffect } from "react";
+import { cn } from "../../infrastructure/utilities/utils";
+
+type ScrollAxis = "horizontal" | "vertical" | "both";
+
+interface ScrollFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  hideScrollbar?: boolean;
+  axis?: ScrollAxis;
+  intensity?: number;
+}
+
+export default function ScrollFade({
+  children,
+  className,
+  hideScrollbar = true,
+  axis = "horizontal",
+  intensity = 1
+}: ScrollFadeProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(false);
+  const [showTop, setShowTop] = useState(false);
+  const [showBottom, setShowBottom] = useState(false);
+
+  const fadeIntensity = Math.min(Math.max(intensity, 0), 1);
+  const checkScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const {
+      scrollLeft,
+      scrollTop,
+      scrollWidth,
+      scrollHeight,
+      clientWidth,
+      clientHeight
+    } = el;
+
+    if (axis === "horizontal" || axis === "both") {
+      setShowLeft(scrollLeft > 0);
+      setShowRight(
+        Math.ceil(scrollLeft + clientWidth) < Math.floor(scrollWidth - 1)
+      );
+    }
+
+    if (axis === "vertical" || axis === "both") {
+      setShowTop(scrollTop > 0);
+      setShowBottom(
+        Math.ceil(scrollTop + clientHeight) < Math.floor(scrollHeight - 1)
+      );
+    }
+  };
+
+  useLayoutEffect(() => {
+    requestAnimationFrame(checkScroll);
+  }, [axis]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const onScroll = () => checkScroll();
+    container.addEventListener("scroll", onScroll, { passive: true });
+
+    const ro = new ResizeObserver(() => checkScroll());
+    if (contentRef.current) ro.observe(contentRef.current);
+    ro.observe(container);
+
+    const onResize = () => checkScroll();
+    window.addEventListener("resize", onResize);
+
+    const raf = requestAnimationFrame(checkScroll);
+
+    return () => {
+      container.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+      ro.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [axis]);
+
+  return (
+    <div className="relative">
+      <div
+        ref={containerRef}
+        className={cn(
+          hideScrollbar &&
+            "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+          axis === "horizontal" && "w-full overflow-x-auto overflow-y-hidden",
+          axis === "vertical" && "h-full overflow-y-auto overflow-x-hidden",
+          axis === "both" && "overflow-auto",
+          className
+        )}
+      >
+        <div
+          ref={contentRef}
+          className={cn(
+            axis === "horizontal" && "w-fit min-w-full",
+            axis === "vertical" && "h-fit min-h-full",
+            axis === "both" && "min-w-full min-h-full w-fit h-fit"
+          )}
+        >
+          {children}
+        </div>
+      </div>
+
+      {(axis === "horizontal" || axis === "both") && showLeft && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute left-0 top-0 h-full w-10 z-10"
+          style={{
+            opacity: fadeIntensity,
+            background: `linear-gradient(to right, var(--background), transparent)`
+          }}
+        />
+      )}
+
+      {(axis === "horizontal" || axis === "both") && showRight && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute right-0 top-0 h-full w-10 z-10"
+          style={{
+            opacity: fadeIntensity,
+            background: `linear-gradient(to left, var(--background), transparent)`
+          }}
+        />
+      )}
+
+      {(axis === "vertical" || axis === "both") && showTop && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute top-0 left-0 w-full h-10 z-10"
+          style={{
+            opacity: fadeIntensity,
+            background: `linear-gradient(to bottom, var(--background), transparent)`
+          }}
+        />
+      )}
+
+      {(axis === "vertical" || axis === "both") && showBottom && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute bottom-0 left-0 w-full h-10 z-10"
+          style={{
+            opacity: fadeIntensity,
+            background: `linear-gradient(to top, var(--background), transparent)`
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/presentation/8starlabs-ui/status-indicator.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { cn } from "../../infrastructure/utilities/utils";
+
+interface StatusIndicatorProps {
+  state: "active" | "down" | "fixing" | "idle";
+  color?: string;
+  label?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  labelClassName?: string;
+}
+
+const getStateColors = (state: StatusIndicatorProps["state"]) => {
+  switch (state) {
+    case "active":
+      return { dot: "bg-green-500", ping: "bg-green-300" };
+    case "down":
+      return { dot: "bg-red-500", ping: "bg-red-300" };
+    case "fixing":
+      return { dot: "bg-yellow-500", ping: "bg-yellow-300" };
+    case "idle":
+    default:
+      return { dot: "bg-muted-foreground", ping: "bg-muted-foreground/40" };
+  }
+};
+
+const getSizeClasses = (size: StatusIndicatorProps["size"]) => {
+  switch (size) {
+    case "sm":
+      return { dot: "h-2 w-2", ping: "h-2 w-2" };
+    case "lg":
+      return { dot: "h-4 w-4", ping: "h-4 w-4" };
+    case "md":
+    default:
+      return { dot: "h-3 w-3", ping: "h-3 w-3" };
+  }
+};
+
+const StatusIndicator: React.FC<StatusIndicatorProps> = ({
+  state = "idle",
+  color,
+  label,
+  className,
+  size = "md",
+  labelClassName
+}) => {
+  const shouldAnimate =
+    state === "active" || state === "fixing" || state === "down";
+  const colors = getStateColors(state);
+  const sizeClasses = getSizeClasses(size);
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="relative flex items-center">
+        {shouldAnimate && (
+          <span
+            className={cn(
+              "absolute inline-flex rounded-full opacity-75 animate-ping",
+              sizeClasses.ping,
+              colors.ping
+            )}
+          />
+        )}
+        <span
+          className={cn(
+            "relative inline-flex rounded-full",
+            sizeClasses.dot,
+            colors.dot
+          )}
+        />
+      </div>
+      {label && (
+        <p
+          className={cn(
+            "text-sm text-muted-foreground",
+            labelClassName
+          )}
+        >
+          {label}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default StatusIndicator;

package/src/presentation/8starlabs-ui/system-banner.tsx

@@ -0,0 +1,50 @@
+interface SystemBannerProps {
+  text?: string;
+  color?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  show?: boolean;
+}
+
+const sizeClasses: Record<NonNullable<SystemBannerProps["size"]>, string> = {
+  xs: "text-[10px] px-1 py-0.5",
+  sm: "text-xs px-2 py-0.5",
+  md: "text-sm px-3 py-1",
+  lg: "text-base px-4 py-1.5"
+};
+
+export default function SystemBanner({
+  text = "Development Mode",
+  color = "bg-orange-500",
+  size = "xs",
+  show = true
+}: SystemBannerProps) {
+  if (!show) return null;
+  return (
+    <div
+      className={`
+        fixed top-0 left-0 w-full h-0.5 z-50 flex justify-center
+        ${typeof color === "string" && color.startsWith("#") ? "" : color}
+      `}
+      style={
+        typeof color === "string" && color.startsWith("#")
+          ? { backgroundColor: color }
+          : undefined
+      }
+    >
+      <span
+        className={`
+          absolute -bottom-4 text-white font-bold rounded shadow-md
+          ${sizeClasses[size]}
+          ${typeof color === "string" && color.startsWith("#") ? "" : color}
+        `}
+        style={
+          typeof color === "string" && color.startsWith("#")
+            ? { backgroundColor: color }
+            : undefined
+        }
+      >
+        {text}
+      </span>
+    </div>
+  );
+}