sdaia-ui 1.0.1 → 1.0.2

package/src/components/ScatterChart/ScatterChart.variants.ts

@@ -1,162 +0,0 @@
-import type { ScatterChartType, ScatterPoint } from './ScatterChart.types';
-
-// ─── Layout ──────────────────────────────────────────────────────────────────
-
-export const ROOT_BASE =
-  'flex flex-col gap-spacing-lg min-w-[350px] w-full';
-
-export const TITLE_CLASSES =
-  'text-text-sm font-[600] text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
-
-export const CHART_BODY =
-  'flex flex-col gap-spacing-xs flex-1 min-h-0 w-full';
-
-export const Y_AND_CHART_ROW =
-  'flex gap-spacing-md flex-1 min-h-0 w-full';
-
-// Y-axis column: top/bottom padding matches py-spacing-md of chart area so labels
-// align with the first and last grid lines.
-export const Y_AXIS_CONTAINER =
-  'shrink-0 flex flex-col justify-between py-spacing-md';
-
-// Each label sits on a zero-height row so grid lines sit between labels.
-export const Y_AXIS_ROW =
-  'h-0 overflow-visible flex items-center justify-end';
-
-export const Y_AXIS_LABEL =
-  'text-text-sm font-[400] text-[rgba(31,42,55,1)] dark:text-[rgba(209,213,219,1)] whitespace-nowrap';
-
-// Invisible spacer that mirrors the Y-axis width, allowing X-axis labels to
-// start where the chart area starts (CSS-only, no JS measurement).
-export const Y_AXIS_SPACER =
-  'shrink-0 invisible select-none aria-hidden';
-
-// Chart area: `relative` so dots and grid overlay use absolute positioning.
-export const CHART_AREA =
-  'relative flex-1 min-h-0 min-w-0 min-h-[240px]';
-
-// Grid: stacks visual horizontal lines at equal intervals via justify-between.
-export const GRID_OVERLAY =
-  'absolute inset-0 flex flex-col justify-between py-spacing-md pointer-events-none';
-
-export const GRID_LINE =
-  'w-full h-0 shrink-0 border-t border-solid border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
-
-// Vertical grid lines — one per X-tick, evenly distributed (justify-between).
-export const GRID_V_OVERLAY =
-  'absolute inset-0 flex justify-between pointer-events-none';
-
-export const GRID_V_LINE =
-  'h-full w-0 border-l border-solid border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
-
-// Dots are clipped to the chart area. py-spacing-md aligns with grid overlay.
-export const DOTS_WRAPPER =
-  'absolute inset-x-0 top-[8px] bottom-[8px] overflow-hidden';
-
-export const DOT_BASE =
-  'absolute size-[8px] rounded-full -translate-x-1/2 -translate-y-1/2 bg-[rgba(27,131,84,1)] border border-[rgba(22,106,69,1)]';
-
-// X-axis row beneath chart area.
-export const X_AXIS_ROW =
-  'flex justify-between';
-
-export const X_AXIS_LABEL =
-  'text-text-sm font-[400] text-[rgba(31,42,55,1)] dark:text-[rgba(209,213,219,1)] whitespace-nowrap';
-
-// ─── Default Y ticks (top → bottom) ──────────────────────────────────────────
-// Empty strings are invisible spacer rows so the visible labeled rows align
-// with grid-line positions produced by justify-between over 6 rows total.
-
-const Y_TICKS_LINEAR: string[] = ['', '800', '', '400', '', '0'];
-const Y_TICKS_SIN: string[] = ['', '1', '', '0', '', '-1'];
-const Y_TICKS_NO_TREND: string[] = ['', '100', '', '50', '', '0'];
-const Y_TICKS_SQUARE: string[] = ['', '10000', '', '5000', '', '0'];
-
-// ─── Default X ticks (LTR left → right) ──────────────────────────────────────
-
-const X_TICKS_LINEAR: string[] = ['0', '', '250', '', '500', '', '750', '', '1000'];
-const X_TICKS_SIN: string[] = ['0', '', '90', '', '180', '', '270', '', '360'];
-const X_TICKS_NO_TREND: string[] = ['0', '', '25', '', '50', '', '75', '', '100'];
-const X_TICKS_SQUARE: string[] = ['0', '', '25', '', '50', '', '75', '', '100'];
-
-// ─── Domain defaults ──────────────────────────────────────────────────────────
-// yMax is intentionally larger than the top labeled tick so that the "800"
-// label sits at 20% from the top (not 0%) — matching the spacer row position.
-
-interface DomainDefaults {
-  xMin: number; xMax: number;
-  yMin: number; yMax: number;
-}
-
-const DOMAINS: Record<ScatterChartType, DomainDefaults> = {
-  Linear:   { xMin: 0, xMax: 1000, yMin: 0, yMax: 1000 },
-  Sin:      { xMin: 0, xMax: 360,  yMin: -1.25, yMax: 1.25 },
-  'No Trend': { xMin: 0, xMax: 100, yMin: 0, yMax: 125 },
-  Square:   { xMin: 0, xMax: 100,  yMin: 0, yMax: 12500 },
-};
-
-// ─── Default scatter-point data ───────────────────────────────────────────────
-
-const POINTS_LINEAR: ScatterPoint[] = [
-  { x: 50,  y: 30  }, { x: 100, y: 90  }, { x: 150, y: 130 }, { x: 200, y: 210 },
-  { x: 250, y: 260 }, { x: 300, y: 320 }, { x: 350, y: 370 }, { x: 400, y: 410 },
-  { x: 450, y: 450 }, { x: 500, y: 510 }, { x: 550, y: 560 }, { x: 600, y: 590 },
-  { x: 650, y: 640 }, { x: 700, y: 700 }, { x: 750, y: 740 }, { x: 800, y: 790 },
-  { x: 850, y: 840 }, { x: 900, y: 880 }, { x: 950, y: 930 }, { x: 1000, y: 970 },
-];
-
-const POINTS_SIN: ScatterPoint[] = [
-  { x: 0,   y: 0    }, { x: 15,  y: 0.259 }, { x: 30,  y: 0.5   }, { x: 45,  y: 0.707 },
-  { x: 60,  y: 0.866 }, { x: 75,  y: 0.966 }, { x: 90,  y: 1.0  }, { x: 105, y: 0.966 },
-  { x: 120, y: 0.866 }, { x: 135, y: 0.707 }, { x: 150, y: 0.5  }, { x: 165, y: 0.259 },
-  { x: 180, y: 0    }, { x: 195, y: -0.259 }, { x: 210, y: -0.5  }, { x: 225, y: -0.707 },
-  { x: 240, y: -0.866 }, { x: 255, y: -0.966 }, { x: 270, y: -1.0 }, { x: 285, y: -0.966 },
-  { x: 300, y: -0.866 }, { x: 315, y: -0.707 }, { x: 330, y: -0.5  }, { x: 345, y: -0.259 },
-  { x: 360, y: 0    },
-];
-
-const POINTS_NO_TREND: ScatterPoint[] = [
-  { x: 5,  y: 72 }, { x: 12, y: 18 }, { x: 18, y: 91 }, { x: 25, y: 44 },
-  { x: 31, y: 63 }, { x: 38, y: 27 }, { x: 44, y: 85 }, { x: 50, y: 52 },
-  { x: 57, y: 38 }, { x: 63, y: 77 }, { x: 69, y: 13 }, { x: 75, y: 60 },
-  { x: 82, y: 95 }, { x: 88, y: 31 }, { x: 94, y: 69 }, { x: 100, y: 47 },
-];
-
-const POINTS_SQUARE: ScatterPoint[] = [
-  { x: 0,  y: 0    }, { x: 10, y: 100  }, { x: 20, y: 400  }, { x: 30, y: 900  },
-  { x: 40, y: 1600 }, { x: 50, y: 2500 }, { x: 60, y: 3600 }, { x: 70, y: 4900 },
-  { x: 80, y: 6400 }, { x: 90, y: 8100 }, { x: 100, y: 10000 },
-];
-
-// ─── Preset lookup helpers ────────────────────────────────────────────────────
-
-export function getDefaultPoints(type: ScatterChartType): ScatterPoint[] {
-  switch (type) {
-    case 'Sin':       return POINTS_SIN;
-    case 'No Trend':  return POINTS_NO_TREND;
-    case 'Square':    return POINTS_SQUARE;
-    default:          return POINTS_LINEAR;
-  }
-}
-
-export function getDefaultYTicks(type: ScatterChartType): string[] {
-  switch (type) {
-    case 'Sin':       return Y_TICKS_SIN;
-    case 'No Trend':  return Y_TICKS_NO_TREND;
-    case 'Square':    return Y_TICKS_SQUARE;
-    default:          return Y_TICKS_LINEAR;
-  }
-}
-
-export function getDefaultXTicks(type: ScatterChartType): string[] {
-  switch (type) {
-    case 'Sin':       return X_TICKS_SIN;
-    case 'No Trend':  return X_TICKS_NO_TREND;
-    case 'Square':    return X_TICKS_SQUARE;
-    default:          return X_TICKS_LINEAR;
-  }
-}
-
-export function getDefaultDomain(type: ScatterChartType): DomainDefaults {
-  return DOMAINS[type];
-}

package/src/components/ScatterChart/index.ts

@@ -1,2 +0,0 @@
-export { ScatterChart } from './ScatterChart';
-export type { ScatterChartProps, ScatterChartType, ScatterPoint } from './ScatterChart.types';

package/src/components/SdaiaLogoAnimation/BGSVG.tsx

@@ -1,216 +0,0 @@
-import type { CSSProperties } from 'react';
-
-const centerWrapperStyle: CSSProperties = {
-  position: 'absolute',
-  inset: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'visible',
-};
-
-const STROKE_WIDTH = 1.36675;
-
-const VB_W = 812;
-const VB_H = 873;
-
-/**
- * Nëse dy shtigje (të sortuara sipas minX) ndahen me më pak se këtë diferencë në px,
- * konsiderohen "një bandë" / të ngjitur në qendër — e njëjta ngjyrë + i njëjti gradient.
- */
-const MIN_X_CLUSTER_PX = 42;
-
-const LOGO_PATH_STROKE_COLORS = [
-  '#33CC99',
-  '#6258A6',
-  '#FF6633',
-  '#273470',
-  '#6258A6',
-  '#FDBD4D',
-  '#6258A6',
-  '#FDBD4D',
-  '#6258A6',
-  '#33CC99',
-  '#6258A6',
-  '#33CC99',
-  '#FF6633',
-  '#33CC99',
-  '#6258A6'
-] as const;
-
-function darkenedStop(hex: string): string {
-  const h = hex.replace('#', '');
-  const n = parseInt(h, 16);
-  const r = (n >> 16) & 0xff;
-  const g = (n >> 8) & 0xff;
-  const b = n & 0xff;
-  const t = 0.38;
-  return `#${[r, g, b]
-    .map((c) => Math.round(c * t).toString(16).padStart(2, '0'))
-    .join('')}`;
-}
-
-function linearGradientId(slot: number): string {
-  return `sdaia-logo-lin-${slot}`;
-}
-
-const LOGO_PATHS: string[] = [
-  'M800.762 321.513L725.769 278.333L800.762 235.131V321.513Z',
-  'M796.877 635.83L721.895 592.65L796.877 549.47V635.83Z',
-  'M762.348 518.684L687.367 561.886V475.504L762.348 518.684Z',
-  'M811.166 483.298L736.183 440.118L811.166 396.916V483.298Z',
-  'M634.635 723.592L559.654 680.412L634.635 637.21V723.592Z',
-  'M647.456 576.621L546.782 518.661L647.456 460.656V576.621Z',
-  'M646.779 592.65L546.107 650.654V534.689L646.779 592.65Z',
-  'M646.747 444.728L546.097 502.687V386.768L646.747 444.728Z',
-  'M654.687 786.747L579.718 829.949V743.567L654.687 786.747Z',
-  'M531.866 517.523L405.553 444.728L531.866 371.943V517.523Z',
-  'M518.357 683.354L417.707 741.313V625.395L518.357 683.354Z',
-  'M505.523 828.333L430.554 871.513V785.131L505.523 828.333Z',
-  'M783.888 691.165L708.908 734.367V647.985L783.888 691.165Z',
-  'M762.348 370.805L687.367 414.007V327.625L762.348 370.805Z',
-  'M647.456 428.765L546.782 370.761L647.456 312.8V428.765Z',
-  'M506.241 791.214L431.258 748.012L506.241 704.833V791.214Z',
-  'M519.033 667.392L418.39 609.432L519.033 551.428V667.392Z',
-  'M531.179 518.718L404.869 591.468V445.922L531.179 518.718Z',
-  'M776.182 190.549L701.202 233.729V147.37L776.182 190.549Z',
-  'M649.998 61.0879L574.996 104.29V17.9072L649.998 61.0879Z',
-  'M646.792 296.817L546.097 354.777V238.835L646.792 296.817Z',
-  'M506.22 161.552L431.239 118.373L506.22 75.1707V161.552Z',
-  'M519.044 338.039L418.391 280.079L519.044 222.085V338.039Z',
-  'M403.503 443.557L277.169 370.795L403.503 298.011V443.557Z',
-  'M390.675 264.083L290.022 206.124L390.675 148.12V264.083Z',
-  'M377.812 87.5635L302.82 44.3838L377.812 1.18164V87.5635Z',
-  'M262.288 354.788L161.635 296.784L262.288 238.834V354.788Z',
-  'M220.919 155.13L145.937 111.95L220.919 68.748V155.13Z',
-  'M634.59 252.247L559.586 209.045L634.59 165.843V252.247Z',
-  'M505.535 44.3838L430.554 87.5635V1.18164L505.535 44.3838Z',
-  'M518.357 206.058L417.707 264.018V148.143L518.357 206.058Z',
-  'M531.18 370.796L404.869 443.58V298.033L531.18 370.796Z',
-  'M377.156 143.368L302.154 186.57V100.188L377.156 143.368Z',
-  'M389.978 280.079L289.327 338.039V222.085L389.978 280.079Z',
-  'M248.714 209.044L173.723 252.224V165.865L248.714 209.044Z',
-  'M84.056 274.466L9.06378 231.287L84.056 188.084V274.466Z',
-  'M377.823 871.526L302.82 828.345L377.823 785.143V871.526Z',
-  'M403.503 591.469L277.169 518.673L403.503 445.922V591.469Z',
-  'M249.401 834.536L174.408 791.345L249.401 748.154V834.536Z',
-  'M261.602 518.717L160.951 576.677V460.713L261.602 518.717Z',
-  'M261.602 370.806L160.951 428.81V312.801L261.602 370.806Z',
-  'M107.156 752.146L32.1533 708.966L107.156 665.785V752.146Z',
-  'M121.008 410.898L46.0047 367.718L121.008 324.516V410.898Z',
-  'M75.6855 448.577L0.683594 491.758V405.396L75.6855 448.577Z',
-  'M390.641 741.359L289.967 683.399L390.641 625.395V741.359Z',
-  'M402.817 444.739L276.485 517.489V371.943L402.817 444.739Z',
-  'M377.126 754.378L302.124 797.581V711.198L377.126 754.378Z',
-  'M389.934 609.399L289.295 667.404V551.374L389.934 609.399Z',
-  'M248.703 680.411L173.723 723.591V637.231L248.703 680.411Z',
-  'M262.288 650.61L161.636 592.65L262.288 534.68V650.61Z',
-  'M262.288 502.656L161.635 444.728L262.288 386.724V502.656Z',
-  'M120.994 561.886L45.9902 518.685L120.994 475.503V561.886Z',
-  'M78.7615 296.839L3.78101 340.019V253.637L78.7615 296.839Z',
-  'M83.374 598.042L8.37012 641.223V554.807L83.374 598.042Z',
-];
-
-function pathMinX(d: string): number {
-  let currentX = 0;
-  let minX = Infinity;
-  const segmentPattern = /([MLV])([^MLVZ]*)/g;
-  let match: RegExpExecArray | null;
-  while ((match = segmentPattern.exec(d)) !== null) {
-    const op = match[1];
-    const rest = match[2].trim();
-    if (op === 'M' || op === 'L') {
-      const values = rest.split(/[\s,]+/).map(Number).filter((n) => !Number.isNaN(n));
-      for (let i = 0; i < values.length; i += 2) {
-        if (i + 1 < values.length) {
-          currentX = values[i] ?? 0;
-          minX = Math.min(minX, currentX);
-        }
-      }
-    } else if (op === 'V') {
-      const y = parseFloat(rest);
-      if (!Number.isNaN(y)) {
-        minX = Math.min(minX, currentX);
-      }
-    }
-  }
-  return minX;
-}
-
-/**
- * Shtigjet me minX të njëpasnjëshme (të sortuara) me diferencë ≤ MIN_X_CLUSTER_PX
- * ndajnë të njëjtin "group" → i njëjti `colorSlot` (0–11) cikël majtas-djathtas.
- */
-function buildPathIndexToColorSlot(): number[] {
-  const items = LOGO_PATHS.map((d, pathIndex) => ({ pathIndex, x: pathMinX(d) }));
-  items.sort((a, b) => a.x - b.x || a.pathIndex - b.pathIndex);
-  const pathIndexToSlot: number[] = new Array(LOGO_PATHS.length);
-  let groupId = 0;
-  if (items.length > 0) {
-    pathIndexToSlot[items[0]!.pathIndex] = 0;
-  }
-  for (let k = 1; k < items.length; k++) {
-    const step = items[k]!.x - items[k - 1]!.x;
-    if (step > MIN_X_CLUSTER_PX) {
-      groupId += 1;
-    }
-    pathIndexToSlot[items[k]!.pathIndex] = groupId % 12;
-  }
-  return pathIndexToSlot;
-}
-
-const pathIndexToColorSlot: number[] = buildPathIndexToColorSlot();
-
-function LogoStrokeLinearGradients() {
-  return (
-    <defs>
-      {LOGO_PATH_STROKE_COLORS.map((fromColor, index) => (
-        <linearGradient
-          key={linearGradientId(index)}
-          id={linearGradientId(index)}
-          gradientUnits="userSpaceOnUse"
-          x1={0}
-          y1={0}
-          x2={VB_W}
-          y2={VB_H}
-        >
-          <stop offset="0%" stopColor={fromColor} />
-          <stop offset="100%" stopColor={darkenedStop(fromColor)} />
-        </linearGradient>
-      ))}
-    </defs>
-  );
-}
-
-const BGSVG = () => {
-  return (
-    <div style={centerWrapperStyle}>
-      <svg
-        width={812}
-        height={873}
-        viewBox="0 0 812 873"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="block shrink-0"
-      >
-        <LogoStrokeLinearGradients />
-        {LOGO_PATHS.map((pathData, pathIndex) => {
-          const colorSlot = pathIndexToColorSlot[pathIndex] ?? 0;
-          return (
-            <path
-              key={pathIndex}
-              d={pathData}
-              fill="none"
-              stroke={`url(#${linearGradientId(colorSlot)})`}
-              strokeWidth={STROKE_WIDTH}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          );
-        })}
-      </svg>
-    </div>
-  );
-};
-
-export default BGSVG;

package/src/components/SdaiaLogoAnimation/SdaiaLogoAnimation.tsx

@@ -1,120 +0,0 @@
-'use client';
-
-import {
-  forwardRef,
-  useCallback,
-  useRef,
-  type MutableRefObject,
-  type PointerEvent,
-  type Ref,
-} from 'react';
-import { cn } from '../../lib/cn';
-import BGSVG from './BGSVG';
-import { buildSpotlightMask, MASK_FULLY_HIDDEN } from './SdaiaLogoAnimation.variants';
-import type { SdaiaLogoAnimationProps } from './SdaiaLogoAnimation.types';
-
-function toCssLength(value: string | number | undefined, fallback: string): string {
-  if (value === undefined) return fallback;
-  if (typeof value === 'number') return `${value}px`;
-  return value.trim() === '' ? fallback : value;
-}
-
-const DEFAULT_WIDTH = '70%';
-const DEFAULT_HEIGHT = '200px';
-
-function setForwardedRef(
-  ref: Ref<HTMLDivElement>,
-  node: HTMLDivElement | null,
-) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (ref) {
-    (ref as MutableRefObject<HTMLDivElement | null>).current = node;
-  }
-}
-
-/**
- * SDAIA logo with pointer-driven spotlight mask reveal
- * (moved from app testing; same mask / pointer logic as BGAnimationLogo).
- */
-export const SdaiaLogoAnimation = forwardRef<HTMLDivElement, SdaiaLogoAnimationProps>(
-  function SdaiaLogoAnimation(
-    { width: widthProp, height: heightProp, className, style, dir, ...rest },
-    ref,
-  ) {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const spotlightRef = useRef<HTMLDivElement | null>(null);
-
-    const setContainerRef = useCallback(
-      (node: HTMLDivElement | null) => {
-        containerRef.current = node;
-        setForwardedRef(ref, node);
-      },
-      [ref],
-    );
-
-    const applyMaskFromClientPoint = useCallback((clientX: number, clientY: number) => {
-      const container = containerRef.current;
-      const spotlight = spotlightRef.current;
-      if (!container || !spotlight) return;
-      const rect = container.getBoundingClientRect();
-      const localX = clientX - rect.left;
-      const localY = clientY - rect.top;
-      const mask = buildSpotlightMask(localX, localY);
-      spotlight.style.maskImage = mask;
-      spotlight.style.webkitMaskImage = mask;
-    }, []);
-
-    const hideSvgFully = useCallback(() => {
-      const spotlight = spotlightRef.current;
-      if (!spotlight) return;
-      spotlight.style.maskImage = MASK_FULLY_HIDDEN;
-      spotlight.style.webkitMaskImage = MASK_FULLY_HIDDEN;
-    }, []);
-
-    const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
-      applyMaskFromClientPoint(event.clientX, event.clientY);
-    };
-
-    const handlePointerEnter = (event: PointerEvent<HTMLDivElement>) => {
-      applyMaskFromClientPoint(event.clientX, event.clientY);
-    };
-
-    const handlePointerLeave = () => {
-      hideSvgFully();
-    };
-
-    return (
-      <div
-        ref={setContainerRef}
-        dir={dir}
-        data-slot="sdaia-logo-animation"
-        {...rest}
-        className={cn('select-none', className)}
-        style={{
-          position: 'relative',
-          overflow: 'hidden',
-          ...style,
-          width: toCssLength(widthProp, DEFAULT_WIDTH),
-          height: toCssLength(heightProp, DEFAULT_HEIGHT),
-        }}
-        onPointerMove={handlePointerMove}
-        onPointerEnter={handlePointerEnter}
-        onPointerLeave={handlePointerLeave}
-      >
-        <div
-          ref={spotlightRef}
-          data-slot="sdaia-logo-animation-spotlight"
-          style={{
-            position: 'absolute',
-            inset: 0,
-            maskImage: MASK_FULLY_HIDDEN,
-            WebkitMaskImage: MASK_FULLY_HIDDEN,
-          }}
-        >
-          <BGSVG />
-        </div>
-      </div>
-    );
-  },
-);

package/src/components/SdaiaLogoAnimation/SdaiaLogoAnimation.types.ts

@@ -1,13 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export interface SdaiaLogoAnimationProps extends Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'children' | 'width' | 'height'
-> {
-  /** Optional text direction for the wrapper. */
-  dir?: 'ltr' | 'rtl';
-  /** Number → px. String → any CSS length (`"70%"`, `"12rem"`, …). */
-  width?: string | number;
-  /** Number → px. String → `%`, `px`, `vh`, etc. */
-  height?: string | number;
-}

package/src/components/SdaiaLogoAnimation/SdaiaLogoAnimation.variants.ts

@@ -1,22 +0,0 @@
-/**
- * Soft spotlight: ellipse + multi-stop falloff for the mask reveal
- * (same behavior as the original testing BGAnimationLogo).
- */
-export const SPOTLIGHT_RADIUS_X_PX = 118;
-export const SPOTLIGHT_RADIUS_Y_PX = 92;
-
-export const MASK_FULLY_HIDDEN = 'linear-gradient(transparent 0%, transparent 100%)';
-
-export function buildSpotlightMask(localX: number, localY: number): string {
-  return [
-    'radial-gradient(',
-    `ellipse ${SPOTLIGHT_RADIUS_X_PX}px ${SPOTLIGHT_RADIUS_Y_PX}px at ${localX}px ${localY}px,`,
-    'rgba(0,0,0,1) 0%,',
-    'rgba(0,0,0,0.92) 18%,',
-    'rgba(0,0,0,0.55) 42%,',
-    'rgba(0,0,0,0.22) 65%,',
-    'rgba(0,0,0,0.06) 82%,',
-    'transparent 100%',
-    ')',
-  ].join(' ');
-}

package/src/components/SdaiaLogoAnimation/index.ts

@@ -1,2 +0,0 @@
-export { SdaiaLogoAnimation } from './SdaiaLogoAnimation';
-export type { SdaiaLogoAnimationProps } from './SdaiaLogoAnimation.types';

package/src/components/SdaiaTouch2dAnimation/SdaiaTouch2dAnimation.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import { Star } from './Star';
-import { STAR_LAYOUT } from './SdaiaTouch2dAnimation.variants';
-import type { SdaiaTouch2dAnimationProps } from './SdaiaTouch2dAnimation.types';
-
-/**
- * SDAIA Touch 2D animation — a scattered field of tapered "stars" at
- * varying sizes. Each star is independently hover-driven: the body grows
- * upward from the bottom point on hover, then collapses back on leave.
- */
-export const SdaiaTouch2dAnimation = forwardRef<HTMLDivElement, SdaiaTouch2dAnimationProps>(
-  function SdaiaTouch2dAnimation(
-    {
-      className,
-      dir,
-      collapsedScale = 0,
-      growMs = 900,
-      shrinkMs = 600,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <div
-        ref={ref}
-        dir={dir}
-        data-slot="sdaia-touch-2d-animation"
-        className={cn('relative h-full w-full', className)}
-        {...rest}
-      >
-        {STAR_LAYOUT.map((star) => (
-          <div
-            key={star.id}
-            className="absolute"
-            style={{
-              left: star.left,
-              top: star.top,
-              width: star.width,
-              height: star.height,
-            }}
-          >
-            <Star
-              collapsedScale={collapsedScale}
-              growMs={growMs}
-              shrinkMs={shrinkMs}
-            />
-          </div>
-        ))}
-      </div>
-    );
-  },
-);

package/src/components/SdaiaTouch2dAnimation/SdaiaTouch2dAnimation.types.ts

@@ -1,12 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export interface SdaiaTouch2dAnimationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** Optional text direction for the wrapper. */
-  dir?: 'ltr' | 'rtl';
-  /** Visual scale of each star at rest. 0 = fully collapsed (default). */
-  collapsedScale?: number;
-  /** Time (ms) each star takes to grow on hover. Default 900. */
-  growMs?: number;
-  /** Time (ms) each star takes to shrink on mouse leave. Default 600. */
-  shrinkMs?: number;
-}

package/src/components/SdaiaTouch2dAnimation/SdaiaTouch2dAnimation.variants.ts

@@ -1,28 +0,0 @@
-/**
- * Star layout for the SDAIA Touch 2D animation.
- *
- * Positions and sizes are expressed in percentages so the field scales
- * with its container. The composition matches Figma node 1941:61005:
- * 7 tapered "stars" of varying scale, scattered with intentional overlap.
- *
- * Each star anchors at the TOP (its V-notch tip), so `top` is the
- * vertical position of the V-tip and `height` is how far the body
- * extends downward (clipped by the container's overflow).
- */
-export interface StarLayoutItem {
-  id: string;
-  left: string;
-  top: string;
-  width: string;
-  height: string;
-}
-
-export const STAR_LAYOUT: readonly StarLayoutItem[] = [
-  { id: 'star-1', left: '7.7%',  top: '34.5%', width: '16.9%', height: '13.7%' },
-  { id: 'star-2', left: '35.2%', top: '29.2%', width: '30%',   height: '24.4%' },
-  { id: 'star-3', left: '16.1%', top: '16.9%', width: '37%',   height: '30%'   },
-  { id: 'star-4', left: '34.4%', top: '41.4%', width: '60.2%', height: '48.8%' },
-  { id: 'star-5', left: '71.6%', top: '69.1%', width: '30%',   height: '24.4%' },
-  { id: 'star-6', left: '28.2%', top: '52.1%', width: '22%',   height: '17.8%' },
-  { id: 'star-7', left: '83.6%', top: '56.3%', width: '16.9%', height: '13.7%' },
-] as const;