twntyx-css 1.0.0 → 1.0.2

package/llm/components/demo.json

@@ -0,0 +1,88 @@
+{
+  "id": "demo",
+  "name": "Demo",
+  "status": "preview",
+  "summary": "Documentation and contract metadata for Demo in the twntyX design system.",
+  "keywords": [
+    "demo"
+  ],
+  "sourcePaths": [
+    "app/design-system/demo/page.js",
+    "assets/styles/modal.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "demo",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "demo"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "status",
+      "tab",
+      "tablist"
+    ],
+    "aria": [
+      "aria-label",
+      "aria-selected"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [
+      "status",
+      "tab",
+      "tablist"
+    ],
+    "requiredAria": [
+      "aria-label",
+      "aria-selected"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'demo' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-overlay",
+    "background-surface",
+    "line-default"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/demo.html",
+      "description": "Minimal canonical Demo usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/getting-started.json

@@ -1,11 +1,20 @@
 {
   "id": "getting-started",
-  "name": "Getting Started",
-  "status": "preview",
-  "summary": "Documentation and contract metadata for Getting Started in the twntyX design system.",
+  "name": "Getting started",
+  "status": "stable",
+  "summary": "Install **twntyx-css**, import the global stylesheet, extend your Tailwind config, and start building with framework-agnostic components and machine-readable LLM metadata.",
   "keywords": [
+    "ai",
     "getting started",
-    "getting-started"
+    "getting-started",
+    "install",
+    "installation",
+    "llm",
+    "nextjs",
+    "setup",
+    "tailwind",
+    "vite",
+    "webpack"
   ],
   "sourcePaths": [
     "app/design-system/getting-started/page.js"
@@ -55,7 +64,7 @@
     {
       "id": "canonical",
       "file": "examples/getting-started.html",
-      "description": "Minimal canonical Getting Started usage."
+      "description": "Minimal canonical Getting started usage."
     }
   ],
   "composition": {

package/llm/components/icons-reference.json

@@ -2,7 +2,7 @@
   "id": "icons-reference",
   "name": "Icons reference",
   "status": "stable",
-  "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons), which provides us with an extensive icon library with over 2,500 glyphs",
+  "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.style=Rounded&icon.query=soun&icon.size=24) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
   "keywords": [
     "assets",
     "collection",

package/llm/components/loader.json

@@ -96,7 +96,8 @@
     "core-ui-200",
     "core-ui-700",
     "core-white",
-    "line-strong"
+    "line-strong",
+    "text-default"
   ],
   "examples": [
     {

package/llm/components/menu.json

@@ -21,6 +21,7 @@
   ],
   "sourcePaths": [
     "app/design-system/menu/page.js",
+    "assets/styles/chat.css",
     "assets/styles/menu.css"
   ],
   "apiModel": "html-class",
@@ -162,12 +163,21 @@
   ],
   "tokenUsage": [
     "background-brand",
+    "background-error",
+    "background-page",
     "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "core-black",
+    "core-white",
     "line-brand",
     "line-default",
+    "line-strong",
     "text-brand",
     "text-default",
     "text-disabled",
+    "text-link",
+    "text-link-hover",
     "text-secondary",
     "text-tertiary"
   ],

package/llm/components/popover.json

@@ -11,7 +11,7 @@
     "panel",
     "popover",
     "popoverTarget",
-    "popoverTargetaction",
+    "popoverTargetAction",
     "popup",
     "tooltip"
   ],
@@ -151,9 +151,7 @@
   "tokenUsage": [
     "background-surface",
     "line-default",
-    "text-default",
-    "text-secondary",
-    "text-tertiary"
+    "text-default"
   ],
   "examples": [
     {

package/llm/examples/chat-ai.html

@@ -0,0 +1 @@
+<div class="chat-ai">AI chat structure</div>

package/llm/examples/chat-footer.html

@@ -0,0 +1 @@
+<div class="chat-footer">Chat footer</div>

package/llm/examples/chat-person-to-person.html

@@ -0,0 +1 @@
+<div class="chat">Person to person chat structure</div>

package/llm/examples/chat.html

@@ -1 +1 @@
-<div class="chat chat-secondary">Chat</div>
+<div class="chat">Chat</div>

package/llm/examples/demo.html

@@ -0,0 +1 @@
+<div class="demo">Demo</div>

package/llm/examples/getting-started.html

@@ -1 +1 @@
-<div class="getting-started">Getting Started</div>
+<div class="getting-started">Getting started</div>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.0",
+  "designSystemVersion": "1.0.2",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "7e17140f9f9bd46722b67daac0578dfe19eed83d9e2a0cffa1585850bde1f505",
+  "sourceFingerprint": "a3ddc83af58ecd5ab60ff5baae77e3b421a6e9687177f04288a3c00ee03e8130",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",
@@ -375,15 +375,69 @@
       "id": "chat",
       "name": "Chat",
       "file": "components/chat.json",
+      "status": "preview",
+      "summary": "Documentation and contract metadata for Chat in the twntyX design system.",
+      "keywords": [
+        "chat"
+      ]
+    },
+    {
+      "id": "chat-ai",
+      "name": "AI chat structure",
+      "file": "components/chat-ai.json",
       "status": "stable",
-      "summary": "Chat component for displaying conversations between users or with AI assistants.",
+      "summary": "AI chat conversation patterns with text, media, MCP bubbles, loading, and assistant response loop simulations.",
       "keywords": [
         "ai chat",
+        "assistant",
         "chat",
+        "chat ai",
+        "chat-ai",
         "chatbot",
-        "communication",
+        "loading state",
+        "mcp fallback",
+        "mcp result",
+        "mcp tool action",
+        "new message state"
+      ]
+    },
+    {
+      "id": "chat-footer",
+      "name": "Chat footer",
+      "file": "components/chat-footer.json",
+      "status": "stable",
+      "summary": "Chat composer/footer patterns including the current footer and a full variant with file upload trigger, model selector, and dictation simulation.",
+      "keywords": [
+        "attachment",
+        "chat",
+        "chat footer",
+        "chat input",
+        "chat-footer",
+        "composer",
+        "dictation",
+        "footer",
+        "ghost select",
+        "model selector"
+      ]
+    },
+    {
+      "id": "chat-person-to-person",
+      "name": "Person to person chat structure",
+      "file": "components/chat-person-to-person.json",
+      "status": "stable",
+      "summary": "Conversation patterns between people, including text, image attachments, MCP content, loading and new-message simulation states.",
+      "keywords": [
+        "chat",
+        "chat person to person",
+        "chat structure",
+        "chat-person-to-person",
         "conversation",
-        "messages"
+        "human chat",
+        "loading state",
+        "mcp",
+        "message attachments",
+        "messages",
+        "person to person"
       ]
     },
     {
@@ -558,6 +612,16 @@
         "time"
       ]
     },
+    {
+      "id": "demo",
+      "name": "Demo",
+      "file": "components/demo.json",
+      "status": "preview",
+      "summary": "Documentation and contract metadata for Demo in the twntyX design system.",
+      "keywords": [
+        "demo"
+      ]
+    },
     {
       "id": "divider",
       "name": "Divider",
@@ -671,13 +735,22 @@
     },
     {
       "id": "getting-started",
-      "name": "Getting Started",
+      "name": "Getting started",
       "file": "components/getting-started.json",
-      "status": "preview",
-      "summary": "Documentation and contract metadata for Getting Started in the twntyX design system.",
+      "status": "stable",
+      "summary": "Install **twntyx-css**, import the global stylesheet, extend your Tailwind config, and start building with framework-agnostic components and machine-readable LLM metadata.",
       "keywords": [
+        "ai",
         "getting started",
-        "getting-started"
+        "getting-started",
+        "install",
+        "installation",
+        "llm",
+        "nextjs",
+        "setup",
+        "tailwind",
+        "vite",
+        "webpack"
       ]
     },
     {
@@ -685,7 +758,7 @@
       "name": "Icons reference",
       "file": "components/icons-reference.json",
       "status": "stable",
-      "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons), which provides us with an extensive icon library with over 2,500 glyphs",
+      "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.style=Rounded&icon.query=soun&icon.size=24) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
       "keywords": [
         "assets",
         "collection",
@@ -983,7 +1056,7 @@
         "panel",
         "popover",
         "popoverTarget",
-        "popoverTargetaction",
+        "popoverTargetAction",
         "popup",
         "tooltip"
       ]

package/llm/llms.txt

@@ -10,6 +10,9 @@ This package ships machine-readable design-system metadata for coding assistants
 - Patterns: ./patterns.json
 - Rules: ./rules.json
 - Canonical HTML Examples: ./examples/*.html
+- Assistant guides (no skills): ./assistants/
+- Codex guide: ./assistants/codex/AGENTS.md
+- Claude guide: ./assistants/claude/CLAUDE.md
 
 Lookup contract:
 1. Resolve component by id/name/keywords from index.json.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",
@@ -9,11 +9,13 @@
     "./llm/rules": "./llm/rules.json",
     "./llm/schema": "./llm/schema.json",
     "./*": "./*",
+    "./fonts/*": "./fonts/*",
     "./styles": "./styles/globals.css",
     "./styles/*": "./styles/*",
     "./tailwind.config": "./tailwind.config.cjs"
   },
   "files": [
+    "fonts/**/*",
     "styles/**/*",
     "llm/**/*",
     "README.md",

package/styles/button.css

@@ -343,7 +343,7 @@
   }
 
   &::before {
-    @apply w-[calc(var(--close-size)-2px)] h-[calc(var(--close-size)-2px)];
+    @apply size-[calc(var(--close-size)-4px)];
   }
   
   &.button-xs {
@@ -383,11 +383,8 @@
   &::before {
     @apply content-['']
     absolute
-    block
-    left-1/2
-    top-1/2
-    -translate-x-1/2
-    -translate-y-1/2
+    /* block
+    inset-0 */
     transform-gpu
     mask-close;
   }

package/styles/chat.css

@@ -33,6 +33,8 @@
   gap-6
   p-4
   w-full;
+
+  
 }
 
 /* Message groups */
@@ -415,9 +417,14 @@
 /* AI Chat variant */
 @utility chat-secondary {
 
+  &:has(.chat-footer-full) {
+    @apply bg-background-surface-sunken;
+  }
+
   .chat-feed {
     @apply
     bg-background-surface-sunken;
+
   }
   .chat-group {
     @apply
@@ -482,6 +489,145 @@
   }
 }
 
+/* Media attachments inside bubbles */
+@utility chat-media-grid {
+  @apply
+  grid
+  grid-cols-2
+  gap-2
+  mt-2;
+}
+
+@utility chat-media-item {
+  @apply
+  overflow-hidden
+  rounded-xl
+  border
+  border-line-default
+  bg-background-surface-sunken;
+
+  img {
+    @apply
+    block
+    w-full
+    h-24
+    md:h-28
+    object-cover;
+  }
+}
+
+/* Loading -> message loop simulation */
+@utility chat-loop-simulation {
+  @apply overflow-x-hidden;
+}
+
+@utility chat-loop-stack {
+  @apply
+  relative
+  mt-6;
+
+  min-height: 9.25rem;
+
+  > .chat-group {
+    @apply
+    absolute
+    inset-0
+    mt-0;
+  }
+
+  .chat-loop-loading {
+    animation: chat-loop-loading 4.8s ease-in-out infinite;
+  }
+
+  .chat-loop-message {
+    animation: chat-loop-message 4.8s ease-in-out infinite;
+  }
+}
+
+@utility chat-loop-stack-lg {
+  min-height: 10.75rem;
+}
+
+/* Extended chat footer demo */
+@utility chat-footer-full {
+
+  @apply flex flex-col gap-2 w-full rounded-2xl! surface mb-4;
+
+  .chat-input-full {
+    @apply
+    flex-wrap
+    items-end;
+
+    .chat-add-menu-trigger,
+    .chat-add-menu-button {
+      @apply shrink-0;
+    }
+
+    .chat-footer-actions {
+      @apply
+      order-3
+      flex
+      gap-2
+      flex-1
+      items-center
+      justify-end
+      sm:order-none
+      sm:flex-none
+      sm:ml-auto;
+    }
+
+    .chat-model-select {
+      @apply
+      w-36
+      sm:w-44;
+    }
+
+
+    .chat-dictate {
+      @apply
+      relative;
+
+      &.is-listening::after {
+        content: "";
+        @apply
+        absolute
+        -top-1
+        -right-1
+        size-2
+        rounded-full
+        bg-background-error
+        border
+        border-background-surface;
+        animation: chat-dictate-pulse 1.4s ease-in-out infinite;
+      }
+    }
+
+    .chat-send-button {
+      @apply
+      shrink-0;
+    }
+  }
+
+  .chat-add-menu {
+    @apply min-w-56;
+
+    .menu {
+      @apply gap-0;
+    }
+
+    .menu > li > button {
+      @apply justify-start;
+    }
+  }
+
+  .chat-dictate-hint {
+    @apply
+    mt-2
+    text-xs
+    text-text-secondary;
+  }
+}
+
 /* Loading animation */
 @keyframes loading-gradient {
   0% {
@@ -504,3 +650,64 @@
     transform: scale(1);
   }
 }
+
+@keyframes chat-loop-loading {
+  0%,
+  48% {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+  52%,
+  100% {
+    opacity: 0;
+    transform: translateY(-0.35rem);
+    visibility: hidden;
+  }
+}
+
+@keyframes chat-loop-message {
+  0%,
+  48% {
+    opacity: 0;
+    transform: translateY(0.35rem);
+    visibility: hidden;
+  }
+  52%,
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+
+@keyframes chat-dictate-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(1.35);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-loop-stack .chat-loop-loading,
+  .chat-loop-stack .chat-loop-message,
+  .chat-footer-full .chat-input-full .chat-dictate.is-listening::after {
+    animation: none;
+  }
+
+  .chat-loop-stack .chat-loop-loading {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .chat-loop-stack .chat-loop-message {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+}