@things-factory/auth-ui 10.1.27 → 10.1.28

package/dist-client/pages/role/role-privilege-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"role-privilege-page.js","sourceRoot":"","sources":["../../../client/pages/role/role-privilege-page.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAA;AAEjE,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iDAAiD,CAAA;AAY/G;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAA3D;;QA6YL;;;WAGG;QACc,YAAO,GAAQ,EAAE,CAAA;QACjB,YAAO,GAAa,EAAE,CAAA;QACtB,aAAQ,GAAgB,IAAI,GAAG,EAAE,CAAA;QACjC,YAAO,GAAU,EAAE,CAAA;QACnB,aAAQ,GAAW,EAAE,CAAA;QAErB,YAAO,GAAW,EAAE,CAAA;QACpB,gBAAW,GAAW,EAAE,CAAA;QAExB,eAAU,GAAoC,SAAS,CAAA;QACvD,WAAM,GAAY,KAAK,CAAA;QACvB,UAAK,GAAY,KAAK,CAAA;IA4lBzC,CAAC;aAv/BQ,WAAM,GAAmB;QAC9B,eAAe;QACf,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmYF;KACF,AAvYY,CAuYZ;IAsBD;;;;OAIG;IACH,IAAY,SAAS;QACnB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAA;QACjD,OAAO,OAAO,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,CAAC,CAAA;IACjF,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAA;IACxE,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,sBAAsB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IACxE,CAAC;IAED;;;;OAIG;IACK,aAAa;QACnB,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAA;IAC9B,CAAC;IAEO,YAAY,CAAC,QAAgB;QACnC,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAM;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;;OAGG;IACK,aAAa,CAAC,KAAY;QAChC,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,YAAY,gBAAgB,CAAiC,CAAA;QACvH,MAAM,OAAO,GAAG,WAAW,EAAE,KAAK,IAAK,KAAK,CAAC,MAAc,EAAE,KAAK,IAAI,EAAE,CAAA;QAExE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QAEtB;0CACkC;QAClC,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAEzE,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;;;;;;;;;;OAWG;IACH,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,EAAE;YACpE,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,IAAI,CAAC,SAAS;gBACrB,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;wBAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO;wBACtC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,sBAAsB;wBACtE,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;qBAC/B;iBACF;SACN,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,IAAI,CAAA;;gBAED,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;sBAC3B,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;uBACjC,CAAA;QACnB,CAAC;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;cACA,OAAO,CAAC,CAAC,CAAC,mDAAmD,EAAE;gBAC/D,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS;aACjE,CAAC;iBACG;YACT,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;KACvE,CAAA;IACH,CAAC;IAED;;;;;;;OAOG;IACK,aAAa;QACnB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;UACvD,IAAI,CAAC,OAAO,EAAE,WAAW;YACzB,CAAC,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,OAAO,CAAC,WAAW,QAAQ;YACnD,CAAC,CAAC,IAAI,CAAA,qBAAqB,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,QAAQ;;KAEtF,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;OAqBG;IACK,aAAa;QACnB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;aACzB,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;aAClF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;QAEpD,OAAO,IAAI,CAAA;;;YAGH,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;wBACzB,OAAO,CAAC,MAAM;;;UAG5B,OAAO,CAAC,MAAM;YACd,CAAC,CAAC,IAAI,CAAA;gBACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;kBACzE;YACR,CAAC,CAAC,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC,QAAQ;UAC7E,IAAI,CAAC,SAAS,EAAE;;KAErB,CAAA;IACH,CAAC;IAED;;;;;OAKG;IACK,iBAAiB,CAAC,QAAgB,EAAE,IAAU;QACpD,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;QAExC,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,UAAU;;YAEtB,OAAO,IAAI,IAAI,CAAA,eAAe,WAAW,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;YACtF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;;;UAGtG,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA,sBAAsB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC;;sBAEtF;;KAEjB,CAAA;IACH,CAAC;IAED;;;;;;;;OAQG;IACK,SAAS;QACf,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACnD,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA,uBAAuB,OAAO,CAAC,CAAC,CAAC,+CAA+C,CAAC,QAAQ,CAAA;QACtG,CAAC;QAED,OAAO,IAAI,CAAA;2BACY,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;gCACf,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,KAAK,CAAC,OAAO;QACnB,MAAM,MAAM,CAAC,2CAA2C,CAAC,CAAA;QAEzD,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA,gCAAgC,IAAI,WAAW,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,2BAA2B,EACjG;YACE,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;SAC9C,CACF,CAAA;IACH,CAAC;IAED;;;;;;;OAOG;IACH,gBAAgB;QACd,OAAO,IAAI,CAAA;;;;cAID,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;0BACb,IAAI,CAAC,OAAO,CAAC,MAAM;;;2BAGlB,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;qBAC7C,IAAI,CAAC,OAAO;qBACZ,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;sBAC1C,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;wBAEzC,IAAI,CAAC,aAAa,EAAE;;;;;cAK9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;0BAC9D,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;;wBAE7E,IAAI,CAAC,UAAU,EAAE;;;;;YAK7B,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,0BAA0B;gBAC5B,CAAC,CAAC,sBAAsB;;4BAEV,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;YAC1E,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;;KAGvD,CAAA;IACH,CAAC;IAKD;;;;;OAKG;IACK,aAAa;QACnB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA;YACA,OAAO,CAAC,CAAC,CAAC,8BAA8B,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;cACnE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;eAClD;YACT,CAAC,CAAC,IAAI,CAAA,aAAa,OAAO,CAAC,CAAC,CAAC,iCAAiC,CAAC,QAAQ,CAAA;IAC3E,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAA;QAC5D,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,+CAA+C,CAAC,QAAQ,CAAA;QAC7F,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YAChC,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,wBAAwB,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAA;QAC3F,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;YAEzE,OAAO,IAAI,CAAA;4BACO,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;sBAC1F,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC;gBAClC,EAAE;gBACF,CAAC,CAAC,IAAI,CAAA,YAAY,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS;gBAC5D,CAAC,CAAC,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS;;WAE3D,CAAA;QACH,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAA;QAC5D,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAA;QACnE,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,oCAAoC;YACpC,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,QAAQ,CAAA;QAC9E,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACxB,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAErC,OAAO,IAAI,CAAA;;uBAEE,IAAI,CAAC,UAAU;0BACZ,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;uBAC7C,CAAC,KAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC;;;;2BAI1D,IAAI,CAAC,EAAE;2BACP,EAAE;4BACD,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;0BAC5C,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;;iCAErE,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;gBAEjD,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA,aAAa,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,QAAQ;gBACzE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC;oBAC/B,IAAI,CAAA,qBAAqB,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,QAAQ;;WAE3F,CAAA;QACH,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAEO,SAAS;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAY,EAAE,SAAc;QAC5C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;YAC1B,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,KAAK,CAAC,KAAK;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAA;QACzC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAA;YAC1B,OAAM;QACR,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;QAC3B,IAAI,CAAC,WAAW,GAAG,CAAC,MAAM,SAAS,EAAE,CAAC,EAAE,SAAS,IAAI,EAAE,CAAA;QAEvD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BT;YACD,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE;YAC/E,OAAO,EAAE,UAAU,EAAE;SACtB,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC5B,kDAAkD;YAClD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAA;YAC1B,OAAM;QACR,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QACrD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;QACvC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,IAAI,EAAE,CAAC,CAAA;QAC/C,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAA;QAE1B;;;;WAIG;QACH,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,iDAAiD;IACzC,KAAK,CAAC,UAAiB;QAC7B,MAAM,UAAU,GAAG,IAAI,GAAG,EAAkB,CAAA;QAC5C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU,CAAA;QAElC,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;YACnC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,CAAA;YACjE,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC9B,SAAQ;YACV,CAAC;YAED,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;gBACvB,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;YAClB,CAAC;YAED,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAY,EAAE,CAAA;YAC5E,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC,CAAA;YACnF,UAAU,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAClC,CAAC;QAED,KAAK,MAAM,MAAM,IAAI,UAAU,CAAC,MAAM,EAAE,EAAE,CAAC;YACzC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;QACpG,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QACtH,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,mDAAmD;QACnD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,EAAE,CAAA;QACjD,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,EAAU,EAAE,OAAgB;QAC3C,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,OAAO,EAAE,CAAC;YACtC,OAAM;QACR,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACnC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,qDAAqD;QACrD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,4EAA4E;IACpE,iBAAiB,CAAC,KAAiB,EAAE,IAAU,EAAE,EAAW;QAClE,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE,CAAC;YAC3F,OAAM;QACR,CAAC;QAED,sDAAsD;QACtD,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAA;IAC7B,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA;QACb,CAAC;QAED,OAAO,MAAM,QAAQ,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,eAAe;YACtB,IAAI,EAAE,uCAAuC;YAC7C,aAAa,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE;YACtC,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;SACnD,CAAC,CAAA;IACJ,CAAC;IAED;;;;;;;OAOG;IACK,KAAK,CAAC,MAAM;QAClB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QAClB,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;gBACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;SAMZ;gBACD,SAAS,EAAE;oBACT,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE;oBACnB,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE;iBAC9D;gBACD,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;gBAC5B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,CAChG,CAAA;gBACD,OAAM;YACR,CAAC;YAED,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,EAAE,EAAE,CAAC,CAChG,CAAA;YAED,6CAA6C;YAC7C,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;YACnB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;;AA5mB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAMzB;IAAhB,KAAK,EAAE;;kDAA0B;AACjB;IAAhB,KAAK,EAAE;;kDAA+B;AACtB;IAAhB,KAAK,EAAE;8BAAmB,GAAG;mDAAoB;AACjC;IAAhB,KAAK,EAAE;;kDAA4B;AACnB;IAAhB,KAAK,EAAE;;mDAA8B;AAErB;IAAhB,KAAK,EAAE;;kDAA6B;AACpB;IAAhB,KAAK,EAAE;;sDAAiC;AAExB;IAAhB,KAAK,EAAE;;qDAAgE;AACvD;IAAhB,KAAK,EAAE;;iDAAgC;AACvB;IAAhB,KAAK,EAAE;;gDAA+B;AA5Z5B,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAw/B7B;;AAED;;;;;GAKG;AACH,SAAS,WAAW,CAAC,QAAgB;IACnC,MAAM,GAAG,GAAG,sBAAsB,QAAQ,EAAE,CAAA;IAC5C,OAAO,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAA;AACnD,CAAC;AAGD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,QAAQ,CAAC,QAAgB,EAAE,IAAU;IAC5C,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,WAAW,CAAA;IACzB,CAAC;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,oBAAoB,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAA;AACrF,CAAC;AAED,SAAS,QAAQ,CAAC,QAAgB,EAAE,IAAU;IAC5C,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;IACxC,OAAO,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;AAC1D,CAAC;AAED,SAAS,SAAS,CAAC,IAAY;IAC7B,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;AAC9C,CAAC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\nimport '@operato/oops/ox-oops-note.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { KNOWN_AXES, axisLabel } from '../../utils/privilege-axis.js'\nimport { openPopup } from '@operato/layout'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport { getDomain } from '@things-factory/auth-base/dist-client'\n\nimport { filterPrivilegeModules, selectedVisibleModule } from '../../components/role-privilege-picker-state.js'\n\n/*\n * The axis vocabulary moved to `utils/privilege-axis.ts`, and it no longer translates.\n * `query` used to print as 「읽기」 and `mutation` as 「쓰기」, which is false in the six\n * declarations where the axis and the GraphQL operation disagree on purpose. That file\n * carries the reasoning and the decided end state.\n */\n\ntype Cell = { id: string; axis: string; deprecated: boolean; description?: string }\ntype Module = { category: string; cells: Cell[] }\n\n/**\n * 한 역할이 무엇을 할 수 있나 — **켜진 것이 문장으로 본문에 선다.**\n *\n * ── 사용자 평가가 이 화면을 두 번 뒤집었다 ──────────────────────────────────\n * **「화면으로부터 배울 수 있는 것이 없고, 혼란스럽고, 어렵고, 불편하다.」**\n *\n * 처음에는 팝업 안의 `모듈 × 읽기·쓰기` 격자였다. 격자는 「이 모듈에서 무엇이 켜졌나」에\n * 답하는데, 관리자가 묻는 것은 **「이 역할이 무엇을 하나」**다. 격자로 그걸 읽으려면 모듈\n * 46개를 한 번씩 열어야 하고, 역할을 부여하는 사람은 부여하기 **전에** 그 답이 필요하다.\n *\n * 그래서 뒤집었다(UX 레인 §2). 켜진 것을 문장으로 늘어놓는 것이 본문이고, 격자는 **더할 때\n * 쓰는 도구**로 자리를 옮겼다(`renderAdd`). 버린 것은 없다.\n *\n * ── 문장은 어디서 오나 ──────────────────────────────────────────────────────\n * ```\n * 1  Privilege.description   서버가 채우면 그것이 이긴다 — 배포마다 다를 수 있는 사실은 서버가 안다\n * 2  privilege.allows.<category>.<axis>   UX 레인이 쓴 글 (57 모듈 · 104 문장, ko·en)\n * 3  「아직 설명이 없습니다」  둘 다 없으면. 지어내지 않는다\n * ```\n *\n * 1번은 아직 **전부 비어 있다** — 부팅 동기화가 `{ category, name }` 둘만 저장한다\n * (`auth-base/server/index.ts:34-36`). 그래서 지금 화면에 나오는 문장은 전부 2번이다.\n *\n * ── 저장 범위는 서버가 준 목록이다 ──────────────────────────────────────────\n * 옛 편집기는 `querySelectorAll('input:checked')` 로 보냈다. 「더하기」 판에서 다른 모듈로\n * 옮기면 앞 모듈의 체크박스는 **DOM 에 없다** — 그 방식이면 모듈을 옮겨 다니는 것만으로\n * 권한이 조용히 떨어진다. 여기서는 `rolePrivileges` 가 준 전체가 범위이고 켠 것은\n * `assigned` 에만 있다. 화면이 무엇을 그렸는지와 무관하다.\n */\n@customElement('role-privilege-page')\nexport class RolePrivilegePage extends localize(i18next)(PageView) {\n  static styles: CSSResultGroup = [\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        min-height: 0;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      [body] {\n        flex: 1;\n        min-height: 0;\n        display: grid;\n        /* 왼쪽은 이름만 담으므로 고정, 오른쪽이 문장을 받으므로 남는 폭을 준다. */\n        grid-template-columns: minmax(200px, 280px) 1fr;\n        gap: var(--spacing-large, 12px);\n        padding: var(--spacing-large, 12px);\n      }\n\n      @media screen and (max-width: 780px) {\n        [body] {\n          /* 좁으면 위아래로. 고른 모듈이 아래에 오는 것이 읽는 순서와 같다. */\n          grid-template-columns: 1fr;\n          grid-template-rows: auto 1fr;\n        }\n      }\n\n      [panel] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--md-sys-shape-corner-medium, 10px);\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n        overflow: hidden;\n      }\n\n      [panel] > header {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n        padding: 10px 12px;\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.8rem;\n      }\n\n      [panel] > header [count] {\n        color: var(--md-sys-color-outline);\n      }\n\n      [scroll] {\n        flex: 1;\n        min-height: 0;\n        overflow: auto;\n      }\n\n      /*\n        걸러 보는 칸은 ox-input-search 다.\n\n        여기 md-filled-text-field 를 썼다가 사용자에게 「전체적인 스타일에 어울리지 않는다」를\n        들었다. 그것은 회색 채움 상자에 라벨이 떠 있는 **폼 칸**이고, 이 자리는 **찾는 칸**이다.\n\n        근거는 이 화면 자신에 있다 — 역할 목록의 검색 칸이 이 부품이다.\n        [읽었음] @operato/data-grist/dist/src/filters/filters-form.js:153\n\n        ⚠ 폼 칸도 md-* 를 안 쓴다 — 사용자가 2026-09-11 에 역할 화면 전체로 못 박았다\n        (「너무 크고 스타일이 안 어울린다」). native input 에 FormFieldStyles 를 얹는다.\n        그 블록이 정확히 이 일을 하려고 있는 것이다(shadow 경계를 넘는 토큰 연결).\n      */\n      ox-input-search {\n        margin: 8px 12px;\n        width: calc(100% - 24px);\n      }\n\n      /* ── 왼쪽: 모듈 ──────────────────────────────────────────────────────── */\n      ul[modules] {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul[modules] li {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 8px;\n        padding: 8px 12px;\n        cursor: pointer;\n        border-left: 3px solid transparent;\n      }\n\n      ul[modules] li:hover {\n        background-color: var(--md-sys-color-surface-variant);\n      }\n\n      /* 고른 것은 면과 왼쪽 선으로 말한다 — 글자색만 바꾸면 야간에 안 보인다. */\n      ul[modules] li[selected] {\n        border-left-color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      ul[modules] li [on] {\n        font-size: 0.78rem;\n        color: var(--md-sys-color-primary);\n      }\n\n      ul[modules] li[selected] [on] {\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      ul[modules] li [none] {\n        font-size: 0.78rem;\n        color: var(--md-sys-color-outline);\n      }\n\n      /* ── 오른쪽: 그 모듈에서 되는 일 ────────────────────────────────────── */\n      ul[axes] {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul[axes] li {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        gap: 4px 10px;\n        padding: 12px 14px;\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n        cursor: pointer;\n      }\n\n      ul[axes] li:last-child {\n        border-bottom: none;\n      }\n\n      ul[axes] label {\n        font-size: 0.95rem;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      ul[axes] li[ghost] label {\n        cursor: default;\n      }\n\n      ul[axes] li[ghost],\n      ul[axes] li[readonly] {\n        cursor: default;\n      }\n\n      [picker-footer] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.85rem;\n      }\n\n      [picker-footer] button {\n        flex: 0 0 auto;\n        padding: 8px 16px;\n        border: 0;\n        border-radius: var(--md-sys-shape-corner-small, 6px);\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        font: inherit;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      [picker-footer] button:disabled {\n        cursor: default;\n        opacity: 0.45;\n      }\n\n      /* 설명은 **본문**이다 — tooltip 이 아니다. 체크박스 아래 칸을 비워 두고 거기 놓는다. */\n      ul[axes] [says] {\n        grid-column: 2;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.85rem;\n        line-height: 1.55;\n      }\n\n      ul[axes] [says][missing] {\n        color: var(--md-sys-color-outline);\n        font-style: italic;\n      }\n\n      ul[axes] li[ghost] label {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      /*\n        Which role is this? The header alone was not enough - it is one line of chrome above a\n        page full of module names, and a role carries a description that says what the job is.\n        Name and description sit in the body, where the reader is already looking.\n      */\n      [subject] {\n        margin: var(--spacing-large, 12px) var(--spacing-large, 12px) 0;\n      }\n\n      [subject] [name] {\n        font-size: 1.15rem;\n        font-weight: 640;\n      }\n\n      [subject] [says] {\n        margin-top: 2px;\n        font-size: 0.88rem;\n        line-height: 1.55;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [subject] [says][missing] {\n        color: var(--md-sys-color-outline);\n        font-style: italic;\n      }\n\n      /*\n        What is on, all together. The two panels answer \"what can this role do in one module\";\n        they cannot answer \"what does this role do\", because that reading needs 46 clicks.\n      */\n      [granted] {\n        flex: 1;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n        margin: var(--spacing-medium, 8px) var(--spacing-large, 12px) 0;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--md-sys-shape-corner-medium, 10px);\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n      }\n\n      [granted] > header {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n        padding: 8px 12px;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.8rem;\n      }\n\n      [granted] > header [count] {\n        color: var(--md-sys-color-outline);\n      }\n\n      /*\n        ⚠ 여기 display: flex 와 flex-wrap: wrap 이 있었다 — 칩으로 그리던 시절의 규칙이다.\n        마크업을 줄 목록으로 바꾼 뒤에도 남아서 **문장이 한 줄씩 서지 않고 칩처럼 옆으로\n        흘렀다.** 내 ul[lines] 는 display 를 선언하지 않으므로 맞설 것이 없었다.\n        마크업을 갈 때는 그 마크업만 쓰던 CSS 를 함께 지운다.\n\n        높이도 바뀐다. max-height: 22vh 는 격자 두 판이 늘 아래에 펼쳐져 있던 시절의 값이다.\n        지금은 **이 목록이 본문**이므로(§2) 남는 높이를 여기가 받고, 59줄은 여기서 흐른다.\n      */\n      [granted] ul {\n        flex: 1;\n        min-height: 0;\n        overflow: auto;\n      }\n\n      [granted] [empty] {\n        padding: 0 12px 10px;\n      }\n\n      [note] {\n        margin: var(--spacing-large, 12px);\n        padding: 10px 12px;\n        border-radius: var(--md-sys-shape-corner-small, 6px);\n        font-size: 0.85rem;\n        line-height: 1.55;\n        background-color: var(--md-sys-color-surface-variant);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [note][attention] {\n        background-color: var(--md-sys-color-error-container);\n        color: var(--md-sys-color-on-error-container);\n      }\n\n      /*\n        ── 할 수 있는 일 (본문) ────────────────────────────────────────────────\n        읽는 것이 먼저이므로 글자를 본문 크기로 둔다. 격자의 0.85rem 보다 크다.\n      */\n      ul[lines] {\n        list-style: none;\n        margin: 0;\n        padding: 0 12px;\n      }\n\n      ul[lines] li {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 9px 2px;\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n      }\n\n      ul[lines] li:last-child {\n        border-bottom: none;\n      }\n\n      ul[lines] [line] {\n        flex: 1;\n        font-size: 0.95rem;\n        line-height: 1.5;\n      }\n\n      /* 문장이 없어서 이름으로 지은 줄 — 문장과 구별되게 조용히 둔다. */\n      ul[lines] [named] {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      ul[lines] li[ghost] [line] {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      ul[lines] [tag] {\n        margin-left: 8px;\n        font-size: 0.78rem;\n        text-decoration: none;\n        color: var(--md-sys-color-outline);\n      }\n\n      /* 떼기 — 줄마다 있으므로 조용하고, 그 줄에 머물 때 드러난다. */\n      button[drop] {\n        flex: none;\n        display: inline-flex;\n        padding: 3px;\n        color: var(--md-sys-color-outline);\n        background-color: transparent;\n        border: none;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        cursor: pointer;\n      }\n      button[drop] md-icon {\n        --md-icon-size: 18px;\n      }\n      ul[lines] li:hover button[drop] {\n        color: var(--md-sys-color-error);\n        background-color: var(--md-sys-color-error-container);\n      }\n\n      button[add] {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        margin: 10px 12px 12px;\n        padding: 8px 14px 8px 10px;\n        font: var(--label-font, inherit);\n        font-size: 0.85rem;\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n        border: none;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        cursor: pointer;\n      }\n      button[add] md-icon {\n        --md-icon-size: 18px;\n      }\n\n      button[close] {\n        margin-left: auto;\n        display: inline-flex;\n        padding: 2px;\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: transparent;\n        border: none;\n        cursor: pointer;\n      }\n      button[close] md-icon {\n        --md-icon-size: 18px;\n      }\n\n      [empty] {\n        padding: var(--spacing-large, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.85rem;\n      }\n    `\n  ]\n\n  /** 셸이 `role-privileges/<id>` 의 뒤를 `lifecycle.resourceId` 로 준다. */\n  @property({ type: Object }) lifecycle: any\n\n  /*\n   * 이름을 `role` 로 두면 안 된다 — `HTMLElement` 가 ARIA 반영으로 `role` 을 이미 갖고 있어서\n   * private 필드로 가리면 `CustomElementClass` 에 안 맞는다(TS1238·TS2415).\n   */\n  @state() private subject: any = {}\n  @state() private modules: Module[] = []\n  @state() private assigned: Set<string> = new Set()\n  @state() private holders: any[] = []\n  @state() private selected: string = ''\n\n  @state() private keyword: string = ''\n  @state() private mySubdomain: string = ''\n\n  @state() private fetchState: 'loading' | 'failed' | 'loaded' = 'loading'\n  @state() private saving: boolean = false\n  @state() private dirty: boolean = false\n\n  /**\n   * 부모 도메인의 역할은 여기서 못 고친다 — `updateRole` 의 범위가 `domain.id` 하나다.\n   * 목록이 상속으로 보여 주므로 관리자가 여기까지 온다. 읽기 전용으로 두고 어디로 가야 하는지\n   * 말한다. (프로필의 `domain` 에 `id` 가 없어서 `subdomain` 으로 견준다.)\n   */\n  private get inherited(): boolean {\n    const subdomain = this.subject?.domain?.subdomain\n    return Boolean(subdomain && this.mySubdomain && subdomain !== this.mySubdomain)\n  }\n\n  private get savable(): boolean {\n    return this.fetchState === 'loaded' && !this.saving && !this.inherited\n  }\n\n  private get visibleModules(): Module[] {\n    return filterPrivilegeModules(this.modules, this.keyword, moduleLabel)\n  }\n\n  /**\n   * `role-privilege-picker` 는 이 페이지의 상태를 읽어 그린다. 둘은 서로 다른 shadow root 이므로\n   * 여기 state 만 바꾸면 picker 는 다시 그릴 이유를 알지 못한다. 검색·모듈 선택은 그 누락 때문에\n   * 눌러도 화면이 그대로였다.\n   */\n  private refreshPicker() {\n    this.picker?.requestUpdate()\n  }\n\n  private selectModule(category: string) {\n    if (this.selected === category) {\n      return\n    }\n\n    this.selected = category\n    this.refreshPicker()\n  }\n\n  /**\n   * ox-input-search 의 `change` 는 입력을 끝내고 포커스를 옮길 때만 온다. 모듈을 찾는 칸은\n   * 입력하는 즉시 좁혀져야 하므로 shadow 경계를 넘어오는 native input 이벤트도 함께 받는다.\n   */\n  private updateKeyword(event: Event) {\n    const nativeInput = event.composedPath().find(node => node instanceof HTMLInputElement) as HTMLInputElement | undefined\n    const keyword = nativeInput?.value ?? (event.target as any)?.value ?? ''\n\n    this.keyword = keyword\n\n    /* 검색 결과에 현재 선택 모듈이 없으면 첫 결과를 바로 연다. 오른쪽에 이전 모듈의 축이\n       남아 있으면 검색이 안 된 것처럼 보이기 때문이다. */\n    this.selected = selectedVisibleModule(this.visibleModules, this.selected)\n\n    this.refreshPicker()\n  }\n\n  /*\n   * The page is named after the screen, not after the role it happens to be showing.\n   *\n   * It used to carry `this.subject.name`, and the reader then saw \"Administrator\" three times\n   * on one screen: the tab, the page header, and the subject block in the body. Worse, the page\n   * had no name of its own - nothing said what this screen is for.\n   *\n   * A record-valued title does have precedent here (appliance, app-binding, application in this\n   * package, and board-ui's play list - 4 of the 6 object-form titles), but those pages are the\n   * record's own detail. This one is one facet of a role, and the role is already named in the\n   * body, where a description can sit beside it.\n   */\n  get context() {\n    return {\n      title: { icon: 'vpn_key', text: i18next.t('title.role privileges') },\n      help: 'auth/roles',\n      actions: this.inherited\n        ? []\n        : [\n            {\n              title: i18next.t('button.save'),\n              disabled: !this.dirty || !this.savable,\n              disabledTitle: this.saving ? '권한을 저장하고 있습니다.' : '권한을 바꾼 뒤 저장할 수 있습니다.',\n              action: this.onSave.bind(this)\n            }\n          ]\n    }\n  }\n\n  render() {\n    if (this.fetchState === 'failed') {\n      return html`<ox-oops-note\n        icon=\"error_outline\"\n        title=${i18next.t('text.failed to fetch')}\n        description=${i18next.t('text.please try again')}\n      ></ox-oops-note>`\n    }\n\n    return html`\n      ${this.inherited\n        ? html`<div note attention>\n            ${i18next.t('text.role belongs to x domain and is edited there', {\n              x: this.subject?.domain?.name || this.subject?.domain?.subdomain\n            })}\n          </div>`\n        : nothing}\n      ${this.renderSubject()} ${this.renderHolders()} ${this.renderGranted()}\n    `\n  }\n\n  /**\n   * 어느 역할을 고치고 있나, 그리고 그것이 무엇을 위한 것인가.\n   *\n   * 머리말은 이름만 들고 있었고, **직무를 말하는 한 줄인 설명은 목록에만 있었다.** 링크로\n   * 들어온 사람은 `Administrator` 와 `PLANT-MANAGER` 를 낱말 말고는 구별할 방법이 없다.\n   *\n   * 설명이 없는 역할은 없다고 말한다. 다음에 할 일은 그것을 쓰는 것이고, 자리는 목록 격자다.\n   */\n  private renderSubject() {\n    if (this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    return html`\n      <div subject>\n        <div name>${this.subject?.name || i18next.t('label.role')}</div>\n        ${this.subject?.description\n          ? html`<div says>${this.subject.description}</div>`\n          : html`<div says missing>${i18next.t('text.no description for this role')}</div>`}\n      </div>\n    `\n  }\n\n  /**\n   * **이 역할이 할 수 있는 일 — 이것이 본문이다.**\n   *\n   * ── 뒤집은 이유 (UX 레인 §2, 사용자 평가) ──────────────────────────────────\n   * 격자는 「이 모듈에서 무엇이 켜졌나」에 답한다. 관리자가 묻는 것은 **「이 역할이 무엇을\n   * 하나」**이고, 격자로 그것을 읽으려면 모듈 46개를 한 번씩 열어야 한다. 역할을 부여하는\n   * 사람은 부여하기 **전에** 그 답이 필요하다.\n   *\n   * 그래서 켜진 것을 문장으로 늘어놓는 것이 본문이 되고, 격자는 **더할 때 쓰는 도구**로\n   * 자리를 옮긴다(`renderAdd`). 문장이 줄마다 있으므로 배우는 일이 따로 없다.\n   *\n   * ── 켜진 것만 낸다 ─────────────────────────────────────────────────────────\n   * 전체를 여기 또 그리면 같은 46 모듈이 화면에 두 번 선다. 전체는 「더하기」 판이 갖는다.\n   *\n   * ── 글이 없을 때 ───────────────────────────────────────────────────────────\n   * 「더하기」 판에서는 문장이 없으면 **없다고 말해도 된다** — 체크박스 옆에 「읽기」라는\n   * 라벨이 이미 있어서 무엇을 켜는지 알 수 있다.\n   *\n   * 여기서는 다르다. **이 줄이 곧 그 권한의 신분이다.** 없다고만 쓰면 무엇을 떼는지 모르는\n   * 줄이 되므로, 그때는 `모듈 · 축` 으로 이름을 짓는다. 그것은 코드 낱말이 아니다 —\n   * `privilege.category.*` 57개와 「읽기/쓰기」가 사람 말이다.\n   */\n  private renderGranted() {\n    if (this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    const granted = this.modules\n      .flatMap(module => module.cells.map(cell => ({ category: module.category, cell })))\n      .filter(entry => this.assigned.has(entry.cell.id))\n\n    return html`\n      <div granted>\n        <header>\n          ${i18next.t('field.granted privileges')}\n          <span count>${granted.length}</span>\n        </header>\n\n        ${granted.length\n          ? html`<ul lines>\n              ${granted.map(({ category, cell }) => this.renderGrantedLine(category, cell))}\n            </ul>`\n          : html`<div empty>${i18next.t('text.nothing is on for this role yet')}</div>`}\n        ${this.renderAdd()}\n      </div>\n    `\n  }\n\n  /**\n   * 한 줄 — 문장과 [떼기].\n   *\n   * 유령(이 배포의 어떤 코드도 요구하지 않는 권한)은 취소선으로 보이고 **떼는 것만** 된다.\n   * 이미 붙어 있으니 뗄 수 있어야 하고, 붙여도 아무 일이 없으니 다시 켤 이유가 없다.\n   */\n  private renderGrantedLine(category: string, cell: Cell) {\n    const written = axisText(category, cell)\n\n    return html`\n      <li ?ghost=${cell.deprecated}>\n        <div line>\n          ${written || html`<span named>${moduleLabel(category)} · ${axisLabel(cell.axis)}</span>`}\n          ${cell.deprecated ? html`<span tag>${i18next.t('text.privilege no longer declared')}</span>` : nothing}\n        </div>\n\n        ${this.inherited\n          ? nothing\n          : html`<button drop title=${i18next.t('button.drop')} @click=${() => this.onToggle(cell.id, false)}>\n              <md-icon>close</md-icon>\n            </button>`}\n      </li>\n    `\n  }\n\n  /**\n   * 「＋ 할 수 있는 일 더하기」 — 격자가 여기 들어간다.\n   *\n   * 열어 두지 않는 이유는 하나다 — **처음 읽는 것이 「이 역할이 무엇을 하나」여야 한다.**\n   * 46 모듈이 늘 펼쳐져 있으면 그 답이 화면 아래로 밀린다.\n   *\n   * 상속 역할에는 내주지 않는다. 여기서 저장할 수 없으므로 켜 보게 하는 것이 헛수고다 —\n   * 대신 위쪽 안내가 어느 도메인에서 고치는지 말한다.\n   */\n  private renderAdd() {\n    if (this.inherited || this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    if (!this.modules.length) {\n      return html`<div note attention>${i18next.t('text.no privilege declared in this deployment')}</div>`\n    }\n\n    return html`\n      <button add @click=${() => this.openAdd()}>\n        <md-icon>add</md-icon>${i18next.t('button.add what it can do')}\n      </button>\n    `\n  }\n\n  /**\n   * 고르는 판을 **넓은 팝업**으로 연다.\n   *\n   * 사용자 말씀이다 — 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가?\n   * 지금은 좁아보이고」. 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서\n   * 모듈 46개와 축 목록을 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.\n   *\n   * ```\n   * [읽었음] ox-floating-overlay.ts:126-134   [size=large]  width 100% · height 100%\n   * ```\n   *\n   * `escapable` 을 건드리지 않는다 — 켠 것은 팝업이 아니라 **이 페이지의 `assigned`** 에 바로\n   * 들어가므로 닫든 ESC 를 누르든 잃는 것이 없다. 물어볼 것이 없는 판에 물으면 그 물음이 값을\n   * 잃는다. 저장은 여전히 툴바가 한다.\n   *\n   * ⚠ 부품을 **동적으로 들인다.** 그 부품은 스타일 한 벌을 이 클래스에서 가져가므로, 위에서\n   * 정적으로 import 하면 순환이 된다. 여는 순간에 들이면 그 고리가 끊긴다.\n   */\n  private async openAdd() {\n    await import('../../components/role-privilege-picker.js')\n\n    const popup = openPopup(\n      html`<role-privilege-picker .page=${this} @close=${() => popup.close()}></role-privilege-picker>`,\n      {\n        backdrop: true,\n        size: 'large',\n        title: i18next.t('button.add what it can do')\n      }\n    )\n  }\n\n  /**\n   * 고르는 판의 몸체 — **팝업이 이것을 그린다.**\n   *\n   * 판을 부품 안으로 옮기지 않는다. 모듈 접기·축 줄·유령 규칙이 전부 이 페이지의 상태\n   * (`modules`·`assigned`·`selected`·`keyword`)를 보기 때문이고, 옮기면 **상태가 두 벌**이 된다.\n   * 두 벌이 되는 순간 어느 쪽이 저장 범위인지 흐려진다 — 옛 편집기가 `querySelectorAll` 로\n   * 범위를 만들던 결함이 정확히 그 모양이었다.\n   */\n  renderPickerBody() {\n    return html`\n      <div body>\n        <div panel>\n          <header>\n            ${i18next.t('field.module')}\n            <span count>${this.modules.length}</span>\n          </header>\n          <ox-input-search\n            .placeholder=${i18next.t('text.filter by module name')}\n            .value=${this.keyword}\n            @input=${(event: Event) => this.updateKeyword(event)}\n            @change=${(event: Event) => this.updateKeyword(event)}\n          ></ox-input-search>\n          <div scroll>${this.renderModules()}</div>\n        </div>\n\n        <div panel>\n          <header>\n            ${this.selected ? moduleLabel(this.selected) : i18next.t('field.privileges')}\n            <span count>${i18next.t('text.x of y on', { x: this.assigned.size, y: this.cellCount() })}</span>\n          </header>\n          <div scroll>${this.renderAxes()}</div>\n        </div>\n      </div>\n      <div picker-footer>\n        <span>\n          ${this.saving\n            ? '권한을 저장하고 있습니다.'\n            : this.dirty\n              ? '변경 사항이 있습니다. 저장해야 적용됩니다.'\n              : '권한을 바꾼 뒤 저장할 수 있습니다.'}\n        </span>\n        <button ?disabled=${!this.savable || !this.dirty} @click=${() => this.onSave()}>\n          ${this.saving ? '저장 중…' : i18next.t('button.save')}\n        </button>\n      </div>\n    `\n  }\n\n  /** 팝업이 열려 있는 동안 자기를 등록한다 — 토글이 그것을 다시 그리게 한다. */\n  picker?: { requestUpdate: () => void }\n\n  /**\n   * 이 역할을 가진 사람.\n   *\n   * 권한을 켜기 **전에** 누가 영향을 받는지 보이는 자리다. 아무도 안 가진 역할을 고치는 것과\n   * 40명이 가진 역할을 고치는 것은 다른 일인데, 옛 화면은 그 둘이 똑같이 보였다.\n   */\n  private renderHolders() {\n    if (this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    return this.holders.length\n      ? html`<div note>\n          ${i18next.t('text.x people hold this role', { x: this.holders.length })}\n          — ${this.holders.map(h => h.name || h.email).join(', ')}\n        </div>`\n      : html`<div note>${i18next.t('text.no one holds this role yet')}</div>`\n  }\n\n  private renderModules() {\n    if (this.fetchState === 'loading') {\n      return html`<div empty>${i18next.t('text.loading')}</div>`\n    }\n\n    if (!this.modules.length) {\n      return html`<div empty>${i18next.t('text.no privilege declared in this deployment')}</div>`\n    }\n\n    if (!this.visibleModules.length) {\n      return html`<div empty>${i18next.t('text.nothing matches x', { x: this.keyword })}</div>`\n    }\n\n    return html`\n      <ul modules>\n        ${this.visibleModules.map(module => {\n          const on = module.cells.filter(cell => this.assigned.has(cell.id)).length\n\n          return html`\n            <li ?selected=${module.category === this.selected} @click=${() => this.selectModule(module.category)}>\n              <span>${moduleLabel(module.category)}</span>\n              ${on\n                ? html`<span on>${i18next.t('text.x on', { x: on })}</span>`\n                : html`<span none>${i18next.t('text.none on')}</span>`}\n            </li>\n          `\n        })}\n      </ul>\n    `\n  }\n\n  private renderAxes() {\n    if (this.fetchState === 'loading') {\n      return html`<div empty>${i18next.t('text.loading')}</div>`\n    }\n\n    const module = this.modules.find(m => m.category === this.selected)\n    if (!module) {\n      /* 아무것도 안 고른 상태 — 무엇을 해야 하는지 말한다. */\n      return html`<div empty>${i18next.t('text.pick a module on the left')}</div>`\n    }\n\n    return html`\n      <ul axes>\n        ${module.cells.map(cell => {\n          const on = this.assigned.has(cell.id)\n\n          return html`\n            <li\n              ?ghost=${cell.deprecated}\n              ?readonly=${this.inherited || (cell.deprecated && !on)}\n              @click=${(event: MouseEvent) => this.toggleCellFromRow(event, cell, on)}\n            >\n              <input\n                type=\"checkbox\"\n                id=\"cell-${cell.id}\"\n                .checked=${on}\n                ?disabled=${this.inherited || (cell.deprecated && !on)}\n                @change=${(e: Event) => this.onToggle(cell.id, (e.target as HTMLInputElement).checked)}\n              />\n              <label for=\"cell-${cell.id}\">${axisLabel(cell.axis)}</label>\n\n              ${cell.deprecated\n                ? html`<div says>${i18next.t('text.privilege no longer declared')}</div>`\n                : axisSays(module.category, cell) ||\n                  html`<div says missing>${i18next.t('text.no description for this privilege')}</div>`}\n            </li>\n          `\n        })}\n      </ul>\n    `\n  }\n\n  private cellCount(): number {\n    return this.modules.reduce((sum, module) => sum + module.cells.length, 0)\n  }\n\n  async pageUpdated(changes: any, lifecycle: any) {\n    if (this.active) {\n      this.lifecycle = lifecycle\n      await this.fetch()\n    }\n  }\n\n  /**\n   * 한 번의 질의로 **전체 권한과 이 역할이 가진 것**을 함께 읽는다(`rolePrivileges(roleId:)`).\n   *\n   * 역할 이름과 가진 사람은 `roles(filters: id)` 로 같은 문서에서 받는다 — 옛 편집기는 역할을\n   * **이름**으로 다시 찾았고, 부모 도메인에 같은 이름이 있으면 남의 역할을 그렸다.\n   */\n  private async fetch() {\n    const roleId = this.lifecycle?.resourceId\n    if (!roleId) {\n      this.fetchState = 'failed'\n      return\n    }\n\n    this.fetchState = 'loading'\n    this.mySubdomain = (await getDomain())?.subdomain || ''\n\n    const response = await client.query({\n      query: gql`\n        query ($roleId: String!, $filters: [Filter!]) {\n          rolePrivileges(roleId: $roleId) {\n            id\n            name\n            category\n            description\n            assigned\n            deprecated\n          }\n          roles(filters: $filters) {\n            items {\n              id\n              name\n              description\n              domain {\n                id\n                name\n                subdomain\n              }\n              users {\n                id\n                name\n                email\n              }\n            }\n          }\n        }\n      `,\n      variables: { roleId, filters: [{ name: 'id', operator: 'eq', value: roleId }] },\n      context: gqlContext()\n    })\n\n    if (response.errors?.length) {\n      /* 실패를 「권한이 하나도 없다」로 그리지 않는다 — 저장하면 실제로 그렇게 된다. */\n      this.fetchState = 'failed'\n      return\n    }\n\n    this.subject = response.data?.roles?.items?.[0] || {}\n    this.holders = this.subject.users || []\n    this.build(response.data?.rolePrivileges || [])\n    this.fetchState = 'loaded'\n\n    /*\n     * The shell reads `context` once, when the page becomes active - before this fetch\n     * resolves. Without this call the header keeps the fallback, so the screen showed\n     * \"권한\" and never said which role was being edited.\n     */\n    this.updateContext()\n  }\n\n  /** 평평한 목록을 모듈로 접는다. 축 순서는 아는 것 먼저, 나머지는 이름 순. */\n  private build(privileges: any[]) {\n    const byCategory = new Map<string, Module>()\n    const assigned = new Set<string>()\n\n    for (const privilege of privileges) {\n      const { id, name, category, description, deprecated } = privilege\n      if (!id || !name || !category) {\n        continue\n      }\n\n      if (privilege.assigned) {\n        assigned.add(id)\n      }\n\n      const module = byCategory.get(category) || { category, cells: [] as Cell[] }\n      module.cells.push({ id, axis: name, deprecated: Boolean(deprecated), description })\n      byCategory.set(category, module)\n    }\n\n    for (const module of byCategory.values()) {\n      module.cells.sort((a, b) => axisOrder(a.axis) - axisOrder(b.axis) || a.axis.localeCompare(b.axis))\n    }\n\n    this.modules = [...byCategory.values()].sort((a, b) => moduleLabel(a.category).localeCompare(moduleLabel(b.category)))\n    this.assigned = assigned\n    this.dirty = false\n\n    /* 고른 것이 없으면 첫 모듈을 연다 — 빈 오른쪽 판을 처음 화면으로 두지 않는다. */\n    if (!this.modules.find(m => m.category === this.selected)) {\n      this.selected = this.modules[0]?.category || ''\n    }\n  }\n\n  private onToggle(id: string, checked: boolean) {\n    if (this.assigned.has(id) === checked) {\n      return\n    }\n\n    const next = new Set(this.assigned)\n    checked ? next.add(id) : next.delete(id)\n    this.assigned = next\n    this.dirty = true\n    this.updateContext()\n\n    /* 팝업은 자기 상태를 안 들고 이 페이지를 본다 — 열려 있으면 다시 그리라고 알린다. */\n    this.refreshPicker()\n  }\n\n  /** 라벨·설명을 포함한 행 전체를 누를 수 있게 한다. checkbox와 키보드 Space는 native change가 맡는다. */\n  private toggleCellFromRow(event: MouseEvent, cell: Cell, on: boolean) {\n    if (this.inherited || (cell.deprecated && !on) || event.target instanceof HTMLInputElement) {\n      return\n    }\n\n    /* label의 기본 동작이 checkbox change를 한 번 더 보내지 않게 막는다. */\n    event.preventDefault()\n    this.onToggle(cell.id, !on)\n  }\n\n  async canDeactivate(): Promise<boolean> {\n    if (!this.dirty) {\n      return true\n    }\n\n    return await OxPrompt.open({\n      title: '저장하지 않은 변경 사항',\n      text: '수정된 권한이 있습니다. 저장하지 않고 이 페이지를 나가시겠습니까?',\n      confirmButton: { text: '저장하지 않고 나가기' },\n      cancelButton: { text: i18next.t('button.cancel') }\n    })\n  }\n\n  /**\n   * 저장.\n   *\n   * **범위는 `modules` 전체다.** 왼쪽에서 다른 모듈을 고르면 앞 모듈의 체크박스는 DOM 에\n   * 없는데, 그것을 훑어 보내던 것이 옛 편집기가 권한을 조용히 떼던 자리다.\n   *\n   * `privileges` 만 보낸다 — 이름과 설명은 목록 격자가 소유한다.\n   */\n  private async onSave() {\n    if (!this.savable) {\n      return\n    }\n\n    this.saving = true\n    this.updateContext()\n\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: RolePatch!) {\n            updateRole(id: $id, patch: $patch) {\n              id\n            }\n          }\n        `,\n        variables: {\n          id: this.subject.id,\n          patch: { privileges: [...this.assigned].map(id => ({ id })) }\n        },\n        context: gqlContext()\n      })\n\n      if (response.errors?.length) {\n        document.dispatchEvent(\n          new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n        )\n        return\n      }\n\n      document.dispatchEvent(\n        new CustomEvent('notify', { detail: { message: i18next.t('text.data_updated_successfully') } })\n      )\n\n      /* 유령을 뗐으면 목록에서 사라져야 하고, 켠 것이 요약에 반영돼야 한다. */\n      await this.fetch()\n      this.dirty = false\n    } finally {\n      this.saving = false\n      this.updateContext()\n    }\n  }\n}\n\n/**\n * 모듈 이름을 사람 말로.\n *\n * `privilege.category.<category>` 키가 있으면 그것을 쓰고, 없으면 **코드 낱말을 그대로** 낸다 —\n * 지어내지 않는다. 지금 46개 중 하나(`system`)만 채워져 있고, UX 레인이 나머지를 쓰고 있다.\n */\nfunction moduleLabel(category: string): string {\n  const key = `privilege.category.${category}`\n  return i18next.t(key, { defaultValue: category })\n}\n\n\n/**\n * 「켜면 무엇을 할 수 있게 되나」 — **이 화면의 이유다.**\n *\n * 사용자 평가가 「화면으로부터 배울 수 있는 것이 없다」였고, 그 원인은 화면이 감춘 것이 아니라\n * 시스템에 그 문장이 없던 것이었다. 부팅 동기화가 `{ category, name }` 둘만 저장해서\n * (`auth-base/server/index.ts:34-36`) 713개 선언이 전부 빈 설명이었다.\n *\n * 그 글을 UX 레인이 `privilege.allows.<category>.<axis>` 로 썼다(57 모듈 · 104 문장, ko·en).\n * 번역은 디스크에서 서비스되므로 **배포를 기다리지 않고 붙는다.**\n *\n * ── 보는 순서 ───────────────────────────────────────────────────────────────\n * ```\n * 1  서버 칸        채워지면 그것이 이긴다 — 배포마다 다를 수 있는 사실은 서버가 안다\n * 2  우리가 쓴 글    privilege.allows.<category>.<axis>\n * 3  없다고 말한다   둘 다 없으면. 지어내지 않는다\n * ```\n *\n * ⚠ **`defaultValue: ''` 가 없으면 3번으로 못 떨어진다** — i18next 는 키가 없을 때 **키 이름을\n * 그대로** 돌려주므로 화면에 `privilege.allows.board.query` 가 찍힌다. 빈 문자열을 기본값으로\n * 줘서 「없음」이 거짓으로 판정되게 한다.\n */\nfunction axisText(category: string, cell: Cell): string {\n  if (cell.description) {\n    return cell.description\n  }\n\n  return i18next.t(`privilege.allows.${category}.${cell.axis}`, { defaultValue: '' })\n}\n\nfunction axisSays(category: string, cell: Cell) {\n  const written = axisText(category, cell)\n  return written ? html`<div says>${written}</div>` : null\n}\n\nfunction axisOrder(axis: string): number {\n  const index = KNOWN_AXES.indexOf(axis)\n  return index < 0 ? KNOWN_AXES.length : index\n}\n"]}
+{"version":3,"file":"role-privilege-page.js","sourceRoot":"","sources":["../../../client/pages/role/role-privilege-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/list-state/ox-page-state.js'\nimport '@operato/input/ox-input-search.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { KNOWN_AXES, axisLabel } from '../../utils/privilege-axis.js'\nimport { openPopup } from '@operato/layout'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { getDomain } from '@things-factory/auth-base/dist-client'\n\nimport { filterPrivilegeModules, selectedVisibleModule } from '../../components/role-privilege-picker-state.js'\n\n/*\n * The axis vocabulary moved to `utils/privilege-axis.ts`, and it no longer translates.\n * `query` used to print as 「읽기」 and `mutation` as 「쓰기」, which is false in the six\n * declarations where the axis and the GraphQL operation disagree on purpose. That file\n * carries the reasoning and the decided end state.\n */\n\ntype Cell = { id: string; axis: string; deprecated: boolean; description?: string }\ntype Module = { category: string; cells: Cell[] }\n\n/**\n * 한 역할이 무엇을 할 수 있나 — **켜진 것이 문장으로 본문에 선다.**\n *\n * ── 사용자 평가가 이 화면을 두 번 뒤집었다 ──────────────────────────────────\n * **「화면으로부터 배울 수 있는 것이 없고, 혼란스럽고, 어렵고, 불편하다.」**\n *\n * 처음에는 팝업 안의 `모듈 × 읽기·쓰기` 격자였다. 격자는 「이 모듈에서 무엇이 켜졌나」에\n * 답하는데, 관리자가 묻는 것은 **「이 역할이 무엇을 하나」**다. 격자로 그걸 읽으려면 모듈\n * 46개를 한 번씩 열어야 하고, 역할을 부여하는 사람은 부여하기 **전에** 그 답이 필요하다.\n *\n * 그래서 뒤집었다(UX 레인 §2). 켜진 것을 문장으로 늘어놓는 것이 본문이고, 격자는 **더할 때\n * 쓰는 도구**로 자리를 옮겼다(`renderAdd`). 버린 것은 없다.\n *\n * ── 문장은 어디서 오나 ──────────────────────────────────────────────────────\n * ```\n * 1  Privilege.description   서버가 채우면 그것이 이긴다 — 배포마다 다를 수 있는 사실은 서버가 안다\n * 2  privilege.allows.<category>.<axis>   UX 레인이 쓴 글 (57 모듈 · 104 문장, ko·en)\n * 3  「아직 설명이 없습니다」  둘 다 없으면. 지어내지 않는다\n * ```\n *\n * 1번은 아직 **전부 비어 있다** — 부팅 동기화가 `{ category, name }` 둘만 저장한다\n * (`auth-base/server/index.ts:34-36`). 그래서 지금 화면에 나오는 문장은 전부 2번이다.\n *\n * ── 저장 범위는 서버가 준 목록이다 ──────────────────────────────────────────\n * 옛 편집기는 `querySelectorAll('input:checked')` 로 보냈다. 「더하기」 판에서 다른 모듈로\n * 옮기면 앞 모듈의 체크박스는 **DOM 에 없다** — 그 방식이면 모듈을 옮겨 다니는 것만으로\n * 권한이 조용히 떨어진다. 여기서는 `rolePrivileges` 가 준 전체가 범위이고 켠 것은\n * `assigned` 에만 있다. 화면이 무엇을 그렸는지와 무관하다.\n */\n@customElement('role-privilege-page')\nexport class RolePrivilegePage extends localize(i18next)(PageView) {\n  static styles: CSSResultGroup = [\n    /* The frame owns the page shell; the two panes are the content it sizes (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      [body] {\n        display: grid;\n        /* 왼쪽은 이름만 담으므로 고정, 오른쪽이 문장을 받으므로 남는 폭을 준다. */\n        grid-template-columns: minmax(200px, 280px) 1fr;\n        gap: var(--spacing-large, 12px);\n        padding: var(--spacing-large, 12px);\n      }\n\n      @media screen and (max-width: 780px) {\n        [body] {\n          /* 좁으면 위아래로. 고른 모듈이 아래에 오는 것이 읽는 순서와 같다. */\n          grid-template-columns: 1fr;\n          grid-template-rows: auto 1fr;\n        }\n      }\n\n      [panel] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--md-sys-shape-corner-medium, 10px);\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n        overflow: hidden;\n      }\n\n      [panel] > header {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n        padding: 10px 12px;\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.8rem;\n      }\n\n      [panel] > header [count] {\n        color: var(--md-sys-color-outline);\n      }\n\n      [scroll] {\n        flex: 1;\n        min-height: 0;\n        overflow: auto;\n      }\n\n      /*\n        걸러 보는 칸은 ox-input-search 다.\n\n        여기 md-filled-text-field 를 썼다가 사용자에게 「전체적인 스타일에 어울리지 않는다」를\n        들었다. 그것은 회색 채움 상자에 라벨이 떠 있는 **폼 칸**이고, 이 자리는 **찾는 칸**이다.\n\n        근거는 이 화면 자신에 있다 — 역할 목록의 검색 칸이 이 부품이다.\n        [읽었음] @operato/data-grist/dist/src/filters/filters-form.js:153\n\n        ⚠ 폼 칸도 md-* 를 안 쓴다 — 사용자가 2026-09-11 에 역할 화면 전체로 못 박았다\n        (「너무 크고 스타일이 안 어울린다」). native input 에 FormFieldStyles 를 얹는다.\n        그 블록이 정확히 이 일을 하려고 있는 것이다(shadow 경계를 넘는 토큰 연결).\n      */\n      ox-input-search {\n        margin: 8px 12px;\n        width: calc(100% - 24px);\n      }\n\n      /* ── 왼쪽: 모듈 ──────────────────────────────────────────────────────── */\n      ul[modules] {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul[modules] li {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 8px;\n        padding: 8px 12px;\n        cursor: pointer;\n        border-left: 3px solid transparent;\n      }\n\n      ul[modules] li:hover {\n        background-color: var(--md-sys-color-surface-variant);\n      }\n\n      /* 고른 것은 면과 왼쪽 선으로 말한다 — 글자색만 바꾸면 야간에 안 보인다. */\n      ul[modules] li[selected] {\n        border-left-color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      ul[modules] li [on] {\n        font-size: 0.78rem;\n        color: var(--md-sys-color-primary);\n      }\n\n      ul[modules] li[selected] [on] {\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      ul[modules] li [none] {\n        font-size: 0.78rem;\n        color: var(--md-sys-color-outline);\n      }\n\n      /* ── 오른쪽: 그 모듈에서 되는 일 ────────────────────────────────────── */\n      ul[axes] {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul[axes] li {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        gap: 4px 10px;\n        padding: 12px 14px;\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n        cursor: pointer;\n      }\n\n      ul[axes] li:last-child {\n        border-bottom: none;\n      }\n\n      ul[axes] label {\n        font-size: 0.95rem;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      ul[axes] li[ghost] label {\n        cursor: default;\n      }\n\n      ul[axes] li[ghost],\n      ul[axes] li[readonly] {\n        cursor: default;\n      }\n\n      [picker-footer] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.85rem;\n      }\n\n      [picker-footer] button {\n        flex: 0 0 auto;\n        padding: 8px 16px;\n        border: 0;\n        border-radius: var(--md-sys-shape-corner-small, 6px);\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        font: inherit;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      [picker-footer] button:disabled {\n        cursor: default;\n        opacity: 0.45;\n      }\n\n      /* 설명은 **본문**이다 — tooltip 이 아니다. 체크박스 아래 칸을 비워 두고 거기 놓는다. */\n      ul[axes] [says] {\n        grid-column: 2;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.85rem;\n        line-height: 1.55;\n      }\n\n      ul[axes] [says][missing] {\n        color: var(--md-sys-color-outline);\n        font-style: italic;\n      }\n\n      ul[axes] li[ghost] label {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      /*\n        Which role is this? The header alone was not enough - it is one line of chrome above a\n        page full of module names, and a role carries a description that says what the job is.\n        Name and description sit in the body, where the reader is already looking.\n      */\n      [subject] {\n        margin: var(--spacing-large, 12px) var(--spacing-large, 12px) 0;\n      }\n\n      [subject] [name] {\n        font-size: 1.15rem;\n        font-weight: 640;\n      }\n\n      [subject] [says] {\n        margin-top: 2px;\n        font-size: 0.88rem;\n        line-height: 1.55;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [subject] [says][missing] {\n        color: var(--md-sys-color-outline);\n        font-style: italic;\n      }\n\n      /*\n        What is on, all together. The two panels answer \"what can this role do in one module\";\n        they cannot answer \"what does this role do\", because that reading needs 46 clicks.\n      */\n      [granted] {\n        flex: 1;\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n        margin: var(--spacing-medium, 8px) var(--spacing-large, 12px) 0;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--md-sys-shape-corner-medium, 10px);\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n      }\n\n      [granted] > header {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n        padding: 8px 12px;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.8rem;\n      }\n\n      [granted] > header [count] {\n        color: var(--md-sys-color-outline);\n      }\n\n      /*\n        ⚠ 여기 display: flex 와 flex-wrap: wrap 이 있었다 — 칩으로 그리던 시절의 규칙이다.\n        마크업을 줄 목록으로 바꾼 뒤에도 남아서 **문장이 한 줄씩 서지 않고 칩처럼 옆으로\n        흘렀다.** 내 ul[lines] 는 display 를 선언하지 않으므로 맞설 것이 없었다.\n        마크업을 갈 때는 그 마크업만 쓰던 CSS 를 함께 지운다.\n\n        높이도 바뀐다. max-height: 22vh 는 격자 두 판이 늘 아래에 펼쳐져 있던 시절의 값이다.\n        지금은 **이 목록이 본문**이므로(§2) 남는 높이를 여기가 받고, 59줄은 여기서 흐른다.\n      */\n      [granted] ul {\n        flex: 1;\n        min-height: 0;\n        overflow: auto;\n      }\n\n      [granted] [empty] {\n        padding: 0 12px 10px;\n      }\n\n      [note] {\n        margin: var(--spacing-large, 12px);\n        padding: 10px 12px;\n        border-radius: var(--md-sys-shape-corner-small, 6px);\n        font-size: 0.85rem;\n        line-height: 1.55;\n        background-color: var(--md-sys-color-surface-variant);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [note][attention] {\n        background-color: var(--md-sys-color-error-container);\n        color: var(--md-sys-color-on-error-container);\n      }\n\n      /*\n        ── 할 수 있는 일 (본문) ────────────────────────────────────────────────\n        읽는 것이 먼저이므로 글자를 본문 크기로 둔다. 격자의 0.85rem 보다 크다.\n      */\n      ul[lines] {\n        list-style: none;\n        margin: 0;\n        padding: 0 12px;\n      }\n\n      ul[lines] li {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 9px 2px;\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n      }\n\n      ul[lines] li:last-child {\n        border-bottom: none;\n      }\n\n      ul[lines] [line] {\n        flex: 1;\n        font-size: 0.95rem;\n        line-height: 1.5;\n      }\n\n      /* 문장이 없어서 이름으로 지은 줄 — 문장과 구별되게 조용히 둔다. */\n      ul[lines] [named] {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      ul[lines] li[ghost] [line] {\n        text-decoration: line-through;\n        color: var(--md-sys-color-outline);\n      }\n\n      ul[lines] [tag] {\n        margin-left: 8px;\n        font-size: 0.78rem;\n        text-decoration: none;\n        color: var(--md-sys-color-outline);\n      }\n\n      /* 떼기 — 줄마다 있으므로 조용하고, 그 줄에 머물 때 드러난다. */\n      button[drop] {\n        flex: none;\n        display: inline-flex;\n        padding: 3px;\n        color: var(--md-sys-color-outline);\n        background-color: transparent;\n        border: none;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        cursor: pointer;\n      }\n      button[drop] md-icon {\n        --md-icon-size: 18px;\n      }\n      ul[lines] li:hover button[drop] {\n        color: var(--md-sys-color-error);\n        background-color: var(--md-sys-color-error-container);\n      }\n\n      button[add] {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        margin: 10px 12px 12px;\n        padding: 8px 14px 8px 10px;\n        font: var(--label-font, inherit);\n        font-size: 0.85rem;\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n        border: none;\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        cursor: pointer;\n      }\n      button[add] md-icon {\n        --md-icon-size: 18px;\n      }\n\n      button[close] {\n        margin-left: auto;\n        display: inline-flex;\n        padding: 2px;\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: transparent;\n        border: none;\n        cursor: pointer;\n      }\n      button[close] md-icon {\n        --md-icon-size: 18px;\n      }\n\n      [empty] {\n        padding: var(--spacing-large, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 0.85rem;\n      }\n    `\n  ]\n\n  /** 셸이 `role-privileges/<id>` 의 뒤를 `lifecycle.resourceId` 로 준다. */\n  @property({ type: Object }) lifecycle: any\n\n  /*\n   * 이름을 `role` 로 두면 안 된다 — `HTMLElement` 가 ARIA 반영으로 `role` 을 이미 갖고 있어서\n   * private 필드로 가리면 `CustomElementClass` 에 안 맞는다(TS1238·TS2415).\n   */\n  @state() private subject: any = {}\n  @state() private modules: Module[] = []\n  @state() private assigned: Set<string> = new Set()\n  @state() private holders: any[] = []\n  @state() private selected: string = ''\n\n  @state() private keyword: string = ''\n  @state() private mySubdomain: string = ''\n\n  @state() private fetchState: 'loading' | 'failed' | 'loaded' = 'loading'\n  /** What the server said when the read failed - the screen shows that sentence, not a guess. */\n  @state() private loadError: unknown = null\n  @state() private saving: boolean = false\n  @state() private dirty: boolean = false\n\n  /**\n   * 부모 도메인의 역할은 여기서 못 고친다 — `updateRole` 의 범위가 `domain.id` 하나다.\n   * 목록이 상속으로 보여 주므로 관리자가 여기까지 온다. 읽기 전용으로 두고 어디로 가야 하는지\n   * 말한다. (프로필의 `domain` 에 `id` 가 없어서 `subdomain` 으로 견준다.)\n   */\n  private get inherited(): boolean {\n    const subdomain = this.subject?.domain?.subdomain\n    return Boolean(subdomain && this.mySubdomain && subdomain !== this.mySubdomain)\n  }\n\n  private get savable(): boolean {\n    return this.fetchState === 'loaded' && !this.saving && !this.inherited\n  }\n\n  private get visibleModules(): Module[] {\n    return filterPrivilegeModules(this.modules, this.keyword, moduleLabel)\n  }\n\n  /**\n   * `role-privilege-picker` 는 이 페이지의 상태를 읽어 그린다. 둘은 서로 다른 shadow root 이므로\n   * 여기 state 만 바꾸면 picker 는 다시 그릴 이유를 알지 못한다. 검색·모듈 선택은 그 누락 때문에\n   * 눌러도 화면이 그대로였다.\n   */\n  private refreshPicker() {\n    this.picker?.requestUpdate()\n  }\n\n  private selectModule(category: string) {\n    if (this.selected === category) {\n      return\n    }\n\n    this.selected = category\n    this.refreshPicker()\n  }\n\n  /**\n   * ox-input-search 의 `change` 는 입력을 끝내고 포커스를 옮길 때만 온다. 모듈을 찾는 칸은\n   * 입력하는 즉시 좁혀져야 하므로 shadow 경계를 넘어오는 native input 이벤트도 함께 받는다.\n   */\n  private updateKeyword(event: Event) {\n    const nativeInput = event.composedPath().find(node => node instanceof HTMLInputElement) as\n      HTMLInputElement | undefined\n    const keyword = nativeInput?.value ?? (event.target as any)?.value ?? ''\n\n    this.keyword = keyword\n\n    /* 검색 결과에 현재 선택 모듈이 없으면 첫 결과를 바로 연다. 오른쪽에 이전 모듈의 축이\n       남아 있으면 검색이 안 된 것처럼 보이기 때문이다. */\n    this.selected = selectedVisibleModule(this.visibleModules, this.selected)\n\n    this.refreshPicker()\n  }\n\n  /*\n   * The page is named after the screen, not after the role it happens to be showing.\n   *\n   * It used to carry `this.subject.name`, and the reader then saw \"Administrator\" three times\n   * on one screen: the tab, the page header, and the subject block in the body. Worse, the page\n   * had no name of its own - nothing said what this screen is for.\n   *\n   * A record-valued title does have precedent here (appliance, app-binding, application in this\n   * package, and board-ui's play list - 4 of the 6 object-form titles), but those pages are the\n   * record's own detail. This one is one facet of a role, and the role is already named in the\n   * body, where a description can sit beside it.\n   */\n  get context() {\n    return {\n      title: { icon: 'vpn_key', text: i18next.t('title.role privileges') },\n      help: 'auth/roles',\n      actions: this.inherited\n        ? []\n        : [\n            {\n              title: i18next.t('button.save'),\n              disabled: !this.dirty || !this.savable,\n              disabledTitle: this.saving ? '권한을 저장하고 있습니다.' : '권한을 바꾼 뒤 저장할 수 있습니다.',\n              action: this.onSave.bind(this)\n            }\n          ]\n    }\n  }\n\n  render() {\n    /*\n     * Loading, refused and failed are one part now (ADR-0060 decision 8). The note this screen drew\n     * said \"failed, please try again\" whatever had happened: a privilege refusal - likely here, of\n     * all screens - read as a breakage, and it offered no way to read it again.\n     */\n    return html`<ox-page-state\n      .loading=${this.fetchState === 'loading'}\n      .error=${this.loadError}\n      @retry=${() => this.fetch()}\n      >${this.renderRole()}</ox-page-state\n    >`\n  }\n\n  private renderRole() {\n    return html`\n      ${\n        this.inherited\n          ? html`<div note attention>\n              ${i18next.t('text.role belongs to x domain and is edited there', {\n                x: this.subject?.domain?.name || this.subject?.domain?.subdomain\n              })}\n            </div>`\n          : nothing\n      }\n      ${this.renderSubject()} ${this.renderHolders()} ${this.renderGranted()}\n    `\n  }\n\n  /**\n   * 어느 역할을 고치고 있나, 그리고 그것이 무엇을 위한 것인가.\n   *\n   * 머리말은 이름만 들고 있었고, **직무를 말하는 한 줄인 설명은 목록에만 있었다.** 링크로\n   * 들어온 사람은 `Administrator` 와 `PLANT-MANAGER` 를 낱말 말고는 구별할 방법이 없다.\n   *\n   * 설명이 없는 역할은 없다고 말한다. 다음에 할 일은 그것을 쓰는 것이고, 자리는 목록 격자다.\n   */\n  private renderSubject() {\n    if (this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    return html`\n      <div subject>\n        <div name>${this.subject?.name || i18next.t('label.role')}</div>\n        ${\n          this.subject?.description\n            ? html`<div says>${this.subject.description}</div>`\n            : html`<div says missing>${i18next.t('text.no description for this role')}</div>`\n        }\n      </div>\n    `\n  }\n\n  /**\n   * **이 역할이 할 수 있는 일 — 이것이 본문이다.**\n   *\n   * ── 뒤집은 이유 (UX 레인 §2, 사용자 평가) ──────────────────────────────────\n   * 격자는 「이 모듈에서 무엇이 켜졌나」에 답한다. 관리자가 묻는 것은 **「이 역할이 무엇을\n   * 하나」**이고, 격자로 그것을 읽으려면 모듈 46개를 한 번씩 열어야 한다. 역할을 부여하는\n   * 사람은 부여하기 **전에** 그 답이 필요하다.\n   *\n   * 그래서 켜진 것을 문장으로 늘어놓는 것이 본문이 되고, 격자는 **더할 때 쓰는 도구**로\n   * 자리를 옮긴다(`renderAdd`). 문장이 줄마다 있으므로 배우는 일이 따로 없다.\n   *\n   * ── 켜진 것만 낸다 ─────────────────────────────────────────────────────────\n   * 전체를 여기 또 그리면 같은 46 모듈이 화면에 두 번 선다. 전체는 「더하기」 판이 갖는다.\n   *\n   * ── 글이 없을 때 ───────────────────────────────────────────────────────────\n   * 「더하기」 판에서는 문장이 없으면 **없다고 말해도 된다** — 체크박스 옆에 「읽기」라는\n   * 라벨이 이미 있어서 무엇을 켜는지 알 수 있다.\n   *\n   * 여기서는 다르다. **이 줄이 곧 그 권한의 신분이다.** 없다고만 쓰면 무엇을 떼는지 모르는\n   * 줄이 되므로, 그때는 `모듈 · 축` 으로 이름을 짓는다. 그것은 코드 낱말이 아니다 —\n   * `privilege.category.*` 57개와 「읽기/쓰기」가 사람 말이다.\n   */\n  private renderGranted() {\n    if (this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    const granted = this.modules\n      .flatMap(module => module.cells.map(cell => ({ category: module.category, cell })))\n      .filter(entry => this.assigned.has(entry.cell.id))\n\n    return html`\n      <div granted>\n        <header>\n          ${i18next.t('field.granted privileges')}\n          <span count>${granted.length}</span>\n        </header>\n\n        ${\n          granted.length\n            ? html`<ul lines>\n                ${granted.map(({ category, cell }) => this.renderGrantedLine(category, cell))}\n              </ul>`\n            : html`<div empty>${i18next.t('text.nothing is on for this role yet')}</div>`\n        }\n        ${this.renderAdd()}\n      </div>\n    `\n  }\n\n  /**\n   * 한 줄 — 문장과 [떼기].\n   *\n   * 유령(이 배포의 어떤 코드도 요구하지 않는 권한)은 취소선으로 보이고 **떼는 것만** 된다.\n   * 이미 붙어 있으니 뗄 수 있어야 하고, 붙여도 아무 일이 없으니 다시 켤 이유가 없다.\n   */\n  private renderGrantedLine(category: string, cell: Cell) {\n    const written = axisText(category, cell)\n\n    return html`\n      <li ?ghost=${cell.deprecated}>\n        <div line>\n          ${written || html`<span named>${moduleLabel(category)} · ${axisLabel(cell.axis)}</span>`}\n          ${cell.deprecated ? html`<span tag>${i18next.t('text.privilege no longer declared')}</span>` : nothing}\n        </div>\n\n        ${\n          this.inherited\n            ? nothing\n            : html`<button drop title=${i18next.t('button.drop')} @click=${() => this.onToggle(cell.id, false)}>\n                <md-icon>close</md-icon>\n              </button>`\n        }\n      </li>\n    `\n  }\n\n  /**\n   * 「＋ 할 수 있는 일 더하기」 — 격자가 여기 들어간다.\n   *\n   * 열어 두지 않는 이유는 하나다 — **처음 읽는 것이 「이 역할이 무엇을 하나」여야 한다.**\n   * 46 모듈이 늘 펼쳐져 있으면 그 답이 화면 아래로 밀린다.\n   *\n   * 상속 역할에는 내주지 않는다. 여기서 저장할 수 없으므로 켜 보게 하는 것이 헛수고다 —\n   * 대신 위쪽 안내가 어느 도메인에서 고치는지 말한다.\n   */\n  private renderAdd() {\n    if (this.inherited || this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    if (!this.modules.length) {\n      return html`<div note attention>${i18next.t('text.no privilege declared in this deployment')}</div>`\n    }\n\n    return html`\n      <button add @click=${() => this.openAdd()}>\n        <md-icon>add</md-icon>${i18next.t('button.add what it can do')}\n      </button>\n    `\n  }\n\n  /**\n   * 고르는 판을 **넓은 팝업**으로 연다.\n   *\n   * 사용자 말씀이다 — 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가?\n   * 지금은 좁아보이고」. 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서\n   * 모듈 46개와 축 목록을 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.\n   *\n   * ```\n   * [읽었음] ox-floating-overlay.ts:126-134   [size=large]  width 100% · height 100%\n   * ```\n   *\n   * `escapable` 을 건드리지 않는다 — 켠 것은 팝업이 아니라 **이 페이지의 `assigned`** 에 바로\n   * 들어가므로 닫든 ESC 를 누르든 잃는 것이 없다. 물어볼 것이 없는 판에 물으면 그 물음이 값을\n   * 잃는다. 저장은 여전히 툴바가 한다.\n   *\n   * ⚠ 부품을 **동적으로 들인다.** 그 부품은 스타일 한 벌을 이 클래스에서 가져가므로, 위에서\n   * 정적으로 import 하면 순환이 된다. 여는 순간에 들이면 그 고리가 끊긴다.\n   */\n  private async openAdd() {\n    await import('../../components/role-privilege-picker.js')\n\n    const popup = openPopup(\n      html`<role-privilege-picker .page=${this} @close=${() => popup.close()}></role-privilege-picker>`,\n      {\n        backdrop: true,\n        size: 'large',\n        title: i18next.t('button.add what it can do')\n      }\n    )\n  }\n\n  /**\n   * 고르는 판의 몸체 — **팝업이 이것을 그린다.**\n   *\n   * 판을 부품 안으로 옮기지 않는다. 모듈 접기·축 줄·유령 규칙이 전부 이 페이지의 상태\n   * (`modules`·`assigned`·`selected`·`keyword`)를 보기 때문이고, 옮기면 **상태가 두 벌**이 된다.\n   * 두 벌이 되는 순간 어느 쪽이 저장 범위인지 흐려진다 — 옛 편집기가 `querySelectorAll` 로\n   * 범위를 만들던 결함이 정확히 그 모양이었다.\n   */\n  renderPickerBody() {\n    return html`\n      <div body class=\"page-fill\">\n        <div panel>\n          <header>\n            ${i18next.t('field.module')}\n            <span count>${this.modules.length}</span>\n          </header>\n          <ox-input-search\n            .placeholder=${i18next.t('text.filter by module name')}\n            .value=${this.keyword}\n            @input=${(event: Event) => this.updateKeyword(event)}\n            @change=${(event: Event) => this.updateKeyword(event)}\n          ></ox-input-search>\n          <div scroll>${this.renderModules()}</div>\n        </div>\n\n        <div panel>\n          <header>\n            ${this.selected ? moduleLabel(this.selected) : i18next.t('field.privileges')}\n            <span count>${i18next.t('text.x of y on', { x: this.assigned.size, y: this.cellCount() })}</span>\n          </header>\n          <div scroll>${this.renderAxes()}</div>\n        </div>\n      </div>\n      <div picker-footer>\n        <span>\n          ${\n            this.saving\n              ? '권한을 저장하고 있습니다.'\n              : this.dirty\n                ? '변경 사항이 있습니다. 저장해야 적용됩니다.'\n                : '권한을 바꾼 뒤 저장할 수 있습니다.'\n          }\n        </span>\n        <button ?disabled=${!this.savable || !this.dirty} @click=${() => this.onSave()}>\n          ${this.saving ? '저장 중…' : i18next.t('button.save')}\n        </button>\n      </div>\n    `\n  }\n\n  /** 팝업이 열려 있는 동안 자기를 등록한다 — 토글이 그것을 다시 그리게 한다. */\n  picker?: { requestUpdate: () => void }\n\n  /**\n   * 이 역할을 가진 사람.\n   *\n   * 권한을 켜기 **전에** 누가 영향을 받는지 보이는 자리다. 아무도 안 가진 역할을 고치는 것과\n   * 40명이 가진 역할을 고치는 것은 다른 일인데, 옛 화면은 그 둘이 똑같이 보였다.\n   */\n  private renderHolders() {\n    if (this.fetchState !== 'loaded') {\n      return nothing\n    }\n\n    return this.holders.length\n      ? html`<div note>\n          ${i18next.t('text.x people hold this role', { x: this.holders.length })} —\n          ${this.holders.map(h => h.name || h.email).join(', ')}\n        </div>`\n      : html`<div note>${i18next.t('text.no one holds this role yet')}</div>`\n  }\n\n  private renderModules() {\n    if (this.fetchState === 'loading') {\n      return html`<div empty>${i18next.t('text.loading')}</div>`\n    }\n\n    if (!this.modules.length) {\n      return html`<div empty>${i18next.t('text.no privilege declared in this deployment')}</div>`\n    }\n\n    if (!this.visibleModules.length) {\n      return html`<div empty>${i18next.t('text.nothing matches x', { x: this.keyword })}</div>`\n    }\n\n    return html`\n      <ul modules>\n        ${this.visibleModules.map(module => {\n          const on = module.cells.filter(cell => this.assigned.has(cell.id)).length\n\n          return html`\n            <li ?selected=${module.category === this.selected} @click=${() => this.selectModule(module.category)}>\n              <span>${moduleLabel(module.category)}</span>\n              ${\n                on\n                  ? html`<span on>${i18next.t('text.x on', { x: on })}</span>`\n                  : html`<span none>${i18next.t('text.none on')}</span>`\n              }\n            </li>\n          `\n        })}\n      </ul>\n    `\n  }\n\n  private renderAxes() {\n    if (this.fetchState === 'loading') {\n      return html`<div empty>${i18next.t('text.loading')}</div>`\n    }\n\n    const module = this.modules.find(m => m.category === this.selected)\n    if (!module) {\n      /* 아무것도 안 고른 상태 — 무엇을 해야 하는지 말한다. */\n      return html`<div empty>${i18next.t('text.pick a module on the left')}</div>`\n    }\n\n    return html`\n      <ul axes>\n        ${module.cells.map(cell => {\n          const on = this.assigned.has(cell.id)\n\n          return html`\n            <li\n              ?ghost=${cell.deprecated}\n              ?readonly=${this.inherited || (cell.deprecated && !on)}\n              @click=${(event: MouseEvent) => this.toggleCellFromRow(event, cell, on)}\n            >\n              <input\n                type=\"checkbox\"\n                id=\"cell-${cell.id}\"\n                .checked=${on}\n                ?disabled=${this.inherited || (cell.deprecated && !on)}\n                @change=${(e: Event) => this.onToggle(cell.id, (e.target as HTMLInputElement).checked)}\n              />\n              <label for=\"cell-${cell.id}\">${axisLabel(cell.axis)}</label>\n\n              ${\n                cell.deprecated\n                  ? html`<div says>${i18next.t('text.privilege no longer declared')}</div>`\n                  : axisSays(module.category, cell) ||\n                    html`<div says missing>${i18next.t('text.no description for this privilege')}</div>`\n              }\n            </li>\n          `\n        })}\n      </ul>\n    `\n  }\n\n  private cellCount(): number {\n    return this.modules.reduce((sum, module) => sum + module.cells.length, 0)\n  }\n\n  async pageUpdated(changes: any, lifecycle: any) {\n    if (this.active) {\n      this.lifecycle = lifecycle\n      await this.fetch()\n    }\n  }\n\n  /**\n   * 한 번의 질의로 **전체 권한과 이 역할이 가진 것**을 함께 읽는다(`rolePrivileges(roleId:)`).\n   *\n   * 역할 이름과 가진 사람은 `roles(filters: id)` 로 같은 문서에서 받는다 — 옛 편집기는 역할을\n   * **이름**으로 다시 찾았고, 부모 도메인에 같은 이름이 있으면 남의 역할을 그렸다.\n   */\n  private async fetch() {\n    const roleId = this.lifecycle?.resourceId\n    if (!roleId) {\n      this.fetchState = 'failed'\n      this.loadError = new Error(i18next.t('text.no role to show'))\n      return\n    }\n\n    this.fetchState = 'loading'\n    this.loadError = null\n    this.mySubdomain = (await getDomain())?.subdomain || ''\n\n    const response = await client.query({\n      query: gql`\n        query ($roleId: String!, $filters: [Filter!]) {\n          rolePrivileges(roleId: $roleId) {\n            id\n            name\n            category\n            description\n            assigned\n            deprecated\n          }\n          roles(filters: $filters) {\n            items {\n              id\n              name\n              description\n              domain {\n                id\n                name\n                subdomain\n              }\n              users {\n                id\n                name\n                email\n              }\n            }\n          }\n        }\n      `,\n      variables: { roleId, filters: [{ name: 'id', operator: 'eq', value: roleId }] },\n      context: gqlContext()\n    })\n\n    if (response.errors?.length) {\n      /* 실패를 「권한이 하나도 없다」로 그리지 않는다 — 저장하면 실제로 그렇게 된다. */\n      this.fetchState = 'failed'\n      this.loadError = response.errors\n      return\n    }\n\n    const role = response.data?.roles?.items?.[0]\n\n    /*\n     * A role id nobody has resolves with no error and no role, so the screen drew an empty\n     * privilege list - a role that is gone looked exactly like a role that has been granted\n     * nothing, and saving from there would have written that emptiness back.\n     */\n    if (!role?.id) {\n      this.fetchState = 'failed'\n      this.loadError = new Error(i18next.t('text.this role no longer exists'))\n      return\n    }\n\n    this.subject = role\n    this.holders = this.subject.users || []\n    this.build(response.data?.rolePrivileges || [])\n    this.fetchState = 'loaded'\n\n    /*\n     * The shell reads `context` once, when the page becomes active - before this fetch\n     * resolves. Without this call the header keeps the fallback, so the screen showed\n     * \"권한\" and never said which role was being edited.\n     */\n    this.updateContext()\n  }\n\n  /** 평평한 목록을 모듈로 접는다. 축 순서는 아는 것 먼저, 나머지는 이름 순. */\n  private build(privileges: any[]) {\n    const byCategory = new Map<string, Module>()\n    const assigned = new Set<string>()\n\n    for (const privilege of privileges) {\n      const { id, name, category, description, deprecated } = privilege\n      if (!id || !name || !category) {\n        continue\n      }\n\n      if (privilege.assigned) {\n        assigned.add(id)\n      }\n\n      const module = byCategory.get(category) || { category, cells: [] as Cell[] }\n      module.cells.push({ id, axis: name, deprecated: Boolean(deprecated), description })\n      byCategory.set(category, module)\n    }\n\n    for (const module of byCategory.values()) {\n      module.cells.sort((a, b) => axisOrder(a.axis) - axisOrder(b.axis) || a.axis.localeCompare(b.axis))\n    }\n\n    this.modules = [...byCategory.values()].sort((a, b) =>\n      moduleLabel(a.category).localeCompare(moduleLabel(b.category))\n    )\n    this.assigned = assigned\n    this.dirty = false\n\n    /* 고른 것이 없으면 첫 모듈을 연다 — 빈 오른쪽 판을 처음 화면으로 두지 않는다. */\n    if (!this.modules.find(m => m.category === this.selected)) {\n      this.selected = this.modules[0]?.category || ''\n    }\n  }\n\n  private onToggle(id: string, checked: boolean) {\n    if (this.assigned.has(id) === checked) {\n      return\n    }\n\n    const next = new Set(this.assigned)\n    checked ? next.add(id) : next.delete(id)\n    this.assigned = next\n    this.dirty = true\n    this.updateContext()\n\n    /* 팝업은 자기 상태를 안 들고 이 페이지를 본다 — 열려 있으면 다시 그리라고 알린다. */\n    this.refreshPicker()\n  }\n\n  /** 라벨·설명을 포함한 행 전체를 누를 수 있게 한다. checkbox와 키보드 Space는 native change가 맡는다. */\n  private toggleCellFromRow(event: MouseEvent, cell: Cell, on: boolean) {\n    if (this.inherited || (cell.deprecated && !on) || event.target instanceof HTMLInputElement) {\n      return\n    }\n\n    /* label의 기본 동작이 checkbox change를 한 번 더 보내지 않게 막는다. */\n    event.preventDefault()\n    this.onToggle(cell.id, !on)\n  }\n\n  async canDeactivate(): Promise<boolean> {\n    if (!this.dirty) {\n      return true\n    }\n\n    return await OxPrompt.open({\n      title: '저장하지 않은 변경 사항',\n      text: '수정된 권한이 있습니다. 저장하지 않고 이 페이지를 나가시겠습니까?',\n      confirmButton: { text: '저장하지 않고 나가기' },\n      cancelButton: { text: i18next.t('button.cancel') }\n    })\n  }\n\n  /**\n   * 저장.\n   *\n   * **범위는 `modules` 전체다.** 왼쪽에서 다른 모듈을 고르면 앞 모듈의 체크박스는 DOM 에\n   * 없는데, 그것을 훑어 보내던 것이 옛 편집기가 권한을 조용히 떼던 자리다.\n   *\n   * `privileges` 만 보낸다 — 이름과 설명은 목록 격자가 소유한다.\n   */\n  private async onSave() {\n    if (!this.savable) {\n      return\n    }\n\n    this.saving = true\n    this.updateContext()\n\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: RolePatch!) {\n            updateRole(id: $id, patch: $patch) {\n              id\n            }\n          }\n        `,\n        variables: {\n          id: this.subject.id,\n          patch: { privileges: [...this.assigned].map(id => ({ id })) }\n        },\n        context: gqlContext()\n      })\n\n      if (response.errors?.length) {\n        document.dispatchEvent(\n          new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } })\n        )\n        return\n      }\n\n      document.dispatchEvent(\n        new CustomEvent('notify', { detail: { message: i18next.t('text.data_updated_successfully') } })\n      )\n\n      /* 유령을 뗐으면 목록에서 사라져야 하고, 켠 것이 요약에 반영돼야 한다. */\n      await this.fetch()\n      this.dirty = false\n    } finally {\n      this.saving = false\n      this.updateContext()\n    }\n  }\n}\n\n/**\n * 모듈 이름을 사람 말로.\n *\n * `privilege.category.<category>` 키가 있으면 그것을 쓰고, 없으면 **코드 낱말을 그대로** 낸다 —\n * 지어내지 않는다. 지금 46개 중 하나(`system`)만 채워져 있고, UX 레인이 나머지를 쓰고 있다.\n */\nfunction moduleLabel(category: string): string {\n  const key = `privilege.category.${category}`\n  return i18next.t(key, { defaultValue: category })\n}\n\n/**\n * 「켜면 무엇을 할 수 있게 되나」 — **이 화면의 이유다.**\n *\n * 사용자 평가가 「화면으로부터 배울 수 있는 것이 없다」였고, 그 원인은 화면이 감춘 것이 아니라\n * 시스템에 그 문장이 없던 것이었다. 부팅 동기화가 `{ category, name }` 둘만 저장해서\n * (`auth-base/server/index.ts:34-36`) 713개 선언이 전부 빈 설명이었다.\n *\n * 그 글을 UX 레인이 `privilege.allows.<category>.<axis>` 로 썼다(57 모듈 · 104 문장, ko·en).\n * 번역은 디스크에서 서비스되므로 **배포를 기다리지 않고 붙는다.**\n *\n * ── 보는 순서 ───────────────────────────────────────────────────────────────\n * ```\n * 1  서버 칸        채워지면 그것이 이긴다 — 배포마다 다를 수 있는 사실은 서버가 안다\n * 2  우리가 쓴 글    privilege.allows.<category>.<axis>\n * 3  없다고 말한다   둘 다 없으면. 지어내지 않는다\n * ```\n *\n * ⚠ **`defaultValue: ''` 가 없으면 3번으로 못 떨어진다** — i18next 는 키가 없을 때 **키 이름을\n * 그대로** 돌려주므로 화면에 `privilege.allows.board.query` 가 찍힌다. 빈 문자열을 기본값으로\n * 줘서 「없음」이 거짓으로 판정되게 한다.\n */\nfunction axisText(category: string, cell: Cell): string {\n  if (cell.description) {\n    return cell.description\n  }\n\n  return i18next.t(`privilege.allows.${category}.${cell.axis}`, { defaultValue: '' })\n}\n\nfunction axisSays(category: string, cell: Cell) {\n  const written = axisText(category, cell)\n  return written ? html`<div says>${written}</div>` : null\n}\n\nfunction axisOrder(axis: string): number {\n  const index = KNOWN_AXES.indexOf(axis)\n  return index < 0 ? KNOWN_AXES.length : index\n}\n"]}

package/dist-client/pages/user/user-list-page.d.ts

@@ -1,6 +1,7 @@
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@operato/oops/ox-oops-note.js';
+import '@operato/list-state/ox-empty-note.js';
+import '@operato/list-state/ox-page-state.js';
 import '../../components/user-detail.js';
 import '../../components/user-invite.js';
 import type { CSSResultGroup } from 'lit';
@@ -44,12 +45,32 @@ export declare class UserListPage extends UserListPageBase {
     mode: 'CARD' | 'GRID' | 'LIST';
     private lockDurationMinutes;
     private fetchState;
+    /** Why the read failed. The screen shows the server's own sentence. */
+    private loadError;
     private total;
     private filtered;
     private grist;
     get context(): {
         title: string;
         help: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => void;
+        }[];
     };
     render(): import("lit-html").TemplateResult<1>;
     /**

package/dist-client/pages/user/user-list-page.js

@@ -1,7 +1,8 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
-import '@operato/oops/ox-oops-note.js';
+import '@operato/list-state/ox-empty-note.js';
+import '@operato/list-state/ox-page-state.js';
 import '../../components/user-detail.js';
 import '../../components/user-invite.js';
 import gql from 'graphql-tag';
@@ -12,7 +13,7 @@ import { openPopup } from '@operato/layout';
 import { i18next, localize } from '@operato/i18n';
 import { p13n } from '@operato/p13n';
 import { PageView } from '@operato/shell';
-import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonButtonStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 /**
  * 사용자 목록 — **서버가 거르고, 서버가 쪽을 나눈다.**
@@ -60,29 +61,23 @@ let UserListPage = class UserListPage extends UserListPageBase {
          * 「없다」로 읽고, 사용자가 이미 있는 것을 만들러 간다.
          */
         this.fetchState = 'loading';
+        /** Why the read failed. The screen shows the server's own sentence. */
+        this.loadError = null;
         this.total = 0;
         this.filtered = false;
     }
     static { this.styles = [
+        /* The work surface frame for a list screen (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
         CommonGristStyles,
         CommonHeaderStyles,
         css `
+      /* The note below is laid out against the page, over the grid. */
       :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        /* 떠 있는 단추의 기준 상자 */
         position: relative;
       }
 
-      ox-grist {
-        flex: 1;
-        min-height: 0;
-      }
-
       /*
         ── 상태 배지 ──────────────────────────────────────────────────────────
         색은 **짝으로** 쓴다(container / on-container). 한쪽만 쓰면 야간에 대비가 깨진다.
@@ -107,56 +102,60 @@ let UserListPage = class UserListPage extends UserListPageBase {
       }
 
       /* 격자를 떼지 않고 위에 겹친다 — 격자가 살아 있어야 다시 읽을 수 있다. */
-      ox-oops-note[note] {
+      div[note] {
         position: absolute;
         inset: 0;
         z-index: 5;
-        background-color: var(--md-sys-color-surface);
-      }
-
-      /*
-        ── 사람 부르기 ────────────────────────────────────────────────────────
-        이 화면의 주된 동작 하나. 글자를 함께 둔다 — 더하기 표만으로는 무엇을 부르는지 모른다.
-        떠 있는 것의 모서리는 알약이다(담는 면을 따르지 않는다).
-      */
-      button[fab] {
-        position: absolute;
-        right: var(--spacing-large, 12px);
-        bottom: var(--spacing-large, 12px);
-        z-index: 10;
-
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 10px 18px 10px 14px;
-        font: var(--label-font, inherit);
-        font-size: 0.82rem;
-        font-weight: 600;
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-        border: none;
-        border-radius: var(--md-sys-shape-corner-full, 999px);
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
-        cursor: pointer;
-      }
-      button[fab]:hover {
-        color: var(--md-sys-color-on-primary, #fff);
-        background-color: var(--md-sys-color-primary);
-      }
-      button[fab] md-icon {
-        --md-icon-size: 20px;
+        justify-content: center;
+        background-color: var(--ui-bg, var(--md-sys-color-surface));
       }
     `
     ]; }
     get context() {
+        /*
+         * Calling someone in is what this screen is for, and it belongs in the page action bar
+         * (ADR-0060 decision 9). It used to float over the list. A button that does the same thing in a
+         * different place on every screen makes what you learned on one screen useless on the next.
+         * Which of the two acts it is - adding an account that already exists, or sending an invitation
+         * - is said by the window it opens.
+         */
         return {
             title: i18next.t('text.user management'),
-            help: 'auth/users'
+            help: 'auth/users',
+            /*
+             * Full text search sits in the title bar, the way every other list screen in these
+             * applications carries it (user instruction, 2026-09-18). It searches the columns that
+             * declare a search filter - here the name and the address.
+             */
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            /* Narrowing by state stays in the headroom, and this folds it. */
+            filter: {
+                handler: () => {
+                    this.grist.toggleHeadroom();
+                }
+            },
+            actions: [
+                {
+                    title: i18next.t('label.add user'),
+                    action: () => this.onInvite(),
+                    ...CommonButtonStyles.submit,
+                    /* The mark says what the button does: call someone in, rather than submit. */
+                    icon: 'person_add'
+                }
+            ]
         };
     }
     render() {
         return html `
       <ox-grist
+        class="page-fill"
         .mode=${this.mode}
         .config=${this.config}
         .fetchHandler=${this.fetchHandler.bind(this)}
@@ -164,7 +163,7 @@ let UserListPage = class UserListPage extends UserListPageBase {
       >
         <div slot="headroom" class="header">
           <div class="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            <ox-filters-form without-search autofocus></ox-filters-form>
           </div>
         </div>
 
@@ -172,10 +171,6 @@ let UserListPage = class UserListPage extends UserListPageBase {
       </ox-grist>
 
       ${this.renderNote()}
-
-      <button fab @click=${() => this.onInvite()}>
-        <md-icon>person_add</md-icon>${i18next.t('label.add user')}
-      </button>
     `;
     }
     /**
@@ -189,21 +184,23 @@ let UserListPage = class UserListPage extends UserListPageBase {
             return nothing;
         }
         if (this.fetchState === 'failed') {
-            return html `<ox-oops-note
-        note
-        icon="error_outline"
-        title=${i18next.t('text.failed to fetch')}
-        description=${i18next.t('text.please try again')}
-      ></ox-oops-note>`;
+            /*
+              Tells a refusal from a breakage, carries the server's own sentence, and offers to read it
+              again (decision 8). It used to be one note for everything: "failed to fetch, try again".
+            */
+            return html `<div note>
+        <ox-page-state .error=${this.loadError} @retry=${() => this.grist.fetch()}></ox-page-state>
+      </div>`;
         }
         if (this.total === 0 && !this.filtered) {
             /* 새 도메인의 첫 화면. 소유자는 역할 없이도 모두 열리므로 그 사실부터 말한다. */
-            return html `<ox-oops-note
-        note
-        icon="group_add"
-        title=${i18next.t('text.no other user yet')}
-        description=${i18next.t('text.owner opens everything without a role')}
-      ></ox-oops-note>`;
+            return html `<div note>
+        <ox-empty-note
+          icon="group_add"
+          title=${i18next.t('text.no other user yet')}
+          description=${i18next.t('text.owner opens everything without a role')}
+        ></ox-empty-note>
+      </div>`;
         }
         return nothing;
     }
@@ -246,9 +243,19 @@ let UserListPage = class UserListPage extends UserListPageBase {
                     name: 'status',
                     header: i18next.t('field.status'),
                     record: { align: 'center', renderer: statusRenderer(() => this.lockDurationMinutes) },
+                    /*
+                     * The editor a filter gets comes from the filter's own `type`, and without one the form
+                     * falls back to a text box - so this list of states was declared and never drawn. The
+                     * states are shown by the same words the cell uses, not by their stored spelling.
+                     */
                     filter: {
-                        options: ['', 'activated', 'locked', 'inactive'],
-                        multiple: false,
+                        type: 'select',
+                        options: [
+                            { display: '', value: '' },
+                            { display: i18next.t('label.activated-user'), value: 'activated' },
+                            { display: i18next.t('label.locked-user'), value: 'locked' },
+                            { display: i18next.t('label.inactive-user'), value: 'inactive' }
+                        ],
                         operator: 'eq'
                     },
                     sortable: true,
@@ -275,6 +282,8 @@ let UserListPage = class UserListPage extends UserListPageBase {
                 }
             ],
             rows: {
+                /* Read only here - a new one is made elsewhere, so the blank row at the end offers nothing. */
+                appendable: false,
                 selectable: { multiple: false },
                 handlers: {
                     click: (_columns, _data, _column, record) => this.onSelectUser(record)
@@ -298,6 +307,7 @@ let UserListPage = class UserListPage extends UserListPageBase {
      */
     async fetchHandler({ filters = [], page, limit, sortings = [] }) {
         this.fetchState = 'loading';
+        this.loadError = null;
         /* 사람만 보려고 이 화면이 얹는 조건은 「거른 것」으로 세지 않는다 — 그것까지 세면
            아무도 없는 도메인이 「거른 결과가 없다」로 보여 첫 안내가 안 나온다. */
         this.filtered = filters.length > 0;
@@ -348,6 +358,7 @@ let UserListPage = class UserListPage extends UserListPageBase {
         catch (e) {
             /* 못 읽은 것을 「없다」로 그리지 않는다. */
             this.fetchState = 'failed';
+            this.loadError = e;
             throw e;
         }
     }
@@ -410,6 +421,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], UserListPage.prototype, "fetchState", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], UserListPage.prototype, "loadError", void 0);
 __decorate([
     state(),
     __metadata("design:type", Number)