cursor-usage-analyzer 0.2.1 → 0.3.1

package/cursor-logs-export/chats/2026-02-05_2026-02-10_22-39-23_uu_app_aicoding_conv37.txt

@@ -0,0 +1,104 @@
+================================================================================
+CONVERSATION #37
+Name: Uu5 component icons usage documentation
+Workspace: uu_app_aicodingg01
+Time: 2/5/2026, 10:39:23 PM
+Model: claude-4.5-opus-high-thinking
+Context Tokens: 74,892 / 164,000 (45.7%)
+Changes: +53 -31 lines in 1 files
+Messages: 9
+Composer ID: 123bad72-f07f-4c46-bf64-0231e1494d71
+
+================================================================================
+
+
+--------------------------------------------------------------------------------
+[USER] 10:39:23 PM
+--------------------------------------------------------------------------------
+{"data":[{"value":["<uu5string /><div><div style=\"<uu5json/>{\n  \\\"position\\\": \\\"absolute\\\",\n  \\\"left\\\": \\\"-25px\\\",\n  \\\"top\\\": \\\"-15px\\\"\n}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"8130233d60fda4a3b95b672b08f5ecba\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"84577a16\\\": {\n      \\\"id\\\": \\\"84577a16\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uuappmodelkit\\\",\n      \\\"uuBmlIconCode\\\": \\\"uu5Uve\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 576,\n        \\\"y\\\": 256\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"User visual entrypoint\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"b42d6a6c\\\",\n        \\\"e4f9fa01\\\",\n        \\\"64d679c8\\\",\n        \\\"e4a73bce\\\",\n        \\\"64364905\\\",\n        \\\"848369dd\\\",\n        \\\"54396b04\\\",\n        \\\"e40e2a67\\\",\n        \\\"a4a389b8\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"0462a9c6\\\",\n        \\\"d49eab4b\\\",\n        \\\"34372b52\\\",\n        \\\"34220b4f\\\",\n        \\\"04e8e852\\\",\n        \\\"04c5bb54\\\",\n        \\\"64d18941\\\",\n        \\\"24c48ad9\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"a433eb1b\\\",\n        \\\"744958c4\\\",\n        \\\"f4fd5998\\\",\n        \\\"d471dabf\\\",\n        \\\"d486aa2e\\\",\n        \\\"84d6baf0\\\",\n        \\\"749979ef\\\",\n        \\\"74464bc7\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"54412a22\\\",\n        \\\"84929962\\\",\n        \\\"44cdb9e7\\\",\n        \\\"94516983\\\",\n        \\\"b49d0ab6\\\",\n        \\\"e4c6e9bd\\\",\n        \\\"e43b783c\\\",\n        \\\"3408aaf6\\\",\n        \\\"b46ab977\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"84577a16\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"/></div> </div>","<uu5string /><p nestingLevel=\"smallBox\">The base of uuApp Human Interface (HI) is uu5Uve - <strong>user visual entrypoint,</strong> represented by a hyperlink. </p><p nestingLevel=\"smallBox\">In uuApps, uu5Uve is designed as <Uu5Bricks.Link target=\"_blank\" href=\"https://en.wikipedia.org/wiki/Single-page_application\"><strong>SPA</strong></Uu5Bricks.Link> (Single-Page Application). It solves the initial loading of HTML and JavaScript.</p><p nestingLevel=\"smallBox\">One application can have <strong>multiple uu5Uves.</strong> <i>For instance, the uuCourseKit application has a separate uu5Uve for course students and a separate uu5Uve for those who create the course content (course authors).</i></p>"],"type":"styledText"},["<uu5string /><br /><p> <div style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-30px\\\",\\\"top\\\":\\\"20px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"8130233d60fda4a3b95b672b08f5ecba\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"dbc8557b215d84a7fadbf9d80dd14f5e\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uuappcommon\\\",\n          \\\"code\\\": \\\"user-visual-entrypoint\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 340,\n            \\\"y\\\": 2\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"uu5Route\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"dbc8557b215d84a7fadbf9d80dd14f5e\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"a4b6ebee\\\": {\n      \\\"id\\\": \\\"a4b6ebee\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uu5\\\",\n      \\\"uuBmlIconCode\\\": \\\"route\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 576,\n        \\\"y\\\": 256\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Route\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"a4234abe\\\",\n        \\\"94096964\\\",\n        \\\"c453d8e9\\\",\n        \\\"640d9bc6\\\",\n        \\\"14463bf5\\\",\n        \\\"a4165b7e\\\",\n        \\\"0476fa0f\\\",\n        \\\"24d25af8\\\",\n        \\\"64e939ee\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"242bcb87\\\",\n        \\\"2439b964\\\",\n        \\\"e4e63a13\\\",\n        \\\"743828ec\\\",\n        \\\"a44c4adf\\\",\n        \\\"24d7fa2d\\\",\n        \\\"24e43841\\\",\n        \\\"d42fb953\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"043269db\\\",\n        \\\"34823899\\\",\n        \\\"94c47bf5\\\",\n        \\\"642cbadd\\\",\n        \\\"e43bfa3b\\\",\n        \\\"e4b63b62\\\",\n        \\\"d4e4192a\\\",\n        \\\"a44f6b5a\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"64b489ae\\\",\n        \\\"24b588c3\\\",\n        \\\"d4e0792a\\\",\n        \\\"14295a18\\\",\n        \\\"d4dc3bd0\\\",\n        \\\"a4505af7\\\",\n        \\\"f4b7b85e\\\",\n        \\\"440ff847\\\",\n        \\\"84b3daaf\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"a4b6ebee\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></div></p>","<uu5string /><p nestingLevel=\"smallBox\">User Visual Entrypoint is composed from <strong>uu5Routes </strong><Uu5RichText.Icon icon=\"mdi-arrow-right-bold\"></Uu5RichText.Icon> an individually addressable parts of SPA that are also represented by a hyperlink. </p><p nestingLevel=\"smallBox\"><strong>uu5Route</strong> is a special component with a URL of its own and it can also have other parameters. It encapsulates a certain <strong>business logic,</strong> for instance<i> in the uuJokes application we have one uu5Route which displays a list of jokes and another one that displays a list of joke categories.</i></p><p nestingLevel=\"smallBox\">Take a look at <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=71851769\"><strong>Basic Routes</strong></Uu5Bricks.Link> that every application should have implemented.</p><p nestingLevel=\"smallBox\">uu5Route examples:<i> </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/6c724f9a63d94f9495424855c6a0c69d/book/page?code=84726603\"><i>UuBusinessChat.Routes.Conversation</i></Uu5Bricks.Link><i> </i>or<i> </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/269e2e3553d040c9b8b1e31acb99c952/book/page?code=UuAppProviderKitRegistryRoutesLicensePayer\"><i>UuAppProviderKitRegistry.Routes.LicensePayer</i></Uu5Bricks.Link><i>.</i></p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-30px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"d7d09fcfc338d4bbca87eea052478386\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"f4443892\\\": {\n      \\\"id\\\": \\\"f4443892\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uu5\\\",\n      \\\"uuBmlIconCode\\\": \\\"visualComponent\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 576,\n        \\\"y\\\": 192\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Visual component\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"14fbc92e\\\",\n        \\\"a464db4b\\\",\n        \\\"c45b785a\\\",\n        \\\"14ac2804\\\",\n        \\\"a47dfa7e\\\",\n        \\\"c437b972\\\",\n        \\\"84002b2b\\\",\n        \\\"d43648d0\\\",\n        \\\"b44c5ba6\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"74561a0a\\\",\n        \\\"94a5faa1\\\",\n        \\\"14746bb0\\\",\n        \\\"f4b748fc\\\",\n        \\\"94bf28b7\\\",\n        \\\"846cf985\\\",\n        \\\"84252b57\\\",\n        \\\"540b5850\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"84c2aa01\\\",\n        \\\"e4229a0c\\\",\n        \\\"64e38897\\\",\n        \\\"c4bd4a8d\\\",\n        \\\"e47eda20\\\",\n        \\\"545c0bac\\\",\n        \\\"244d1946\\\",\n        \\\"f49ecb5c\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"b4479b16\\\",\n        \\\"64794a67\\\",\n        \\\"54625836\\\",\n        \\\"64341a2e\\\",\n        \\\"74b99999\\\",\n        \\\"944e2b50\\\",\n        \\\"c4ac1b6d\\\",\n        \\\"e49d8a70\\\",\n        \\\"f43f6b3d\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"f4443892\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\">A component is an <strong>isolated part</strong> with a <strong>clearly-defined functionality </strong>(responsibility), which can still be modified through, for example, its properties, but whose significance remains unchanged.</p><p nestingLevel=\"smallBox\">Responsibility of <strong>visual components </strong>(sometimes also called dumb components) is to<strong> visualize content,</strong> for instance<i> a visual component could display a list jokes in the uuJokes application.</i></p><p nestingLevel=\"smallBox\">Visual component examples: <Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/71f8d7b5cfdc4336b0abfe47b3cb237b/book/page?code=UuJokesCoreJokeListView\"><i>UuJokesCore.Joke.ListView</i></Uu5Bricks.Link><i>, </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/05ecbf4e8bca405290b1a6d4cee8813a/book/page?code=Uu5ElementsButton\"><i>Uu5Elements.Button</i></Uu5Bricks.Link><i> </i>or <Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/83c1406c4fc541dba975941424106318/book/page?code=Plus4U5AppPositionBar\"><i>UuPlus4U5App.PositionBar</i></Uu5Bricks.Link><i>.</i></p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-30px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"7b3b5be3d16e14f188bd81d9f7ccb462\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"b49babca\\\": {\n      \\\"id\\\": \\\"b49babca\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uu5\\\",\n      \\\"uuBmlIconCode\\\": \\\"nonVisualComponent\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 584,\n        \\\"y\\\": 312\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Non-visual component\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"14406bdd\\\",\n        \\\"446ddbc2\\\",\n        \\\"6410db37\\\",\n        \\\"b4c8f94c\\\",\n        \\\"041c9bf2\\\",\n        \\\"d4294975\\\",\n        \\\"64958992\\\",\n        \\\"64748b18\\\",\n        \\\"6420db7e\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"34ed7a36\\\",\n        \\\"846ba9a1\\\",\n        \\\"442c3bf8\\\",\n        \\\"34b1780d\\\",\n        \\\"446cc84a\\\",\n        \\\"747b686a\\\",\n        \\\"9456d96a\\\",\n        \\\"1449688a\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"94291ac7\\\",\n        \\\"446fb98b\\\",\n        \\\"845dca90\\\",\n        \\\"44d20800\\\",\n        \\\"443c58db\\\",\n        \\\"14c66aeb\\\",\n        \\\"d4908809\\\",\n        \\\"a49829ff\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"b4650b63\\\",\n        \\\"344158a2\\\",\n        \\\"e4382ae2\\\",\n        \\\"d4c31848\\\",\n        \\\"348ce925\\\",\n        \\\"c4fc983b\\\",\n        \\\"04193905\\\",\n        \\\"e450e92b\\\",\n        \\\"14765b0f\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"b49babca\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\"><strong>Non-visual components</strong> (sometimes also called smart components) do the heavy lifting, when they obtain the necessary data, and pass the data down to the visual (dumb) components via props.</p><div><i>An example of a smart component could be a component that loads a list of jokes from the server and passess it further to a component that is responsible for displaying those jokes.</i></div><p nestingLevel=\"smallBox\">They can also <strong>encapsulate business logic, </strong><i>see for instance </i><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/71f8d7b5cfdc4336b0abfe47b3cb237b/book/page?code=UuJokesCorePreferenceProvider\"><i>UuJokesCore.Preference.Provider</i></Uu5Bricks.Link><i>, which encapsulates business logic regarding user authorization. </i></p><p nestingLevel=\"smallBox\">Another possibility of use is <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/1e02ff9b4f314b51958aed0877dd4c90/book/page?code=567333055\"><i>Uu5Tiles.ControllerProvider</i></Uu5Bricks.Link><i>,</i> <i>which holds data about the current setting of the uuTiles visual and shows/hides filters, sorting, table accordingly.</i></p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-35px\\\",\\\"top\\\":\\\"-50px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"7b3b5be3d16e14f188bd81d9f7ccb462\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true,\n    \\\"alignment\\\": \\\"left\\\"\n  },\n  \\\"elementMap\\\": {\n    \\\"146fcb34\\\": {\n      \\\"id\\\": \\\"146fcb34\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uuappcommon\\\",\n      \\\"uuBmlIconCode\\\": \\\"contentComponent\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 572,\n        \\\"y\\\": 448\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"General component\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"746fab8d\\\",\n        \\\"8478aab8\\\",\n        \\\"e453c89b\\\",\n        \\\"f400cbec\\\",\n        \\\"d4590b5e\\\",\n        \\\"34cb483a\\\",\n        \\\"84b3b890\\\",\n        \\\"24d18ac1\\\",\n        \\\"940588bb\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"9415a89a\\\",\n        \\\"a4f1dbd9\\\",\n        \\\"f4d29939\\\",\n        \\\"846ce8f7\\\",\n        \\\"141d9a98\\\",\n        \\\"64c148c4\\\",\n        \\\"4449fabf\\\",\n        \\\"c4b2081f\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"e400ab1c\\\",\n        \\\"54384899\\\",\n        \\\"44ab9a83\\\",\n        \\\"d4a66995\\\",\n        \\\"b49c5ab3\\\",\n        \\\"445fe917\\\",\n        \\\"147d6b1f\\\",\n        \\\"9478aa60\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"64f72861\\\",\n        \\\"7408d8b9\\\",\n        \\\"84dbcaea\\\",\n        \\\"84fc5a00\\\",\n        \\\"246f1b25\\\",\n        \\\"847c3a23\\\",\n        \\\"3417593f\\\",\n        \\\"5455680b\\\",\n        \\\"242b3a37\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"146fcb34\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\">The <strong>general component </strong>should be used when it's <strong>unknown </strong>whether the component will be visual or non-visual. For instance, when a data provider might encapsulate either a visual or a non-visual component.</p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-30px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"776161876fea74d4185dca24ec24c4f4\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"a2d509e00665b405d9d27efb5350b42e\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uuappmodelkit\\\",\n          \\\"code\\\": \\\"uu5-higher-order-component\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 168,\n            \\\"y\\\": 48\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"Higher-Order Component\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"a2d509e00665b405d9d27efb5350b42e\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1800,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"b4a49aed\\\": {\n      \\\"id\\\": \\\"b4a49aed\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uu5\\\",\n      \\\"uuBmlIconCode\\\": \\\"higherOrderComponent\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 512,\n        \\\"y\\\": 192\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Higher-order component\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"d475cae4\\\",\n        \\\"d4923ab1\\\",\n        \\\"c4d7c941\\\",\n        \\\"a4d079b5\\\",\n        \\\"241149f5\\\",\n        \\\"f4575b0c\\\",\n        \\\"74bae8cb\\\",\n        \\\"f4d59832\\\",\n        \\\"84bbb9e1\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"a4437b4c\\\",\n        \\\"44469b29\\\",\n        \\\"74336beb\\\",\n        \\\"34b26b48\\\",\n        \\\"3497f879\\\",\n        \\\"742b4a8f\\\",\n        \\\"a4fa8bb2\\\",\n        \\\"347edb6b\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"84eeab93\\\",\n        \\\"a425396e\\\",\n        \\\"34849b8c\\\",\n        \\\"64c65865\\\",\n        \\\"14e7c80a\\\",\n        \\\"745629ac\\\",\n        \\\"24af8955\\\",\n        \\\"94e629d5\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"24688b39\\\",\n        \\\"24059a96\\\",\n        \\\"c4e27b5e\\\",\n        \\\"042e488b\\\",\n        \\\"141f2a22\\\",\n        \\\"446f9a43\\\",\n        \\\"44c2999d\\\",\n        \\\"3414e965\\\",\n        \\\"a487f8a8\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"b4a49aed\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\"><strong>Higher-order component (HoC)</strong><span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\"> is a way of<strong> composing components,</strong> which is based on the logic of </span><Uu5Bricks.Link target=\"_blank\" href=\"https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99\">Higher-Order Functions.</Uu5Bricks.Link></p><p nestingLevel=\"smallBox\"><Uu5Bricks.Link target=\"_blank\" href=\"https://reactjs.org/docs/higher-order-components.html\"><strong>Higher-order component</strong></Uu5Bricks.Link> is a <strong>function </strong>that receives a specific component as its input and <strong>returns a new component.</strong> </p><p nestingLevel=\"smallBox\">These components do not clone or modify the original component in any way. They just wrap the component and add some extra functionality to it without any side effects.</p><p nestingLevel=\"smallBox\">Uu5<span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\"> component libraries use HoC components relatively often, especially to wrap some components in </span><Uu5RichText.Code>Context.Consumer</Uu5RichText.Code><span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\">.</span></p><p nestingLevel=\"smallBox\">Examples of higher-order component:<i> </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/05ecbf4e8bca405290b1a6d4cee8813a/book/page?code=83613612\"><i>Uu5BricksSupport.withEditModal</i></Uu5Bricks.Link><i> </i>or<i> </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/83c1406c4fc541dba975941424106318/book/page?code=97178226\"><i>uuPlus4U5App.withRoute</i></Uu5Bricks.Link><i>.</i></p><p nestingLevel=\"smallBox\">For more information about HoC visit the <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=56697753\"><strong>uu5 Library Component HoC</strong></Uu5Bricks.Link> pattern.</p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"0px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"d68c5cc4d5fb5430293f60bf636cf0f6\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"d2cc5b7815a0f4f26ad926ddefd8cc50\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uuappcommon\\\",\n          \\\"code\\\": \\\"command\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 216,\n            \\\"y\\\": 48\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"uuCommand\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"d2cc5b7815a0f4f26ad926ddefd8cc50\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"d4d7bba2\\\": {\n      \\\"id\\\": \\\"d4d7bba2\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uuappcommon\\\",\n      \\\"uuBmlIconCode\\\": \\\"command\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 640,\n        \\\"y\\\": 192\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"uuCommand\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 128,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"94a8cacd\\\",\n        \\\"446d5a2f\\\",\n        \\\"d4067849\\\",\n        \\\"64b9bb67\\\",\n        \\\"5449cbed\\\",\n        \\\"443a5b0e\\\",\n        \\\"74524ab0\\\",\n        \\\"f42b3939\\\",\n        \\\"140f7aee\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"3411badc\\\",\n        \\\"d4868888\\\",\n        \\\"942eb939\\\",\n        \\\"f4a51a81\\\",\n        \\\"a4286aaf\\\",\n        \\\"042beb5e\\\",\n        \\\"04b50b6b\\\",\n        \\\"34d33827\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"e41e6839\\\",\n        \\\"94128816\\\",\n        \\\"548c8a34\\\",\n        \\\"94468b85\\\",\n        \\\"e4bc0b5f\\\",\n        \\\"d480facb\\\",\n        \\\"146ebb5b\\\",\n        \\\"c499f805\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"74175be5\\\",\n        \\\"641cf9cb\\\",\n        \\\"24fe2b9a\\\",\n        \\\"341958a6\\\",\n        \\\"9462b9c1\\\",\n        \\\"a421591b\\\",\n        \\\"c4a55a3a\\\",\n        \\\"b4b378d9\\\",\n        \\\"143209aa\\\"\n      ],\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"d4d7bba2\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\"><strong>uuCommand </strong>(uuCmd) is a <strong>non-visual subapplication interface</strong> (API layer), which represents a particular <strong>use case </strong>(functionality), for example<i> the creation of an object in a database, fetching objects from a database, and so on</i>.</p><p nestingLevel=\"smallBox\">The uuCommand icon is always yellow.</p><div>The standards and conventions of methods calling are described in the section<strong><i> </i></strong><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=86088866#methodAndUuCmd\"><strong>Methods and uuCommands</strong></Uu5Bricks.Link> on the <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=86088866#methodAndUuCmd\">uuBml Cheatsheet</Uu5Bricks.Link> page.</div>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"0px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"6284f0daf1ccf41738eace487b693f6d\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"4617bed23712942e697edf5617513b28\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uuappcommon\\\",\n          \\\"code\\\": \\\"method\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 192,\n            \\\"y\\\": 72\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"Method\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"4617bed23712942e697edf5617513b28\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"d4ec3bb3\\\": {\n      \\\"id\\\": \\\"d4ec3bb3\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uuappcommon\\\",\n      \\\"uuBmlIconCode\\\": \\\"method\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 576,\n        \\\"y\\\": 256\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Method\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 128,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"045b3b45\\\",\n        \\\"34f2d93b\\\",\n        \\\"6471d9dd\\\",\n        \\\"24a6399c\\\",\n        \\\"d4048b32\\\",\n        \\\"2439298e\\\",\n        \\\"c46dba8b\\\",\n        \\\"94fc59a5\\\",\n        \\\"04fa9b6e\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"240eca8d\\\",\n        \\\"64c1b9c8\\\",\n        \\\"a4e74bc9\\\",\n        \\\"2474daf2\\\",\n        \\\"d49eb8cd\\\",\n        \\\"049c7983\\\",\n        \\\"246e7812\\\",\n        \\\"0407f9bb\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"e445a88a\\\",\n        \\\"d48aaa50\\\",\n        \\\"740589ab\\\",\n        \\\"241f3bfa\\\",\n        \\\"e4aafb81\\\",\n        \\\"f40c58cb\\\",\n        \\\"c4dbcb48\\\",\n        \\\"745eb993\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"64ce3867\\\",\n        \\\"f441cab4\\\",\n        \\\"14eefb2e\\\",\n        \\\"c4afdb48\\\",\n        \\\"34997815\\\",\n        \\\"64f04aae\\\",\n        \\\"44a5f8ee\\\",\n        \\\"5476da0d\\\",\n        \\\"54b3992a\\\"\n      ],\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"d4ec3bb3\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\">A <strong>method </strong>icon is used to indicate that: </p><ol><li>Within some method your component calls a particular<strong> interface method</strong> of <strong>another component.</strong></li><li>Your component <strong>has </strong>a particular method in its interface.</li><li>Your component has a particular method as a <strong>handler </strong>which can be further passed via context or props.</li></ol><p nestingLevel=\"smallBox\">The standards and conventions of methods calling are described in the section<strong><i> </i></strong><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=86088866#methodAndUuCmd\"><strong>Methods and uuCommands</strong></Uu5Bricks.Link> on the <Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=86088866#methodAndUuCmd\">uuBml Cheatsheet</Uu5Bricks.Link> page.</p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-0px\\\",\\\"top\\\":\\\"-15px\\\"}\"><br /><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"561db1076a9f04b66b6045810ac89df7\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"09667eb38a3f748598e69e31449147cd\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uuappmodelkit\\\",\n          \\\"code\\\": \\\"uu5-hook\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 192,\n            \\\"y\\\": 72\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"uu5Hook\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"09667eb38a3f748598e69e31449147cd\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"a45bc96e\\\": {\n      \\\"id\\\": \\\"a45bc96e\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uuappmodelkit\\\",\n      \\\"uuBmlIconCode\\\": \\\"uu5Hook\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 576,\n        \\\"y\\\": 256\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"uu5Hook\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 128,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"44d3da03\\\",\n        \\\"f4f788bb\\\",\n        \\\"04568879\\\",\n        \\\"44eb7868\\\",\n        \\\"04b86a46\\\",\n        \\\"14f0c85c\\\",\n        \\\"24cbe8a2\\\",\n        \\\"74da2a64\\\",\n        \\\"5439780d\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"14a81ad8\\\",\n        \\\"b4f668c8\\\",\n        \\\"f42bba98\\\",\n        \\\"e4f128e7\\\",\n        \\\"e48aead8\\\",\n        \\\"9455da96\\\",\n        \\\"d4d549a5\\\",\n        \\\"649439dd\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"e4dd19eb\\\",\n        \\\"44a3eab1\\\",\n        \\\"f477c835\\\",\n        \\\"743878b2\\\",\n        \\\"a4c5c933\\\",\n        \\\"647409a1\\\",\n        \\\"94404bb6\\\",\n        \\\"042db938\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"d4e138d6\\\",\n        \\\"64a1393d\\\",\n        \\\"84ba8a1e\\\",\n        \\\"840ce8ae\\\",\n        \\\"843fabe0\\\",\n        \\\"94f04abf\\\",\n        \\\"144608c1\\\",\n        \\\"54d65b1a\\\",\n        \\\"e405b92b\\\"\n      ],\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"a45bc96e\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\">\n  </UuBml.Draw.Diagram><br /></p>","<uu5string /><p nestingLevel=\"smallBox\"><strong>Hooks </strong>are relatively small functionalities (originating from <Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://reactjs.org/docs/hooks-intro.html\"><strong>React Hooks</strong></Uu5Bricks.Link>), through which reusable component parts with a logic of their own can be created.</p><p nestingLevel=\"smallBox\">To find out more information about hooks check out the following pages:</p><ol><li><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=29337351\"><strong>How to design hooks</strong></Uu5Bricks.Link><strong> </strong>in the uuAppPatterns book.</li><li><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/78462435-ed11ec379073476db0aa295ad6c00178/book/page?code=hooksVsMixins\"><strong>Introduction to Hooks</strong></Uu5Bricks.Link><strong> </strong>in the uu5 g04 User Guide book.</li><li><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/05ecbf4e8bca405290b1a6d4cee8813a/book/page?code=96629944\"><strong>Hooks - uu5 g05 - Application Model</strong></Uu5Bricks.Link></li><li><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/83c1406c4fc541dba975941424106318/book/page?code=Plus4U5Hooks\"><strong>Hooks - uuPlus4U5 g02 - Application Model</strong></Uu5Bricks.Link></li></ol><br/>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-0px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"d99246fa7d18c4fcb95b60daea1397ea\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"ea8baa4f1ccfd401db6db21dfd506337\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uu5\\\",\n          \\\"code\\\": \\\"context\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 168,\n            \\\"y\\\": 48\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"Context\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"ea8baa4f1ccfd401db6db21dfd506337\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"e441e879\\\": {\n      \\\"id\\\": \\\"e441e879\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uuappmodelkit\\\",\n      \\\"uuBmlIconCode\\\": \\\"uu5Context\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 512,\n        \\\"y\\\": 320\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Context\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 128,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"7447f8bf\\\",\n        \\\"64dfa834\\\",\n        \\\"04814aa9\\\",\n        \\\"f41c18d1\\\",\n        \\\"840d393e\\\",\n        \\\"f41dfa6d\\\",\n        \\\"b4ce1bf8\\\",\n        \\\"94bb98fb\\\",\n        \\\"2438ca6e\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"c47808ef\\\",\n        \\\"b43f1a43\\\",\n        \\\"a4a289bb\\\",\n        \\\"345f2aa7\\\",\n        \\\"c49cd806\\\",\n        \\\"c465193f\\\",\n        \\\"e4fa1bf8\\\",\n        \\\"342a8a8c\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"f4e57ad9\\\",\n        \\\"24042ade\\\",\n        \\\"34b769bb\\\",\n        \\\"94b6a93a\\\",\n        \\\"f4f139bf\\\",\n        \\\"64dfda8c\\\",\n        \\\"e4d5cb5d\\\",\n        \\\"a441cb8b\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"74ea7934\\\",\n        \\\"14775b74\\\",\n        \\\"e41ceb8e\\\",\n        \\\"b4d4f988\\\",\n        \\\"4481eae4\\\",\n        \\\"f4062a93\\\",\n        \\\"147f38e5\\\",\n        \\\"e410ca46\\\",\n        \\\"3458c8b5\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"e441e879\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\">Before <Uu5Bricks.Link target=\"_blank\" href=\"https://reactjs.org/docs/context.html\"><strong>React Context</strong></Uu5Bricks.Link> was introduced, the props were passed through all components (in the component hierarchy) until they reached the target component.</p><p nestingLevel=\"smallBox\"><span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\"><strong>Context </strong>represents more elegant and effective solution. A component with available data renders the </span><Uu5Bricks.Link target=\"_blank\" href=\"https://reactjs.org/docs/higher-order-components.html\">high-order</Uu5Bricks.Link> <span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\">component </span><Uu5Bricks.Link target=\"_blank\" href=\"https://reactjs.org/docs/context.html#contextprovider\"><strong>Context.Provider</strong></Uu5Bricks.Link><strong/><span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\"><strong>.</strong> The nested target component can then access the context data at any time through the high-order component </span><Uu5Bricks.Link target=\"_blank\" href=\"https://reactjs.org/docs/context.html#contextconsumer\"><strong>Context.Consumer</strong></Uu5Bricks.Link><strong/><span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\"><strong>.</strong></span></p><p nestingLevel=\"smallBox\">In what situations could you use the context?</p><ol><li>The component that needs the data is <strong>deeply nested in the component hierarchy</strong> in the application (e.g. <i>conditional rendering of controls based on information about the currently logged on user</i>).</li><li><span style=\"<uu5json/>{\n  \\\"color\\\": \\\"rgb(0, 0, 0)\\\"\n}\">The <strong>data need to be shared</strong> with a<strong> large number of components</strong> across applications</span> (e.g. <i>color theme, current user language settings</i>).</li></ol><p nestingLevel=\"smallBox\">For example a context icon could be used to emphasize what the hook works with, see section <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=29337351#useContext\">useContext</Uu5Bricks.Link> on the <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/0238a88bac124b3ca828835b57144ffa/book/page?code=29337351\">How to design hooks</Uu5Bricks.Link>.</p><p nestingLevel=\"smallBox\">Examples of the context component:<i> </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/71f8d7b5cfdc4336b0abfe47b3cb237b/book/page?code=UuJokeCoreJokeListContext\"><i>UuJokeCore.Joke.ListContext</i></Uu5Bricks.Link><i> </i>or<i> </i><Uu5Bricks.Link target=\"_blank\" rel=\"noopener\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/587ffda7d94e44af9dbdd4aceb8af5dc/book/page?code=34458690\"><i>UuCloudUniverseCore.Universe.PermissionContext</i></Uu5Bricks.Link><i>.</i></p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-30px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"208e1ef2fcd9944a89626cdd19b7290a\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"41c635e5ec3554815941fd5a84c9344d\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uu5\\\",\n          \\\"code\\\": \\\"context-provider\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 192,\n            \\\"y\\\": 48\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"Context Provider\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"41c635e5ec3554815941fd5a84c9344d\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"24dc09fb\\\": {\n      \\\"id\\\": \\\"24dc09fb\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uu5\\\",\n      \\\"uuBmlIconCode\\\": \\\"contextProvider\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 576,\n        \\\"y\\\": 192\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Context provider\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"1492fbf6\\\",\n        \\\"4437db30\\\",\n        \\\"2485a9b7\\\",\n        \\\"e48f1928\\\",\n        \\\"4438399d\\\",\n        \\\"e428e953\\\",\n        \\\"74ee7a7e\\\",\n        \\\"54c77917\\\",\n        \\\"c41adab1\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"b4e91965\\\",\n        \\\"84d4e955\\\",\n        \\\"543a78c5\\\",\n        \\\"8405d956\\\",\n        \\\"140fc81f\\\",\n        \\\"04c42be7\\\",\n        \\\"a4ee4875\\\",\n        \\\"04ff682e\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"44f238d3\\\",\n        \\\"34c02adc\\\",\n        \\\"547f3a5b\\\",\n        \\\"f4ceba84\\\",\n        \\\"b4346a39\\\",\n        \\\"54c2088e\\\",\n        \\\"84a34af3\\\",\n        \\\"a4a18a05\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"344b98bd\\\",\n        \\\"74cb58d8\\\",\n        \\\"e47c1812\\\",\n        \\\"24a8c961\\\",\n        \\\"a42cdaec\\\",\n        \\\"c46cfa39\\\",\n        \\\"4462184d\\\",\n        \\\"24e7e81d\\\",\n        \\\"4464a850\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"24dc09fb\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\">Every context comes with a <strong>context provider </strong><Uu5RichText.Icon icon=\"mdi-arrow-right-bold\"/> component that allows consuming components to subscribe to context changes.</p><p nestingLevel=\"smallBox\">This component should be used in the component where we have the data we want to pass further. Thanks to <strong>context provider</strong> we can provide the data to those components that need them (context consumers).</p><p nestingLevel=\"smallBox\">For example of a <strong>context provider</strong> component documentation visit the<strong> </strong><Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/71f8d7b5cfdc4336b0abfe47b3cb237b/book/page?code=UuJokesCoreJokeListProvider\"> UuJokesCore.Joke.ListProvider</Uu5Bricks.Link> uu5Component. For another example of providers, visit the <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/83c1406c4fc541dba975941424106318/book/page?code=Plus4U5Providers\">Providers</Uu5Bricks.Link> page in the uuPlus4U5 g02 - Application Model.</p>"],["<uu5string /><p style=\"<uu5json />{\\\"position\\\":\\\"absolute\\\",\\\"left\\\":\\\"-35px\\\",\\\"top\\\":\\\"-15px\\\"}\"><UuBml.Draw.Diagram value=\"<uu5json/>{\n  \\\"id\\\": \\\"68cbdb6b85da8496ea6ed91608f8bffd\\\",\n  \\\"author\\\": \\\"25-533-1\\\",\n  \\\"uuBmlDrawG03Migration\\\": {\n    \\\"code\\\": \\\"2e08d21a2ed034dfcbaddb424b84041e\\\",\n    \\\"result\\\": \\\"completed\\\",\n    \\\"log\\\": [\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawIcon\\\",\n        \\\"params\\\": {\n          \\\"instanceId\\\": 0,\n          \\\"stencil\\\": \\\"uu5\\\",\n          \\\"code\\\": \\\"context-consumer\\\",\n          \\\"position\\\": {\n            \\\"x\\\": 216,\n            \\\"y\\\": 72\n          },\n          \\\"iconSize\\\": \\\"Normal\\\",\n          \\\"text\\\": \\\"Context Consumer\\\",\n          \\\"textHidden\\\": false,\n          \\\"importance\\\": \\\"normal\\\",\n          \\\"plural\\\": false\n        },\n        \\\"warningList\\\": []\n      },\n      {\n        \\\"status\\\": \\\"completed\\\",\n        \\\"tag\\\": \\\"UuBmlDraw.Diagramming.UuBmlDrawDiagram\\\",\n        \\\"params\\\": {\n          \\\"uuBmlDrawG03Code\\\": \\\"2e08d21a2ed034dfcbaddb424b84041e\\\"\n        },\n        \\\"warningList\\\": []\n      }\n    ]\n  },\n  \\\"size\\\": {\n    \\\"width\\\": 1776,\n    \\\"height\\\": 1112\n  },\n  \\\"editMode\\\": {\n    \\\"frameVisible\\\": true,\n    \\\"gridVisible\\\": true,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"consoleVisible\\\": false\n  },\n  \\\"presentationMode\\\": {\n    \\\"frameVisible\\\": false,\n    \\\"gridVisible\\\": false,\n    \\\"socketsVisible\\\": false,\n    \\\"plugsVisible\\\": false,\n    \\\"anchorsVisible\\\": false,\n    \\\"descriptionVisible\\\": true\n  },\n  \\\"elementMap\\\": {\n    \\\"94269a64\\\": {\n      \\\"id\\\": \\\"94269a64\\\",\n      \\\"elementType\\\": \\\"Icon\\\",\n      \\\"sourceUuBmlStencil\\\": \\\"uu5\\\",\n      \\\"uuBmlIconCode\\\": \\\"contextConsumer\\\",\n      \\\"position\\\": {\n        \\\"x\\\": 640,\n        \\\"y\\\": 256\n      },\n      \\\"uuIdentity\\\": null,\n      \\\"text\\\": \\\"Context consumer\\\",\n      \\\"searchKey\\\": \\\"\\\",\n      \\\"textHidden\\\": false,\n      \\\"textWidth\\\": 192,\n      \\\"importance\\\": \\\"normal\\\",\n      \\\"plural\\\": false,\n      \\\"state\\\": {},\n      \\\"label\\\": {},\n      \\\"topPointList\\\": [\n        \\\"34297bf4\\\",\n        \\\"34c66951\\\",\n        \\\"848a4a24\\\",\n        \\\"04a1db1a\\\",\n        \\\"14e488c4\\\",\n        \\\"d4d2e8fd\\\",\n        \\\"b45d8827\\\",\n        \\\"74b85856\\\",\n        \\\"f46a9820\\\"\n      ],\n      \\\"rightPointList\\\": [\n        \\\"343f8a06\\\",\n        \\\"54e8fbdf\\\",\n        \\\"f4785b8d\\\",\n        \\\"149b5abc\\\",\n        \\\"b49039f8\\\",\n        \\\"147e68a3\\\",\n        \\\"24495a1a\\\",\n        \\\"b4f92be1\\\"\n      ],\n      \\\"leftPointList\\\": [\n        \\\"54dec95d\\\",\n        \\\"04e67be9\\\",\n        \\\"0499ca3d\\\",\n        \\\"d4dd7933\\\",\n        \\\"44a2880a\\\",\n        \\\"f4fe9aae\\\",\n        \\\"a4ffd988\\\",\n        \\\"6498bbf0\\\"\n      ],\n      \\\"bottomPointList\\\": [\n        \\\"c454da16\\\",\n        \\\"b40dfa05\\\",\n        \\\"f45c9939\\\",\n        \\\"b4ee3b63\\\",\n        \\\"14fc09ea\\\",\n        \\\"0436e819\\\",\n        \\\"f4bcfb89\\\",\n        \\\"a419ebd0\\\",\n        \\\"44afe839\\\"\n      ],\n      \\\"textBackgroundVisible\\\": false,\n      \\\"pluggedSocketsMap\\\": {}\n    }\n  },\n  \\\"elementZOrderList\\\": [\n    \\\"94269a64\\\"\n  ],\n  \\\"underConstruction\\\": false\n}\" simpleMode nestingLevel=\"area\" zoom=\"zoom100\"></UuBml.Draw.Diagram></p>","<uu5string /><p nestingLevel=\"smallBox\"><strong>Context consumer</strong> is a component that subscribes to context changes. </p><p nestingLevel=\"smallBox\">For instance when we change language in application, all components that are language sensitive are informed that the language was changed.</p><p nestingLevel=\"smallBox\"><Uu5RichText.Badge icon=\"exclamation-2\" state=\"alternativeActive\" code=\"orange-exclamation-2\" category=\"badge\"/> For each context a hook is automatically generated. This hook reads from that context and icon representing that hook should be used in the diagram. For example see the <Uu5Bricks.Link target=\"_blank\" href=\"https://uuapp.plus4u.net/uu-bookkit-maing01/71f8d7b5cfdc4336b0abfe47b3cb237b/book/page?code=UuJokesCoreRouteBar\">UuJokes.Core.RouteBar</Uu5Bricks.Link> component (hooks useRoute, useSystemData and useSubAppData).</p>"]],"columnList":[{"header":"Icon","minWidth":"m","maxWidth":"m","headerStyle":{"horizontalAlignment":"left"},"footerStyle":{"horizontalAlignment":"left"},"style":{"horizontalAlignment":"left"}},{"header":"Description","minWidth":"s"}],"hideFooter":true,"theme":"horizontal-a","colorScheme":"blue","id":"0af5a947f66244c08a35b7051bc8eec5"}
+
+here is the documentation for uu5 components icons usage, is that met in the @uu_app_aicodingg01-prompts/cursor/.cursor/rules/uubml-diagram-patterns.mdc if not adjust it in the rule
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+I'll read the current rule file to compare it with the documentation you provided.
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+Now I can compare the documentation with the current rule. The documentation provides a comprehensive list of UU5 component icons that isn't fully reflected in the rule file.
+
+**Missing icons in Section 3.1:**
+1. **General Component** - `uuappcommon` / `contentComponent` (for unknown visual/non-visual)
+2. **Higher-order Component (HoC)** - `uu5` / `higherOrderComponent`
+3. **Context** - `uuappmodelkit` / `uu5Context`
+4. **Context Provider** - `uu5` / `contextProvider`
+5. **Context Consumer** - `uu5` / `contextConsumer`
+
+Also, the current rule has `uu5` / `hook` which isn't shown in the documentation. The documentation only shows `uuappmodelkit` / `uu5Hook` for hooks.
+
+Let me update the rule file to align with the documentation:
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+Now I need to update Section 9.1 (Component Analysis Checklist) to include the new icon types:
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+Now let me update the Reference Template in Section 10.1 to fix the hook icon usage:
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+Now let me update the layout example diagram in Section 6.2 to fix the hook reference:
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+Let me verify there are no remaining incorrect references:
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+All hook references are now correctly using `uuappmodelkit` / `uu5Hook`. Let me verify there are no linting issues:
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:39:23 PM
+--------------------------------------------------------------------------------
+These are all pre-existing markdown styling warnings, not errors introduced by my changes. The rule file has been successfully updated.
+
+**Summary of changes made to align with the documentation:**
+
+**Section 3.1 - Icon Stencil Reference (expanded):**
+| Element | Stencil | Icon Code |
+|---|---|---|
+| **User visual entrypoint (uu5Uve)** | `uuappmodelkit` | `uu5Uve` |
+| **Route (uu5Route)** | `uu5` | `route` |
+| **Visual component** | `uu5` | `visualComponent` |
+| **Non-visual component** | `uu5` | `nonVisualComponent` |
+| **General component** *(NEW)* | `uuappcommon` | `contentComponent` |
+| **Higher-order component (HoC)** *(NEW)* | `uu5` | `higherOrderComponent` |
+| **uuCommand** | `uuappcommon` | `command` |
+| **Method / Handler** | `uuappcommon` | `method` |
+| **Hook (uu5Hook)** | `uuappmodelkit` | `uu5Hook` |
+| **Context** *(NEW)* | `uuappmodelkit` | `uu5Context` |
+| **Context Provider** *(NEW)* | `uu5` | `contextProvider` |
+| **Context Consumer** *(NEW)* | `uu5` | `contextConsumer` |
+
+**Section 3.2 - Added descriptions** for when to use each icon type based on the documentation.
+
+**Section 9.1 - Updated Component Analysis Checklist** to include:
+- HOC wrappers identification
+- Context usage identification
+- General components for unknown visual/non-visual cases
+
+**Section 10 - Updated Reference Template** and layout positions to use correct stencil/icon combinations.
+
+**Removed:** The `uu5` / `hook` entry that wasn't in the documentation (all hooks now use `uuappmodelkit` / `uu5Hook`).
+
+================================================================================
+End of conversation
+================================================================================

package/cursor-logs-export/chats/2026-02-05_2026-02-10_22-45-30_uu_app_aicoding_conv78.txt

@@ -0,0 +1,187 @@
+================================================================================
+CONVERSATION #78
+Name: Skills reload
+Workspace: uu_app_aicodingg01
+Time: 2/8/2026, 10:45:30 PM
+Model: claude-4.5-opus-high-thinking
+Context Tokens: 69,675 / 164,000 (42.5%)
+Changes: +0 -0 lines in 0 files
+Messages: 16
+Composer ID: 9c0afedc-a10f-4904-b123-7703f67e63f1
+
+API TOKEN USAGE (from dashboard export):
+  API Calls: 7
+  Input (w/ Cache Write): 126,906
+  Input (w/o Cache Write): 356
+  Cache Read: 622,107
+  Output Tokens: 3,451
+  Total API Tokens: 752,820
+  Cost: $1.39
+
+================================================================================
+
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+reload skilsl
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+Skills reloaded successfully. Found **14 skills**:
+
+- `bookkit-add-page`
+- `bookkit-list-pages`
+- `bookkit-read`
+- `bookkit-update`
+- `business-chat`
+- `mngkit-read`
+- `mngkit-update`
+- `sls-read`
+- `jira-comment`
+- `jira-read`
+- `jira-update`
+- `jira-watch`
+- `jira-worklog`
+- `wtm-worklog`
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+read this https://jira.unicorn.com/browse/JSTM-297
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+## JSTM-297: SECTOOL - Technological upgrade + security kit
+
+| Field | Value |
+|-------|-------|
+| **Status** | New (To Do) |
+| **Priority** | Major |
+| **Type** | Task |
+| **Project** | JST Maintenance |
+| **Component** | SEC TOOL |
+| **Reporter** | Zamazal Štěpán |
+| **Assignee** | Zamazal Štěpán |
+| **Created** | 2025-01-13 |
+| **Updated** | 2026-02-08 |
+
+### Description
+
+- Upgrade devkit 6+
+  - https://uuapp.plus4u.net/uu-bookkit-maing01/e884539c8511447a977c7ff070e7f2cf/book/page?code=70235938
+- Upgrade to appserver 6
+- Electron update to last stable release
+  - https://releases.electronjs.org/
+- Node.js update to 20
+  - https://endoflife.date/nodejs
+
+### Comments
+
+**Zamazal Štěpán** (2025-01-15):
+- uuAppServer + uuAppDevkit - already done in `feature/sz_JSTM-277_SECTOOL-uuAppServer-upgrade-to-version-6.x`
+- Node.js v.20 - upgrade of package.json in all three directories, then task `build-DA:w/build-DA:m`. Test of startDev and start. No other changes required. - 1h
+- Electron v.33.3.1 - after version 28.0.0 there is a change in calling of appRoot - `require.main.path` no longer supported.
+  - Need to be changed for `app.getAppPath()`
+  - But in render process, it does not work. Solution: `let appRoot = process.type === 'browser' ? app.getAppPath() : path.dirname(require.main.filename);` - 4h
+  - Change of version in server and build package.json
+
+### Linked Issues
+
+- JSTM-277 (Aktualizace požadavku)
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+reload skills
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+Skills reloaded. **14 skills** available:
+
+`bookkit-add-page`, `bookkit-list-pages`, `bookkit-read`, `bookkit-update`, `business-chat`, `mngkit-read`, `mngkit-update`, `sls-read`, `jira-comment`, `jira-read`, `jira-update`, `jira-watch`, `jira-worklog`, `wtm-worklog`
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+list me todays wtm
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+The WTM skill requires a `baseUri` parameter. Could you provide your WTM application URL? It typically looks something like:
+
+`https://uuapp.plus4u.net/uu-wtm-maing01/<awid>`
+
+Where `<awid>` is your workspace identifier.
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+reload skills
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+Skills reloaded. **14 skills** available.
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+now try to list todays wtm
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+The skill still requires a `baseUri` parameter. Let me check the skill configuration to understand what's needed.
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+The WTM skill requires your WTM application URL. Could you provide it? It should look like:
+
+```
+https://uuapp.plus4u.net/uu-specialistwtm-maing01/{your-awid}/
+```
+
+You can find this URL by opening your WTM application in a browser and copying the URL from the address bar.
+
+Alternatively, if you want this to work automatically, you could add a default `baseUri` to the skill configuration or create a personal configuration file.
+
+--------------------------------------------------------------------------------
+[USER] 10:45:30 PM
+--------------------------------------------------------------------------------
+but that should be in skill right? @/Users/jilek/.claude/skills/wtm-worklog/SKILL.md
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+Found it. The base URI is in the SKILL.md. Let me list today's entries.
+
+--------------------------------------------------------------------------------
+[ASSISTANT] 10:45:30 PM
+--------------------------------------------------------------------------------
+## Today's WTM (2026-02-08)
+
+**No entries logged for today yet.**
+
+The most recent entries are from yesterday (Feb 7):
+
+| Time (UTC) | Subject | Description |
+|------------|---------|-------------|
+| 07:00-10:00 | USYS.FBCORE~CONF02 | Skills & skilled-plus4u-mcp development |
+| 10:30-13:30 | USYS.FBCORE~CONF02 | Skills & skilled-plus4u-mcp development |
+
+---
+
+**Monthly summary (February 2026):**
+- Total worked: **71h** (4260 minutes)
+- Confirmed: 0h
+- Pending confirmation: 0h
+
+================================================================================
+End of conversation
+================================================================================