@nobak/design-system 1.0.0

package/lib/components/console/data/MetricCard.js

@@ -0,0 +1,79 @@
+/**
+ * MetricCard
+ * 
+ * Display key metrics and KPIs with trend indicators.
+ * Perfect for dashboards and analytics displays.
+ * 
+ * @example
+ * <MetricCard
+ *   label="API Requests"
+ *   value="1.2M"
+ *   trend="+12%"
+ *   trendDirection=": "
+ *   icon=", "
+ * />
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+export var MetricCard = function MetricCard(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    trend = _ref.trend,
+    _ref$trendDirection = _ref.trendDirection,
+    trendDirection = _ref$trendDirection === void 0 ? 'neutral' : _ref$trendDirection,
+    icon = _ref.icon,
+    comparison = _ref.comparison,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    className = _ref.className,
+    onClick = _ref.onClick;
+  var cardClasses = clsx('metric-card', 'bg-white', 'rounded-lg', 'border', 'border-gray-200', 'transition-all', 'duration-200', {
+    'p-6': variant === 'default' || variant === 'detailed',
+    'p-4': variant === 'compact',
+    'hover:shadow-md hover:border-primary-300 cursor-pointer': onClick,
+    'shadow-sm': !onClick
+  }, className);
+  var trendClasses = clsx('metric-card__trend', 'text-sm', 'font-medium', 'flex', 'items-center', 'gap-1', {
+    'text-green-600': trendDirection === 'up',
+    'text-red-600': trendDirection === 'down',
+    'text-gray-600': trendDirection === 'neutral'
+  });
+  var trendIcon = trendDirection === 'up' ? '↑' : trendDirection === 'down' ? '↓' : '→';
+  return /*#__PURE__*/React.createElement("div", {
+    className: cardClasses,
+    onClick: onClick
+  }, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center py-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "metric-card__header flex items-start justify-between mb-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text-sm font-medium text-gray-600 uppercase tracking-wide"
+  }, label)), icon && /*#__PURE__*/React.createElement("div", {
+    className: "metric-card__icon text-2xl ml-2"
+  }, icon)), /*#__PURE__*/React.createElement("div", {
+    className: "metric-card__value mb-2"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: clsx('font-bold text-gray-900', {
+      'text-4xl': variant === 'default' || variant === 'detailed',
+      'text-2xl': variant === 'compact'
+    })
+  }, value)), (trend || comparison) && /*#__PURE__*/React.createElement("div", {
+    className: "metric-card__footer flex items-center gap-3"
+  }, trend && /*#__PURE__*/React.createElement("div", {
+    className: trendClasses
+  }, /*#__PURE__*/React.createElement("span", null, trendIcon), /*#__PURE__*/React.createElement("span", null, trend)), comparison && /*#__PURE__*/React.createElement("p", {
+    className: "text-xs text-gray-500"
+  }, comparison)), variant === 'detailed' && /*#__PURE__*/React.createElement("div", {
+    className: "metric-card__details mt-4 pt-4 border-t border-gray-100"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between text-xs text-gray-600"
+  }, /*#__PURE__*/React.createElement("span", null, "View details"), /*#__PURE__*/React.createElement("span", null, "\u2192")))));
+};
+MetricCard.displayName = 'MetricCard';

package/lib/components/console/data/index.js

@@ -0,0 +1,11 @@
+/**
+ * Console Data Components
+ * 
+ * Data display components for the Nobak Developer Console
+ */
+
+export { MetricCard } from "./MetricCard";
+export { DataTable } from "./DataTable";
+
+// export { ActivityFeed } from './ActivityFeed';
+// export { LogViewer } from './LogViewer';

package/lib/components/console/documentation/index.js

@@ -0,0 +1,10 @@
+/**
+ * Console Documentation Components
+ * 
+ * Documentation and help components
+ */
+
+// Export documentation components here
+// export { DocumentationViewer } from './DocumentationViewer';
+// export { TooltipHelp } from './TooltipHelp';
+// export { OnboardingWizard } from './OnboardingWizard';

package/lib/components/console/forms/APIKeyGenerator.js

@@ -0,0 +1,261 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof Symbol ? Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return Object.defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = Object.getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l); function g(t) { ["next", "throw", "return"].forEach(function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * APIKeyGenerator
+ * 
+ * Create and manage API keys with scope selection and expiration.
+ * Includes copy-to-clipboard functionality and key regeneration.
+ * 
+ * @example
+ * <APIKeyGenerator
+ *   onGenerate={handleGenerate}
+ *   scopes={availableScopes}
+ * />
+ */
+
+import React, { useState } from 'react';
+import clsx from 'clsx';
+export var APIKeyGenerator = function APIKeyGenerator(_ref) {
+  var _ref$scopes = _ref.scopes,
+    scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
+    onGenerate = _ref.onGenerate,
+    existingKey = _ref.existingKey,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    className = _ref.className;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    description = _useState4[0],
+    setDescription = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedScopes = _useState6[0],
+    setSelectedScopes = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    expiresAt = _useState8[0],
+    setExpiresAt = _useState8[1];
+  var _useState9 = useState(existingKey || ''),
+    _useState0 = _slicedToArray(_useState9, 2),
+    generatedKey = _useState0[0],
+    setGeneratedKey = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    copied = _useState10[0],
+    setCopied = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showKey = _useState12[0],
+    setShowKey = _useState12[1];
+  var handleGenerate = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var result;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!onGenerate || !name)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.prev = 2;
+            _context.next = 5;
+            return onGenerate({
+              name: name,
+              description: description,
+              scopes: selectedScopes,
+              expiresAt: expiresAt || undefined
+            });
+          case 5:
+            result = _context.sent;
+            setGeneratedKey(result.key);
+            setShowKey(true);
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](2);
+            console.error('Failed to generate API key:', _context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 10]]);
+    }));
+    return function handleGenerate() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (generatedKey) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            _context2.prev = 2;
+            _context2.next = 5;
+            return navigator.clipboard.writeText(generatedKey);
+          case 5:
+            setCopied(true);
+            setTimeout(function () {
+              return setCopied(false);
+            }, 2000);
+            _context2.next = 12;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](2);
+            console.error('Failed to copy:', _context2.t0);
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 9]]);
+    }));
+    return function handleCopy() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var toggleScope = function toggleScope(scopeId) {
+    if (selectedScopes.includes(scopeId)) {
+      setSelectedScopes(selectedScopes.filter(function (id) {
+        return id !== scopeId;
+      }));
+    } else {
+      setSelectedScopes([].concat(_toConsumableArray(selectedScopes), [scopeId]));
+    }
+  };
+  var isValid = name.trim().length > 0 && selectedScopes.length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('api-key-generator', 'space-y-6', className)
+  }, generatedKey && showKey && /*#__PURE__*/React.createElement("div", {
+    className: "bg-green-50 border border-green-200 rounded-lg p-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-start justify-between mb-4"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "text-lg font-semibold text-green-900 mb-1"
+  }, "\u2705 API Key Generated"), /*#__PURE__*/React.createElement("p", {
+    className: "text-sm text-green-700"
+  }, "Save this key securely. You won't be able to see it again.")), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setShowKey(false);
+    },
+    className: "text-green-600 hover:text-green-800"
+  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
+    className: "bg-white border border-green-300 rounded-lg p-4 font-mono text-sm break-all"
+  }, generatedKey), /*#__PURE__*/React.createElement("button", {
+    onClick: handleCopy,
+    className: "mt-4 w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+  }, copied ? '✓ Copied!' : '📋 Copy to Clipboard')), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Key Name ", /*#__PURE__*/React.createElement("span", {
+    className: "text-red-500"
+  }, "*")), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: name,
+    onChange: function onChange(e) {
+      return setName(e.target.value);
+    },
+    placeholder: "e.g., Production API Key",
+    className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500",
+    disabled: loading
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Description (Optional)"), /*#__PURE__*/React.createElement("textarea", {
+    value: description,
+    onChange: function onChange(e) {
+      return setDescription(e.target.value);
+    },
+    placeholder: "What will this key be used for?",
+    rows: 3,
+    className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500",
+    disabled: loading
+  })), scopes.length > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Permissions ", /*#__PURE__*/React.createElement("span", {
+    className: "text-red-500"
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2 border border-gray-200 rounded-lg p-4 max-h-64 overflow-y-auto"
+  }, scopes.map(function (scope) {
+    return /*#__PURE__*/React.createElement("label", {
+      key: scope.id,
+      className: "flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      checked: selectedScopes.includes(scope.id),
+      onChange: function onChange() {
+        return toggleScope(scope.id);
+      },
+      className: "mt-1 rounded border-gray-300 text-primary-600 focus:ring-primary-500",
+      disabled: loading
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "font-medium text-gray-900"
+    }, scope.label), scope.description && /*#__PURE__*/React.createElement("div", {
+      className: "text-sm text-gray-600 mt-1"
+    }, scope.description)));
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "text-xs text-gray-500 mt-2"
+  }, selectedScopes.length, " permission", selectedScopes.length !== 1 ? 's' : '', " selected")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    className: "block text-sm font-medium text-gray-700 mb-2"
+  }, "Expiration Date (Optional)"), /*#__PURE__*/React.createElement("input", {
+    type: "date",
+    value: expiresAt,
+    onChange: function onChange(e) {
+      return setExpiresAt(e.target.value);
+    },
+    min: new Date().toISOString().split('T')[0],
+    className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500",
+    disabled: loading
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "text-xs text-gray-500 mt-1"
+  }, "Leave empty for no expiration"))), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-3"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleGenerate,
+    disabled: !isValid || loading,
+    className: clsx('flex-1 px-6 py-3 rounded-lg font-medium transition-colors', isValid && !loading ? 'bg-primary-500 text-white hover:bg-primary-600' : 'bg-gray-200 text-gray-400 cursor-not-allowed')
+  }, loading ? /*#__PURE__*/React.createElement("span", {
+    className: "flex items-center justify-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white"
+  }), "Generating...") : '🔑 Generate API Key')), /*#__PURE__*/React.createElement("div", {
+    className: "bg-blue-50 border border-blue-200 rounded-lg p-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-3"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-blue-600 text-xl"
+  }, "\u2139\uFE0F"), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "font-medium text-blue-900 mb-1"
+  }, "Security Best Practices"), /*#__PURE__*/React.createElement("ul", {
+    className: "text-sm text-blue-800 space-y-1"
+  }, /*#__PURE__*/React.createElement("li", null, "\u2022 Store API keys securely (environment variables, secrets manager)"), /*#__PURE__*/React.createElement("li", null, "\u2022 Never commit keys to version control"), /*#__PURE__*/React.createElement("li", null, "\u2022 Use different keys for development and production"), /*#__PURE__*/React.createElement("li", null, "\u2022 Rotate keys regularly"), /*#__PURE__*/React.createElement("li", null, "\u2022 Grant minimum required permissions"))))));
+};
+APIKeyGenerator.displayName = 'APIKeyGenerator';

package/lib/components/console/forms/SearchBar.js

@@ -0,0 +1,210 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * SearchBar
+ * 
+ * Global search component with autocomplete and keyboard shortcuts.
+ * Supports recent searches and quick filters.
+ * 
+ * @example
+ * <SearchBar
+ *   placeholder="Search API keys, logs, docs..."
+ *   onSearch={handleSearch}
+ *   suggestions={suggestions}
+ * />
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+export var SearchBar = function SearchBar(_ref) {
+  var _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Search...' : _ref$placeholder,
+    onSearch = _ref.onSearch,
+    _ref$suggestions = _ref.suggestions,
+    suggestions = _ref$suggestions === void 0 ? [] : _ref$suggestions,
+    _ref$recentSearches = _ref.recentSearches,
+    recentSearches = _ref$recentSearches === void 0 ? [] : _ref$recentSearches,
+    onClearRecent = _ref.onClearRecent,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$showShortcut = _ref.showShortcut,
+    showShortcut = _ref$showShortcut === void 0 ? true : _ref$showShortcut,
+    className = _ref.className;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
+  var _useState5 = useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedIndex = _useState6[0],
+    setSelectedIndex = _useState6[1];
+  var inputRef = useRef(null);
+  var dropdownRef = useRef(null);
+  var showDropdown = isFocused && (query.length > 0 || recentSearches.length > 0);
+  var filteredSuggestions = suggestions.filter(function (s) {
+    return s.label.toLowerCase().includes(query.toLowerCase());
+  });
+
+  // Keyboard shortcut (Cmd+K / Ctrl+K)
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        var _inputRef$current;
+        e.preventDefault();
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }
+      if (!isFocused) return;
+
+      // Arrow navigation
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex(function (i) {
+          return Math.min(i + 1, filteredSuggestions.length - 1);
+        });
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex(function (i) {
+          return Math.max(i - 1, -1);
+        });
+      } else if (e.key === 'Enter' && selectedIndex >= 0) {
+        e.preventDefault();
+        handleSelectSuggestion(filteredSuggestions[selectedIndex]);
+      } else if (e.key === 'Escape') {
+        var _inputRef$current2;
+        setIsFocused(false);
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isFocused, selectedIndex, filteredSuggestions]);
+
+  // Click outside to close
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      var _inputRef$current3;
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target) && !((_inputRef$current3 = inputRef.current) !== null && _inputRef$current3 !== void 0 && _inputRef$current3.contains(e.target))) {
+        setIsFocused(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var handleSearch = function handleSearch(searchQuery) {
+    onSearch === null || onSearch === void 0 || onSearch(searchQuery);
+    setIsFocused(false);
+    setQuery('');
+  };
+  var handleSelectSuggestion = function handleSelectSuggestion(suggestion) {
+    handleSearch(suggestion.label);
+  };
+  var handleSelectRecent = function handleSelectRecent(recent) {
+    setQuery(recent);
+    handleSearch(recent);
+  };
+  var inputClasses = clsx('w-full pl-10 pr-4 border border-gray-300 rounded-lg', 'focus:ring-2 focus:ring-primary-500 focus:border-primary-500', 'transition-all', {
+    'py-2 text-sm': size === 'small',
+    'py-3 text-base': size === 'medium',
+    'py-4 text-lg': size === 'large'
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('search-bar relative', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+  }, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-400"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "text-xl"
+  }, "\uD83D\uDD0D")), /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "text",
+    value: query,
+    onChange: function onChange(e) {
+      return setQuery(e.target.value);
+    },
+    onFocus: function onFocus() {
+      return setIsFocused(true);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' && query.trim()) {
+        handleSearch(query);
+      }
+    },
+    placeholder: placeholder,
+    className: inputClasses
+  }), showShortcut && !isFocused && /*#__PURE__*/React.createElement("div", {
+    className: "absolute right-3 top-1/2 -translate-y-1/2"
+  }, /*#__PURE__*/React.createElement("kbd", {
+    className: "px-2 py-1 text-xs font-mono bg-gray-100 border border-gray-300 rounded"
+  }, "\u2318K")), query && /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setQuery('');
+    },
+    className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+  }, "\u2715")), showDropdown && /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: "absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg max-h-96 overflow-y-auto z-50"
+  }, query.length > 0 && filteredSuggestions.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "py-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "px-4 py-2 text-xs font-medium text-gray-500 uppercase"
+  }, "Suggestions"), filteredSuggestions.map(function (suggestion, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      key: suggestion.id,
+      onClick: function onClick() {
+        return handleSelectSuggestion(suggestion);
+      },
+      className: clsx('w-full px-4 py-2 text-left hover:bg-gray-50 flex items-center gap-3', {
+        'bg-primary-50': index === selectedIndex
+      })
+    }, suggestion.icon && /*#__PURE__*/React.createElement("span", {
+      className: "text-xl"
+    }, suggestion.icon), /*#__PURE__*/React.createElement("div", {
+      className: "flex-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "font-medium text-gray-900"
+    }, suggestion.label), suggestion.category && /*#__PURE__*/React.createElement("div", {
+      className: "text-xs text-gray-500"
+    }, suggestion.category)));
+  })), query.length === 0 && recentSearches.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "py-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "px-4 py-2 flex items-center justify-between"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-xs font-medium text-gray-500 uppercase"
+  }, "Recent Searches"), onClearRecent && /*#__PURE__*/React.createElement("button", {
+    onClick: onClearRecent,
+    className: "text-xs text-gray-500 hover:text-gray-700"
+  }, "Clear")), recentSearches.map(function (recent, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      key: index,
+      onClick: function onClick() {
+        return handleSelectRecent(recent);
+      },
+      className: "w-full px-4 py-2 text-left hover:bg-gray-50 flex items-center gap-3"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "text-gray-400"
+    }, "\uD83D\uDD50"), /*#__PURE__*/React.createElement("span", {
+      className: "text-gray-700"
+    }, recent));
+  })), query.length > 0 && filteredSuggestions.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "px-4 py-8 text-center text-gray-500"
+  }, "No results found for \"", query, "\"")));
+};
+SearchBar.displayName = 'SearchBar';

package/lib/components/console/forms/index.js

@@ -0,0 +1,10 @@
+/**
+ * Console Form Components
+ * 
+ * Form and input components for the Nobak Developer Console
+ */
+
+export { APIKeyGenerator } from "./APIKeyGenerator";
+export { SearchBar } from "./SearchBar";
+
+// export { WebhookConfigurator } from './WebhookConfigurator';

package/lib/components/console/index.js

@@ -0,0 +1,29 @@
+/**
+ * Nobak Developer Console Components
+ * 
+ * Complete component library for the Nobak Developer Console
+ */
+
+// Layout
+export * from "./layout";
+
+// Navigation
+export * from "./navigation";
+
+// Data
+export * from "./data";
+
+// Code
+export * from "./code";
+
+// Forms
+export * from "./forms";
+
+// Monitoring
+export * from "./monitoring";
+
+// Documentation
+export * from "./documentation";
+
+// Settings
+export * from "./settings";