@fewangsit/wangsvue-gsts 2.0.0-alpha.27 → 2.0.0-alpha.28

package/assets/{scanner.worker-DQsz7oT_.js.map → scanner.worker-Bk2e5hSA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"scanner.worker-DQsz7oT_.js","sources":["../../../library/components/buttonscan/workers/scanner.worker.ts"],"sourcesContent":["interface ConnectionOption {\r\n  onopen: (ws: WebSocket, connectionState: ConnectionState) => void;\r\n  onmessage: (event: MessageEvent) => void;\r\n  onerror: (error: Event) => void;\r\n  timeout?: number;\r\n}\r\n\r\ninterface WorkerMessage {\r\n  command: string;\r\n  sessionId: string;\r\n  scanCommand?: string;\r\n  userId?: string;\r\n  companyCode?: string;\r\n  serialNumber?: string;\r\n  jenisDevice?: string;\r\n}\r\n\r\ntype ConnectionState = 'established' | 'reused';\r\n\r\nlet socket: WebSocket | null = null;\r\nlet timeoutId: NodeJS.Timeout | null = null; // Stores timeout ID for idle socket connection\r\nlet currentUserId: string | undefined;\r\nlet currentCompanyCode: string | undefined;\r\nlet sessionId: string = ''; // The unique session ID for the current connection\r\n\r\nself.onmessage = (event): void => {\r\n  const message: WorkerMessage = event.data;\r\n  currentCompanyCode = message.companyCode;\r\n\r\n  switch (message.command) {\r\n    case 'sync':\r\n      sync(message);\r\n      break;\r\n    case 'connect':\r\n      connect(message);\r\n      break;\r\n    case 'scan':\r\n      scan(message);\r\n      break;\r\n    case 'stopscan':\r\n      stopScan(message);\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n};\r\n\r\n/**\r\n * Opens a WebSocket connection if not already open.\r\n * If the connection is open, the `onopen` callback is immediately called.\r\n * @returns {WebSocket} The WebSocket instance.\r\n */\r\nconst openConnection = (opt: ConnectionOption): void => {\r\n  let connectionState: ConnectionState = 'established';\r\n  if (socket && socket.readyState === WebSocket.OPEN) {\r\n    // If the socket is already open, immediately call the onopen callback\r\n    connectionState = 'reused';\r\n    opt.onopen(socket, connectionState);\r\n    resetTimeOut(opt.timeout);\r\n  } else {\r\n    // If the socket is not open or undefined, create a new connection\r\n    socket = new WebSocket(`${import.meta.env.VITE_APP_READER_API}`);\r\n  }\r\n\r\n  // Handle successful connection\r\n  socket.onopen = (): void => {\r\n    sessionId =\r\n      Math.random().toString(36).substring(2, 15) +\r\n      Math.random().toString(36).substring(2, 15); // Generate a random session ID\r\n\r\n    connectionState = 'established';\r\n\r\n    if (socket) opt.onopen(socket, connectionState); // Execute the onopen callback once the connection is established\r\n    resetTimeOut(opt.timeout);\r\n  };\r\n\r\n  socket.onmessage = (event): void => {\r\n    opt.onmessage(event);\r\n    resetTimeOut(opt.timeout);\r\n  };\r\n\r\n  socket.onerror = (error): void => {\r\n    console.error('🚀 ~ Scanner Worker: openConnection ~ error:', error);\r\n    opt.onerror(error);\r\n    socket?.close();\r\n    socket = null;\r\n    if (timeoutId) clearTimeout(timeoutId);\r\n  };\r\n};\r\n\r\nconst handleSocketTimeout = (): void => {\r\n  stopScan({ userId: currentUserId });\r\n  currentUserId = undefined;\r\n  if (socket) socket.close();\r\n  socket = null;\r\n  if (timeoutId) clearTimeout(timeoutId);\r\n  console.info('Socket connection has been closed!');\r\n};\r\n\r\nconst resetTimeOut = (timeout = 0): void => {\r\n  if (timeout) {\r\n    // Adding this conditional to disable timout, may be sometimes it need to be enable, simpli remove the condition\r\n    if (timeoutId) clearTimeout(timeoutId);\r\n    timeoutId = setTimeout(handleSocketTimeout, timeout); // Timed out after 3 Minutes\r\n  }\r\n};\r\n\r\nconst sync = ({ userId }: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket): void => {\r\n      ws.send(\r\n        JSON.stringify({\r\n          data: {\r\n            command: 'connect',\r\n            userId,\r\n            sessionId,\r\n            companyCode: currentCompanyCode,\r\n            source: 'app',\r\n          },\r\n          event: 'reader',\r\n        }),\r\n      );\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({ status: 'synced', ...JSON.parse(event.data) });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'sync_error', error });\r\n    },\r\n  });\r\n};\r\n\r\nconst connect = ({ userId }: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket, state): void => {\r\n      if (state === 'established') {\r\n        ws.send(\r\n          JSON.stringify({\r\n            data: {\r\n              command: 'connect',\r\n              userId,\r\n              source: 'app',\r\n              sessionId,\r\n              companyCode: currentCompanyCode,\r\n            },\r\n            event: 'reader',\r\n          }),\r\n        );\r\n      } else {\r\n        postMessage({\r\n          status: 'connection_reused',\r\n        });\r\n      }\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({\r\n        status: 'connection_established',\r\n        ...JSON.parse(event.data),\r\n      });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'error_connecting', error });\r\n    },\r\n  });\r\n};\r\n\r\nconst scan = ({\r\n  scanCommand,\r\n  userId,\r\n  serialNumber,\r\n  jenisDevice,\r\n}: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket): void => {\r\n      ws.send(\r\n        JSON.stringify({\r\n          data: {\r\n            command: scanCommand,\r\n            userId,\r\n            sessionId,\r\n            companyCode: currentCompanyCode,\r\n            source: 'app',\r\n            serialNumber,\r\n            jenisDevice,\r\n          },\r\n          event: 'reader',\r\n        }),\r\n      );\r\n\r\n      postMessage({ status: 'scan_started' });\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({ status: 'scanned', ...JSON.parse(event.data) });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'scan_error', error });\r\n    },\r\n  });\r\n};\r\n\r\n/**\r\n * Single Scan:\r\n * - Stop Scan will be invoked on socket timeout\r\n *\r\n * Bulk Scan:\r\n * - Stop Scan will also be invoked on stopScan by user interaction\r\n */\r\nconst stopScan = ({ userId }: Partial<WorkerMessage>): void => {\r\n  if (socket && socket.readyState === WebSocket.OPEN) {\r\n    socket.send(\r\n      JSON.stringify({\r\n        data: {\r\n          command: 'stopscan',\r\n          userId,\r\n          source: 'app',\r\n          sessionId,\r\n          companyCode: currentCompanyCode,\r\n        },\r\n        event: 'reader',\r\n      }),\r\n    );\r\n\r\n    postMessage({ status: 'scan_stopped' });\r\n    console.info('Scan Process Stopped!');\r\n  }\r\n};\r\n"],"names":["socket","timeoutId","currentUserId","currentCompanyCode","sessionId","event","message","sync","connect","scan","stopScan","openConnection","opt","connectionState","resetTimeOut","error","handleSocketTimeout","timeout","userId","ws","state","scanCommand","serialNumber","jenisDevice"],"mappings":"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"}
+{"version":3,"file":"scanner.worker-Bk2e5hSA.js","sources":["../../../library/components/buttonscan/workers/scanner.worker.ts"],"sourcesContent":["interface ConnectionOption {\r\n  onopen: (ws: WebSocket, connectionState: ConnectionState) => void;\r\n  onmessage: (event: MessageEvent) => void;\r\n  onerror: (error: Event) => void;\r\n  timeout?: number;\r\n}\r\n\r\ninterface WorkerMessage {\r\n  command: string;\r\n  sessionId: string;\r\n  scanCommand?: string;\r\n  userId?: string;\r\n  companyCode?: string;\r\n  serialNumber?: string;\r\n  jenisDevice?: string;\r\n}\r\n\r\ntype ConnectionState = 'established' | 'reused';\r\n\r\nlet socket: WebSocket | null = null;\r\nlet timeoutId: NodeJS.Timeout | null = null; // Stores timeout ID for idle socket connection\r\nlet currentUserId: string | undefined;\r\nlet currentCompanyCode: string | undefined;\r\nlet sessionId: string = ''; // The unique session ID for the current connection\r\n\r\nself.onmessage = (event): void => {\r\n  const message: WorkerMessage = event.data;\r\n  currentCompanyCode = message.companyCode;\r\n\r\n  switch (message.command) {\r\n    case 'sync':\r\n      sync(message);\r\n      break;\r\n    case 'connect':\r\n      connect(message);\r\n      break;\r\n    case 'scan':\r\n      scan(message);\r\n      break;\r\n    case 'stopscan':\r\n      stopScan(message);\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n};\r\n\r\n/**\r\n * Opens a WebSocket connection if not already open.\r\n * If the connection is open, the `onopen` callback is immediately called.\r\n * @returns {WebSocket} The WebSocket instance.\r\n */\r\nconst openConnection = (opt: ConnectionOption): void => {\r\n  let connectionState: ConnectionState = 'established';\r\n  if (socket && socket.readyState === WebSocket.OPEN) {\r\n    // If the socket is already open, immediately call the onopen callback\r\n    connectionState = 'reused';\r\n    opt.onopen(socket, connectionState);\r\n    resetTimeOut(opt.timeout);\r\n  } else {\r\n    // If the socket is not open or undefined, create a new connection\r\n    socket = new WebSocket(`${import.meta.env.VITE_APP_READER_API}`);\r\n  }\r\n\r\n  // Handle successful connection\r\n  socket.onopen = (): void => {\r\n    sessionId =\r\n      Math.random().toString(36).substring(2, 15) +\r\n      Math.random().toString(36).substring(2, 15); // Generate a random session ID\r\n\r\n    connectionState = 'established';\r\n\r\n    if (socket) opt.onopen(socket, connectionState); // Execute the onopen callback once the connection is established\r\n    resetTimeOut(opt.timeout);\r\n  };\r\n\r\n  socket.onmessage = (event): void => {\r\n    opt.onmessage(event);\r\n    resetTimeOut(opt.timeout);\r\n  };\r\n\r\n  socket.onerror = (error): void => {\r\n    console.error('🚀 ~ Scanner Worker: openConnection ~ error:', error);\r\n    opt.onerror(error);\r\n    socket?.close();\r\n    socket = null;\r\n    if (timeoutId) clearTimeout(timeoutId);\r\n  };\r\n};\r\n\r\nconst handleSocketTimeout = (): void => {\r\n  stopScan({ userId: currentUserId });\r\n  currentUserId = undefined;\r\n  if (socket) socket.close();\r\n  socket = null;\r\n  if (timeoutId) clearTimeout(timeoutId);\r\n  console.info('Socket connection has been closed!');\r\n};\r\n\r\nconst resetTimeOut = (timeout = 0): void => {\r\n  if (timeout) {\r\n    // Adding this conditional to disable timout, may be sometimes it need to be enable, simpli remove the condition\r\n    if (timeoutId) clearTimeout(timeoutId);\r\n    timeoutId = setTimeout(handleSocketTimeout, timeout); // Timed out after 3 Minutes\r\n  }\r\n};\r\n\r\nconst sync = ({ userId }: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket): void => {\r\n      ws.send(\r\n        JSON.stringify({\r\n          data: {\r\n            command: 'connect',\r\n            userId,\r\n            sessionId,\r\n            companyCode: currentCompanyCode,\r\n            source: 'app',\r\n          },\r\n          event: 'reader',\r\n        }),\r\n      );\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({ status: 'synced', ...JSON.parse(event.data) });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'sync_error', error });\r\n    },\r\n  });\r\n};\r\n\r\nconst connect = ({ userId }: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket, state): void => {\r\n      if (state === 'established') {\r\n        ws.send(\r\n          JSON.stringify({\r\n            data: {\r\n              command: 'connect',\r\n              userId,\r\n              source: 'app',\r\n              sessionId,\r\n              companyCode: currentCompanyCode,\r\n            },\r\n            event: 'reader',\r\n          }),\r\n        );\r\n      } else {\r\n        postMessage({\r\n          status: 'connection_reused',\r\n        });\r\n      }\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({\r\n        status: 'connection_established',\r\n        ...JSON.parse(event.data),\r\n      });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'error_connecting', error });\r\n    },\r\n  });\r\n};\r\n\r\nconst scan = ({\r\n  scanCommand,\r\n  userId,\r\n  serialNumber,\r\n  jenisDevice,\r\n}: WorkerMessage): void => {\r\n  currentUserId = userId;\r\n\r\n  openConnection({\r\n    onopen: (ws: WebSocket): void => {\r\n      ws.send(\r\n        JSON.stringify({\r\n          data: {\r\n            command: scanCommand,\r\n            userId,\r\n            sessionId,\r\n            companyCode: currentCompanyCode,\r\n            source: 'app',\r\n            serialNumber,\r\n            jenisDevice,\r\n          },\r\n          event: 'reader',\r\n        }),\r\n      );\r\n\r\n      postMessage({ status: 'scan_started' });\r\n    },\r\n\r\n    onmessage: (event): void => {\r\n      postMessage({ status: 'scanned', ...JSON.parse(event.data) });\r\n    },\r\n\r\n    onerror: (error): void => {\r\n      postMessage({ status: 'scan_error', error });\r\n    },\r\n  });\r\n};\r\n\r\n/**\r\n * Single Scan:\r\n * - Stop Scan will be invoked on socket timeout\r\n *\r\n * Bulk Scan:\r\n * - Stop Scan will also be invoked on stopScan by user interaction\r\n */\r\nconst stopScan = ({ userId }: Partial<WorkerMessage>): void => {\r\n  if (socket && socket.readyState === WebSocket.OPEN) {\r\n    socket.send(\r\n      JSON.stringify({\r\n        data: {\r\n          command: 'stopscan',\r\n          userId,\r\n          source: 'app',\r\n          sessionId,\r\n          companyCode: currentCompanyCode,\r\n        },\r\n        event: 'reader',\r\n      }),\r\n    );\r\n\r\n    postMessage({ status: 'scan_stopped' });\r\n    console.info('Scan Process Stopped!');\r\n  }\r\n};\r\n"],"names":["socket","timeoutId","currentUserId","currentCompanyCode","sessionId","event","message","sync","connect","scan","stopScan","openConnection","opt","connectionState","resetTimeOut","error","handleSocketTimeout","timeout","userId","ws","state","scanCommand","serialNumber","jenisDevice"],"mappings":"yBAmBA,IAAIA,EAA2B,KAC3BC,EAAmC,KACnCC,EACAC,EACAC,EAAoB,GAExB,KAAK,UAAaC,GAAgB,CAChC,MAAMC,EAAyBD,EAAM,KAGrC,OAFAF,EAAqBG,EAAQ,YAErBA,EAAQ,QAAA,CACd,IAAK,OACHC,EAAKD,CAAO,EACZ,MACF,IAAK,UACHE,EAAQF,CAAO,EACf,MACF,IAAK,OACHG,EAAKH,CAAO,EACZ,MACF,IAAK,WACHI,EAASJ,CAAO,EAChB,KAEA,CAEN,EAOA,MAAMK,EAAkBC,GAAgC,CACtD,IAAIC,EAAmC,cACnCb,GAAUA,EAAO,aAAe,UAAU,MAE5Ca,EAAkB,SAClBD,EAAI,OAAOZ,EAAQa,CAAe,EAClCC,EAAaF,EAAI,OAAO,GAGxBZ,EAAS,IAAI,UAAU,qCAAwC,EAIjEA,EAAO,OAAS,IAAY,CAC1BI,EACE,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,EAAG,EAAE,EAC1C,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,EAAG,EAAE,EAE5CS,EAAkB,cAEdb,GAAQY,EAAI,OAAOZ,EAAQa,CAAe,EAC9CC,EAAaF,EAAI,OAAO,CAC1B,EAEAZ,EAAO,UAAaK,GAAgB,CAClCO,EAAI,UAAUP,CAAK,EACnBS,EAAaF,EAAI,OAAO,CAC1B,EAEAZ,EAAO,QAAWe,GAAgB,CAChC,QAAQ,MAAM,+CAAgDA,CAAK,EACnEH,EAAI,QAAQG,CAAK,EACjBf,GAAQ,MAAA,EACRA,EAAS,KACLC,gBAAwBA,CAAS,CACvC,CACF,EAEMe,EAAsB,IAAY,CACtCN,EAAS,CAAE,OAAQR,EAAe,EAClCA,EAAgB,OACZF,KAAe,MAAA,EACnBA,EAAS,KACLC,gBAAwBA,CAAS,EACrC,QAAQ,KAAK,oCAAoC,CACnD,EAEMa,EAAe,CAACG,EAAU,IAAY,CACtCA,IAEEhB,gBAAwBA,CAAS,EACrCA,EAAY,WAAWe,EAAqBC,CAAO,EAEvD,EAEMV,EAAO,CAAC,CAAE,OAAAW,KAAkC,CAChDhB,EAAgBgB,EAEhBP,EAAe,CACb,OAASQ,GAAwB,CAC/BA,EAAG,KACD,KAAK,UAAU,CACb,KAAM,CACJ,QAAS,UACT,OAAAD,EACA,UAAAd,EACA,YAAaD,EACb,OAAQ,KAAA,EAEV,MAAO,QAAA,CACR,CAAA,CAEL,EAEA,UAAYE,GAAgB,CAC1B,YAAY,CAAE,OAAQ,SAAU,GAAG,KAAK,MAAMA,EAAM,IAAI,EAAG,CAC7D,EAEA,QAAUU,GAAgB,CACxB,YAAY,CAAE,OAAQ,aAAc,MAAAA,CAAA,CAAO,CAC7C,CAAA,CACD,CACH,EAEMP,EAAU,CAAC,CAAE,OAAAU,KAAkC,CACnDhB,EAAgBgB,EAEhBP,EAAe,CACb,OAAQ,CAACQ,EAAeC,IAAgB,CAClCA,IAAU,cACZD,EAAG,KACD,KAAK,UAAU,CACb,KAAM,CACJ,QAAS,UACT,OAAAD,EACA,OAAQ,MACR,UAAAd,EACA,YAAaD,CAAA,EAEf,MAAO,QAAA,CACR,CAAA,EAGH,YAAY,CACV,OAAQ,mBAAA,CACT,CAEL,EAEA,UAAYE,GAAgB,CAC1B,YAAY,CACV,OAAQ,yBACR,GAAG,KAAK,MAAMA,EAAM,IAAI,CAAA,CACzB,CACH,EAEA,QAAUU,GAAgB,CACxB,YAAY,CAAE,OAAQ,mBAAoB,MAAAA,CAAA,CAAO,CACnD,CAAA,CACD,CACH,EAEMN,EAAO,CAAC,CACZ,YAAAY,EACA,OAAAH,EACA,aAAAI,EACA,YAAAC,CACF,IAA2B,CACzBrB,EAAgBgB,EAEhBP,EAAe,CACb,OAASQ,GAAwB,CAC/BA,EAAG,KACD,KAAK,UAAU,CACb,KAAM,CACJ,QAASE,EACT,OAAAH,EACA,UAAAd,EACA,YAAaD,EACb,OAAQ,MACR,aAAAmB,EACA,YAAAC,CAAA,EAEF,MAAO,QAAA,CACR,CAAA,EAGH,YAAY,CAAE,OAAQ,eAAgB,CACxC,EAEA,UAAYlB,GAAgB,CAC1B,YAAY,CAAE,OAAQ,UAAW,GAAG,KAAK,MAAMA,EAAM,IAAI,EAAG,CAC9D,EAEA,QAAUU,GAAgB,CACxB,YAAY,CAAE,OAAQ,aAAc,MAAAA,CAAA,CAAO,CAC7C,CAAA,CACD,CACH,EASML,EAAW,CAAC,CAAE,OAAAQ,KAA2C,CACzDlB,GAAUA,EAAO,aAAe,UAAU,OAC5CA,EAAO,KACL,KAAK,UAAU,CACb,KAAM,CACJ,QAAS,WACT,OAAAkB,EACA,OAAQ,MACR,UAAAd,EACA,YAAaD,CAAA,EAEf,MAAO,QAAA,CACR,CAAA,EAGH,YAAY,CAAE,OAAQ,eAAgB,EACtC,QAAQ,KAAK,uBAAuB,EAExC"}

package/badge/Badge.fm.md

@@ -0,0 +1,32 @@
+# Badge
+type reference: ./index.d.ts
+
+Append a `Badge` component when the figma context contains:
+
+- A figma component or instance named "Badge" or similar, consisting of a small rounded pill with centered text (9px SemiBold) and an optional close/remove icon.
+- The Figma `BadgeProps` uses `color` ("Primary" | "Primary Supply" | "Success" | "Warning" | "Dark") and `propDelete` (boolean) to define appearance.
+- IGNORE badges that appear inside an `InputBadge` component (those are child badges, not standalone).
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text content of the badge. Derived from the text node inside the badge pill element.
+
+- `severity` (string | undefined)
+  The severity of the badge, inferred from the Figma `color` property:
+  - `'primary'` if `color` is "Primary" (blue, `--badge/primary`). Used for labels like "group", "nama".
+  - `'success'` if `color` is "Success" (green). Used for status like "verified".
+  - `'warning'` if `color` is "Warning" (yellow). Used for status like "unverified".
+  - `'dark'` if `color` is "Dark" (dark). Used for labels like "brand", "model type", "disposed".
+  - Omit if the color does not match any known mapping.
+
+- `removable` (boolean | undefined)
+  Whether a close/remove icon button is present inside the badge. Maps to the Figma `propDelete` property. If `propDelete` is true or a close icon exists, set to `true`. Omit if absent.

package/breadcrumb/Breadcrumb.fm.md

@@ -0,0 +1,23 @@
+# Breadcrumb
+type reference: ./index.d.ts
+
+Append a `Breadcrumb` component when the figma context contains:
+
+- A figma instance named "Breadcrumb" or similar, unique to a single page.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `menus` (BreadcrumbMenu[])
+  Get each menu item and set them as follows:
+  - `name` (string)
+    The label of this item.
+  - `route` (string)
+    Must be empty.

package/button/Button.fm.md

@@ -0,0 +1,53 @@
+# Button
+type reference: ./index.d.ts
+
+Append a `Button` component when the figma context contains:
+
+- A button named "Button" or similar.
+- The Figma `ButtonProps` uses `type` ("Default" | "Text" | "Outline" | "Icon Default" | "Icon Outline") and `color` ("Primary" | "Success" | "Warning" | "Danger" | "Dark" | "Secondary") to define appearance.
+- IGNORE any already extended button component like "Button Search", "Button Download", etc.
+- IGNORE any action button that is already present in Dialog (such as "Save", "Cancel", "Submit", etc.)
+- IGNORE any action button that is already present in Filter Container (such as "Apply", "Clear Field")
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string | undefined)
+  The text of the button. Derived from the `text` property in Figma. For icon-only buttons (type "Icon Default" or "Icon Outline"), omit this field.
+
+- `icon` (WangsIcons | undefined)
+  The icon of the button. Derived from the `data-name` attribute of an icon/image node inside the button (e.g. `checkbox-blank-circle-line`, `close-line`, `search-2-line`). If no icon is present, omit this field.
+
+- `iconPos` (string | undefined)
+  The icon position. Inferred from the Figma `leftIcon`/`rightIcon` boolean flags:
+  - `'left'` if only `leftIcon` is true.
+  - `'right'` if only `rightIcon` is true.
+  - Omit if no icon is present, or if `leftIcon` and `rightIcon` are both false.
+
+- `severity` (string)
+  The severity of the button, inferred from the Figma `color` property:
+  - `'primary'` if `color` is "Primary" (blue, `--button/primary`).
+  - `'success'` if `color` is "Success" (green, `--button/success`).
+  - `'warning'` if `color` is "Warning" (yellow, `--button/warning`).
+  - `'danger'` if `color` is "Danger" (red, `--button/danger`).
+  - `'secondary'` if `color` is "Secondary" (gray, `--button/disable`).
+  - Omit or use `'contrast'` if `color` is "Dark" (`--button/dark`).
+
+- `text` (boolean | undefined)
+  Whether the button has no background (text-only style). Set to `true` when Figma `type` is "Text". Omit when `type` is "Default" or "Outline".
+
+- `outlined` (boolean | undefined)
+  Whether the button has a border but no fill. Set to `true` when Figma `type` is "Outline". Omit when `type` is "Default" or "Text".
+
+- `size` ('small' | 'large' | undefined)
+  Inferred from the button frame dimensions:
+  - `'small'` if the button height is notably smaller (e.g. < 26px).
+  - `'large'` if the button height is notably larger (e.g. > 26px).
+  - Omit for default 26px height.

package/buttonbulkaction/ButtonBulkAction-MenuItem.fm.md

@@ -0,0 +1,18 @@
+# MenuItem
+type reference: ./index.d.ts
+
+Append each multi action option to the `options` array inside the parent `ButtonBulkAction` props when the figma context contains:
+
+- For each distinct multi action option detected from the "Bulk Action" or similar layer(s) adjacent to `BulkAction`.
+
+## Metadata Shape (Properties)
+
+### Properties definitions
+
+`label` (string)
+  The text label rendered on the item.
+
+`icon` (string)
+  Get the icon label rendered on the item, and search for the most similar type string from the WangsIcons type, and set it as kebab-case (just like how it is in the type).
+
+  WangsIcons reference: ../icon/Icon.vue.d.ts

package/buttonbulkaction/ButtonBulkAction.fm.md

@@ -0,0 +1,25 @@
+# ButtonBulkAction
+type reference: ./index.d.ts
+
+Append a `ButtonBulkAction` component when the figma context contains:
+
+- A button named "ButtonBulkAction" or similar, adjacent to a `DataTable`.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `options` (MenuItem[])
+  Refer to ./ButtonBulkAction-MenuItem.fm.md
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.
+
+- `naming` (string)
+  The text that contains "x Data(s) Selected", or similar. In this case, "Data" is the naming.

package/buttondownload/ButtonDownload.fm.md

@@ -0,0 +1,22 @@
+# ButtonDownload
+type reference: ./index.d.ts
+
+Append a `ButtonDownload` component when the figma context contains:
+
+- A button named "Button Download" or similar, adjacent to a `DataTable`.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.
+
+- `fileName` (string)
+  Must be empty.

package/buttonfilter/ButtonFilter.fm.md

@@ -0,0 +1,19 @@
+# ButtonFilter
+type reference: ./ButtonFilter.vue.d.ts
+
+Append a `ButtonFilter` component when the figma context contains:
+
+- A button named "Button Filter" or similar, adjacent to a `DataTable`.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.

package/buttonsearch/ButtonSearch.fm.md

@@ -0,0 +1,19 @@
+# ButtonSearch
+type reference: ./index.d.ts
+
+Append a `ButtonSearch` component when the figma context contains:
+
+- A button named "Button Search" or similar, adjacent to a `DataTable`.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `tableName` (string)
+  Must be exactly the same table name with the adjacent `DataTable` component.

package/buttonsearchbyscan/ButtonSearchByScan.fm.md

@@ -0,0 +1,25 @@
+# ButtonSearchByScan
+type reference: ./index.d.ts
+
+Append a `ButtonSearchByScan` component when the figma context contains:
+
+- A button named "Button Search by Scan" or similar, with a `qr-scan-line` icon and label "Search by Scan", adjacent to a `DataTable`.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the button (e.g. "Search by Scan"), if it already is "Search by Scan", omit it.
+
+- `icon` (WangsVueIcons | undefined)
+  The icon of the button, typically `qr-scan-line`. If no icon is present, omit this field.
+
+- `tableName` (string)
+  Must be exactly the same table name as the adjacent `DataTable` component.

package/buttonselecttree/ButtonSelectTree.fm.md

@@ -0,0 +1,40 @@
+# ButtonSelectTree
+type reference: ./index.d.ts
+
+Append a `ButtonSelectTree` component when the figma context contains:
+
+- A figma component or instance named "Button Select Tree" or similar, consisting of a button trigger that opens a tree selection dialog, optionally paired with a label, required asterisk, and info icon. When values are selected, the button text updates to show the selection count (e.g. "3 group(s) selected").
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `fieldLabel` (string)
+  The text of the label displayed above the button.
+
+- `label` (string | undefined)
+  The text of the button (e.g. "Select"). When values are selected, the button text is replaced with the selection count (e.g. "3 group(s) selected"). Omit if the button shows the default label.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the component shows an error state (red caption text below the button). Omit if not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the button shows a disabled state (gray background). Omit if not disabled.
+
+- `selectionMode` ('single' | 'checkbox')
+  Infer from the button type:
+  - `"Default"` type (standard button with text like "Select" or "3 group(s) selected") → `'checkbox'`
+  - `"Single Selected"` type (badge with edit and close icons) → `'single'`
+  - `"Icon"` type (small icon-only button with `checkbox-blank-circle-line`) → `'checkbox'`

package/calendar/Calendar.fm.md

@@ -0,0 +1,34 @@
+# Calendar
+type reference: ./index.d.ts
+
+Append a `Calendar` component when the figma context contains:
+
+- A figma component or instance named "Calendar" or similar, consisting of a date input field optionally paired with a label, required asterisk, info icon, and a calendar icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the date input.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the date input (e.g. "Select date"). When a date is selected, the placeholder is replaced with the formatted date (e.g. "22/03/2022"). Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the date input shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the date input shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/changelogpage/index.d.ts

@@ -1,4 +1,4 @@
-import { ChangelogFilterQuery } from '@tagsamurai/fats-api-services/src/dto/changelog.dto';
+import { ChangelogFilterQuery } from '@tagsamurai/gsts-api-services/src/dto/changelog.dto';
 
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 

package/components.fm.md

@@ -0,0 +1,56 @@
+# Supported Components
+
+This document lists every wangsvue component the parser can emit. When the design context contains a UI element matching one of the entries below, produce the corresponding metadata block. If a node does NOT match any entry in this list, SKIP it silently — do NOT emit unrecognised components.
+
+## Scope
+
+- When the design context contains **multiple page-level frames** (e.g. "fixed-asset/assets", "fixed-asset/borrow", "fixed-asset/missing/active"), process **ALL of them**. Each frame that contains a recognised component yields its own entry in the output.
+- Nodes that clearly map to **Card, Sidebar, or Navbar** are **skipped** (do not emit metadata for them), but their **child nodes are still processed** — a `DataTable` nested inside a Card frame is still emitted.
+
+## Component list
+Each of this component contains {component}.fm.md in their respective directory that will guide you how to parse them.
+
+Inside these *.fm.md file, they will give definition type reference for each component. ONLY parse component properties that is strictly defined inside the *.fm.md file, DON'T parse component properties that is listed in the *.d.ts, only use it for a type reference.
+
+1. DataTable
+2. ButtonSearch
+3. ButtonFilter
+4. ButtonDownload
+5. FilterContainer
+6. Breadcrumb
+7. DialogForm
+8. InputText
+9. InputNumber
+10. TextArea
+11. Dropdown
+12. MultiSelect
+13. Calendar
+14. InputPhoneNumber
+15. InputBadge
+16. InputRangeNumber
+17. FileUpload
+18. ButtonSelectTree
+19. ImageCompressor
+20. InputPassword
+21. ButtonSearchByScan
+22. DialogSelectTree
+23. Button
+24. Badge
+
+## How to identify a component from Figma nodes
+
+- Use the node `name`, `type`, and child structure from the design context to decide which wangsvue component it represents.
+- If a node clearly maps to Card, Sidebar, or Navbar -> SKIP the node itself but **continue processing its children** (do not discard content nested inside it).
+- If none of the heuristics match -> SKIP the node entirely. Do NOT invent new component types.
+
+## Multi-step context fetching
+
+1. **Page structure** — Call `figma_get_design_context` on each page-level frame (e.g. `fixed-asset/borrow`). The returned code reveals the table structure, column header text, and whether a sort icon or ellipsis action column is present.
+2. **Column visibility** — For each table, locate its associated `Column Visibility` frame (positioned near the filter area in the canvas, typically at `x~1197.5` with a y near the page's filter container). Call `figma_get_design_context` on that frame to determine `fixed` and `checkedByDefault` per column. Refer to @docs/figma-parser/datatable-tablecolumn.md#determining-fixed-and-checkedbydefault-from-column-visibility-panels.
+3. **Table Toolbars (ButtonSearch)** — The top-level design context may expose a `Table Toolbars` instance as a collapsed component with no visible children. To determine whether a `Button Search` exists, fetch `figma_get_design_context` on that instance directly. The expanded code will reveal child elements with `data-name="Button Search"` containing a `search-2-line` icon. If present, emit a `ButtonSearch` component linked to the adjacent DataTable's `tableName`.
+
+## Output specification
+
+The parser MUST return a single JSON object. Refer to the typescript specification at ./wangsvue-metadata.ts
+
+Use that file as the authoritative type reference when implementing the parser output.

package/datatable/DataTable-MenuItem.fm.md

@@ -0,0 +1,22 @@
+# MenuItem
+type reference: ./index.d.ts
+
+Append each single action option to the `options` array inside the parent `DataTable` props when the figma context contains:
+
+- For each distinct single action option detected from the "Single Action" or similar layer(s) adjacent to `DataTable`.
+- IGNORE any option that is "No Option Available" or similar.
+
+## Metadata Shape (Properties)
+
+### Properties definitions
+
+`label` (string)
+  The text label rendered on the item.
+
+`icon` (string)
+  Get the icon label rendered on the item, and search for the most similar type string from the WangsIcons type, and set it as kebab-case (just like how it is in the type).
+
+  WangsIcons reference: ../icon/Icon.vue.d.ts
+
+`command` ((event: MenuItemCommandEvent) => void)
+  The action that this menu item triggers when clicked. Must always be set to a no-op function: `() => {}`. But if you can use it for showing dialog, you may set it accordingly.

package/datatable/DataTable-TableColumn.fm.md

@@ -0,0 +1,52 @@
+# TableColumn
+type reference: ./index.d.ts
+
+Append each column to the `columns` array inside the parent `DataTable` props when the figma context contains:
+
+- For each distinct column detected in the `DataTable` header.
+
+## Metadata Shape (Properties)
+
+### Properties definitions
+
+`header` (string)
+  The column header text (TH).
+
+`field` (string)
+  The column header text, but converted into snake_case.
+
+`sortable` (boolean)
+  True if the column header have the sort icon, false if not. Image column is always false.
+
+`visible` (boolean)
+  Must be true.
+
+`reorderable` (boolean)
+  Must be true.
+
+`dragable` (boolean)
+  Must be true.
+
+`fixed` (boolean)
+  True if the checkbox for the column visibility of this column is disabled, false if not.
+
+`checkedByDefault` (boolean)
+  True if the checkbox for the column visibility of this column is checked, false if not.
+
+## GUIDANCE for parsing from Figma
+
+- Exclude the first column if it contains checkbox. And exclude the last column if it contains ellipsis.
+- Each column in the Figma table frame maps to ONE TableColumn entry.
+
+### Determining `fixed` and `checkedByDefault` from Column Visibility panels
+
+Locate the `Column Visibility` frame near the table's filter area (typically positioned at `x=1197.5`, y-aligned with the filter container). Call `figma_get_design_context` on that frame to get its expanded code output. Inside it, inspect each `Column-visibility` child:
+
+- The `Column-visibility` instance contains a label `<p>` whose text matches the column header — use this to pair visibility state to the correct column.
+- A "Setup Column" entry exists at the top; skip it.
+- **`fixed`**: determined by the checkbox `<div>` background color token:
+  - `bg: option-disable-bg (#b5b3c7)` → greyed out, toggle is disabled → `fixed: true`
+  - `bg: button/primary (#0063f7)` → blue, toggle is interactive → `fixed: false`
+- **`checkedByDefault`**: if the `check-line` icon (`<img>` with `data-name="check-line"`) is present inside the checkbox, the column is checked → `checkedByDefault: true`. If absent, the column is unchecked → `checkedByDefault: false`.
+
+If the `Column Visibility` frame cannot be fetched (node invalid or not exported), fall back to false.

package/datatable/DataTable.fm.md

@@ -0,0 +1,40 @@
+# DataTable
+type reference: ./index.d.ts
+
+Append a `DataTable` component when the figma context contains:
+
+- A table named "Table Wrapper" or similar, inside the main frame.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `tableName` (string)
+  Unique identifier for this table. Format: `{module}-{scope}-table` (e.g. borrow-available-list-table).
+  - {module} is inferred from the Figma file name. Normalize to lowercase, strip special characters, use the primary domain keyword (e.g. for a file named "-v2--Borrow" the module is `borrow`).
+  - {scope} is inferred from what the table represents within that module (e.g. available-list, prelist, active-list, history-list).
+
+- `useOption` (boolean)
+  True if the rightmost column of the table row (NOT row header) contains an ellipsis icon (triple-dot or vertical-dot) indicating row actions / a context menu. False if there is no such column.
+
+- `options` (MenuItem[])
+  Refer to ./DataTable-MenuItem.fm.md
+
+- `columns` (TableColumn[])
+  Refer to ./DataTable-TableColumn.fm.md
+
+- `usePaginator` (boolean)
+  True if there are Pagination adjacent to the DataTable, false if not.
+
+- `lazy` (boolean)
+  True if `usePaginator` is true, otherwise false.
+
+`selectionType` ('none', 'checkbox')
+  - none if no checkbox element/component on the leftmost column of the table.
+  - checkbox if checkbox element/component on the leftmost column of the table.

package/datatable/index.d.ts

@@ -165,6 +165,7 @@ export interface DataTableFilterMeta {
 }
 
 export type FetchListResponse<T extends Data = Data> = {
+  status: number;
   message: string;
   data: {
     data: T[];

package/dialogconfirm/DialogConfirm.fm.md

@@ -0,0 +1,29 @@
+# DialogConfirm
+type reference: ./index.d.ts
+
+Append a `DialogConfirm` component when the figma context contains:
+
+- A figma component or instance named "Dialog Confirm" or similar.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `header` (string)
+  The header of the dialog.
+
+- `severity` (string)
+  - success if the color style / theme of the dialog is green, it tend to be a positive.
+  - danger if the color style / theme of the dialog is red, it tend to be a negative.
+
+- `actionable` (boolean)
+  Whether the dialog is actionable, if there are buttons like "Save" or "Cancel", then its true. Otherwise false.
+
+- `confirmLabel` (string)
+  The text of the "Confirmation" button, most commonly the rightmost one.

package/dialogform/DialogForm.fm.md

@@ -0,0 +1,57 @@
+# DialogForm
+type reference: ./index.d.ts
+
+Append a `DialogForm` component when the figma context contains:
+
+- A figma component or instance named "Dialog Form" or similar, consisting of a header (title + close button), a content slot area, and a footer with buttons.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `header` (string)
+  The text inside the dialog title.
+
+- `closable` (boolean)
+  Whether a close (X) icon button is present in the header. Omit if absent.
+
+- `showStayCheckbox` (boolean)
+  Whether a "Stay on this form after submitting" checkbox exists in the footer.
+
+- `stayCheckboxLabel` (string | undefined)
+  The text label of the stay checkbox. Omit if `showStayCheckbox` is false.
+
+- `buttonsTemplate` ('clear' | 'submit' | 'cancel')[]
+  - Include `'clear'` if a "Clear Field" or similar text button is present.
+  - Include `'submit'` if a primary action button (e.g. "Submit", "Save") is present.
+  - Include `'cancel'` if a cancel/secondary dismiss button is present.
+  This is REQUIRED.
+
+- `submitBtnLabel` (string | undefined)
+  The text of the submit button. Omit if `buttonsTemplate` does not contain `'submit'`.
+
+- `clearBtnLabel` (string | undefined)
+  The text of the clear field button. Omit if `buttonsTemplate` does not contain `'clear'`.
+
+- `severity` ('success' | 'danger' | 'primary' | undefined)
+  - `'success'` if the submit button or dialog theme is green.
+  - `'danger'` if the submit button or dialog theme is red.
+  - `'primary'` if the submit button or dialog theme is blue.
+  - Omit if ambiguous or no submit button is present.
+
+- `width` ('small' | 'medium' | 'large' | 'semi-xlarge' | 'xlarge')
+  Infer from the dialog frame width:
+  - `400px` → `'small'`
+  - `500px` → `'medium'`
+  - `572px` → `'large'`
+  - `600px` → `'semi-xlarge'`
+  - `800px` → `'xlarge'`
+
+  ## RULES - CRITICAL
+  1. **ALWAYS set `buttonsTemplate`** The Dialog Form most crucial property is `buttonsTemplate` it is what defines the DialogForm and distinguish it from a normal, regular, Dialog.