@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

package/dist/components/questions/components/ColorNode.js

@@ -1,86 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button';
-import { Badge } from '../../../components/ui/badge';
-import { X } from 'lucide-react';
-// Helper function to calculate luminance of a color
-function getLuminance(hex) {
-    const rgb = hexToRgb(hex);
-    if (!rgb)
-        return 0.5;
-    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((val) => {
-        val = val / 255;
-        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-    });
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-// Helper function to convert hex to RGB
-function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
-        }
-        : null;
-}
-// Check if color is light (luminance > 0.5)
-function isLightColor(color) {
-    return getLuminance(color) > 0.5;
-}
-export function ColorNode({ data, variant = 'creator' }) {
-    const isClientMode = variant === 'client';
-    const isCompact = data.displayMode === 'compact';
-    const textClass = isCompact ? 'text-[9px]' : 'text-[11px]';
-    const isLight = isLightColor(data.color);
-    if (isClientMode) {
-        const baseClass = data.isConnected
-            ? 'relative flex h-full w-full items-center justify-center overflow-hidden rounded-2xl transition-all duration-200 ease-out'
-            : 'relative inline-flex min-w-[110px] items-center justify-center overflow-hidden rounded-2xl border-2 px-3 py-2 transition-all duration-200 ease-out hover:border-blue-500 hover:shadow-md cursor-move';
-        return (_jsxs("div", { className: `${baseClass} ${data.highlightClass ?? ''}`, style: {
-                ...data.highlightStyle,
-                backgroundColor: data.color,
-                // When connected (inside region) or highlighted (intersecting with region), no border
-                border: data.isConnected || data.isHighlighted ? 'none' : undefined,
-                borderColor: data.isConnected || data.isHighlighted
-                    ? 'transparent'
-                    : isLight
-                        ? '#666666'
-                        : '#9ca3af',
-                // Remove padding when connected to fill completely
-                padding: data.isConnected ? 0 : undefined,
-            }, children: [data.isConnected && data.label && (_jsx("span", { className: "pointer-events-none absolute text-xs font-bold drop-shadow-md", style: {
-                        color: isLight ? '#000000' : '#ffffff',
-                    }, children: data.label })), !data.isConnected && !data.isHighlighted && (_jsx("div", { className: "pointer-events-none absolute inset-0 rounded-2xl shadow-inner" }))] }));
-    }
-    const isConnectedCreator = data.isConnected;
-    const baseClassesCreator = isCompact
-        ? 'relative inline-flex min-w-[110px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-xs transition-all'
-        : 'relative flex min-w-[180px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-sm transition-all';
-    // Determine border color based on background color for better contrast
-    const getBorderColor = (color, isConnected) => {
-        if (isConnected) {
-            return '#22c55e'; // green-500
-        }
-        return isLightColor(color) ? '#666666' : '#9ca3af';
-    };
-    const creatorClass = isConnectedCreator
-        ? `${baseClassesCreator} ring-2 ring-green-200`
-        : `${baseClassesCreator} hover:border-blue-400 hover:shadow-md`;
-    return (_jsx("div", { className: creatorClass, style: {
-            backgroundColor: data.color,
-            borderColor: getBorderColor(data.color, isConnectedCreator),
-        }, children: _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("span", { className: `font-mono font-medium ${textClass}`, style: {
-                        color: isLight ? '#000000' : '#ffffff',
-                        textShadow: isLight ? '0 1px 2px rgba(255,255,255,0.8)' : '0 1px 2px rgba(0,0,0,0.5)',
-                    }, children: data.color }), _jsxs("div", { className: "flex items-center gap-2", children: [data.isConnected && (_jsx(Badge, { variant: "outline", className: "border-green-600 bg-green-500/90 text-xs text-white", children: "\u2713" })), data.isEditMode && (_jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6 hover:bg-black/20", onClick: (e) => {
-                                e.stopPropagation();
-                                data.onRemove();
-                            }, children: _jsx(X, { className: "h-3 w-3", style: {
-                                    color: isLight ? '#000000' : '#ffffff',
-                                    filter: isLight
-                                        ? 'drop-shadow(0 1px 2px rgba(255,255,255,0.8))'
-                                        : 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))',
-                                } }) }))] })] }) }));
-}
-//# sourceMappingURL=ColorNode.js.map
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Button as t}from"../../../components/ui/button";import{Badge as n}from"../../../components/ui/badge";import{X as r}from"lucide-react";function i(e){const o=function(e){const o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return o?{r:parseInt(o[1],16),g:parseInt(o[2],16),b:parseInt(o[3],16)}:null}(e);if(!o)return.5;const[t,n,r]=[o.r,o.g,o.b].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*t+.7152*n+.0722*r}function s(e){return i(e)>.5}export function ColorNode({data:i,variant:a="creator"}){const l="client"===a,d="compact"===i.displayMode,c=d?"text-[9px]":"text-[11px]",f=s(i.color);if(l){const t=i.isConnected?"relative flex h-full w-full items-center justify-center overflow-hidden rounded-2xl transition-all duration-200 ease-out":"relative inline-flex min-w-[110px] items-center justify-center overflow-hidden rounded-2xl border-2 px-3 py-2 transition-all duration-200 ease-out hover:border-blue-500 hover:shadow-md cursor-move";return o("div",{className:`${t} ${i.highlightClass??""}`,style:{...i.highlightStyle,backgroundColor:i.color,border:i.isConnected||i.isHighlighted?"none":void 0,borderColor:i.isConnected||i.isHighlighted?"transparent":f?"#666666":"#9ca3af",padding:i.isConnected?0:void 0},children:[i.isConnected&&i.label&&e("span",{className:"pointer-events-none absolute text-xs font-bold drop-shadow-md",style:{color:f?"#000000":"#ffffff"},children:i.label}),!i.isConnected&&!i.isHighlighted&&e("div",{className:"pointer-events-none absolute inset-0 rounded-2xl shadow-inner"})]})}const p=i.isConnected,x=d?"relative inline-flex min-w-[110px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-xs transition-all":"relative flex min-w-[180px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-sm transition-all";return e("div",{className:p?`${x} ring-2 ring-green-200`:`${x} hover:border-blue-400 hover:shadow-md`,style:{backgroundColor:i.color,borderColor:(u=i.color,m=p,m?"#22c55e":s(u)?"#666666":"#9ca3af")},children:o("div",{className:"flex w-full items-center justify-between",children:[e("span",{className:`font-mono font-medium ${c}`,style:{color:f?"#000000":"#ffffff",textShadow:f?"0 1px 2px rgba(255,255,255,0.8)":"0 1px 2px rgba(0,0,0,0.5)"},children:i.color}),o("div",{className:"flex items-center gap-2",children:[i.isConnected&&e(n,{variant:"outline",className:"border-green-600 bg-green-500/90 text-xs text-white",children:"✓"}),i.isEditMode&&e(t,{size:"icon",variant:"ghost",className:"h-6 w-6 hover:bg-black/20",onClick:e=>{e.stopPropagation(),i.onRemove()},children:e(r,{className:"h-3 w-3",style:{color:f?"#000000":"#ffffff",filter:f?"drop-shadow(0 1px 2px rgba(255,255,255,0.8))":"drop-shadow(0 1px 2px rgba(0,0,0,0.5))"}})})]})]})});var u,m}

package/dist/components/questions/components/ColorRegionClient.d.ts

@@ -9,4 +9,3 @@ interface ExtendedProps extends ReadAndColorObjectsClientProps {
 export type ColorRegionClientExportProps = ExtendedProps;
 export declare function ColorRegionClient(props: ExtendedProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=ColorRegionClient.d.ts.map