@industry-theme/agent-panels 0.1.0 → 0.1.2

package/dist/panels/SkillDetailPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/SkillDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAMpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;CAAG;AAErE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0O5D,CAAC"}
+{"version":3,"file":"SkillDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/SkillDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAQpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;CAAG;AAErE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsP5D,CAAC"}

package/dist/panels/SkillsLifecycle.stories.d.ts

@@ -17,13 +17,6 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-/**
- * Interactive workflow showing skill list and detail panels side by side.
- * Click a skill in the list to see its details.
- */
 export declare const SkillsBrowsing: Story;
-/**
- * Vertical layout variant showing list above detail
- */
 export declare const SkillsBrowsingVertical: Story;
 //# sourceMappingURL=SkillsLifecycle.stories.d.ts.map

package/dist/panels/SkillsLifecycle.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillsLifecycle.stories.d.ts","sourceRoot":"","sources":["../../src/panels/SkillsLifecycle.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D;;;GAGG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;CAYM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkLnC;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAiD5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAiDpC,CAAC"}
+{"version":3,"file":"SkillsLifecycle.stories.d.ts","sourceRoot":"","sources":["../../src/panels/SkillsLifecycle.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D;;;GAGG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;CAYM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkQnC,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAiFF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC"}

package/dist/panels.bundle.js

@@ -47457,9 +47457,19 @@ const SkillDetailPanel = ({
   actions
 }) => {
   var _a, _b, _c, _d, _e2, _f;
+  const { theme: theme2 } = useTheme();
   const { skills, isLoading, error } = useSkillsData({ context });
   const [selectedSkillId, setSelectedSkillId] = useState(null);
   const [skill, setSkill] = useState(null);
+  const panelRef = useRef(null);
+  gt(
+    "skill-detail",
+    events,
+    () => {
+      var _a2;
+      return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
+    }
+  );
   useEffect(() => {
     const unsubscribe = events.on("skill:selected", (event) => {
       const payload = event.payload;
@@ -47486,9 +47496,9 @@ const SkillDetailPanel = ({
           justifyContent: "center",
           height: "100%",
           padding: "2rem",
-          backgroundColor: theme.colors.background,
-          color: theme.colors.error,
-          fontFamily: theme.fonts.body
+          backgroundColor: theme2.colors.background,
+          color: theme2.colors.error,
+          fontFamily: theme2.fonts.body
         },
         children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
           "Error loading skills: ",
@@ -47506,9 +47516,9 @@ const SkillDetailPanel = ({
           alignItems: "center",
           justifyContent: "center",
           height: "100%",
-          backgroundColor: theme.colors.background,
-          color: theme.colors.text,
-          fontFamily: theme.fonts.body
+          backgroundColor: theme2.colors.background,
+          color: theme2.colors.text,
+          fontFamily: theme2.fonts.body
         },
         children: "Loading skills..."
       }
@@ -47525,9 +47535,9 @@ const SkillDetailPanel = ({
           justifyContent: "center",
           height: "100%",
           padding: "2rem",
-          backgroundColor: theme.colors.background,
-          color: theme.colors.textSecondary,
-          fontFamily: theme.fonts.body,
+          backgroundColor: theme2.colors.background,
+          color: theme2.colors.textSecondary,
+          fontFamily: theme2.fonts.body,
           textAlign: "center"
         },
         children: [
@@ -47536,10 +47546,10 @@ const SkillDetailPanel = ({
             "h2",
             {
               style: {
-                color: theme.colors.text,
-                fontSize: theme.fontSizes[4],
-                fontFamily: theme.fonts.heading,
-                fontWeight: theme.fontWeights.heading,
+                color: theme2.colors.text,
+                fontSize: theme2.fontSizes[4],
+                fontFamily: theme2.fonts.heading,
+                fontWeight: theme2.fontWeights.heading,
                 marginBottom: "0.5rem"
               },
               children: "No Skill Selected"
@@ -47560,11 +47570,14 @@ const SkillDetailPanel = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: panelRef,
+      tabIndex: -1,
       style: {
         height: "100%",
-        backgroundColor: theme.colors.background,
+        backgroundColor: theme2.colors.background,
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        outline: "none"
       },
       children: skill.content ? /* @__PURE__ */ jsxs(Fragment, { children: [
         hasStructure && /* @__PURE__ */ jsxs(
@@ -47572,20 +47585,20 @@ const SkillDetailPanel = ({
           {
             style: {
               padding: "1rem",
-              borderBottom: `1px solid ${theme.colors.border}`,
+              borderBottom: `1px solid ${theme2.colors.border}`,
               display: "flex",
               gap: "0.5rem",
               flexWrap: "wrap",
-              backgroundColor: theme.colors.backgroundSecondary
+              backgroundColor: theme2.colors.backgroundSecondary
             },
             children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   style: {
-                    fontSize: theme.fontSizes[1],
-                    color: theme.colors.textSecondary,
-                    fontFamily: theme.fonts.body,
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textSecondary,
+                    fontFamily: theme2.fonts.body,
                     marginRight: "0.5rem",
                     display: "flex",
                     alignItems: "center"
@@ -47599,10 +47612,10 @@ const SkillDetailPanel = ({
                   style: {
                     padding: "0.25rem 0.75rem",
                     borderRadius: "12px",
-                    backgroundColor: theme.colors.primary,
-                    color: theme.colors.background,
-                    fontSize: theme.fontSizes[0],
-                    fontFamily: theme.fonts.body,
+                    backgroundColor: theme2.colors.primary,
+                    color: theme2.colors.background,
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.body,
                     fontWeight: 500,
                     display: "flex",
                     alignItems: "center",
@@ -47625,10 +47638,10 @@ const SkillDetailPanel = ({
                   style: {
                     padding: "0.25rem 0.75rem",
                     borderRadius: "12px",
-                    backgroundColor: theme.colors.secondary,
-                    color: theme.colors.background,
-                    fontSize: theme.fontSizes[0],
-                    fontFamily: theme.fonts.body,
+                    backgroundColor: theme2.colors.secondary,
+                    color: theme2.colors.background,
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.body,
                     fontWeight: 500,
                     display: "flex",
                     alignItems: "center",
@@ -47651,10 +47664,10 @@ const SkillDetailPanel = ({
                   style: {
                     padding: "0.25rem 0.75rem",
                     borderRadius: "12px",
-                    backgroundColor: theme.colors.accent,
-                    color: theme.colors.background,
-                    fontSize: theme.fontSizes[0],
-                    fontFamily: theme.fonts.body,
+                    backgroundColor: theme2.colors.accent,
+                    color: theme2.colors.background,
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.body,
                     fontWeight: 500,
                     display: "flex",
                     alignItems: "center",
@@ -47678,7 +47691,7 @@ const SkillDetailPanel = ({
           SkillMarkdown,
           {
             content: skill.content,
-            theme,
+            theme: theme2,
             onParsed: handleParsed,
             onError: handleError,
             showRawOnError: true
@@ -47692,8 +47705,8 @@ const SkillDetailPanel = ({
             alignItems: "center",
             justifyContent: "center",
             height: "100%",
-            color: theme.colors.textSecondary,
-            fontFamily: theme.fonts.body
+            color: theme2.colors.textSecondary,
+            fontFamily: theme2.fonts.body
           },
           children: /* @__PURE__ */ jsx("p", { children: "No content available for this skill" })
         }