apex-ui-kit 2.12.1 → 2.13.0

package/dist/skill/apexui/references/security.md

@@ -0,0 +1,81 @@
+# Security (front end)
+
+No app is "100% secure", but these rules close the holes that real front ends ship with. Treat every item as required unless it clearly does not apply, and say so when you skip one.
+
+## 1. Secrets
+- Anything in the browser bundle is public. That includes every `VITE_*`, `NEXT_PUBLIC_*` and `REACT_APP_*` variable.
+- Never put API keys with write or billing access, database URLs, JWT secrets, SMTP passwords or service-account files in front-end code. Call your own server (or a serverless function) and keep the secret there.
+- Publishable keys that are designed to be public (Stripe publishable key, Firebase web config, Maps keys) are fine, but restrict them by domain in the provider's dashboard.
+- Add `.env*` to `.gitignore` (keep a committed `.env.example` with empty values). Never print secrets in logs, errors or chat replies.
+
+## 2. Cross-site scripting (XSS)
+- React escapes text by default. Do not undo it: avoid `dangerouslySetInnerHTML`. If you must render HTML (CMS content, markdown), sanitise it first with DOMPurify.
+- Never build `href`/`src` from user input without checking the protocol. Allow only `https:`, `http:`, `mailto:`, `tel:` and relative paths; block `javascript:` and `data:`.
+- Never `eval`, `new Function` or `setTimeout("string")`.
+
+```js
+export function safeUrl(url) {
+  try {
+    const u = new URL(url, window.location.origin);
+    return ["http:", "https:", "mailto:", "tel:"].includes(u.protocol) ? u.href : "#";
+  } catch {
+    return "#";
+  }
+}
+```
+
+## 3. Links and embeds
+- `target="_blank"` always with `rel="noopener noreferrer"`.
+- Third-party iframes: `sandbox` with the fewest permissions, `loading="lazy"`, `referrerpolicy="strict-origin-when-cross-origin"`.
+- Load third-party scripts only from trusted CDNs, pinned to an exact version, with Subresource Integrity (`integrity` + `crossorigin`) when the CDN supports it.
+
+## 4. Auth on the client
+- Keep session tokens in `httpOnly`, `Secure`, `SameSite=Lax` (or `Strict`) cookies set by the server. Do not store JWTs or refresh tokens in `localStorage` or `sessionStorage` (any XSS can read them).
+- Hiding a button is not access control. The server must check permission on every request.
+- Log out clears the server session; on 401 responses redirect to sign in.
+
+## 5. Forms
+- Validate on the client for UX (required, format, length) and again on the server for safety. Share the schema (for example Zod) when you can.
+- Limit lengths (`maxLength`), use correct `type`/`autocomplete`, never echo raw errors from the server that reveal internals.
+- Bot protection on public forms (sign up, contact): a honeypot field plus server-side rate limiting, or a CAPTCHA provider.
+- File inputs: restrict `accept`, check size before upload, and let the server re-check type and size.
+
+## 6. Security headers (set by the host)
+Example for Vercel (`vercel.json`); adapt the CSP to the domains you actually use, then test that nothing breaks.
+
+```json
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Content-Security-Policy", "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self'; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'" },
+        { "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains; preload" },
+        { "key": "X-Content-Type-Options", "value": "nosniff" },
+        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
+        { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
+        { "key": "X-Frame-Options", "value": "DENY" }
+      ]
+    }
+  ]
+}
+```
+Netlify uses `_headers`; Nginx uses `add_header`. WebGL components need `script-src 'self'` only; Google Fonts needs the two font domains above.
+
+## 7. Dependencies and build
+- Install packages only from npm with exact names (watch for typosquats). Prefer well-maintained packages.
+- Run `npm audit` and fix high and critical issues; turn on Dependabot or Renovate.
+- Commit the lockfile. Do not ship source maps with secrets in them; production builds should not expose `.env` or internal URLs.
+
+## 8. Privacy
+- Ask before using camera, microphone, location or notifications, and only when the user acts.
+- Cookie and analytics consent where the law requires it (EU, UK, India DPDP). Load analytics after consent.
+- Do not log personal data to the console or third-party error trackers; scrub emails and tokens.
+
+## 9. Before you ship
+- [ ] No secrets in the bundle (search the build output for `sk_`, `secret`, `password`, `mongodb+srv`, `BEGIN PRIVATE KEY`).
+- [ ] No `dangerouslySetInnerHTML` with unsanitised input; all user URLs pass `safeUrl`.
+- [ ] Every `target="_blank"` has `rel="noopener noreferrer"`.
+- [ ] Tokens live in httpOnly cookies, not web storage.
+- [ ] Security headers set and checked (for example with securityheaders.com).
+- [ ] `npm audit` clean of high and critical issues.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "license": "MIT",
-  "description": "117 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "116 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
   "repository": {
     "type": "git",
@@ -26,7 +26,10 @@
     "webgl",
     "ai ui",
     "apexui",
-    "apex ui kit"
+    "apex ui kit",
+    "ai agent skill",
+    "claude skill",
+    "cursor rules"
   ],
   "type": "module",
   "main": "dist/cli/index.js",
@@ -37,7 +40,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc && copyfiles -u 2 src/ApexUI-Kit/**/* dist/ApexUI-Kit"
+    "build": "tsc && copyfiles -u 2 src/ApexUI-Kit/**/* dist/ApexUI-Kit && copyfiles -u 1 src/skill/**/* dist"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.0.0",

package/dist/ApexUI-Kit/templates/CardSwap3D/CardSwap3D.jsx

@@ -1,104 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { motion } from "framer-motion";
-import { Code2, Layers, Sparkles, Zap } from "lucide-react";
-
-/*
- * Card Swap 3D: cards stacked in real 3D, turned toward the viewer and
- * receding into the distance. On a timer the front card drops away and
- * returns to the back while the rest step forward. Pauses while hovered;
- * click to swap now. The whole stack scales down to fit narrow containers.
- */
-
-const DEFAULT_CARDS = [
-    { icon: Sparkles, title: "Smooth", body: "Springs tuned to feel natural, never floaty." },
-    { icon: Layers, title: "Composable", body: "Drop components in and style them with Tailwind." },
-    { icon: Code2, title: "Yours", body: "Copy the source or add it with one CLI command." },
-    { icon: Zap, title: "Fast", body: "Transforms and opacity only, 60fps on phones." },
-];
-
-const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, depth = 70, tilt = 18, skew = 0, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {
-    // order[0] is the card in front.
-    const [order, setOrder] = useState(() => cards.map((_, i) => i));
-    const [dropping, setDropping] = useState(null);
-    const [paused, setPaused] = useState(false);
-    const [fit, setFit] = useState(1);
-    const outer = useRef(null);
-    const dark = theme !== "light";
-    const n = cards.length;
-    // Footprint of the whole stack in rem (card plus the steps behind it).
-    // (+5: the 3D turn makes the cards project a little wider than they are.)
-    const footW = width + distanceX * (n - 1) + 5;
-    const footH = width * 0.68 + distanceY * (n - 1) + 2;
-
-    const swap = () => {
-        if (dropping !== null) return;
-        setDropping(order[0]);
-        setTimeout(() => {
-            setOrder((o) => [...o.slice(1), o[0]]);
-            setDropping(null);
-        }, 520);
-    };
-
-    useEffect(() => {
-        if (paused) return undefined;
-        const id = setInterval(swap, delay);
-        return () => clearInterval(id);
-    });
-
-    // Scale the stack down when its container is narrower than its footprint.
-    useLayoutEffect(() => {
-        const el = outer.current?.parentElement;
-        if (!el) return undefined;
-        const ro = new ResizeObserver(() => {
-            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-            setFit(Math.min(1, el.clientWidth / (footW * rem)));
-        });
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [footW]);
-
-    return (
-        <div ref={outer} className={`relative mx-auto ${className}`} style={{ width: `${footW * fit}rem`, height: `${footH * fit}rem` }}>
-            <div
-                className="absolute left-0 top-0 origin-top-left [perspective:1200px]"
-                style={{ width: `${footW}rem`, height: `${footH}rem`, transform: `scale(${fit})` }}
-                onPointerEnter={() => pauseOnHover && setPaused(true)}
-                onPointerLeave={() => setPaused(false)}
-                onClick={swap}
-            >
-                <div className="absolute [transform-style:preserve-3d]" style={{ left: "2.5rem", bottom: "1rem", width: `${width}rem`, height: `${width * 0.68}rem`, transform: `rotateY(${-tilt}deg) rotateX(${tilt * 0.35}deg)` }}>
-                    {cards.map((card, i) => {
-                        const slot = order.indexOf(i);
-                        const isDropping = dropping === i;
-                        const Icon = card.icon ?? Sparkles;
-                        return (
-                            <motion.div
-                                key={i}
-                                className={`absolute inset-0 cursor-pointer overflow-hidden rounded-2xl border p-6 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
-                                style={{ zIndex: isDropping ? 60 : n - slot, boxShadow: "0 30px 60px -28px rgba(0,0,0,0.65)" }}
-                                initial={false}
-                                animate={
-                                    isDropping
-                                        ? { x: "-2rem", y: "16rem", z: 120, rotateZ: -8, skewY: skew, opacity: 0 }
-                                        : { x: `${slot * distanceX}rem`, y: `${-slot * distanceY}rem`, z: -slot * depth, rotateZ: 0, skewY: skew, opacity: slot > 4 ? 0 : 1 - slot * 0.12 }
-                                }
-                                transition={isDropping ? { duration: 0.5, ease: [0.55, 0, 0.8, 0.2] } : { type: "spring", stiffness: 150, damping: 21 }}
-                            >
-                                <div className="flex items-center gap-2.5">
-                                    <span className="grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
-                                        <Icon className="h-[18px] w-[18px]" />
-                                    </span>
-                                    <p className="text-lg font-semibold">{card.title}</p>
-                                </div>
-                                <p className={`mt-3 text-[0.92rem] leading-relaxed ${dark ? "text-white/60" : "text-neutral-500"}`}>{card.body}</p>
-                                <div className="pointer-events-none absolute -bottom-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl" style={{ background: accentColor }} />
-                            </motion.div>
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default CardSwap3D;