@almadar/std 3.2.1 → 3.2.3

package/behaviors/exports/atoms/std-flip-card.orb

@@ -0,0 +1,596 @@
+{
+  "name": "FlashcardOrbital",
+  "orbitals": [
+    {
+      "name": "FlashcardOrbital",
+      "entity": {
+        "name": "Flashcard",
+        "persistence": "runtime",
+        "fields": [
+          {
+            "name": "id",
+            "type": "string"
+          },
+          {
+            "name": "name",
+            "type": "string"
+          },
+          {
+            "name": "description",
+            "type": "string"
+          },
+          {
+            "name": "status",
+            "type": "string",
+            "default": "active",
+            "values": [
+              "active",
+              "inactive",
+              "pending"
+            ]
+          },
+          {
+            "name": "createdAt",
+            "type": "string"
+          },
+          {
+            "name": "question",
+            "type": "string",
+            "default": ""
+          },
+          {
+            "name": "answer",
+            "type": "string",
+            "default": ""
+          }
+        ],
+        "instances": [
+          {
+            "id": "fc-1",
+            "name": "What is photosynthesis?",
+            "description": "The process by which plants convert sunlight into energy",
+            "status": "active",
+            "createdAt": "2026-01-01",
+            "question": "What is photosynthesis?",
+            "answer": "The process by which green plants use sunlight to synthesize foods from carbon dioxide and water."
+          },
+          {
+            "id": "fc-2",
+            "name": "What is the speed of light?",
+            "description": "299,792,458 meters per second",
+            "status": "active",
+            "createdAt": "2026-01-02",
+            "question": "What is the speed of light?",
+            "answer": "Approximately 299,792,458 meters per second in a vacuum."
+          },
+          {
+            "id": "fc-3",
+            "name": "What is DNA?",
+            "description": "Deoxyribonucleic acid",
+            "status": "active",
+            "createdAt": "2026-01-03",
+            "question": "What is DNA?",
+            "answer": "Deoxyribonucleic acid, the molecule that carries genetic instructions for life."
+          }
+        ]
+      },
+      "traits": [
+        {
+          "name": "FlashcardFlipCard",
+          "linkedEntity": "Flashcard",
+          "category": "interaction",
+          "stateMachine": {
+            "states": [
+              {
+                "name": "front",
+                "isInitial": true
+              },
+              {
+                "name": "back"
+              }
+            ],
+            "events": [
+              {
+                "key": "INIT",
+                "name": "Initialize"
+              },
+              {
+                "key": "FLIP",
+                "name": "Flip Card"
+              },
+              {
+                "key": "FLIP_BACK",
+                "name": "Flip Back"
+              },
+              {
+                "key": "NEXT",
+                "name": "Next Card"
+              }
+            ],
+            "transitions": [
+              {
+                "from": "front",
+                "to": "front",
+                "event": "INIT",
+                "effects": [
+                  [
+                    "fetch",
+                    "Flashcard"
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "stack",
+                      "direction": "vertical",
+                      "gap": "lg",
+                      "align": "center",
+                      "children": [
+                        {
+                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "sm",
+                          "align": "center",
+                          "children": [
+                            {
+                              "type": "icon",
+                              "name": "rotate-3d",
+                              "size": "lg"
+                            },
+                            {
+                              "type": "typography",
+                              "content": "Flashcards Flashcards",
+                              "variant": "h2"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "divider"
+                        },
+                        {
+                          "type": "flip-card",
+                          "front": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "help-circle",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "name"
+                                ]
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "caption",
+                                "color": "muted",
+                                "content": "Tap to reveal answer"
+                              }
+                            ]
+                          },
+                          "back": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "lightbulb",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "description"
+                                ]
+                              },
+                              {
+                                "type": "badge",
+                                "label": "Answer"
+                              }
+                            ]
+                          },
+                          "flipped": false
+                        },
+                        {
+                          "type": "button",
+                          "label": "Flip",
+                          "event": "FLIP",
+                          "variant": "primary",
+                          "icon": "rotate-3d"
+                        }
+                      ]
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "front",
+                "to": "back",
+                "event": "FLIP",
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "stack",
+                      "direction": "vertical",
+                      "gap": "lg",
+                      "align": "center",
+                      "children": [
+                        {
+                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "sm",
+                          "align": "center",
+                          "children": [
+                            {
+                              "type": "icon",
+                              "name": "rotate-3d",
+                              "size": "lg"
+                            },
+                            {
+                              "type": "typography",
+                              "content": "Flashcards Flashcards",
+                              "variant": "h2"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "divider"
+                        },
+                        {
+                          "type": "flip-card",
+                          "front": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "help-circle",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "name"
+                                ]
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "caption",
+                                "color": "muted",
+                                "content": "Tap to reveal answer"
+                              }
+                            ]
+                          },
+                          "back": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "lightbulb",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "description"
+                                ]
+                              },
+                              {
+                                "type": "badge",
+                                "label": "Answer"
+                              }
+                            ]
+                          },
+                          "flipped": true
+                        },
+                        {
+                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "sm",
+                          "justify": "center",
+                          "children": [
+                            {
+                              "type": "button",
+                              "label": "Flip Back",
+                              "event": "FLIP_BACK",
+                              "variant": "ghost",
+                              "icon": "rotate-3d"
+                            },
+                            {
+                              "type": "button",
+                              "label": "Next",
+                              "event": "NEXT",
+                              "variant": "primary",
+                              "icon": "arrow-right"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "back",
+                "to": "front",
+                "event": "FLIP_BACK",
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "stack",
+                      "direction": "vertical",
+                      "gap": "lg",
+                      "align": "center",
+                      "children": [
+                        {
+                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "sm",
+                          "align": "center",
+                          "children": [
+                            {
+                              "type": "icon",
+                              "name": "rotate-3d",
+                              "size": "lg"
+                            },
+                            {
+                              "type": "typography",
+                              "content": "Flashcards Flashcards",
+                              "variant": "h2"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "divider"
+                        },
+                        {
+                          "type": "flip-card",
+                          "front": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "help-circle",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "name"
+                                ]
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "caption",
+                                "color": "muted",
+                                "content": "Tap to reveal answer"
+                              }
+                            ]
+                          },
+                          "back": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "lightbulb",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "description"
+                                ]
+                              },
+                              {
+                                "type": "badge",
+                                "label": "Answer"
+                              }
+                            ]
+                          },
+                          "flipped": false
+                        },
+                        {
+                          "type": "button",
+                          "label": "Flip",
+                          "event": "FLIP",
+                          "variant": "primary",
+                          "icon": "rotate-3d"
+                        }
+                      ]
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "back",
+                "to": "front",
+                "event": "NEXT",
+                "effects": [
+                  [
+                    "fetch",
+                    "Flashcard"
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "stack",
+                      "direction": "vertical",
+                      "gap": "lg",
+                      "align": "center",
+                      "children": [
+                        {
+                          "type": "stack",
+                          "direction": "horizontal",
+                          "gap": "sm",
+                          "align": "center",
+                          "children": [
+                            {
+                              "type": "icon",
+                              "name": "rotate-3d",
+                              "size": "lg"
+                            },
+                            {
+                              "type": "typography",
+                              "content": "Flashcards Flashcards",
+                              "variant": "h2"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "divider"
+                        },
+                        {
+                          "type": "flip-card",
+                          "front": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "help-circle",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "name"
+                                ]
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "caption",
+                                "color": "muted",
+                                "content": "Tap to reveal answer"
+                              }
+                            ]
+                          },
+                          "back": {
+                            "type": "stack",
+                            "direction": "vertical",
+                            "gap": "md",
+                            "align": "center",
+                            "children": [
+                              {
+                                "type": "icon",
+                                "name": "lightbulb",
+                                "size": "lg"
+                              },
+                              {
+                                "type": "typography",
+                                "variant": "h3",
+                                "content": [
+                                  "object/get",
+                                  [
+                                    "array/first",
+                                    "@entity"
+                                  ],
+                                  "description"
+                                ]
+                              },
+                              {
+                                "type": "badge",
+                                "label": "Answer"
+                              }
+                            ]
+                          },
+                          "flipped": false
+                        },
+                        {
+                          "type": "button",
+                          "label": "Flip",
+                          "event": "FLIP",
+                          "variant": "primary",
+                          "icon": "rotate-3d"
+                        }
+                      ]
+                    }
+                  ]
+                ]
+              }
+            ]
+          }
+        }
+      ],
+      "pages": [
+        {
+          "name": "FlashcardFlipCardPage",
+          "path": "/flashcards/flashcards",
+          "traits": [
+            {
+              "ref": "FlashcardFlipCard"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "description": "Flip card atom for flashcard-style front/back content. Absorbs: flip-container, flip-card."
+}