@nice2dev/ui-api 1.0.20 → 1.0.22

package/dist/style.css

@@ -1 +1 @@
-.nice-api-designer{display:flex;flex-direction:column;height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--nice-bg, #fff);color:var(--nice-text, #1a1a1a)}.nice-api-designer__toolbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--nice-border, #e0e0e0);background:var(--nice-bg-secondary, #f8f9fa)}.nice-api-designer__tabs{display:flex;gap:.25rem}.nice-api-designer__tab{padding:.5rem 1rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;border-radius:var(--nice-radius-sm, 4px);transition:background .2s}.nice-api-designer__tab:hover{background:var(--nice-hover, #e9ecef)}.nice-api-designer__tab--active{background:var(--nice-primary, #0066cc);color:#fff}.nice-api-designer__save-btn{padding:.5rem 1rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);cursor:pointer;font-weight:500}.nice-api-designer__save-btn:hover{background:var(--nice-primary-dark, #0052a3)}.nice-api-designer__errors{padding:.5rem 1rem;background:var(--nice-warning-bg, #fff3cd);border-bottom:1px solid var(--nice-warning, #ffc107)}.nice-api-designer__error{padding:.25rem 0;font-size:.875rem}.nice-api-designer__error--error{color:var(--nice-danger, #dc3545)}.nice-api-designer__error--warning{color:var(--nice-warning-dark, #856404)}.nice-api-designer__content{flex:1;overflow:auto;padding:1rem}.nice-api-designer__info-editor,.nice-api-designer__paths-editor,.nice-api-designer__schemas-editor,.nice-api-designer__security-editor,.nice-api-designer__json-preview{max-width:1200px;margin:0 auto}.nice-api-designer__field{margin-bottom:1rem}.nice-api-designer__field label{display:block;margin-bottom:.25rem;font-weight:500;font-size:.875rem}.nice-api-designer__field input,.nice-api-designer__field textarea,.nice-api-designer__field select{width:100%;padding:.5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem;font-family:inherit}.nice-api-designer__code{font-family:Fira Code,Cascadia Code,monospace;font-size:.8125rem;background:var(--nice-bg-code, #f5f5f5)}.nice-api-designer__paths-editor{display:grid;grid-template-columns:300px 1fr;gap:1rem}.nice-api-designer__endpoints-list,.nice-api-designer__schemas-list{border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);overflow:hidden}.nice-api-designer__list-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:var(--nice-bg-secondary, #f8f9fa);border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-designer__list-header h3{margin:0;font-size:.875rem}.nice-api-designer__list-header button{padding:.25rem .5rem;font-size:.75rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 3px);cursor:pointer}.nice-api-designer__endpoint{display:flex;gap:.5rem;padding:.5rem;cursor:pointer;border-bottom:1px solid var(--nice-border, #eee)}.nice-api-designer__endpoint:hover{background:var(--nice-hover, #f0f0f0)}.nice-api-designer__endpoint--selected{background:var(--nice-selected, #e8f4ff)}.nice-api-designer__method{padding:.125rem .375rem;border-radius:var(--nice-radius-sm, 3px);font-size:.75rem;font-weight:600;text-transform:uppercase}.nice-api-designer__method--get{background:var(--nice-primary, #61affe);color:#fff}.nice-api-designer__method--post{background:var(--nice-success, #49cc90);color:#fff}.nice-api-designer__method--put{background:var(--nice-warning, #fca130);color:#fff}.nice-api-designer__method--patch{background:var(--nice-info, #50e3c2);color:#fff}.nice-api-designer__method--delete{background:var(--nice-danger, #f93e3e);color:#fff}.nice-api-tester{display:flex;flex-direction:column;height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--nice-bg, #fff)}.nice-api-tester__toolbar{padding:.5rem 1rem;border-bottom:1px solid var(--nice-border, #ddd);background:var(--nice-bg-secondary, #f8f9fa)}.nice-api-tester__env-selector select{padding:.375rem .75rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem}.nice-api-tester__request-bar{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-tester__method{padding:.5rem 1rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-weight:600;cursor:pointer;min-width:100px}.nice-api-tester__method--get{border-color:var(--nice-primary, #61affe);color:var(--nice-primary, #61affe)}.nice-api-tester__method--post{border-color:var(--nice-success, #49cc90);color:var(--nice-success, #49cc90)}.nice-api-tester__method--put{border-color:var(--nice-warning, #fca130);color:var(--nice-warning, #fca130)}.nice-api-tester__method--patch{border-color:var(--nice-info, #50e3c2);color:var(--nice-info, #50e3c2)}.nice-api-tester__method--delete{border-color:var(--nice-danger, #f93e3e);color:var(--nice-danger, #f93e3e)}.nice-api-tester__url-input{flex:1;padding:.5rem 1rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.9375rem}.nice-api-tester__send-btn{padding:.5rem 1.5rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);font-weight:600;cursor:pointer}.nice-api-tester__send-btn:hover{background:var(--nice-primary-dark, #0052a3)}.nice-api-tester__send-btn--loading{background:var(--nice-danger, #dc3545)}.nice-api-tester__save-btn{padding:.5rem 1rem;background:var(--nice-bg-secondary, #f0f0f0);border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-api-tester__main{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden}.nice-api-tester__request-panel,.nice-api-tester__response-panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--nice-border, #ddd)}.nice-api-tester__response-panel{border-right:none}.nice-api-tester__tabs{display:flex;gap:.25rem;padding:.5rem;border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-tester__tab{padding:.375rem .75rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;border-radius:var(--nice-radius-sm, 4px)}.nice-api-tester__tab:hover{background:var(--nice-hover, #e9ecef)}.nice-api-tester__tab--active{background:var(--nice-primary, #0066cc);color:#fff}.nice-api-tester__tab-content{flex:1;overflow:auto;padding:1rem}.nice-api-tester__kv-editor{display:flex;flex-direction:column;gap:.5rem}.nice-api-tester__kv-row{display:flex;gap:.5rem}.nice-api-tester__kv-row input{flex:1;padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem}.nice-api-tester__kv-row button{padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);background:transparent;border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-api-tester__add-btn{padding:.375rem .75rem;background:var(--nice-bg-secondary, #f0f0f0);border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);cursor:pointer;align-self:flex-start}.nice-api-tester__body-editor{display:flex;flex-direction:column;gap:.75rem}.nice-api-tester__body-tabs{display:flex;gap:1rem}.nice-api-tester__body-tabs label{display:flex;align-items:center;gap:.25rem;cursor:pointer}.nice-api-tester__body-textarea{width:100%;padding:.75rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-family:Fira Code,monospace;font-size:.875rem;resize:vertical}.nice-api-tester__response-meta{display:flex;gap:1rem;padding:.75rem 1rem;background:var(--nice-bg-secondary, #f8f9fa);border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-tester__status{font-weight:600}.nice-api-tester__status--2{color:var(--nice-success, #28a745)}.nice-api-tester__status--3{color:var(--nice-warning, #ffc107)}.nice-api-tester__status--4,.nice-api-tester__status--5{color:var(--nice-danger, #dc3545)}.nice-api-tester__time,.nice-api-tester__size{color:var(--nice-text-muted, #6c757d);font-size:.875rem}.nice-api-tester__response-content{flex:1;overflow:auto;padding:1rem}.nice-api-tester__response-body{margin:0;font-family:Fira Code,monospace;font-size:.8125rem;white-space:pre-wrap;word-break:break-word}.nice-api-tester__response-headers{display:flex;flex-direction:column;gap:.25rem}.nice-api-tester__header-row{display:flex;gap:.5rem;font-size:.875rem}.nice-api-tester__header-key{font-weight:500;color:var(--nice-primary, #0066cc)}.nice-api-tester__test-results{display:flex;flex-direction:column;gap:.5rem}.nice-api-tester__test-result{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--nice-radius-sm, 4px);font-size:.875rem}.nice-api-tester__test-result--pass{background:var(--nice-success-bg, #d4edda);color:var(--nice-success-dark, #155724)}.nice-api-tester__test-result--fail{background:var(--nice-danger-bg, #f8d7da);color:var(--nice-danger-dark, #721c24)}.nice-api-tester__test-icon{font-weight:700}.nice-api-tester__test-badge{margin-left:.25rem;padding:.125rem .375rem;background:var(--nice-overlay-10, rgba(0, 0, 0, .1));border-radius:var(--nice-radius-lg, 8px);font-size:.75rem}.nice-api-tester__empty-response{display:flex;align-items:center;justify-content:center;height:100%;color:var(--nice-text-muted, #6c757d)}.nice-api-tester__history{border-top:1px solid var(--nice-border, #ddd);padding:.5rem 1rem;max-height:150px;overflow:auto}.nice-api-tester__history h4{margin:0 0 .5rem;font-size:.875rem}.nice-api-tester__history-list{display:flex;flex-direction:column;gap:.25rem}.nice-api-tester__history-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;cursor:pointer;border-radius:var(--nice-radius-sm, 4px);font-size:.8125rem}.nice-api-tester__history-item:hover{background:var(--nice-hover, #f0f0f0)}.nice-api-tester__history-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nice-integration-builder{display:flex;flex-direction:column;height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--nice-bg, #fff)}.nice-integration-builder__toolbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;border-bottom:1px solid var(--nice-border, #ddd);background:var(--nice-bg-secondary, #f8f9fa)}.nice-integration-builder__name-input{padding:.375rem .75rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.9375rem;font-weight:500}.nice-integration-builder__tabs{display:flex;gap:.25rem;flex:1}.nice-integration-builder__tab{padding:.375rem .75rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;border-radius:var(--nice-radius-sm, 4px)}.nice-integration-builder__tab:hover{background:var(--nice-hover, #e9ecef)}.nice-integration-builder__tab--active{background:var(--nice-primary, #0066cc);color:#fff}.nice-integration-builder__actions{display:flex;gap:.5rem}.nice-integration-builder__run-btn{padding:.5rem 1rem;background:var(--nice-success, #28a745);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);cursor:pointer;font-weight:500}.nice-integration-builder__run-btn:disabled{background:var(--nice-text-secondary, #6c757d);cursor:not-allowed}.nice-integration-builder__save-btn{padding:.5rem 1rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-integration-builder__main{display:flex;flex:1;overflow:hidden}.nice-integration-builder__palette{width:200px;border-right:1px solid var(--nice-border, #ddd);padding:.5rem;overflow-y:auto;background:var(--nice-bg-secondary, #f8f9fa)}.nice-integration-builder__palette h4{margin:0 0 .5rem;font-size:.875rem}.nice-integration-builder__category{margin-bottom:1rem}.nice-integration-builder__category h5{margin:0 0 .25rem;font-size:.75rem;color:var(--nice-text-muted, #6c757d);text-transform:uppercase}.nice-integration-builder__palette-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--nice-radius-sm, 4px);cursor:grab;font-size:.875rem;transition:background .2s}.nice-integration-builder__palette-item:hover{background:var(--nice-hover, #e9ecef)}.nice-integration-builder__palette-icon{font-size:1rem}.nice-integration-builder__canvas{flex:1;position:relative;overflow:auto;background:linear-gradient(90deg,var(--nice-grid, #f0f0f0) 1px,transparent 1px),linear-gradient(var(--nice-grid, #f0f0f0) 1px,transparent 1px);background-size:20px 20px}.nice-integration-builder__canvas--dragging{cursor:copy}.nice-integration-builder__connections{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.nice-integration-builder__connection{fill:none;stroke:var(--nice-primary, #0066cc);stroke-width:2;pointer-events:stroke;cursor:pointer}.nice-integration-builder__connection:hover{stroke:var(--nice-danger, #dc3545);stroke-width:3}.nice-integration-builder__node{position:absolute;width:150px;background:#fff;border:2px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-lg, 8px);box-shadow:0 2px 8px var(--nice-overlay-10, rgba(0, 0, 0, .1));cursor:move}.nice-integration-builder__node--selected{border-color:var(--nice-primary, #0066cc);box-shadow:0 0 0 3px var(--nice-primary-tint-20, rgba(0, 102, 204, .2))}.nice-integration-builder__node-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--nice-bg-secondary, #f8f9fa);border-bottom:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-md, 6px) var(--nice-radius-md, 6px) 0 0}.nice-integration-builder__node-icon{font-size:1rem}.nice-integration-builder__node-name{flex:1;font-size:.8125rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nice-integration-builder__node-delete{padding:0;width:20px;height:20px;border:none;background:transparent;cursor:pointer;font-size:1rem;opacity:.5}.nice-integration-builder__node-delete:hover{opacity:1;color:var(--nice-danger, #dc3545)}.nice-integration-builder__port{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;color:var(--nice-text-muted, #6c757d)}.nice-integration-builder__port--input{justify-content:flex-start}.nice-integration-builder__port--output{justify-content:flex-end}.nice-integration-builder__port-dot{width:10px;height:10px;background:var(--nice-primary, #0066cc);border:2px solid white;border-radius:var(--nice-radius-full, 50%);cursor:crosshair}.nice-integration-builder__empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--nice-text-muted, #6c757d);font-size:1rem}.nice-integration-builder__properties{width:300px;border-left:1px solid var(--nice-border, #ddd);display:flex;flex-direction:column;background:#fff}.nice-integration-builder__properties-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--nice-border, #ddd);background:var(--nice-bg-secondary, #f8f9fa)}.nice-integration-builder__properties-header h4{margin:0;font-size:.9375rem}.nice-integration-builder__properties-header button{padding:0;width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:1.25rem}.nice-integration-builder__properties-content{flex:1;overflow-y:auto;padding:1rem}.nice-integration-builder__field{margin-bottom:1rem}.nice-integration-builder__field label{display:block;margin-bottom:.25rem;font-size:.8125rem;font-weight:500}.nice-integration-builder__field input,.nice-integration-builder__field select,.nice-integration-builder__field textarea{width:100%;padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem;font-family:inherit}.nice-integration-builder__code-input{font-family:Fira Code,monospace;font-size:.8125rem}.nice-integration-builder__code-view,.nice-integration-builder__variables,.nice-integration-builder__settings{flex:1;padding:1rem;overflow:auto}.nice-integration-builder__code-view pre{margin:0;font-family:Fira Code,monospace;font-size:.8125rem;white-space:pre-wrap}.nice-integration-builder__variables-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.nice-integration-builder__variable-row{display:flex;gap:.5rem}.nice-integration-builder__variable-row input{flex:1;padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px)}.nice-integration-builder__variable-row button{padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);background:transparent;border-radius:var(--nice-radius-sm, 4px);cursor:pointer}
+.nice-api-designer{display:flex;flex-direction:column;height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--nice-bg, #fff);color:var(--nice-text, #1a1a1a)}.nice-api-designer__toolbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--nice-border, #e0e0e0);background:var(--nice-bg-secondary, #f8f9fa)}.nice-api-designer__tabs{display:flex;gap:.25rem}.nice-api-designer__tab{padding:.5rem 1rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;border-radius:var(--nice-radius-sm, 4px);transition:background .2s}.nice-api-designer__tab:hover{background:var(--nice-hover, #e9ecef)}.nice-api-designer__tab--active{background:var(--nice-primary, #0066cc);color:#fff}.nice-api-designer__save-btn{padding:.5rem 1rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);cursor:pointer;font-weight:500}.nice-api-designer__save-btn:hover{background:var(--nice-primary-dark, #0052a3)}.nice-api-designer__errors{padding:.5rem 1rem;background:var(--nice-warning-bg, #fff3cd);border-bottom:1px solid var(--nice-warning, #ffc107)}.nice-api-designer__error{padding:.25rem 0;font-size:.875rem}.nice-api-designer__error--error{color:var(--nice-danger, #dc3545)}.nice-api-designer__error--warning{color:var(--nice-warning-dark, #856404)}.nice-api-designer__content{flex:1;overflow:auto;padding:1rem}.nice-api-designer__info-editor,.nice-api-designer__paths-editor,.nice-api-designer__schemas-editor,.nice-api-designer__security-editor,.nice-api-designer__json-preview{max-width:1200px;margin:0 auto}.nice-api-designer__field{margin-bottom:1rem}.nice-api-designer__field label{display:block;margin-bottom:.25rem;font-weight:500;font-size:.875rem}.nice-api-designer__field input,.nice-api-designer__field textarea,.nice-api-designer__field select{width:100%;padding:.5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem;font-family:inherit}.nice-api-designer__code{font-family:Fira Code,Cascadia Code,monospace;font-size:.8125rem;background:var(--nice-bg-code, #f5f5f5)}.nice-api-designer__paths-editor{display:grid;grid-template-columns:300px 1fr;gap:1rem}.nice-api-designer__endpoints-list,.nice-api-designer__schemas-list{border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);overflow:hidden}.nice-api-designer__list-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:var(--nice-bg-secondary, #f8f9fa);border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-designer__list-header h3{margin:0;font-size:.875rem}.nice-api-designer__list-header button{padding:.25rem .5rem;font-size:.75rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 3px);cursor:pointer}.nice-api-designer__endpoint{display:flex;gap:.5rem;padding:.5rem;cursor:pointer;border-bottom:1px solid var(--nice-border, #eee)}.nice-api-designer__endpoint:hover{background:var(--nice-hover, #f0f0f0)}.nice-api-designer__endpoint--selected{background:var(--nice-selected, #e8f4ff)}.nice-api-designer__method{padding:.125rem .375rem;border-radius:var(--nice-radius-sm, 3px);font-size:.75rem;font-weight:600;text-transform:uppercase}.nice-api-designer__method--get{background:var(--nice-primary, #61affe);color:#fff}.nice-api-designer__method--post{background:var(--nice-success, #49cc90);color:#fff}.nice-api-designer__method--put{background:var(--nice-warning, #fca130);color:#fff}.nice-api-designer__method--patch{background:var(--nice-info, #50e3c2);color:#fff}.nice-api-designer__method--delete{background:var(--nice-danger, #f93e3e);color:#fff}.nice-api-tester{display:flex;flex-direction:column;height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--nice-bg, #fff)}.nice-api-tester__toolbar{padding:.5rem 1rem;border-bottom:1px solid var(--nice-border, #ddd);background:var(--nice-bg-secondary, #f8f9fa)}.nice-api-tester__env-selector select{padding:.375rem .75rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem}.nice-api-tester__request-bar{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-tester__method{padding:.5rem 1rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-weight:600;cursor:pointer;min-width:100px}.nice-api-tester__method--get{border-color:var(--nice-primary, #61affe);color:var(--nice-primary, #61affe)}.nice-api-tester__method--post{border-color:var(--nice-success, #49cc90);color:var(--nice-success, #49cc90)}.nice-api-tester__method--put{border-color:var(--nice-warning, #fca130);color:var(--nice-warning, #fca130)}.nice-api-tester__method--patch{border-color:var(--nice-info, #50e3c2);color:var(--nice-info, #50e3c2)}.nice-api-tester__method--delete{border-color:var(--nice-danger, #f93e3e);color:var(--nice-danger, #f93e3e)}.nice-api-tester__url-input{flex:1;padding:.5rem 1rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.9375rem}.nice-api-tester__send-btn{padding:.5rem 1.5rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);font-weight:600;cursor:pointer}.nice-api-tester__send-btn:hover{background:var(--nice-primary-dark, #0052a3)}.nice-api-tester__send-btn--loading{background:var(--nice-danger, #dc3545)}.nice-api-tester__save-btn{padding:.5rem 1rem;background:var(--nice-bg-secondary, #f0f0f0);border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-api-tester__main{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden}.nice-api-tester__request-panel,.nice-api-tester__response-panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--nice-border, #ddd)}.nice-api-tester__response-panel{border-right:none}.nice-api-tester__tabs{display:flex;gap:.25rem;padding:.5rem;border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-tester__tab{padding:.375rem .75rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;border-radius:var(--nice-radius-sm, 4px)}.nice-api-tester__tab:hover{background:var(--nice-hover, #e9ecef)}.nice-api-tester__tab--active{background:var(--nice-primary, #0066cc);color:#fff}.nice-api-tester__tab-content{flex:1;overflow:auto;padding:1rem}.nice-api-tester__kv-editor{display:flex;flex-direction:column;gap:.5rem}.nice-api-tester__kv-row{display:flex;gap:.5rem}.nice-api-tester__kv-row input{flex:1;padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem}.nice-api-tester__kv-row button{padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);background:transparent;border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-api-tester__add-btn{padding:.375rem .75rem;background:var(--nice-bg-secondary, #f0f0f0);border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);cursor:pointer;align-self:flex-start}.nice-api-tester__body-editor{display:flex;flex-direction:column;gap:.75rem}.nice-api-tester__body-tabs{display:flex;gap:1rem}.nice-api-tester__body-tabs label{display:flex;align-items:center;gap:.25rem;cursor:pointer}.nice-api-tester__body-textarea{width:100%;padding:.75rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-family:Fira Code,monospace;font-size:.875rem;resize:vertical}.nice-api-tester__response-meta{display:flex;gap:1rem;padding:.75rem 1rem;background:var(--nice-bg-secondary, #f8f9fa);border-bottom:1px solid var(--nice-border, #ddd)}.nice-api-tester__status{font-weight:600}.nice-api-tester__status--2{color:var(--nice-success, #28a745)}.nice-api-tester__status--3{color:var(--nice-warning, #ffc107)}.nice-api-tester__status--4,.nice-api-tester__status--5{color:var(--nice-danger, #dc3545)}.nice-api-tester__time,.nice-api-tester__size{color:var(--nice-text-muted, #6c757d);font-size:.875rem}.nice-api-tester__response-content{flex:1;overflow:auto;padding:1rem}.nice-api-tester__response-body{margin:0;font-family:Fira Code,monospace;font-size:.8125rem;white-space:pre-wrap;word-break:break-word}.nice-api-tester__response-headers{display:flex;flex-direction:column;gap:.25rem}.nice-api-tester__header-row{display:flex;gap:.5rem;font-size:.875rem}.nice-api-tester__header-key{font-weight:500;color:var(--nice-primary, #0066cc)}.nice-api-tester__test-results{display:flex;flex-direction:column;gap:.5rem}.nice-api-tester__test-result{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--nice-radius-sm, 4px);font-size:.875rem}.nice-api-tester__test-result--pass{background:var(--nice-success-bg, #d4edda);color:var(--nice-success-dark, #155724)}.nice-api-tester__test-result--fail{background:var(--nice-danger-bg, #f8d7da);color:var(--nice-danger-dark, #721c24)}.nice-api-tester__test-icon{font-weight:700}.nice-api-tester__test-badge{margin-left:.25rem;padding:.125rem .375rem;background:var(--nice-overlay-10, rgba(0, 0, 0, .1));border-radius:var(--nice-radius-lg, 8px);font-size:.75rem}.nice-api-tester__empty-response{display:flex;align-items:center;justify-content:center;height:100%;color:var(--nice-text-muted, #6c757d)}.nice-api-tester__history{border-top:1px solid var(--nice-border, #ddd);padding:.5rem 1rem;max-height:150px;overflow:auto}.nice-api-tester__history h4{margin:0 0 .5rem;font-size:.875rem}.nice-api-tester__history-list{display:flex;flex-direction:column;gap:.25rem}.nice-api-tester__history-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;cursor:pointer;border-radius:var(--nice-radius-sm, 4px);font-size:.8125rem}.nice-api-tester__history-item:hover{background:var(--nice-hover, #f0f0f0)}.nice-api-tester__history-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nice-integration-builder{display:flex;flex-direction:column;height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--nice-bg, #fff)}.nice-integration-builder__toolbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;border-bottom:1px solid var(--nice-border, #ddd);background:var(--nice-bg-secondary, #f8f9fa)}.nice-integration-builder__name-input{padding:.375rem .75rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.9375rem;font-weight:500}.nice-integration-builder__tabs{display:flex;gap:.25rem;flex:1}.nice-integration-builder__tab{padding:.375rem .75rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;border-radius:var(--nice-radius-sm, 4px)}.nice-integration-builder__tab:hover{background:var(--nice-hover, #e9ecef)}.nice-integration-builder__tab--active{background:var(--nice-primary, #0066cc);color:#fff}.nice-integration-builder__actions{display:flex;gap:.5rem}.nice-integration-builder__run-btn{padding:.5rem 1rem;background:var(--nice-success, #28a745);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);cursor:pointer;font-weight:500}.nice-integration-builder__run-btn:disabled{background:var(--nice-text-secondary, #6c757d);cursor:not-allowed}.nice-integration-builder__save-btn{padding:.5rem 1rem;background:var(--nice-primary, #0066cc);color:#fff;border:none;border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-integration-builder__main{display:flex;flex:1;overflow:hidden}.nice-integration-builder__palette{width:200px;border-right:1px solid var(--nice-border, #ddd);padding:.5rem;overflow-y:auto;background:var(--nice-bg-secondary, #f8f9fa)}.nice-integration-builder__palette h4{margin:0 0 .5rem;font-size:.875rem}.nice-integration-builder__category{margin-bottom:1rem}.nice-integration-builder__category h5{margin:0 0 .25rem;font-size:.75rem;color:var(--nice-text-muted, #6c757d);text-transform:uppercase}.nice-integration-builder__palette-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--nice-radius-sm, 4px);cursor:grab;font-size:.875rem;transition:background .2s}.nice-integration-builder__palette-item:hover{background:var(--nice-hover, #e9ecef)}.nice-integration-builder__palette-icon{font-size:1rem}.nice-integration-builder__canvas{flex:1;position:relative;overflow:auto;background:linear-gradient(90deg,var(--nice-grid, #f0f0f0) 1px,transparent 1px),linear-gradient(var(--nice-grid, #f0f0f0) 1px,transparent 1px);background-size:20px 20px}.nice-integration-builder__canvas--dragging{cursor:copy}.nice-integration-builder__connections{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.nice-integration-builder__connection{fill:none;stroke:var(--nice-primary, #0066cc);stroke-width:2;pointer-events:stroke;cursor:pointer}.nice-integration-builder__connection:hover{stroke:var(--nice-danger, #dc3545);stroke-width:3}.nice-integration-builder__node{position:absolute;width:150px;background:#fff;border:2px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-lg, 8px);box-shadow:0 2px 8px var(--nice-overlay-10, rgba(0, 0, 0, .1));cursor:move}.nice-integration-builder__node--selected{border-color:var(--nice-primary, #0066cc);box-shadow:0 0 0 3px var(--nice-primary-tint-20, rgba(0, 102, 204, .2))}.nice-integration-builder__node-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--nice-bg-secondary, #f8f9fa);border-bottom:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-md, 6px) var(--nice-radius-md, 6px) 0 0}.nice-integration-builder__node-icon{font-size:1rem}.nice-integration-builder__node-name{flex:1;font-size:.8125rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nice-integration-builder__node-delete{padding:0;width:20px;height:20px;border:none;background:transparent;cursor:pointer;font-size:1rem;opacity:.5}.nice-integration-builder__node-delete:hover{opacity:1;color:var(--nice-danger, #dc3545)}.nice-integration-builder__port{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;color:var(--nice-text-muted, #6c757d)}.nice-integration-builder__port--input{justify-content:flex-start}.nice-integration-builder__port--output{justify-content:flex-end}.nice-integration-builder__port-dot{width:10px;height:10px;background:var(--nice-primary, #0066cc);border:2px solid white;border-radius:var(--nice-radius-full, 50%);cursor:crosshair}.nice-integration-builder__empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--nice-text-muted, #6c757d);font-size:1rem}.nice-integration-builder__properties{width:300px;border-left:1px solid var(--nice-border, #ddd);display:flex;flex-direction:column;background:#fff}.nice-integration-builder__properties-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--nice-border, #ddd);background:var(--nice-bg-secondary, #f8f9fa)}.nice-integration-builder__properties-header h4{margin:0;font-size:.9375rem}.nice-integration-builder__properties-header button{padding:0;width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:1.25rem}.nice-integration-builder__properties-content{flex:1;overflow-y:auto;padding:1rem}.nice-integration-builder__field{margin-bottom:1rem}.nice-integration-builder__field label{display:block;margin-bottom:.25rem;font-size:.8125rem;font-weight:500}.nice-integration-builder__field input,.nice-integration-builder__field select,.nice-integration-builder__field textarea{width:100%;padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px);font-size:.875rem;font-family:inherit}.nice-integration-builder__code-input{font-family:Fira Code,monospace;font-size:.8125rem}.nice-integration-builder__code-view,.nice-integration-builder__variables,.nice-integration-builder__settings{flex:1;padding:1rem;overflow:auto}.nice-integration-builder__code-view pre{margin:0;font-family:Fira Code,monospace;font-size:.8125rem;white-space:pre-wrap}.nice-integration-builder__variables-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.nice-integration-builder__variable-row{display:flex;gap:.5rem}.nice-integration-builder__variable-row input{flex:1;padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);border-radius:var(--nice-radius-sm, 4px)}.nice-integration-builder__variable-row button{padding:.375rem .5rem;border:1px solid var(--nice-border, #ddd);background:transparent;border-radius:var(--nice-radius-sm, 4px);cursor:pointer}.nice-webhook-tester{display:flex;flex-direction:column;gap:12px;position:relative}.nice-webhook-tester__tutorial{position:absolute;top:0;right:0;z-index:1}.nice-webhook-tester__bar{display:flex;gap:6px}.nice-webhook-tester__method{flex:0 0 auto;padding:7px 9px;border:1px solid var(--nice-border, #d1d5db);border-radius:var(--nice-radius-sm, 4px);background:var(--nice-bg, #fff);font:inherit;font-weight:600}.nice-webhook-tester__url{flex:1 1 auto;min-width:0;padding:7px 9px;border:1px solid var(--nice-border, #d1d5db);border-radius:var(--nice-radius-sm, 4px);background:var(--nice-bg, #fff);font:inherit;font-family:Fira Code,Consolas,monospace;font-size:.8125rem}.nice-webhook-tester__send{flex:0 0 auto;border:0;background:var(--nice-primary, #2563eb);color:var(--nice-text-inverse, #fff);border-radius:var(--nice-radius-sm, 4px);padding:7px 18px;font:inherit;font-weight:600;cursor:pointer}.nice-webhook-tester__send:disabled{opacity:.6;cursor:default}.nice-webhook-tester__samples{font-size:.8125rem}.nice-webhook-tester__samples select{font:inherit;padding:4px 6px}.nice-webhook-tester__section-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--nice-text-secondary, #6b7280);margin-bottom:4px;display:flex;align-items:center;gap:8px}.nice-webhook-tester__signed{text-transform:none;font-weight:400;color:var(--nice-text-muted, #9ca3af)}.nice-webhook-tester__header-row{display:flex;gap:4px;margin-bottom:4px}.nice-webhook-tester__header-row input{flex:1 1 0;min-width:0;padding:5px 8px;border:1px solid var(--nice-border, #d1d5db);border-radius:var(--nice-radius-sm, 4px);background:var(--nice-bg, #fff);font:inherit;font-size:.8125rem}.nice-webhook-tester__header-row button,.nice-webhook-tester__add-header,.nice-webhook-tester__save{border:1px solid var(--nice-border, #d1d5db);background:var(--nice-bg, #fff);border-radius:var(--nice-radius-sm, 4px);padding:4px 10px;font:inherit;font-size:.8125rem;cursor:pointer}.nice-webhook-tester__add-header{color:var(--nice-primary, #2563eb);border-style:dashed;font-weight:600}.nice-webhook-tester__textarea{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--nice-border, #d1d5db);border-radius:var(--nice-radius-sm, 4px);background:var(--nice-bg, #fff);color:var(--nice-text-primary, #1f2937);font-family:Fira Code,Consolas,monospace;font-size:.8125rem;line-height:1.5;resize:vertical}.nice-webhook-tester__error{padding:8px;border-radius:var(--nice-radius-sm, 4px);background:var(--nice-danger-bg, #fee2e2);color:var(--nice-danger-text, #991b1b);font-family:Fira Code,Consolas,monospace;font-size:.8125rem}.nice-webhook-tester__status{font-weight:700}.nice-webhook-tester__status--ok{color:var(--nice-success, #16a34a)}.nice-webhook-tester__status--error{color:var(--nice-danger, #dc2626)}.nice-webhook-tester__time{color:var(--nice-text-muted, #9ca3af);font-weight:400}.nice-webhook-tester__response-body{margin:0;padding:8px;border:1px solid var(--nice-border, #d1d5db);border-radius:var(--nice-radius-sm, 4px);background:var(--nice-bg-secondary, #f9fafb);max-height:240px;overflow:auto;font-family:Fira Code,Consolas,monospace;font-size:.8125rem}

package/dist/types.d.ts

@@ -1,7 +1,5 @@
-/**
- * @package @nice2dev/ui-api
- * API & Integration Platform Types
- */
+import { NiceComponentTutorial } from '@nice2dev/ui-core';
+
 export interface OpenAPISchema {
     openapi: string;
     info: OpenAPIInfo;
@@ -366,6 +364,8 @@ export interface NiceAPIDesignerProps {
     onSave?: (schema: OpenAPISchema) => void;
     readOnly?: boolean;
     className?: string;
+    /** Optional guided tour. `true` = built-in; array/object = custom steps. Shows a "?" button. */
+    tutorial?: NiceComponentTutorial;
 }
 export interface NiceAPITesterProps {
     collections?: APICollection[];
@@ -373,6 +373,8 @@ export interface NiceAPITesterProps {
     onRequest?: (request: APIRequest) => Promise<APIResponse>;
     onSaveCollection?: (collection: APICollection) => void;
     className?: string;
+    /** Optional guided tour. `true` = built-in; array/object = custom steps. Shows a "?" button. */
+    tutorial?: NiceComponentTutorial;
 }
 export interface NiceIntegrationBuilderProps {
     flow?: IntegrationFlow;
@@ -381,6 +383,8 @@ export interface NiceIntegrationBuilderProps {
     onSave?: (flow: IntegrationFlow) => void;
     onRun?: (flow: IntegrationFlow) => Promise<void>;
     className?: string;
+    /** Optional guided tour. `true` = built-in; array/object = custom steps. Shows a "?" button. */
+    tutorial?: NiceComponentTutorial;
 }
 export interface NiceOpenAPIViewerProps {
     schema: OpenAPISchema;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-api",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Nice2Dev API & Integration Platform — OpenAPI editor, API testing, integration builder",
   "type": "module",
   "main": "dist/index.cjs",
@@ -33,10 +33,12 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
+    "@nice2dev/ui-core": "^1.0.20",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
+    "@nice2dev/ui-core": "^1.0.20",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.0",