npm - @deriv-ds/design-intelligence-layer - Versions diffs - 0.1.0 → 0.2.0 - Mend

@deriv-ds/design-intelligence-layer 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/AGENTS.md +14 -14
package/README.md +22 -22
package/dist/index.cjs +161 -160
package/dist/index.cjs.map +1 -1
package/dist/index.js +161 -160
package/dist/index.js.map +1 -1
package/guides/design-system-guide/trading-game-ds-guide.md +9 -9
package/guides/personas/trading-game-player-field-guide.md +4 -112
package/guides/rules/design-system-consuming-project.mdc +17 -17
package/package.json +1 -1
package/src/styles.css +1489 -202

package/guides/design-system-guide/trading-game-ds-guide.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Trading Game Design System Guide
-> **Package:** `@trading-game/design-intelligence-layer`
+> **Package:** `@deriv-ds/design-intelligence-layer`
 > **Audience:** AI agents and developers building UI for the Trading Game. This is the single source of truth for setting up and using the design system in any project.
 ---
@@ -82,7 +82,7 @@ Each component in the catalogue is tagged:
 ### Step 1 — Install the package
 ```bash
-npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age
+npm install @deriv-ds/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age
 ```
 ### Step 2 — Add CSS imports
@@ -92,8 +92,8 @@ In your main CSS file (e.g. `globals.css` or `index.css`):
 ```css
 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
 @import "tailwindcss";
-@import "@trading-game/design-intelligence-layer/styles";
-@source "../node_modules/@trading-game/design-intelligence-layer/dist";
+@import "@deriv-ds/design-intelligence-layer/styles";
+@source "../node_modules/@deriv-ds/design-intelligence-layer/dist";
 ```
 > **Note:** Fonts are loaded via a direct Google Fonts `@import` URL. Do NOT use `next/font`.
@@ -105,7 +105,7 @@ The design system is light-first. No extra class is required on `<html>` for the
 ### Step 4 — Import components
 ```tsx
-import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
+import { Button, Card, Badge } from "@deriv-ds/design-intelligence-layer"
 ```
 ---
@@ -457,7 +457,7 @@ All buttons: `font-display font-bold`, sentence case (no `uppercase`, no `tracki
 ## 8 — Available Components
-> **All components below are exported from `@trading-game/design-intelligence-layer`.**
+> **All components below are exported from `@deriv-ds/design-intelligence-layer`.**
 > - If a component is listed → import and use it. Do NOT re-implement.
 > - If NOT listed → STOP and ask the user (see Rule 1).
 > - For props, variants, sizes, and sub-components → inspect the package's TypeScript types after installation.
@@ -467,13 +467,13 @@ All buttons: `font-display font-bold`, sentence case (no `uppercase`, no `tracki
 All components use the same import path:
 ```tsx
-import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
+import { Button, Card, Badge } from "@deriv-ds/design-intelligence-layer"
 ```
 ### Example — composed component with sub-components
 ```tsx
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@trading-game/design-intelligence-layer"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@deriv-ds/design-intelligence-layer"
 <Dialog>
   <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
@@ -585,7 +585,7 @@ These are styling behaviors you can't discover from TypeScript types alone:
 > Blocks are fully composed UI sections built from design system primitives. They appear in the **Blocks** tab of the playground.
 > - Blocks are **NOT exported** from the npm package — they are playground demonstrations only.
-> - To build them in a consuming project, import the underlying components (`Button`, etc.) from `@trading-game/design-intelligence-layer` and compose them manually using design tokens only.
+> - To build them in a consuming project, import the underlying components (`Button`, etc.) from `@deriv-ds/design-intelligence-layer` and compose them manually using design tokens only.
 > - Do NOT mistake a Block for a component — it will not appear in Rule 1's component list.
 ### NavBar

package/guides/personas/trading-game-player-field-guide.md CHANGED Viewed

@@ -6,32 +6,12 @@ Version 1.0 · 2026
 ---
-## The one thing that ties them all together
-> "This isn't gambling dressed up in crypto jargon."
-Nobody says this sentence out loud. They think it. Constantly. About their own behaviour.
-These players are not degenerate gamblers. They are not reckless. They are people with strong opinions about where things go next — markets, matches, prices, events — who have found platforms that let them back those opinions with real money and get an answer fast.
-The self-image they're protecting is: *I have good reads.* Not "I got lucky." Not "I enjoy risk." I. Have. Good. Reads.
-Every piece of trading.game copy is either reinforcing that self-image or accidentally destroying it. There is no neutral position. Copy that says "your selection was incorrect" destroys it. Copy that says "market moved at the last second" preserves it. The player in both cases lost. What they do next depends entirely on which sentence they read.
----
 ## Three modes, one player
 ### Mode 1 — The Edge Seeker
 **The self-image sentence:** *"I have an edge. I've done the research."*
-This is the player who genuinely believes their read is information-based. They've watched enough charts, followed enough accounts, tracked enough outcomes to feel like they see things the market hasn't priced in yet. They know the Polymarket stat: during the 2024 US election, prediction markets outperformed every major poll. They know this because it confirms something they already believe about themselves — that paying attention is a competitive advantage.
-They approach a trade the way the Polymarket Playbook describes catalyst momentum trading: *"Traders with real-time news feeds can enter positions in the first 30 seconds and exit as late-movers pile in."* That's who they think they are. The early mover. The one who saw it first.
-In practice, they're usually the retail trader the article was warning against: *"If you're still betting based on gut feelings and Twitter polls, you're exiting liquidity for algorithmic traders."* But they don't know this. And the product doesn't need to tell them. The product needs to give their read a fast resolution and let reality do the rest.
 **What they actually say:**
 - *"This level has held three times. I'm not guessing, I'm reading the chart."*
@@ -40,16 +20,6 @@ In practice, they're usually the retail trader the article was warning against:
 - *"4 for 5 this week. My read on this setup is getting cleaner."*
 - *"Down today but the process was right. Bad fill, not a bad read."*
-That last line. *Down today but the process was right.* This is the most important sentence in the field guide. It is the cognitive move the brain makes to survive a loss without abandoning the system. It separates someone who goes again from someone who uninstalls. trading.game copy needs to hand them this sentence, or a version of it, every time they bust.
-**What they brag about:**
-Not money. Timing. *"I got in before the move."* Specifically, the moment of being right before other people realise they're wrong. The 10x hit matters less than the fact that they saw it coming. Screenshots go up on X with the chart annotated: *"Flagged this level two days ago. Look at that."*
-**What kills the mode:**
-Any framing that suggests randomness. If the resolution feels arbitrary — if the line moves in a way that reads as noise, not signal — they don't just lose, they lose trust in the product. They need the mechanic to feel like it responds to real information, even when the underlying feed is synthetic. The chart has to look like a chart. The resolution has to feel like it followed the logic of the market, even when the market is a GBM simulation.
 **Copy that works:**
 - *"The chart moved. You called it."*
@@ -69,12 +39,6 @@ Any framing that suggests randomness. If the resolution feels arbitrary — if t
 **The self-image sentence:** *"I'm not just playing. I have rules."*
-This player has a spreadsheet, or thinks they do. They've been on Stake or Rollbit. They know the house edge — they can tell you the exact percentage. They've read about martingale. They've tested martingale. They've busted on martingale twice and now have a modified version that caps at three steps, which they believe has eliminated the downside while preserving the upside.
-They are not delusional. They understand probability better than most. What they're doing is building a model — a framework that makes the activity feel like engineering rather than gambling. The model is usually wrong. But the act of having a model is what keeps them going, because it means every session is data, not just outcome.
-From the Polyburg psychology research: *"Accountability pressure — when people know they'll be held accountable for their decisions, they engage in more thorough information processing."* This player feels accountable to their own system. The system is the thing. Winning validates the system. Losing exposes a flaw in the current version, which needs to be iterated on. They will be back tomorrow with a tighter ruleset.
 **What they actually say:**
 - *"I go max 3 martingale steps then flat bet. That's the discipline piece most people skip."*
@@ -83,25 +47,11 @@ From the Polyburg psychology research: *"Accountability pressure — when people
 - *"My win rate over 80 samples on this setup is 63%. That's not a guess, that's a sample."*
 - *"One more to get back to flat. Just one."*
-That last line is not a strategy. It is the sound of the loop engaging. It is the most expensive sentence in crypto gambling. trading.game copy should never be the thing that triggers it — but it should absolutely understand that this is what's running in the background.
-**What they brag about:**
-Session stats. Monthly net figures. System iteration — *"New rules: max 5 steps, not 7. Adjusted after last week."* The public post that says *"Month review: +340 USDT net, 12 winning sessions, 8 losing. Still refining"* is not a win post. It is a system update. The brag is the discipline, not the number.
-Also: multipliers, not amounts. *"Hit 200x on a 0.01 stake"* is the screenshot. The absolute return is irrelevant. The multiplier is the story.
-**What kills the mode:**
-Loss streaks without narrative. Five busts in a row with no contextual copy leaves the brain with nothing to hold onto. *"BUST. BUST. BUST. BUST. BUST."* feels rigged. Each bust needs one line that gives the loss a shape — *"Tight range. Market didn't move."* / *"Vol index pinned at resistance."* — something that makes the loss legible without assigning blame.
-Also: withdrawal friction. This community has long institutional memory around platforms that make it easy to deposit and hard to withdraw. It is the single most common Reddit complaint across Stake, Rollbit, and every Deriv-adjacent product. If trading.game makes withdrawal clean and instant, say so explicitly. The bar is low because the competition set it low.
 **Copy that works:**
 - *"Bust. Market barely moved. Try a different setup."*
 - *"System running? 3-game streak. Keep the rules tight."*
-- *"Withdrawal confirmed. On its way."* (no friction, no delay copy)
+- *"Withdrawal confirmed. On its way."*
 - *"Your stats. 7 trades. 4 wins. 57%."*
 **Copy that kills it:**
@@ -116,42 +66,18 @@ Also: withdrawal friction. This community has long institutional memory around p
 **The self-image sentence:** *"I called it. And I can prove it."*
-This player's win only counts if someone witnessed it. The prediction is not complete until it is posted. They run a public record — a spreadsheet linked in their bio, a weekly X post, a pinned Discord message. The number that matters is not their balance. It is their running unit total and their public win rate.
-From the Polyburg piece: the prediction market creates *"accountability pressure"* that makes people think more carefully. But for this player, the accountability isn't to the money. It's to the audience. They have built an identity around being demonstrably right over time. A single bad week is a variance event. A bad month is a crisis of identity.
-They are in esports prediction communities. Fantasy sports leagues. Kalshi. They liked Polymarket before it got too slow and too liquid — when the edge was in being first to a niche market that the crowd hadn't found yet. They are, in the language of every crypto community they've ever inhabited, *early.*
-Being early is not a strategy. It is a personality trait that functions as a brand. *"I was on trading.game before anyone knew about it."* That sentence, said six months from now in a Discord, is the first-mover acquisition flywheel. This is the person who tells people. Write for them and the next hundred come for free.
 **What they actually say:**
 - *"Week 22: 9-5, +3.1 units. Running total since January: +31.2 units. Screenshot below."*
-- *"I had this market at 70% when Kalshi had it at 55%. Took it. It resolved 100%. That's what reading the room looks like."*
 - *"Everyone was on the favourite. I took the value side. Positive EV call even if it doesn't land."*
-- *"Got in on [platform] when nobody knew about it. Already at level 4."*
 - *"My friends bet for fun. I track my record. There's a difference."*
-- *"Statistically it happens. Still a good bet at those odds."* (loss framing)
-That last line is the prediction market version of *"direction was right, timing was off."* It is the self-image protection sentence for someone who thinks in probability. They didn't lose. The low-probability outcome materialised. The decision was still correct given the information available. The market just disagreed this once.
-**What they brag about:**
-The public record above everything. Long shot calls that landed. Being early to a platform or a market. The specific mechanic of a near-win that they survived — *"55.50, I needed 55.51, I had under, I won."* The granularity of that number is the whole point. It proves they were paying attention.
-They share results through the product's own UI. The result card, the streak, the win state — these are designed content. If the screenshot of a trading.game result is ugly or generic, it won't get posted. The result screen is a distribution channel.
-**What kills the mode:**
-Generic copy on win and loss states. *"Well done!"* means nothing to someone who just called a five-tick streak. The win state should acknowledge the specific mechanic. *"5-tick streak. Vol moved exactly where you said."* is a sentence they will screenshot. *"You won! Claim your reward."* is not.
-Also: anything that makes them feel like a beginner. Tutorial prompts, explanatory overlays mid-game, onboarding copy that explains how markets work — all of this is an insult. They know how markets work. They've been tracking them since before trading.game existed.
+- *"Statistically it happens. Still a good bet at those odds."*
 **Copy that works:**
 - *"Called it. +1,250 USDT. 5-tick streak."*
-- *"You were early on that move. Vol 75 confirmed."*
-- *"Streak: 7. Post this."* (literal invitation to share)
+- *"You were early on that move. Confirmed."*
+- *"Streak: 7. Post this."*
 - *"Bust. Still 6 from 9 today. Record stands."*
 **Copy that kills it:**
@@ -162,40 +88,8 @@ Also: anything that makes them feel like a beginner. Tutorial prompts, explanato
 ---
-## Where the modes bleed together
-The same player, in a single session:
-Opens the app in Edge Seeker mode — *"I've been watching this vol index all week, I have a read."* Places three trades. Wins two. Third one busts. Drops into System Runner mode — *"Okay, variance. My system long-term is positive. One more."* Wins the fourth. Screenshots it. Posts it in Mode 3 with the caption: *"Back to even. System held."*
-That is one person. One session. Three modes.
-The copy implication: every state needs to be written to land across all three simultaneously. *"Bust. Market moved at the last tick."* gives Mode 1 a narrative (the market, not their read). Tells Mode 2 the system wasn't broken (external event). Lets Mode 3 post *"Bust but you can see the vol spike at the exact moment, setup was right"* without embarrassment.
-One sentence. Three self-images intact. Player goes again.
----
-## The near-miss — the mechanic no one talks about
-This applies in all three modes.
-When the price lands 0.01 from the target — when the dice rolls 55.49 and they needed 55.50 — the brain does not register a loss. It registers *I was right and the resolution was imprecise.* This is neurologically distinct from a clean loss. The near-miss is more motivating than a win, because a win ends the tension. A near-miss keeps it alive.
-The animation of the resolution — the line landing one tick short, the number stopping just before the target — is not a UX detail. It is the single most powerful retention mechanic in the product. It should be treated with the same deliberateness as any major feature.
-Copy for near-miss states should never say the player was wrong. They almost weren't.
-- *"One tick short. The read was right."*
-- *"55.49. You had 55.50. Next one."*
-- *"Close. Vol reversed at the last second."*
----
 ## What trading.game is selling, in their language
-Not their words. Theirs.
 | What the product is | What the player calls it |
 |---|---|
 | A synthetic GBM price feed | *"A live market"* |
@@ -206,8 +100,6 @@ Not their words. Theirs.
 | A win state | *"Called it"* |
 | A loss state | *"Market moved. Next one."* |
-The product doesn't have to lie about what it is. It just has to use the player's language for it. They are not playing a synthetic random number game. They are testing a read against a live market. The first sentence feels like gambling. The second feels like trading.game.
 ---
 *trading.game Player Field Guide — v1.0. Use alongside the Content Style Guide when writing any player-facing copy. These are not character studies — they are the modes the player is in when they read what you write.*

package/guides/rules/design-system-consuming-project.mdc CHANGED Viewed

@@ -1,14 +1,14 @@
 ---
-description: Enforce correct usage of the @trading-game/design-intelligence-layer npm package. Apply whenever building UI in a project that has the package installed — before writing any component, layout, or styled element.
+description: Enforce correct usage of the @deriv-ds/design-intelligence-layer npm package. Apply whenever building UI in a project that has the package installed — before writing any component, layout, or styled element.
 globs: ["**/*.tsx", "**/*.jsx", "**/*.ts", "**/*.css"]
 alwaysApply: true
 ---
-# @trading-game/design-intelligence-layer — AI Agent Usage Rules
+# @deriv-ds/design-intelligence-layer — AI Agent Usage Rules
 ## Rule 1 — Check the package before writing any custom UI
-**BEFORE** writing any `<div>`, `<button>`, `<span>`, or other element styled with Tailwind classes, you MUST check if a component already exists in `@trading-game/design-intelligence-layer`.
+**BEFORE** writing any `<div>`, `<button>`, `<span>`, or other element styled with Tailwind classes, you MUST check if a component already exists in `@deriv-ds/design-intelligence-layer`.
 ### Available components (check this list first)
@@ -18,9 +18,9 @@ Accordion, Alert, AlertDialog, Avatar, AvatarGroup, Badge, Breadcrumb, Button, C
 ```
 Does a component exist in the list above?
-  YES → Import it from @trading-game/design-intelligence-layer. Do NOT re-implement it.
+  YES → Import it from @deriv-ds/design-intelligence-layer. Do NOT re-implement it.
   NO  → STOP. Tell the user:
-        "The [ComponentName] component does not exist in @trading-game/design-intelligence-layer.
+        "The [ComponentName] component does not exist in @deriv-ds/design-intelligence-layer.
          Options:
          (a) Build a custom one using design system tokens only
          (b) Use a different existing component
@@ -31,7 +31,7 @@ Does a component exist in the list above?
 ### Correct import pattern
 ```tsx
-import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
+import { Button, Card, Badge } from "@deriv-ds/design-intelligence-layer"
 ```
 ---
@@ -61,8 +61,8 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 ✅ bg-primary             — brand blue #2323FF — CTAs and primary actions
 ✅ bg-primary-hover       — darker blue #0B0BD2 — primary button hover
 ✅ bg-secondary-hover     — light grey #EEEEEE — outline/secondary button hover
-✅ bg-semantic-win        — green — profit/positive
-✅ bg-semantic-loss       — red — loss/negative
+✅ bg-win                 — green — profit/positive
+✅ bg-loss                — red — loss/negative
 ```
 #### Text tokens
@@ -72,8 +72,8 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 ✅ text-on-subtle                   — secondary text (mid grey)
 ✅ text-primary                     — brand blue #2323FF
-✅ text-semantic-win                — green — profit/positive
-✅ text-semantic-loss               — red — loss/negative
+✅ text-win                         — green — profit/positive
+✅ text-loss                        — red — loss/negative
 ```
 #### Border tokens
@@ -119,9 +119,9 @@ Token rules apply **only** to: color (bg, text, border, ring, shadow color), bor
 ### Correct CSS setup in the consuming project
 ```css
-@import "@trading-game/design-intelligence-layer/styles";
+@import "@deriv-ds/design-intelligence-layer/styles";
 @import "tailwindcss";
-@source "../node_modules/@trading-game/design-intelligence-layer/dist";
+@source "../node_modules/@deriv-ds/design-intelligence-layer/dist";
 ```
 ### Vite projects — required plugin
@@ -185,7 +185,7 @@ Wait for confirmation before proceeding.
 ## Rule 8 — Blocks are playground-only (not package exports)
-**Blocks** are pre-composed UI sections (e.g. NavBar) demonstrated in the **Blocks** tab of the design system playground. They are **not** exported from `@trading-game/design-intelligence-layer`.
+**Blocks** are pre-composed UI sections (e.g. NavBar) demonstrated in the **Blocks** tab of the design system playground. They are **not** exported from `@deriv-ds/design-intelligence-layer`.
 ```
 ❌ Do NOT import blocks from the package — they don't exist there
@@ -204,11 +204,11 @@ Wait for confirmation before proceeding.
 ## Rule 7 — Package version upgrades (stay aligned with the published design system)
-When the user asks to **update**, **upgrade**, or **install the latest** `@trading-game/design-intelligence-layer`, or after the dependency version changes in `package.json`:
+When the user asks to **update**, **upgrade**, or **install the latest** `@deriv-ds/design-intelligence-layer`, or after the dependency version changes in `package.json`:
 ### How updates actually apply
-- If the project **imports components only** from `@trading-game/design-intelligence-layer`, new styles and behavior come from **`node_modules/.../dist`** after **`npm install` / `npm ci` and a dev or production build**. The package is the source of truth — no AI step is required for those imports to change.
+- If the project **imports components only** from `@deriv-ds/design-intelligence-layer`, new styles and behavior come from **`node_modules/.../dist`** after **`npm install` / `npm ci` and a dev or production build**. The package is the source of truth — no AI step is required for those imports to change.
 - If the repo **contains copied or forked** files that mirror package components (e.g. a local `components/ui/button.tsx` with full implementation), **`npm install` does not update those files.** They stay stale until someone reconciles them.
 ### What you MUST do after a design-system version bump
@@ -216,10 +216,10 @@ When the user asks to **update**, **upgrade**, or **install the latest** `@tradi
 1. **Search for local duplication** — Look for UI files that re-implement package exports (`components/ui/`, `@/components/ui`, etc.). Flag any file that is not a **thin re-export** or **documented wrapper** around the package.
 2. **Reconcile** — Prefer **removing** duplicate implementations and **importing from the package**. If a fork must stay, align it with the **exact** current implementation in the installed package (or tag on GitHub) and document why it diverges (file name + reason).
 3. **Notify on replace** — If you **delete, replace, or substantially overwrite** local component code to match the package, **stop and tell the user clearly**, e.g.
-   `Aligned [ComponentName] with @trading-game/design-intelligence-layer@[version]. Previous local behavior or classes: [short summary]. Re-apply needs via package variants/props, tokens, or a thin wrapper only if product requires it.`
+   `Aligned [ComponentName] with @deriv-ds/design-intelligence-layer@[version]. Previous local behavior or classes: [short summary]. Re-apply needs via package variants/props, tokens, or a thin wrapper only if product requires it.`
 4. **Review `className` overrides** — Parent apps often pass `className` on DS components. Old overrides (radius, colors, shadows) can **hide** new defaults (e.g. pill buttons). After upgrade, scan for overrides on DS components and trim or adjust them when they conflict with the new design.
 5. **Refresh Cursor rules** — The package ships `guides/rules/design-system-consuming-project.mdc`. Cursor does **not** read it from `node_modules` automatically. Tell the user to re-copy it (see README **AI Agent Setup → Cursor**) so agent instructions match the release.
-6. **Tailwind** — Confirm `@source` still points at `node_modules/@trading-game/design-intelligence-layer/dist` so Tailwind v4 emits classes from the updated bundle.
+6. **Tailwind** — Confirm `@source` still points at `node_modules/@deriv-ds/design-intelligence-layer/dist` so Tailwind v4 emits classes from the updated bundle.
 ### Do not assume

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-ds/design-intelligence-layer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Deriv Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",