@unicitylabs/sphere-ui 0.1.22 → 0.1.24

package/dist/analytics/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
 
 type DateRangePreset = '1d' | '7d' | '30d' | '90d';
@@ -25,7 +25,7 @@ declare const PRESET_LABELS: Record<DateRangePreset, string>;
  * Emits a normalized DateRangeValue that maps 1:1 to the backend
  * ?range=... query: presets pass the label, "custom" passes from+to.
  */
-declare function DateRangePicker({ value, onChange, presets, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, presets, className, }: DateRangePickerProps): react.JSX.Element;
 
 interface TimeseriesSeries {
     /** Key inside each data point (e.g. 'installs'). */
@@ -55,7 +55,7 @@ interface TimeseriesChartProps {
  * etc. Encapsulates the Recharts wiring so both admin and developer
  * views render charts identically.
  */
-declare function TimeseriesChart({ data, series, variant, height, stacked, showLegend, showGrid, className, emptyState, }: TimeseriesChartProps): react_jsx_runtime.JSX.Element;
+declare function TimeseriesChart({ data, series, variant, height, stacked, showLegend, showGrid, className, emptyState, }: TimeseriesChartProps): react.JSX.Element;
 
 interface KPICardProps {
     /** Short uppercase label above the value. */
@@ -84,7 +84,7 @@ interface KPICardProps {
  * Same shape as dev-portal's admin-card pattern so both frontends
  * render KPIs identically.
  */
-declare function KPICard({ label, value, icon, previousValue, hint, title, format, accentColor, className, }: KPICardProps): react_jsx_runtime.JSX.Element;
+declare function KPICard({ label, value, icon, previousValue, hint, title, format, accentColor, className, }: KPICardProps): react.JSX.Element;
 
 interface TopEntity {
     id: string;
@@ -116,7 +116,7 @@ interface TopEntitiesTableProps {
  * Ranked list with a horizontal bar fill per row. Used for "top quests",
  * "top installed projects", "top users", etc. — any cross-entity ranking.
  */
-declare function TopEntitiesTable({ entities, title, valueLabel, secondaryLabel, hideBars, emptyState, accentColor, className, }: TopEntitiesTableProps): react_jsx_runtime.JSX.Element;
+declare function TopEntitiesTable({ entities, title, valueLabel, secondaryLabel, hideBars, emptyState, accentColor, className, }: TopEntitiesTableProps): react.JSX.Element;
 
 interface AnalyticsSkeletonProps {
     /** Rendered above the grid — usually the existing page header (title + DateRangePicker). */
@@ -137,6 +137,6 @@ interface AnalyticsSkeletonProps {
  * `header` they render in the real state so the date-range picker
  * stays interactive while data loads.
  */
-declare function AnalyticsSkeleton({ header, showKpiRows, showCharts, showBottomTables, className, }: AnalyticsSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function AnalyticsSkeleton({ header, showKpiRows, showCharts, showBottomTables, className, }: AnalyticsSkeletonProps): react.JSX.Element;
 
 export { AnalyticsSkeleton, type AnalyticsSkeletonProps, type DateRangeLabel, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, KPICard, type KPICardProps, TimeseriesChart, type TimeseriesChartProps, type TimeseriesSeries, TopEntitiesTable, type TopEntitiesTableProps, type TopEntity, PRESET_LABELS as dateRangePresetLabels };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, MouseEvent, Ref } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
@@ -17,7 +16,7 @@ interface DashboardLayoutProps {
  * Dashboard shell with sidebar + main content area.
  * Used by sphere-backoffice and sphere-dev-portal.
  */
-declare function DashboardLayout({ logo, nav, footer, children }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayout({ logo, nav, footer, children }: DashboardLayoutProps): react.JSX.Element;
 
 interface AppLogoProps {
     /** Short code displayed in the icon (e.g. "SQ", "SD") */
@@ -33,7 +32,7 @@ interface AppLogoProps {
  * App logo for dashboard sidebar.
  * Orange icon + Anton title + Geist subtitle.
  */
-declare function AppLogo({ icon, title, subtitle, onClick }: AppLogoProps): react_jsx_runtime.JSX.Element;
+declare function AppLogo({ icon, title, subtitle, onClick }: AppLogoProps): react.JSX.Element;
 
 interface NavItem {
     to: string;
@@ -60,7 +59,7 @@ interface SidebarNavProps {
  * Sidebar navigation with grouped items, icons, and badges.
  * Matches the admin panel sidebar style exactly.
  */
-declare function SidebarNav({ groups, currentPath, onNavigate }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+declare function SidebarNav({ groups, currentPath, onNavigate }: SidebarNavProps): react.JSX.Element;
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     error?: boolean;
@@ -89,12 +88,12 @@ interface FieldProps {
     className?: string;
     children: ReactNode;
 }
-declare function Field({ label, required, error, hint, className, children }: FieldProps): react_jsx_runtime.JSX.Element;
+declare function Field({ label, required, error, hint, className, children }: FieldProps): react.JSX.Element;
 interface SectionProps {
     title: string;
     children: ReactNode;
 }
-declare function Section({ title, children }: SectionProps): react_jsx_runtime.JSX.Element;
+declare function Section({ title, children }: SectionProps): react.JSX.Element;
 
 interface FormModalProps {
     title: string;
@@ -121,21 +120,21 @@ interface StatusBadgeProps {
     status: string;
     className?: string;
 }
-declare function StatusBadge({ status, className }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+declare function StatusBadge({ status, className }: StatusBadgeProps): react.JSX.Element;
 
 interface SearchInputProps {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
 }
-declare function SearchInput({ value, onChange, placeholder }: SearchInputProps): react_jsx_runtime.JSX.Element;
+declare function SearchInput({ value, onChange, placeholder }: SearchInputProps): react.JSX.Element;
 
 interface EmptyStateProps {
     title: string;
     description?: string;
     action?: ReactNode;
 }
-declare function EmptyState({ title, description, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+declare function EmptyState({ title, description, action }: EmptyStateProps): react.JSX.Element;
 
 interface SkeletonProps {
     width?: string;
@@ -143,7 +142,7 @@ interface SkeletonProps {
     radius?: string;
     className?: string;
 }
-declare function Skeleton({ width, height, radius, className, }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ width, height, radius, className, }: SkeletonProps): react.JSX.Element;
 
 interface SkeletonTextProps {
     lines?: number;
@@ -151,14 +150,14 @@ interface SkeletonTextProps {
     gap?: string;
     className?: string;
 }
-declare function SkeletonText({ lines, lineHeight, gap, className, }: SkeletonTextProps): react_jsx_runtime.JSX.Element;
+declare function SkeletonText({ lines, lineHeight, gap, className, }: SkeletonTextProps): react.JSX.Element;
 
 type SkeletonCircleSize = 'sm' | 'md' | 'lg' | (string & {});
 interface SkeletonCircleProps {
     size?: SkeletonCircleSize;
     className?: string;
 }
-declare function SkeletonCircle({ size, className }: SkeletonCircleProps): react_jsx_runtime.JSX.Element;
+declare function SkeletonCircle({ size, className }: SkeletonCircleProps): react.JSX.Element;
 
 interface SelectOption {
     value: string;
@@ -172,7 +171,7 @@ interface CustomSelectProps {
     className?: string;
     size?: 'sm' | 'md';
 }
-declare function CustomSelect({ options, value, onChange, placeholder, className, size, }: CustomSelectProps): react_jsx_runtime.JSX.Element;
+declare function CustomSelect({ options, value, onChange, placeholder, className, size, }: CustomSelectProps): react.JSX.Element;
 
 interface PageShellProps {
     title: string;
@@ -181,7 +180,7 @@ interface PageShellProps {
     maxWidth?: string;
     children: ReactNode;
 }
-declare function PageShell({ title, subtitle, action, maxWidth, children }: PageShellProps): react_jsx_runtime.JSX.Element;
+declare function PageShell({ title, subtitle, action, maxWidth, children }: PageShellProps): react.JSX.Element;
 
 interface DataTableProps<T> {
     columns: ColumnDef<T, unknown>[];
@@ -192,21 +191,21 @@ interface DataTableProps<T> {
     enableSearch?: boolean;
     onRowClick?: (row: T) => void;
 }
-declare function DataTable<T>({ columns, data, isLoading, emptyMessage, searchPlaceholder, enableSearch, onRowClick, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ columns, data, isLoading, emptyMessage, searchPlaceholder, enableSearch, onRowClick, }: DataTableProps<T>): react.JSX.Element;
 
 interface AlertBannerProps {
     type: 'warning' | 'info';
     title: string;
     children: ReactNode;
 }
-declare function AlertBanner({ type, title, children }: AlertBannerProps): react_jsx_runtime.JSX.Element;
+declare function AlertBanner({ type, title, children }: AlertBannerProps): react.JSX.Element;
 
 interface AddressDisplayProps {
     address: string;
     nametag?: string | null;
     truncate?: boolean;
 }
-declare function AddressDisplay({ address, nametag, truncate }: AddressDisplayProps): react_jsx_runtime.JSX.Element;
+declare function AddressDisplay({ address, nametag, truncate }: AddressDisplayProps): react.JSX.Element;
 
 interface JsonPanelProps<T> {
     /** Current form state to display as JSON */
@@ -218,11 +217,11 @@ interface JsonPanelProps<T> {
     /** Panel title */
     title?: string;
 }
-declare function JsonPanel<T extends Record<string, unknown>>({ value, onChange, excludeKeys, title, }: JsonPanelProps<T>): react_jsx_runtime.JSX.Element;
+declare function JsonPanel<T extends Record<string, unknown>>({ value, onChange, excludeKeys, title, }: JsonPanelProps<T>): react.JSX.Element;
 declare function JsonToggleButton({ active, onClick }: {
     active: boolean;
     onClick: () => void;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function tagColor(tag: string): {
     bg: string;
@@ -234,7 +233,7 @@ declare function ChainInput({ chains, suggestions, onChange, size }: {
     suggestions: string[];
     onChange: (chains: Record<string, number>) => void;
     size?: 'sm' | 'md';
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 interface MemoCondition {
     key: string;
@@ -245,7 +244,7 @@ interface MemoCondition {
 declare function MemoConditionsEditor({ conditions, onChange }: {
     conditions: MemoCondition[];
     onChange: (conditions: MemoCondition[]) => void;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 /**
  * Consistent SVG icon set for the admin panel.
@@ -256,27 +255,27 @@ interface IconProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const IconBack: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconUndo: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconQuests: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconTracks: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconSettings: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconChain: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconPlus: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconEdit: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconTrash: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconX: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconCheck: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconSearch: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconChevronUp: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconChevronDown: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconChevronsDown: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconChevronsRight: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconArrowRight: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconPlay: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconStar: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconDiamond: (p: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconCircle: (p: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconBack: (p: IconProps) => react.JSX.Element;
+declare const IconUndo: (p: IconProps) => react.JSX.Element;
+declare const IconQuests: (p: IconProps) => react.JSX.Element;
+declare const IconTracks: (p: IconProps) => react.JSX.Element;
+declare const IconSettings: (p: IconProps) => react.JSX.Element;
+declare const IconChain: (p: IconProps) => react.JSX.Element;
+declare const IconPlus: (p: IconProps) => react.JSX.Element;
+declare const IconEdit: (p: IconProps) => react.JSX.Element;
+declare const IconTrash: (p: IconProps) => react.JSX.Element;
+declare const IconX: (p: IconProps) => react.JSX.Element;
+declare const IconCheck: (p: IconProps) => react.JSX.Element;
+declare const IconSearch: (p: IconProps) => react.JSX.Element;
+declare const IconChevronUp: (p: IconProps) => react.JSX.Element;
+declare const IconChevronDown: (p: IconProps) => react.JSX.Element;
+declare const IconChevronsDown: (p: IconProps) => react.JSX.Element;
+declare const IconChevronsRight: (p: IconProps) => react.JSX.Element;
+declare const IconArrowRight: (p: IconProps) => react.JSX.Element;
+declare const IconPlay: (p: IconProps) => react.JSX.Element;
+declare const IconStar: (p: IconProps) => react.JSX.Element;
+declare const IconDiamond: (p: IconProps) => react.JSX.Element;
+declare const IconCircle: (p: IconProps) => react.JSX.Element;
 
 type MediaKind = 'logo' | 'banner' | 'screenshot' | 'image' | 'background';
 type MediaMime = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/svg+xml';
@@ -322,7 +321,7 @@ interface MediaUploaderProps {
     deferUpload?: boolean;
     onFileSelected?: (file: File | null) => void;
 }
-declare function MediaUploader({ kind, ownerType, ownerId, value, onChange, uploadFn, label, deferUpload, onFileSelected, }: MediaUploaderProps): react_jsx_runtime.JSX.Element;
+declare function MediaUploader({ kind, ownerType, ownerId, value, onChange, uploadFn, label, deferUpload, onFileSelected, }: MediaUploaderProps): react.JSX.Element;
 
 interface MediaItem {
     type: 'screenshot' | 'video';
@@ -336,7 +335,7 @@ interface MediaGalleryProps {
     uploadFn: MediaUploadFn;
     max?: number;
 }
-declare function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max }: MediaGalleryProps): react_jsx_runtime.JSX.Element;
+declare function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max }: MediaGalleryProps): react.JSX.Element;
 
 interface MarketplaceProjectCardProps {
     name: string;
@@ -365,7 +364,7 @@ interface MarketplaceProjectCardProps {
  *
  * No `<Link>` dependency — wrap externally if router navigation is needed.
  */
-declare function MarketplaceProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, category, users, quests, positivePercent, ratingCount, installState, onInstallClick, onClick, }: MarketplaceProjectCardProps): react_jsx_runtime.JSX.Element;
+declare function MarketplaceProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, category, users, quests, positivePercent, ratingCount, installState, onInstallClick, onClick, }: MarketplaceProjectCardProps): react.JSX.Element;
 
 interface FeaturedProjectCardProps {
     name: string;
@@ -386,7 +385,7 @@ interface FeaturedProjectCardProps {
  * Wide hero-style card used in marketplace featured rails.
  * No `<Link>` dependency — wrap externally if router navigation is needed.
  */
-declare function FeaturedProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, users, quests, positivePercent, ratingCount, onClick, }: FeaturedProjectCardProps): react_jsx_runtime.JSX.Element;
+declare function FeaturedProjectCard({ name, tagline, logoUrl, bannerUrl, accentColor, users, quests, positivePercent, ratingCount, onClick, }: FeaturedProjectCardProps): react.JSX.Element;
 
 /** Loose typing — dnd-kit listeners/attributes don't fit React's HTMLButtonAttributes due to motion.button overrides. */
 type ButtonExtraProps = {
@@ -419,7 +418,7 @@ interface InstalledProjectIconProps {
  * primary action, `onContextMenu` for right-click, and
  * `topRightAction` to overlay a small action button on the tile.
  */
-declare function InstalledProjectIcon({ name, logoUrl, accentColor, onClick, onContextMenu, topRightAction, showLabel, buttonRef, buttonProps, }: InstalledProjectIconProps): react_jsx_runtime.JSX.Element;
+declare function InstalledProjectIcon({ name, logoUrl, accentColor, onClick, onContextMenu, topRightAction, showLabel, buttonRef, buttonProps, }: InstalledProjectIconProps): react.JSX.Element;
 
 type ProjectLogoSize = 'sm' | 'md' | 'lg';
 interface ProjectLogoProps {
@@ -443,7 +442,7 @@ interface ProjectLogoProps {
  * cards, install previews) so the icon looks the same regardless of
  * surrounding chrome.
  */
-declare function ProjectLogo({ name, logoUrl, accentColor, size, className, children, }: ProjectLogoProps): react_jsx_runtime.JSX.Element;
+declare function ProjectLogo({ name, logoUrl, accentColor, size, className, children, }: ProjectLogoProps): react.JSX.Element;
 
 interface QuestPreviewSummary {
     slug: string;
@@ -490,7 +489,7 @@ interface ProjectPagePreviewProps {
  * Used by dev-portal & backoffice as a live preview while editing a project.
  * No router / hooks / data fetching — every value comes via props.
  */
-declare function ProjectPagePreview({ name, tagline, description, logoUrl, bannerUrl, accentColor, category, websiteUrl, discordUrl, twitterUrl, media, users, activeQuests, positivePercent, ratingCount, quests, achievements, tags, }: ProjectPagePreviewProps): react_jsx_runtime.JSX.Element;
+declare function ProjectPagePreview({ name, tagline, description, logoUrl, bannerUrl, accentColor, category, websiteUrl, discordUrl, twitterUrl, media, users, activeQuests, positivePercent, ratingCount, quests, achievements, tags, }: ProjectPagePreviewProps): react.JSX.Element;
 
 declare const MEDIA_LIMITS: Record<MediaKind, MediaLimit>;
 declare function isMimeAllowed(kind: MediaKind, mime: string): mime is MediaMime;

package/dist/index.js

@@ -1411,6 +1411,17 @@ import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-r
 function formatExtensions(mimes) {
   return mimes.map((m) => m.split("/")[1].toUpperCase()).join(", ");
 }
+async function readImageSize(file) {
+  if (typeof createImageBitmap !== "function") return null;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const size = { width: bitmap.width, height: bitmap.height };
+    bitmap.close?.();
+    return size;
+  } catch {
+    return null;
+  }
+}
 function MediaUploader({
   kind,
   ownerType,
@@ -1453,6 +1464,30 @@ function MediaUploader({
         });
         return;
       }
+      if (file.type !== "image/svg+xml") {
+        const size = await readImageSize(file);
+        if (size) {
+          const { width, height } = size;
+          if (limit.maxWidth && width > limit.maxWidth || limit.maxHeight && height > limit.maxHeight) {
+            setState({
+              phase: "error",
+              message: `Image too large (max ${limit.maxWidth}\xD7${limit.maxHeight}px \u2014 this is ${width}\xD7${height})`
+            });
+            return;
+          }
+          if (limit.aspectRatio) {
+            const ratio = width / height;
+            const tolerance = limit.aspectTolerance ?? 0;
+            if (Math.abs(ratio - limit.aspectRatio) > limit.aspectRatio * tolerance) {
+              setState({
+                phase: "error",
+                message: `Wrong aspect ratio (need ~${limit.aspectRatio}:1 \u2014 this is ${ratio.toFixed(2)}:1)`
+              });
+              return;
+            }
+          }
+        }
+      }
       if (deferUpload) {
         if (previewRef.current) URL.revokeObjectURL(previewRef.current);
         previewRef.current = URL.createObjectURL(file);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,16 +43,18 @@
     "test": "vitest",
     "test:run": "vitest run"
   },
+  "dependencies": {
+    "framer-motion": "^11.18.2",
+    "lucide-react": ">=0.400.0",
+    "react-dropzone": "^14.4.1"
+  },
   "peerDependencies": {
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^8.0.0 || ^10.0.0",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.0.0",
-    "framer-motion": "^11.18.2",
-    "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-dropzone": "^14.4.1",
     "recharts": "^3.0.0"
   },
   "peerDependenciesMeta": {